Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Reset Button in Flash

    ●   Create a Simple Reset Button inside Flash.


Learn About:

Actionscript 3.0 Rectangle Corner Radius Gradient Transform Tool

  •   This is the 4th tutorial in the Drag and Drop Project.


1 - Beginning Code    2 - Draggable Items    3 - Origin Code  4 - Reset Button    5 - Target Dropzone     6 - Sound  

Other People's Work:

Here are examples of work inspired by this tutorial.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


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!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


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.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #3: Set Your Gradient ~

Go to: Window > Color or hit: Shift (⇧) + Cmd (⌘) + F9 shift keyf9 and select Linear Gradient as the Color type …

… and pick a color for the left side of the gradient.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


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.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Select the Gradient Transform Tool by hitting the keyboard shortcut letter: (f) …

 

Rotate the gradient the way you like it.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #5: Turn the Button into a Movie Clip ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

selection tool

double-Click on the rectangle

double-click

 

(you know it's selected by the dots)

… hit F8f8 (or Right-Click and select: ) make a Movie Clip and call it reset_btn.

button symbol

Double-Click the button AGAIN!

button selected

Notice there are two icons on the menu bar now.

two icons

That means your are working INSIDE the button.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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.

text layer

With the Text Tool, type your text.

text tool home


Step #7: Instance Name ~

Then, click on the button …

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) 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 …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… clear some space and paste the code.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #9: Export your Work ~

Go to: File > Export > Export Movie or hit Cmd () + Enter cmd enter keys 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 cmd enter

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   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