Flash button tutorial - AS2

The educational technology and digital learning wiki
Jump to navigation Jump to search

<pageby nominor="false" comments="false"/> This entry is part of the Flash tutorials.

Warning: this tutorial applies for older Flash 8. Consult the Flash button tutorial if you want to learn the more modern way. I ripped this off the Flash button tutorial, maybe there are some inconsistencies left, sorry - Daniel K. Schneider 20:41, 29 September 2008 (UTC)

Overview

Buttons are interactive interface elements on which a user can click for example. As an alternative you also can use component buttons (see the Flash components tutorial.

Learning goals
Learn how to use built-in buttons (from library buttons.fla).
Learn how to create your own buttons.
Learn a little bit of ActionScript 2 to jump around in the timeline.
Applications: Simple Flash web sites, e.g. slide shows.
Prerequisites
Flash CS3 desktop tutorial
Flash drawing tutorial
Flash layers tutorial
Flash frame-by-frame animation tutorial
Flash motion tweening tutorial (for the rocket launcher)
Moving on
The Flash article has a list of other tutorials.
We suggest e.g. the Flash components tutorial (working with component buttons is actually easier, but choice is limited).
Quality
This text should technical people get going and may not be good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...
Level
It aims at beginners. More advanced features and tricks are not explained here.
Learning materials (*.fla and *.swf files)
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/
The executive summary - buttons

Buttons are interface components to add simple interactivity, such as displaying extra information, launch a movie clip etc.

(1) To create a button:

  • either draw an object and make it a button (Right-click Convert to Symbol and select Button);
  • or get a button from the built-in Library - buttons.fla

(2) To make use a button:

  • You have to do add some ActionScript code.
A word of warning

ActionScript 2.0 and ActionScript 3.0 (Flash CS3/9 and later) do not work the same way !

  • ActionScript 2.0: Attach some action script to the button and that will launch something called an "action".
  • ActionScript 2.0 to prepare for easy migration: Only write code in the timeline.
  • ActionScript 3.0: Write ActionScript code in the timeline. It must include an Event Listener for the button and some code that is triggered by the event listener.

In this tutorial we only will cover ActionScript 2 programming elements. Read the Flash button tutorial if you are interested in modern Flash programming.

Tip

If you lack any sort of programming experience, then download the source files I made and play with them, e.g. add an extra picture and fix the code if needed...

Overview of the built-in Flash button symbols

Flash contains a good variety of pre-built buttons. To use these, your first should dock the Library-Buttons.fla panel next to your libraries panel: Menu Window->Common Libraries->Buttons. (See the Flash CS3 desktop tutorial on how to dock a panel).

In this section we will just introduce a few concepts, no real use.

Buttons are arranged in folders, double click to open these. Then, you may may inspect various symbols by clicking a button. In the upper part of the panel you get a preview. Click on the arrow to see how it behaves.

The Flash buttons library

For use in your own animation I suggest to copy a button first to your own library. This way you can find the button again easily and you also can modify its features.

  1. Right-click on the Symbol and Copy
  2. Paste it to your own library. Open the library panel and hit crtl-V

From your library panel simply drag the button on the stage. This will create an instance of the button. To remove it from the stage, select it and hit the delete key. Make sure you operate with instances in your flash animation (not symbols themselves). If you did this right, you will see in the properties panel something like Instance of: rounded orange.

Customizing button symbols

Editing buttons

To customize a button symbol, double-click on the icon of the symbol library panel. This will let you work just on this object, i.e. it puts you into a Symbol editing mode. There are other ways to get into this editing "inside" (via the general menu or double-click or right-click on an instance).

You now could for instance change the font or the color of a symbol or make changes to its frame-by-frame animations. Anyhow, we suggest to leave the buttons as is for the moment.

Finding your workspace again

There are several solutions:

  • Select Edit->Edit Document (Ctrl-E).
  • But I suggest to add the Edit bar: Window->Toolbars->Edit bar. It will show you exactly at what level you are editing, e.g. scene or button.
  • You also may add the Scene Panel with Window->Other Panels; Scene (or hit Shift+F2).

As you can see in the picture below, on the Edit Bar from left to right you can see the cascade of editing levels. Right now we are editing the "bubble to red" button.

Symbol editing mode
Editing the label of a button

While you can use these buttons "as is" (except making them larger or smaller maybe), you only need to know how to insert a label for starters.

A symbol is basically something that you can use several times over, but its fundamental look and feel properties will remain the same, including its the label. So if you need buttons with other labels you must create copies of these symbols. In your library panel right-click on the icon of the symbol and select duplicate from the popup menu. Choose an appropriate name, e.g. "do not press"

To change the label (and font) of a button symbol:

  • Double click to get in the symbol editing mode. You will see a kind of frame-by-frame animation movie (read the Flash frame-by-frame animation tutorial if you are not familiar with this).
  • Lock and hide all layers, except the layer with label (e.g. text).
  • Change the text
  • You also can change font properties of course
  • Then you may have to adjust its position. Click on the select tool and move the text box with the cursors until it looks right (look at your library panel).
Symbol editing mode

The four frames and the button layers

Built-in button symbols contain four frames and several layers. For each frame, different drawings may be defined but some, e.g. the label text may be reused in several layers. Look at the various frames. The four mandatory frames for button symbols (including the ones you may create) are:

Up
The button, i.e. the drawing that appears "as is" when a frame is displayed in your animation.
Over
The button graphics as it appears when the user moves the mouse over it. E.g. it defines highlighting.
Down
The button as it appears when the user presses the mouse (just during the time the mouse button is held). It shows the clicking effect.
Hit
This frame allows to define the sensible area (usually the complete button).

Various kinds of buttons have various layers (usually between three and five) depending on the complexity of the drawings. These layers contains just drawing for these four button frames. The Flash engine will then select the appropriate frame according to user action (mouse over, mouse down, etc.).

Beginners just should use built-in buttons. There is no need to change anything in the keyframes or the layers except the label. However, you can change any drawings you like. A button can be made of any sort of graphics you like (even pictures as you shall learn below).

Using the built-in buttons

You can attach behaviors in various ways to buttons. The most obvious one is to jump to some frame in the animation when user clicks on a button. (More other tutorials).

In the next section we will use a button to launch a rocket.

Rocket launcher

The goal is make a flash animation that stops at frame one when the file loads. The user then will see a button on which he click. The result is that animation will restart in frame 2.

Step 1 - Create a new file
  • Open a new Action Script 2.0 file
  • Change its size to about 200x800 (WxH)
Step 2 - Import a button
  • From the Library-buttons.fla panel we copy/paste (from "buttons-bubble2" section) the bubble 2 purple" button. Btw this also copies a graphics file (just leave it).
  • We then change the label of this button as describe above.
Step 3 - Import a rocket from a *.fla file
flash-cs3-rocket-symbol.fla
  • Download this *.fla file and put it somewhere
  • Open this *.fla as external library: Menu File->Import->Open External Library, then drag the rocket into your normal library.

Alternatively you just could have imported a rocket as *.swf, e.g. flash-cs3-rocket.swf. But importing the rocket as symbol will allow us to edit the rocket in this file in case we are not happy with it.

Step 4 - Create a rocket layer and position the rocket in frame 2
  • Create a new layer, called Rocket
  • Create a new keyframe in frame 2 (two, not one !).
  • Drag the rocket from the library to frame 2 of the Rocket layer
  • Turn it 45 degrees to the right
  • Make it smaller (e.g. 50%)
  • Position on bottom

You should have something like in the screen capture below. You also can see the transform panel I used to adjust size + rotation.

Rocket in launch position
Step 5 - Let the rocket fly
  • Create a motion tween animation as described in the Flash motion tweening tutorial
  • Make sure that the flying animation starts a frame 2. I had it end at frame 40. See the screenshot further down.
  • You also should edit the Ease curve (handlers work like in the subselection tool). Click between frames. In the properties panel, hit the "Edit" button next to "Ease".
  • Test this animation (Control->Test Movie or hit Ctrl-Enter)
  • Fix things if needed
Step 6 - Create a background
  • I simply added a sky layer with color gradient
  • If you can't see the rocket or the button, move the sky layer up or down.
Step 7 - Stop the animation at start
  • Add another layer and call it "Action"
  • Click on Frame 1, hit F9 and in the Actions-Frame panel insert:
stop();
Step 8 - Make the button launch the rocket.
  • For Action Script 2.0, right-click on the button, hit F9 and add to the Actions-Button panel:
on (release) { gotoAndPlay (2); }

What that means is that Flash will move to frame 2 (of the current scene) and play it and the rest ... Your timeline finally should look like this:

Timeline for the rocket launcher animation
Results
  • You can look at my published result here
  • You can grab all the files flash-cs3-rocket-launcher.* from this directory:
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/

Menu-based flash sites

You can build little flash "web" sites with buttons with what you just learned. The principle is simple:

  1. Put contents in in various frames (you can use multiple layers of course).
  2. We will stop Flash from playing all the frames by inserting the "stop();" instruction in frame 1.
  3. We then will create a button for each "page" X (i.e. frame X) and then write some code for each button that will transport the user to frame "X".

With ActionScript 2 you could attach behaviors to buttons (as describe with the rocket launcher) or also script in the timeline. Learn how to do the latter, since migration to AS3 will then be easier.

Code in the timeline should look like this: 

stop ();
home_btn.onPress = function () {gotoAndStop("home");}
lake_btn.onPress = function () {gotoAndStop("lake");}
palmtree_btn.onPress = function () {gotoAndStop("palmtree");}
sunrise_btn.onPress = function () {gotoAndPlay("sunrise");}

If you compare this to the AS3 way examplained in the Flash button tutorial you can see that AS 2 code is simpler.

Results
  • You can look at my published result here
  • You can grab all the files flash-cs3-simple-menu-site-as2.* from this directory:
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/

A simple slide show with your own buttons

We will first show how to create your own simple buttons. Then we show some ActionScript code that demoes how to make a simple slide show with only two buttons (forward/backward) and that extend throughout the animation. Purpose of this application is again to explain buttons and some Action Script, not to make the perfect slide show tool.

This version is more or less the same as the AS 3 version presented in the Flash button tutorial. But the ActionScript code is different. First, we will import the pictures and adjust the stage. This way we we can get a feel for the size of buttons needed. Then we draw the buttons. Finally we will make it interactive.

Step 0 - Open a new file
  • Select Action Script 2 (This code will not run with Action Script 3.0 !).
Step 1 - prepare some pictures
  • Before importing the pictures, it's a good idea to make them all the same size, e.g. I made my pictures 640x480. If you work under windows, simply use the MS Office Picture manager...
  • Then import these all to the library: Menu File->Import->Import to Library. Select all the pictures you would like to import, then click OK. (Or just drag them into the library panel from Windows).
  • Importing to library will turn them into symbols. That way we can later reuse them if we want to.
Step 2 - Adjust the stage size
  • Create a new layer, called "Pictures". In the first keyframe put some text, e.g. "Picture show" (you can fix this later)
  • Create a new keyframe (frame 2)
  • Drag a picture on the stage of frame 2, then make the stage as big (at least) as the picture. You also can make the stage a big bigger and then select for instance a black background
  • To adjust the pictures, position use the properties panel below, i.e. set W and H to 0 (else use the align panel).
Step 3 - Put your pictures into different keyframes
  • If you have 8 pictures you need to add 7 new keyframes.
  • One way to do this is to put your cursor in frame 2 of the picture layer, then hit F7 ("Insert new blank keyframe") 7 times
  • Then drag a picture into each of these keyframes and align them too (as above).
  • Control if all pictures are ok and in place by moving the playhead from left to right (red rectangle on top of the timeline)

So you should have something like this.

A timeline with several picture frames
Step 4 - Draw a forward, a home and a backward button
  • Create a new layer and name it Buttons and select it.
  • To draw buttons, you may use the Polystar tool for this and a variety of transform tools, or just simply draw a triangle and get done with it ...
  • Then you also want to reduce the alpha channel (i.e. make these transparent). In the color panel, put Alpha to 40%.
  • Once you got a forward button, make a copy and flip it horizontally (menu Modify->Transform->Flip Horizontal).
Step 5 - convert these graphics into to symbols
  • Save both buttons as button symbols (right-click on each graphic you made).
  • Use decent names for these, e.g. "button_forward"
Turn a graphic into a button symbol
  • Remove the graphics from the stage (yes kill them!)
Step 6 - place the buttons
  • Select the buttons layer (the one with the single frame).
  • Drag a forward and backward button from the library to the stage
  • Move both buttons into an a appropriate position.

So now you should have something like 2 button symbols in the library and an instance of each on the stage.

Two button symbol instances on the stage
Step 7 - Add action script code of the forward button
  • Right-click on the button instance and select Action (or select, then hit F9)
  • Insert this code:
on (click) {
   if (this._currentframe == this._totalframes) {
      gotoAndStop (1);
    } else {
      nextFrame ();
   }
 }

This ActionScript 2.0 code means:

  • When the user clicks on the button: if the current frame is the last frame then move to frame 1 else just move to the next frame.

The workspace, i.e. the Actions-Button panel should look like this:

Two button symbol instances on the stage

Tip: If is doesn't work, make sure that your Publish settings say ActionScript 2. I won't work with ActionScript 3.

Step 8 - Add action script code to the backward button
  • Right-click on the button and select Action
  • Insert this code:
on (release) {
  if (this._currentframe == 1) {
     gotoAndStop (this._totalframes);
   } else {
     prevFrame ();
  }
}
Step 9 - Stop the movie in frame 1
  • If you already tried to test the movie, you could see the frames displaying in rapid succession. That's not what we want.
  • Insert a new layer and call it "Actions".
  • In frame one of this layer insert the following code in the Actions-Frame panel. If you can't see this panel, hit F9.
stop();

This is ActionScript code that will stop the animation right after frame one is loaded. Only by clicking the buttons can the user then go forward or backward.

Step 10 - Make sure you buttons are on stage for all frames

Finally, make sure that these buttons are displayed throughout the "movie"

  • Select the buttons layer, click the last frame (where the last picture sits) and Right-click->Insert Frame (or hit F5). A the end you should see little white rectangle.

Your timeline should roughly look like this:

The final time line for a simple slideshow
Step 11 - Tuning

You may want to fix the title page.

Results
  • You can look at my published result here
  • You can grab all the files flash-cs3-simple-slide-show.* from this directory:
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/

Image maps with pictures

You can make image maps from bitmaps too. I.e. you could use a picture and then insert "hot spots".

Steps (more details when I have time):

Prepare an image
  • Put an image on the stage
  • Break it apart
Carve out a fragment
  • Deselect the image !
  • Grab some region with the Lasso tool
  • Right-click -> Convert to symbol. Select button !. You now should have an image fragment in the library.
Edit this button and change the "mouse-over" and "mouse down" pictures
  • Double-click on this button in the library. You should be in symbol edit mode. Alternatively you can click on the button in the stage. This will show you the whole picture ... I prefer the first method for this job.
  • Hit F6 three times to produce copies in the same positions
  • In Frame 2 and 3 make a copy of the shape, then move it while the cursor is still on to an empty space
  • Modify->Union this copy into a graphic
  • Make it a color with a low alpha
  • Move it over the picture shape (but do not move the shape in any way).

.... This gets you a roll-over region :)

Results
  • You can look at my published result here
  • You can grab all the files flash-cs3-image-map.* from this directory:
http://tecfa.unige.ch/guides/flash/ex/buttons-intro/

ActionScript summary

ActionScript 2 and 3 are different but for each you should give a name to your buttons in the properties panel.

ActionScript 2 (AS2) summary

You can directly attach behavior to buttons. Select a button and hit F9. Then, insert some code like: 

on (release) { gotoAndStop (3); }

or 

on (click) { gotoAndPlay (12); }

What that means is the following: As soon as the user releases the mouse, the playhead will jump to frame N and either stop there or play the rest of timeline.

ActionScript 2 with AS 3 style

Alternatively, you can also script in the timeline like this: 

btn_name.onPress = function() { gotoAndStop(2); };

Replace btn_name by the name of your button (to set in the properties panel). Use this method if you later plan to migrate to AS 3 (see below)

Links

Slide shows

If you search the Internet you can find lots of Flash slide shows. Some commercial, some tutorials, some good, some outdated. Here are a few:

Text tutorials
Video tutorials
examples
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Flash_button_tutorial_-_AS2&oldid=18667"