Flash CS3 button tutorial

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

Draft

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Overview

Buttons are interactive elements on which a use can click for example. This is part of Flash CS3 tutorials.

Learning goals
Learn how to create and use basic Flash 9 (CS3) buttons
Learn a little bit of Action Script to run somewhing with a button
Prerequisites
Flash CS3 desktop tutorial
Flash drawing tutorial
Flash frame-by-frame animation tutorial
Moving on
The Flash article has a list of other tutorials.
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.
The executive summary - transform tools in the tools panel

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

  • Draw an object
  • Attach some action script to it that will launch something

Creating your own buttons

We will show how to create simple buttons with an example that demoes how to make a simple slide show. Purpose is to explain buttons, not to make the perfect slide show tool. First, we will import the pictures and adjust the stage. This we we can get a feel for the size of buttons needed.

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.
  • Importing to libarary 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 alingn panel).
Step 3 - Put your pictures into different keyframes
  • If you have 8 pictures you need to add 7 new keyframes.
  • On way to do this is to put your cursor in frame 2 of the picture layer, the hit F6 ("Insert new 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.

The Flash buttons library
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
Step 6 - place the buttons
  • Select the Pictures layer
  • Move both buttons to the stage in an a approriate 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
Add action script code ot the forward button
  • Select Frame 1 of the Buttons layer
  • Hit F9. This will open the Actions-Frame tab
  • Insert this code:
on (click) {
if (this._currentframe == this._totalframes) {
    gotoAndStop (1);
  }
   else {
  nextFrame ();
  }

}

Using the built-in Flash button symbols

Flash contains a good variety of pre-built buttons.

To use these, your first should add the Library-Buttons.fla panel with Window->Common Libraries->Buttons (see the Flash CS3 desktop tutorial on how to add a panel).

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

To use a button in your animation I suggest to copy it first to your own libary. This way you can find the button again easily and you 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 symbols and instances

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 right-click on an instance).

Now you can for instance change the font or the color of a symbol or make changes to its frame-by-frame animations.

To find your normal workspace (scene) again select Edit->Edit Document (Ctrl-E).

  • 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).

Now a symbol is basically something that you can use several times over, but its fundamental look and feel properties will remain the same, including for instance 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 appriate name.

To change the label (and font) of a button, choose the select button in the tools menu and double-click a few times on a button until you get the text tool selected (cursor starts blinking and "T" is selected in the tools bar)

Hint: If you can't select a button after changing a label, double-click in the gray area (backstage).

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

To display frames and layers of a button, double-click on the button.

The four pre-defined frames used for buttons are:

Up

The button, i.e. the drawing that appears "as is"

Over

The button as it appears when the user moves the mouse over it. I.e. defines highlighting.

Down

The button as it appears when the user presses the mouse (just during the time the mouse button is held). It makes the clicking effect

Hit

This 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. Beginners can just use one of these buttons. There is no need to change anything in the keyframes or the layers except the label.

Adding actions

So far, your buttons won't do anything useful. To support some user interaction, you have to learn a little bit of action script.

(to be written ...)

Links

Slide shows

If 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_CS3_button_tutorial&oldid=14154"