Flash - Creating a Rollover Movie

We have all seen the great Flash animations where something happens as the mouse rolls over different parts of a picture.

Powerful stuff.

Example | Tabs - The Images Adding the buttons The Code | Highlight Buttons - Code | The Timeline


The purpose of this Flash program (the Rollover Movie) is to provide an index to more information. In this example, moving the mouse over the image will highlight certain sections. In a fully funtional form, clicking the mouse will open a web page with more information. (Not implemented in this example).

Notice that when the mouse moves over the "tabs", the image changes. In the real application, the tabs must be clicked to change the display. I decided to use "MouseOver" instead of "Click" because I wanted a click to do only one thing - open another page.


I am using a Rollover Flash movie to create a "help file" index for one of my programs - When the user clicks on an image of the program, the appropriate help file is displayed. In addition, since this program contains a "tabbed component" I want the Flash movie to display the appropriate image when the user moves the mouse cursor over the tabs.

The Images

First - create an image for each tab page. I use alt-PrtSc (or ctrl-PrtSc, or a button built into my program) and Photoshop for this.

In general, I save the images as jpeg's. However, *.jpg, *.png, and many others also work.

The next step (assuming that your Flash project is already created) is to import the files into the Library. To do this, from the Flash menus, select

Well .. that didn't work. None of my files were displayed. The Files of type field clearly indicated that All Formats should be displayed. I tried changing the option to JPEG Image (*.jpg) .. and still nothing was displayed. (Come on .. Give me a break.) For reasons of personal preference, and a bit of past experience, I try to always name jpeg files as *.jpeg. Every program I use (except for Flash .. of course) displays both *.jpg and *.jpeg files when JPEG is selected. Even Adobe Photoshop shows both.

There are several solutions - if they were obvious, I wouldn't mention them.

For one of the files - the one that shows the entire program interface - I used

I created 3 layers and placed one image per layer. (The 4th image went on the existing layer.) Once everything was placed and aligned, I locked the layers (to prevent accidental changes).

Adding the buttons

The program (movie) uses invisible buttons to define hot spots - areas where the mouse will cause some action. In this case, each tab was covered by an invisible button. By using MouseEvent.MOUSE_OVER, the buttons cause the image to change when the mouse cursor moves over the tabs (buttons). To make it more like the real application, use MouseEvent.CLICK.

This design assigns a different image (tab page) to one of four separate frames. When the mouse moves over a button, the code changes the current frame. (It should also be possible to accomplish the same thing by using only one frame and changing the visible property in code. However, this method won't work with the Highlight Buttons described below.)

Create a 5th layer on top of the others .. and name it Buttons (duh). Using the Rectangle Tool, and making sure that the 5th layer is selected (active), draw a rectangle over one of the tabs. Be sure that a fill color is selected .. if there is no color, then the buttons will not work. (They will almost work, but will be totally unreliable. Very frustrating.) Once the image is drawn, select Modify / Convert to Symbol... from the menu (or right click and select Convert to Symbol...). Give it a unique name (like T_Invisible_Button), be sure that Button is selected, and click OK to save the definition (class) in the library.

Buttons have 4 frames - Up, Over, Down, Hit. To see (edit) these, double click the button (either on the form or in the library). To make the button invisible, you need to make sure that only the hit frame has an occupied keyframe. To do this

Since the change was made to the library copy (the class definition), it applies to all instances (objects of that class) .. even those that might already be on the form (stage).

Once the class is defined, you can create as many buttons (instances) as needed. Just click on the button class definition in the library and drag it over the form (stage). (Release the mouse to create an instance.) Once it is available, use the Free Transform Tool to change the size.

Note: The Free Transform Tool resizes the button with respect to the reference point (Transformation Point - round circle). When this circle is in the middle of the button, any resize attempt will do weird things. For example, when you drag the bottom edge down, the top edge will also move up. To fix this (ie, to make it work like most other programs), you need to click and drag this circle to the upper left handle. (It will [may] snap there if you are close enough.) Now you will be able to change the size in a logical manner. My experience is that the first button will have this reference point in the center and that additional buttons (placed by dragging the class definition from the library) will have it in the upper left corner. Personally, I consider this to be a design problem. When creating the object, I placed the Registration point in the upper left corner .. and I expect the circle to be at the same location. I also expect the initial component and those placed from the library to behave identically .. and these don't.

To make the buttons do something, you must use action script. For this to work, each button must have a unique instance name. With the button layer selected, click on each button and edit the names .. I use names like Power_UIButton, the reference uses names like Power_btn and PowerButton. (Note: I use UI - User Interface - to explicitly identify components on a form.)


The Code

By convention, code is placed on its own layer. (This typically makes it easier to manage.) Insert a new layer and name it Actions (or Code). Drag the initial frame far enough to the right so that all associated frames are covered. Lock the layer so that you won't accidentally add any graphics to it. F9 will toggle the code editor.

For the example above, this code changes the displayed tab as the mouse moves from one tab to the next.

To accomplish the same thing, but with a click, use the following.

Highlight Buttons

The text above describes how to create invisible buttons (for the Tabs).

The Highlight Buttons are just like the invisible buttons .. except that they display a faint color around an object.

In the example above, I drew a rectangle and converted it to a button. This time, we will create a button and draw a rectangle on it.

Assuming that the library is displayed (Window / Library is checked)

All 4 frames will need to be keyframes. Both Over and Hit will contain the same drawing, the other 2 must be blank. To accomplish this At other times, I clicked Scene 1 instead of using the back arrow. Once, I pasted the frame to Hit and had to select Convert to Blank Keyframes for the Down frame. (There are multiple ways to do almost everything.)

At this point, add some buttons to your form. Resize them as appropriate and run the program.

Note that, since the hit area and the mouse over definitions are on different frames, there is no reason from them to look the same. For instance, the button hit area may cover a large area, but the mouseover display could just be an outline.

Also, I found that it makes a lot of sense for the mousedown display to be the same as the mouseover display .. in other words, don't blank the Down frame. In that case, you really only need one keyframe (Over) and let it extend to Hit.

Adding Highlight Buttons to the tab images requires adding the buttons directly to the associated layers instead of the Buttons layer. Hint - remember to lock any layer you are not editing and place the buttons in the correct keyframes.

For context sensitive help, create a separate class definition for each button instance, and add the help text to the Over and Down frames .. but not the Hit frame.


Code similar to the following is needed for each button

The Timeline

In the final project, the Timeline (at the top of the design environment - IDE) contains the following layers. And yes, the order matters - the upper layers are displayed over the lower layers. Therefore, since the buttons are always active (always available), they must be the top drawing layer, and the base image must be on the bottom (since the tab pages are displayed over it). (The code layer's position does not matter because it has no visual content.)

Because I elected to implement the tab layers as having non-overlapping keyframes (remember, only keyframes can contain images), the ordering of the three tab pages does not matter .. except that they be placed between the buttons and the base.

With a different Timeline design, all the images could have been placed in frame 1 and the play length could have been used to control what was displayed.

Still another design would have used full images of the entire application for each of the 4 "Tabs". However, this would have made a much larger file. Also, the current design is expandable to applications that have multiple tab components.

There is no reason for spacing the frames 1,2,5,10. Sequential also works.


Author: Robert Clemenzi - clemenzi@cpcug.org
URL: http:// cpcug.org / user / clemenzi / technical / Languages / ActionScript / Rollover.html