ActionScript - Creating a Rollover Movie

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.

Context sensitive help is displayed
The "related" parts are highlighted
Clicking opens a context sensitive web page

Powerful stuff.

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

Example

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.

Tabs

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.

Using alt-PrtSc, copy the image of the program to the clipboard
In Photoshop, create a new file (using File / New...) and accept the defaults. This automatically sets the file size to match the image size.
Paste the clipboard contents to the new file - use ctrl-v or Edit / Paste
Use the Rectangular Marquee Tool to highlight the applicable portion of the image
Use ctrl-c (or Edit / Copy) to copy the selection to the clipboard
Create another new file and accept the defaults
Paste the clipboard contents to this new file - use ctrl-v
Save the new file as a jpeg
Repeat as necessary to get all the required images

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

File / Import / Import to Library...

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.

In the File name field, type *.jpeg and press Enter
In the File name field, type * and press Enter
In the Files of type field, scroll to the bottom of the list and select All Files (*.*) (This option is not visible until you scroll)

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

File / Import / Import to Stage...

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

Double click the button in the library (to place it in edit mode)
In the timeline (at the top of the page)
- Click on the Up keyframe to select it
- Drag the dark square from under "Up" to "Hit"
Click on "Scene 1" (below the timeline) to close the class editor (or click the left pointing arrow below the timeline, or double click the stage)

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

References

In Adobe Video Workshop, select "Creating your first working, interactive FLA file". (Sorry, the application is implemented in Flash and there are no direct links.)
From the help file - Example: Animation portfolio piece

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.

 General_UIButton.addEventListener(MouseEvent.MOUSE_OVER,  General_Button_Event_Handler);
MeanPath_UIButton.addEventListener(MouseEvent.MOUSE_OVER, MeanPath_Button_Event_Handler);
    Temp_UIButton.addEventListener(MouseEvent.MOUSE_OVER,     Temp_Button_Event_Handler);
   Power_UIButton.addEventListener(MouseEvent.MOUSE_OVER,    Power_Button_Event_Handler);

stop(); // keeps the movie from playing through the frames

function General_Button_Event_Handler(event:MouseEvent){
  gotoAndStop(1);
}

function MeanPath_Button_Event_Handler(event:MouseEvent){
  gotoAndStop(2);
}

function Temp_Button_Event_Handler(event:MouseEvent){
  gotoAndStop(5);
}

function Power_Button_Event_Handler(event:MouseEvent){
  gotoAndStop(10);
}

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

 General_UIButton.addEventListener(MouseEvent.CLICK,  General_Button_Event_Handler);
MeanPath_UIButton.addEventListener(MouseEvent.CLICK, MeanPath_Button_Event_Handler);
    Temp_UIButton.addEventListener(MouseEvent.CLICK,     Temp_Button_Event_Handler);
   Power_UIButton.addEventListener(MouseEvent.CLICK,    Power_Button_Event_Handler);

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)

Click the lower left icon of the Library display (New Symbol...)
Enter a name (T_Highlight_UIButton) and make sure that Button is selected
Create the button (click OK) .. this opens an edit window
Using the Rectangle Tool, draw a box
Select a color and set the Alpha (transparency) to 20%
Set the origin (the plus in the middle of the screen) to the upper left hand corner of the box (set x=y=0)

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

I drew the box on the first (and only) frame
In the timeline, I clicked the frame (changing it from white to black)
I dragged the frame over one (from Up to Over)
I right clicked the black frame and selected Copy Frames
I right clicked the Down frame and selected Insert Blank Keyframe
I right clicked the Hit frame and selected Paste Frames
Then I clicked the back arrow to return to Scene 1

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

Code similar to the following is needed for each button

Legend_UIButton.addEventListener(MouseEvent.CLICK, Legend_Button_OnClick);

function Legend_Button_OnClick(event:MouseEvent){
  navigateToURL(new URLRequest("http://mc-computing.com/");
}

The Timeline

In the final project, the Timeline (at the top of the design environment - IDE) contains the following layers.

Layer From top to bottom	Frames	Comment
Actions	Keyframe @ 1 Covers all frames	All the code is here
Buttons	Keyframe @ 1 Covers all frames	These must be above the images
Power_Tab	Keyframe @ 10	Each layer contains the image of the associated tab page
TempPressure_Tab	Keyframe @ 5
MeanPath_Tab	Keyframe @ 2
Base	Keyframe @ 1 Covers all frames	This is an image of the full application. It is always visible.

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.