Flash+Buttons+interactivity+tutorial

=Flash – Basic Interactivity - Creating and Using a Button=

Create a new file, Flash File (ActionScript 3.0) In the Properties Inspector at the bottom of the screen, change the default size to 160 width x 600 height and then click okay and the document is resized.

Save the file - go to file>save, enter in banner then click save.

Import an image - File>Import to Stage. Navigate to an image and click Open. Your image will appear on your stage.

Click on the image to select it. Make sure it is in the right location. The X and Y coordinates should be at zero.

Now we have to add animation to the banner. We are going to rename the layer. Rename the layer “background” and lock it into place by clicking on the dot below the lock icon just above the layer. Now insert a new layer using the new layer button just below the layer list on the left (hover over the button to make sure it is the new layer button) And now rename that layer “animation.”

Now open your animation file that you have created and select it by clicking on it. Select your animation > Edit > copy > go back to your banner file. Click on the animation layer, first frame>Edit>Paste in Place.

Click on the Free Transform tool on the toolbar (hover over it to find the name), adjust the size to make it a little smaller and place it just above your image.

Align it on your banner – go to Window>Align, on the upper right in the Align tab, make sure the to stage button is selected to align it to the stage. Then align horizontal to center the animation.

The next thing you want to do is add some text. Again add a new layer. Rename the layer “text”. Now lock your animation layer so you don’t move it by accident.

Click the frame where you would like to add text and select the text tool. Select any area on the stage and write your own text. You may edit your text now anyway you would like to. You may edit line by line or as a whole piece. Take into account the size of your text and how it is aligned. You can edit and resize and center your text.

Now we would like to add a button. Create a new layer and rename it button, make sure you lock your “text” layer so nothing moves around. Make sure you are at the first frame or where you want your button to be.

Select your rectangles tool and create and square on the stage. Double click the square you just drew > modify > convert to symbol (make sure button is selected) > name it “invisible button” > the click “OK”. The button should appear in your library.

Now you will be editing the button. Double click the button on your stage and make sure in your frames “Up” “Over” and “Down” have nothing in them. You only want your button to have a “Hit” area, an area you can click.

Click and drag the square in the frame to the “Hit” section. Now we will be editing. Double click the button again to make sure it is selected. Go to your properties inspector and make sure your X and Y coordinates are at 0. Make the width and height 160 X 600 the size of the banner.

Go back to “Scene 1” by clicking “Scene 1” and make sure your button there is set to 0 for your X and Y coordinates. This should be right below your frames and above your stage.

Now we have to give the button it an instance name. After completing the previous step there should be a tool above the X and Y coordinates for this renaming. Rename this “inv_btn”. The reason for this is so you can add actions for the button.

Now we will be adding action so create a new layer and rename it “actions”. Copy and paste the code here. Follow along as Jen explains the code. File>Save, control>enter to proceed.

Go to File>Publish Settings> Access network only Save file, then File>Publish Upload swf file, html file and javascript file to your server.