Reset Button in Flash
● Create a Simple Reset Button inside Flash.
✓ Actionscript 3.0 ✓ Rectangle Corner Radius ✓ Gradient Transform Tool
• This is the 4th tutorial in the Drag and Drop Project.
Other People's Work:
Here are examples of work inspired by this tutorial.
Step #1: Open Your Work in Flash ~
✗ Hopefully you've completed this tutorial first …
✗ Almost any Movie Clip can be made into a button!
✗ If you've got something you can use already, skip to Step #7!
✗ Create a New Layer and call it button …
✗ … get the Rectangle Tool or hit the keyboard shortcut letter (R) …
✗ … under Rectangle Options, set the corner radius - 15 is average but set it to whatever dimension you want.
✗ … set the Stroke Color to none …
✗ … and choose any Fill Color you want for now.
Step #2: Make a Button Shape ~
✗ Draw a button-sized rectangle in the stage area somewhere.
Step #3: Set Your Gradient ~
✗ Go to: Window > Color or hit: Shift (⇧) + Cmd (⌘) + F9 and select Linear Gradient as the Color type …
✗ … and pick a color for the left side of the gradient.
✗ Pick another color for the right side of your gradient.
✗ Then do the right side of the gradient too.
✗ The idea is to lower the Value of one side so it's a darker color, like this:
✗ If you add too many selectors, just drag them into space and they disappear.
Step #4: Fill in the Button with the Paint Bucket ~
✗ Now get the Paint Bucket Tool or hit the keyboard shortcut letter (k) …
✗ … and fill the rectangle you drew with the linear gradient.
✗ Select the Gradient Transform Tool by hitting the keyboard shortcut letter: (f) …
✗ Rotate the gradient the way you like it.
Step #5: Turn the Button into a Movie Clip ~
✗ Get the Selection Tool or hit the keyboard shortcut letter (v) …
✗ … double-Click on the rectangle …
✗ (you know it's selected by the dots)
✗ … hit F8 (or Right-Click and select: ) make a Movie Clip and call it reset_btn.
✗ Double-Click the button AGAIN!
✗ Notice there are two icons on the menu bar now.
✗ That means your are working INSIDE the button.
✗ Get used to the idea of movies contained within other movies …
Step #6: Working Inside the Button - Text ~
✗ Add a new layer and call it Text and lock the background.
✗ With the Text Tool, type your text.
Step #7: Instance Name ~
✗ Then, click on the button …
✗ … open the Properties Panel and name the instance reset_btn.
Step #8: Actionscript ~
✗ Click on your Actions and Labels keyframe again …
✗ … then hit (f9) open the Actions panel and copy this code:
reset_btn.addEventListener(MouseEvent.CLICK, reset); reset_btn.buttonMode = true;
✗ Scroll down to the bottom of your code …
✗ … clear some space and paste the code.
Step #9: Export your Work ~
✗ Go to: File > Export > Export Movie or hit Cmd (⌘) + Enter and see if it works!
✗ Don't panic!
Last Step: Save and View your work ~
✗ View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter
✗ Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]
• ALWAYS save your projects using the following naming convention:
• DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.
• NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.
✗ Move on to the next tutorial - 111_target_snapback_Fl.htm if you're ready …
Other Resources: http://www.danfergusdesign.com/classfiles/oldClasses/VCB324-richMedia2/exercises/matchingGame.php