Making a Layered Figure in Flash

A very frequent situation in earth science papers is to have a fair bit of information on a graphic with the same axes. Perhaps the most common example is on a map. For a geologist, there might be a map of the faults, a map of the geology, a map of facies or fossil locations or geochronological control points, all if which, if on a single image, would be painfully unclear. A seismologist might want to show different depth slices in a model. A geophysicist might want a map with gravity and another with magnetic anomalies, etc. Most of us are familiar with layers in drawing programs like Illustrator, Photoshop, Canvas, CorelDraw etc. Such a figure is readily made in Flash and can be embedded in a pdf.

Prior to starting, you'd need to have your images ready, ideally as separate files for ease of use.

You need to decide which images need to be swapped out for one another (i.e., those for which only one can be visible at a time) and which can be superimposed as much as desired. So, for instance, slices in a seismic tomogram would have to be swapped out for one another but a layer with faults and another with earthquakes could probably both be present at once. Let's call the first set of images layer images and the second set overlays.

The controls for layer images should be radio buttons or a pulldown list. The controls for overlays should be checkboxes. (Its possible to makes these with different kinds of controls, but they will look counterintuitive).

You will probably want to make a simple sketch of your layer (where which controls will be). The basic design is that the layer images will each occupy a frame of a "movie" while the overlays will be their own objects.

Instructions below were made from the Mac version of Flash 6 but should be very similar to later versions of Flash and Flash on Windows.

  1. Open Flash and make a new file. Choose whichever version of ActionScript you want (this exercise is done with AS 3.0).Choose the size you want the Flash figure to have (note that as Flash is vector oriented, you will be able to rescale things later, but you will want the correct aspect ratio and a size big enough to work in easily.).
  2. Make two new layers (either Insert>Timeline>Layer or click on the icon of a small page with an upturned corner sitting at the lower left of the list of layers in the timeline pane, which is usually at the bottom of the page). We will use the bottom one for our layer images, the second one for our overlays and the top for our controls. (you can, if desired, make a layer for each overlay, which can be helpful if the overlays get too intense). You can label them "Layer images" "Overlays" and "controls" for clarity by double clicking on the name in the Timeline window. If all you are doing is using Overlays (no layer images), you can go to step 17 below.
  3. Select the bottom layer (Layer images) to make it active and then select the Rectangle drawing tool. Draw your rectangle about where you will want your layer images to be shown (this will get changed later). After you draw it, click on the section tool (solid arrow, or type "V") and click on your new rectangle.
  4. We need to convert the rectangle to a Movie Clip. Either right-click (control-click) on the rectangle and choose "Convert to Symbol..." from the popup menu or choose Modify>Convert to symbol from the main menubar. Choose "Movie Clip" for the type and name the symbol. (I have named mine "Images").
  5. In the Properties window, you will see that the object is now shown as a Movie Clip but has "<Instance Name>" for a title. When we created the symbol, it is one that can show up over and over (so you could have multiple panes of your images, for instance). Let's name this instance "Images_used".
  6. Double click on the rectangle. You will now be editing the object Images, which is where we shall place our layer images.
  7. In the Timeline window, select a number of frames equal to the number of images you will be using. The either right-click on the selected frames and choose "Convert to Blank Keyframes" or choose Modify>Timeline>Convert to Blank Keyframes. [Advanced note: if you have elements you want on all your layer images, you might put them within the rectangle for the first frame and then select the remaining frames and choose Convert to Keyframes instead].
  8. Now we import our graphics. Select the first frame from the Timeline and choose File>Import>Import to stage... and then choose your first graphics file. Once it appears, you may need to resize it either using the free transform tool or by choosing Modify>Transform>Scale. You can also fine tune the image size from the Properties window. Be aware that it is easy to change the aspect ratio or your image doing this (holding the shift key while changing the scale will preserve the aspect ratio).
  9. Select the second frame and repeat step 8 above for the next layer image. Continue through all the different frames. (Arguably the biggest pain is getting everything lined up properly. Illustrator users have the option of importing a sinle layered file into separate keyframes, which will keep all the alignments as in the original Illustrator file. For the rest of us, you will want to probably have all the images cover the same area with the same size for ease of getting everything to correlate. There are multiple options at this point: you can turn on the "Edit multiple frames" button on the timeline (2 little filled squares on the bottom edge), select all (Command-A on a Mac) and then use the Free Transform tool rescale all the images and the Properties window to fine tune the location).
  10. If we previewed our figure now, we'd see our movie clip run through repeatedly, which isn't our goal. Instead right-click on the first frame of Images movie clip and select "Actions" from the popup menu. In the Actions window that pops up, enter "stop();" (no quotes). (If you have the Actions window up, be sure it indicates Layer 1: Frame 1 as the Current Selection). This will prevent the movie from running when we start the Flash.
  11. We now want to add controls to choose which frame of our movie clip we show (which is the same as which image of our layer images we are showing). So click on the back arrow or "Scene 1" at the upper left of the window to return to the main animation. Click on the "controls" layer in the timeline window.
  12. Open the Components window (either from the Window menu or clicking on the little three-box icon). Drag a Radio Button item from the components window onto the figure, placing it where desired.
  13. Open the Component Parameters pane in the Properties window if it isn't open already. You will see characteristics listed like "Enabled", "groupName" etc. (If you don't, check that the radio button on the figure is selected). You will want to change the groupName to something appropriate (let's say "MapGroup"), set the label to whatever your first layer image is called and set the value to 1. In the place where you see "<Instance Name>" at the top of the Properties window, insert "imageButton1".
  14. Using the selection tool, select the radio button and then choose Edit>Duplicate. Move the new button to the position you want for your second layer image control. Change the value in Component Parameters to "2" and change the label appropriately (do NOT change the group name). In the place where you see "<Instance Name>" at the top of the Properties window, insert "imageButton2". Repeat this step for all the remaining layers, incrementing the value in the Component Parameters by 1 each time (the number of value should match the frame number of the associated image in our Images Movie Clip. You probably want to check the "Selected" box for the control for the first image.
  15. Now for the first bit of pixie dust. We need to have Flash know how to respond to clicks on the radio buttons and show the proper image. Click on the first frame of the timeline for the controls layer in the Timeline window (if the Actions Window is still open, you will see controls:Frame 1 under Current Selection; if the Actions Window is not open, reopen it from the Windows menu or by right clicking on the first frame of the controls timeline and selecting "Actions" from the popup menu). We enter the following code:

  16. import flash.events.MouseEvent;
    var FrameNumber:int;


    /* Click to Go to Frame and Stop
    Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
    Can be used on the main timeline or on movie clip timelines.

    Instructions:
    Add an event listener for each radio button you have (four are listed below; the name of the instance of the radio button
    needs to match the name for each call).

    */
    imageButton1.addEventListener(MouseEvent.CLICK,fl_ClickLayer);
    imageButton2.addEventListener(MouseEvent.CLICK,fl_ClickLayer);
    imageButton3.addEventListener(MouseEvent.CLICK,fl_ClickLayer);
    imageButton4.addEventListener(MouseEvent.CLICK,fl_ClickLayer);

    function fl_ClickLayer(event:MouseEvent):void
    {
    /*
    We just grab the frame number from the value field we put in the radio button properties */
    FrameNumber = int(event.currentTarget.value);

    /*This changes the layer image shown*/
    Images_used.gotoAndStop(FrameNumber);
    }

  17. At this point you should be able to run the figure and choose which layer to see (try File>Publish Preview>Flash). Clicking on a radio button should bring the appropriate image to be viewed. If the figures comes up flashing horribly it means there was an error in the script; you will see errors in Flash in the Compiler Errors window (which is usually brought forward by publishing). At this point you might want to add some static text labels in places or other cosmetic items.
  18. Adding overlays. Now select the overlays layer from the Timeline window. Choose File>Import>Import to Stage... and select the image you want to import. In nearly all cases, you will want to convert the image to a Movie Clip (Modify>Convert to Symbol, then choose Movie Clip). Once a movie clip, you can name the symbol. In the figure, clicking on the new overlay should show <instance name> in the Properties Window. Choose a name (different from the symbol--maybe just append _u or something like that). Make a note of the label names. For discussion below, we'll assume that two overlays with Symbols named Overlay1 and Overlay2 are added. The instances are names Overlay1_u and Overlay2_u. (You will want something less unclear).
  19. Now we add controls to turn on and off the overlays. Open the Components window (either from the Window menu or clicking on the little three-box icon). Drag a Checkbox Button item from the components window onto the figure, placing it where desired. Open the Component Parameters pane in the Properties window if it isn't open already. You will see characteristics listed like "enabled", "label" etc. (If you don't, check that the radio button on the figure is selected). You will want to set the label to whatever your first layer image is called. In the place where you see "<Instance Name>" at the top of the Properties window, insert "Overlay1Button". Repeat for the number of overlays you have.
  20. Now we add our last bit of pixie dust in the Actions window. We will need the following commands merged in with the commands for the layer images from step 15 (above); these are all you need if you only have overlays:
  21. import flash.events.MouseEvent;

    /* set to whether you want these overlays visible when the image is first shown
    note that you want this to match the state
    of the checkbox, which is also set here
    to avoid any mismatch. Here we made overlay 1 hidden and 2 visible*/

    Overlay1_u.visible=false;
    O
    verlay1Button.selected=false;
    Overlay2_u.visible=true;
    O
    verlay2Button.selected=true;

    Overlay1Button.addEventListener(MouseEvent.CLICK,fl_ToggleOverlay1);
    O
    verlay2Button.addEventListener(MouseEvent.CLICK,fl_ToggleOverlay2);

    /* Unfortunately with the default checkbox buttons, we have to have separate functions for each
    overlay. The first version is laid out in longform, which allows other things to be done; the second
    shows a more abbreviated form
    */

    function fl_ToggleOverlay1(event:MouseEvent):void
    {
    if (Overlay1_u.visible)
    {
    Overlay1_u.visible=false;
    } else {
    Overlay1_u.visible=true;
    }
    }

    function fl_ToggleOverlay2(event:MouseEvent):void
    {
    Overlay2_u.visible= !Overlay2_u.visible;
    }

  22. Now just pretty things up adding text where needed and resizing objects as desired. One particular item that is always a bit of a challenge is adjusting the font of the checkboxes and radio buttons; see a Flash help page for that. You can then publish using the Pubish Settings to get what you want for output. In include with a pdf, you will need a Flash (.swf) file.

Drawing overlays. Sometimes you'd rather just draw overlays directly in Flash. The easiest way is often to start by drawing some part of your overlay (perhaps on its own layer) with either the Bezier tool or some other drawing tool. When you complete drawing that object, select it (double click on it) and choose Modify>Convert to Symbol. Choose Movie Clip (yes, Graphic makes more sense, but you cannot name a Graphic to control it) and name as discussed above. You can then modify this overlay by double clicking on it and then drawing more on the canvas. You return to the main drwing by clicking on the back arrow or Scene 1 link at upper left. If you are feeling fancy, you can use the movie clip as a true movie clip and add more frames to allow, say, the image to pulsate or spin or whatever.


Please send mail to cjones@cires.colorado.edu if you encounter any problems or have suggestions.

Dynamic animations Index | C. H. Jones | CIRES | Dept. of Geological Sciences | Univ. of Colorado at Boulder