1

Introduction to Macromedia FlashMX

(Use of movies)

Building a inter-active Earth Quake Damage map using Macromedia FlashMX

Developed by:

Jeroen van den Worm

Department of Geoinformation, Cartography and Visualisation

International Institute for Geoinformation Science and Earth Observation (ITC) Enschede, the Netherlands

© ITC, 2003

2

Aim This exercise will repeat some basic FlashMX functions and tools to construct interactive maps as practised in the Introduction exercise. You will also become familiar with the basic difference between a frame or a movie based inter-active map. Available equipment and software

• PC, absolute minimun configuration: MS Windows (95,98, 2000, NT), 133 mhz, 64 MB ram, 40 MB free space, 800 x 600 256 colour display.

• Macromedia FlashMX • Flash (.fla and .swf) demo files at different exercise stages. • Flash.fla Ward20 Activity files

Time available See time table Introduction: Activity 1 – 7 will introduce you to frames, keyframes and movie based components of FlashMX, including a short introduction to Flash’s own programming language: ActionScript. Action-scripting will be applied to create a draggable scale-line, while in later exercises it will be used to create for instance dynamic database links. Success!!

3

Activity 1: Getting started The Activity text can be divided into:

Action: execute this action as indicated. Roman text: Necessary information and introduction to next activity Italic text: For your information, can also be skipped till later. Start FlashMX and become familiar with FlashMX basic windows, panels and tools.

Start FlashMX. Go to Windows Start > Programs > Macromedia > FlashMX FlashMX will start up.

Select In the main menu Window > Panel sets > Default Layout FlashMX will restore its original panels setting in case a previous user changed those

settings.

You will open an existing FlashMX file. The original map is created in ArcView and Macromedia Freehand10 and is saved in FlashMX format.

Select in the main menu File > Open > Ward20 Actvity_001.fla.

Save this file to C:/Temp/YourDirectory/Basemap”yourname”.fla The default extension of a FlashMX document (movie) is .fla. This document can only

be opened in FlashMX itself. To disseminate a movie on the web, it must be “published” with the FlashMX Publish function. This will create the FlashMX Player document (.swf) and a .html page with the appropriate .html code and Java Scripts. The created .html page can then be further processed in .html processing software such as Macromedia Dreamweaver or Microsoft FrontPage.

4

Activity 2: Layers and frames (30 min) During this activity you will use layers and frames (visible in the timeline) to prepare your map in order to add interactivity, more or less similar as what you did during the first exercise. The FlashMX file shows the layer order of the original FreeHand10 document that was imported into FlashMX.

��In FreeHand this order is often graphically oriented, for instance to create roads with casings.

��The layer order may also be based upon the structure in a GIS database or upon

a CAD structure.

In a FlashMX movie, the original order may have to be adapted to the web map content and to the desired interactivity. Therefore it is important to decide which map objects should permanently be displayed, which objects should be made visible or invisible by selection and which objects will have an interactive function.

The time line: The Timeline organizes and controls a movie's content over time in layers and frames. Like films, FlashMX movies divide lengths of time into frames. Layers are like multiple film strips stacked on top of each other, each containing a different image that appears on the Stage. They are comparable to layers as in Macromedia FreeHand or many GIS software packages. The major components of the Timeline are Layers (folder, normal and mask), Frames, and the Playhead.

5

Switch the visibility of the individual layers in the Timeline panel on/off by (de-) selecting the eye symbol and study the available map objects.

In case the Timeline panel is too small you can drag the Timeline borderline down. Watch the layers priorities. If a user selects “Injuries” in the click able legend, these will be displayed on top of the “Equake damage”s The “Equakes damage” s are in turn placed “on top” of the Ward topography.

Switch the lock function / visibility of individual layers on/off. Information on a locked layer cannot be deleted nor can any activity be undertaken on that layer.

6

Layer folders: New in FlashMX is the option to create Layer folders. This enables the storage/grouping of individual layers into onto one single layer. This facilitates working with the time line considerably, esp. when working on complicated maps.

A sample of the application of layer folders

Frames Frames in an animation can be compared with drawings in an analogue cartoon movie. However, FlashMX frames may also contain actions, sound, video or other FlashMX movies. In a FlashMX movie presented on the web or on CD-ROM, the user can move from one frame to another: • by a user-activated event by the mouse, such as a mouse-click on a symbol invoking

action like goto frame 5, goto frame 10 etc. without showing the in-between frames; • dynamically, for instance by a continuous loop between frame 5 and frame 20, showing

every ‘in-between’ frame.

When moving automatically, FlashMX will calculate the appearance of the objects on the intermediate frames. This is called “twining”. It results in a smooth transition from one image into another one. This can be used for e.g. flow lines, boundaries changing over time and other animations.

In this exercise (with the specific aim to construct a map with a control panel legend), the first method will be practiced.

7

Switch on visibility of the layer :Equake damage level low” and unlock it (if

necessary)

Select frame 1 of the Equake damage level low in the timeline by clicking with the

pointer in the frame. Release the pointer and re-select frame 1! This is important otherwise you will NOT be able to drag the frame into another

position!!

Drag the frame to the position of frame 10 (keep the mouse active during dragging,

don’t release before you are at frame 10!

Drag the red “play-button” to frame 10 and watch the result on stage! On stage, only the “ Equake damage level low” is visible now!

8

Playhead

Repeat this activity for Equake level medium and move frame 1 to frame 15.

Repeat this activity for the other Equake damage levels. Move High to frame20 and No damage to Frame 25

Your timeline should look like this.

9

Extension of frame visibility Look at the contents of the display in frames 5 up to 25 what do we miss? Perfectly noticed…., the base map (“Ward topography”)! There are three methods to accomplish visibility in more than one frame: • Copy and paste frame 1 to each frame where you want the Ward topography to be visible.

(This method will create a copy of the map at each frame and therefore will increase the file size).

• Insert a so-called “key frame” at the appropriate locations. This will place an “instance”

(a soft-copy) of each frame, leading to smaller file increase. We will apply this method to create a total overview map later.

• Extend frame visibility from frame 1 up to frame 30 (no increase of file size). This

method will be applied to the base map and the legend.

In this order (!!): select layer “Ward topography”, press Ctrl + Alt , select frame 1 and drag the selector tool to frame 30. This will make the base map visible in all frames between 1 and 30.

Repeat this activity for the legend, grid, transparency slider and scale line.

You will notice that each frame location the marginal information will be visible now.

10

Compare the maps at the locations of frames 10 up till 30.

Save your work as Ward20 Activity 002 “yourname”!

��Each frame shows already one of the individual map displays that will be

offered to the map user. However, the mechanism to change from one frame to another by clicking on a button or a legend box is not present yet.

11

Activity 3: Key frames

If you did not finish Activity 1, close your work file and open demo-file: Ward20 Activity 002.fla.

The use of Key frames FlashMX is basically a package to design web animations. Each “drawing” of the animation is placed in a frame. Key frames can be considered as the primary, “essential” frames, in which you can change or add ”something”. In other words: here an “event” takes place. This in contrast to other frames that are dynamically created by FlashMX, taking into account the content of the preceding key frame or the result of an action described in the previous key frame. For instance, a key frame may contain the geographical locations of the traffic lights that you are passing on a route to the ITC building. The route locations on non-key frames are calculated by FlashMX on the basis of the key-frame information. A key frame may also contain information such “goto”, “stop”, “on mouse-event” etc. Up till now you have been working with individual key frames of which its location was manually changed. In Frame 30 we want to show the all damage levels, the legend, base map etc. The legend and base map are already visible at this frame.

Check visibility Base map and marginal information at Frame 30. The damage level information is stored on resp. frame 10, 15 and 20. At location Frame 30 we want to show all damages simultaneously. To achieve this, we have to copy the content of the damage frames to frame location 30.

12

Inserting key frames

Select (key-) frame 30 on the Equake damage level low layer

Select Keyboard short-cut F6 The Equake damage level locations are copied from frame 10 into Frame 30! Your Timeline should look like this now:

On the timeline a small rectangle appears in front of your just created key frame. This indicates that the visibility of the preceding key frame (10) has been extended by default up till frame 29. As we don’t want this, the rectangle has to be shifted back to frame 10

Press Ctrl, select the small square and drag the small square back to Frame 10 .

Repeat this process formedium and high damage level.

Your time line should look like this; in the map all damage levels are visible at location 30!

Save your file as Ward20 Actvity_003 “yourname”.fla

13

Activity 4: Creating buttons

If you did not finish Activity 2, close your work file and open demo-file: Ward20 Actvity_003.fla

In this Activity we will start to add inter-activity to your map. By selecting a legend item (which will act as a “Button”), the user will be able to change the visible content of the displayed map. As you have noticed, FlashMX layers can contain images. However, they can also contain elements such as sound, other movies and animation settings. In addition, layers can be used to mask off specific objects that you don’t want to be visible (yet) at a specific location. Finally, layers can contain so-called Frame-Actions. Frame-Actions are executed when a specific frame is activated. For instance: start an animation at frame 15 and stop the animation at frame 25. It is also possible to connect Actions to buttons. In this activity and the next activities we will practice both applications. Basic Actions can be selected from the standard Object Actions Library. These are actions such Play, Stop, Goto, On mouse event, etc.

Next to Basic Actions, an extensive Library of Action Script-based Actions is available. Action Script is FlashMX’s Scripting language, comparable to Java Scripting. Using this Scripting language, the web developer can create the most complex applications within FlashMX. Action Scripting can be applied to create, for instance, vector-based games, software and full database-driven web applications. FlashMX is a program to create animations. The map that you have created is also an animation, which starts at frame 1 and runs up till 40 in a repetitive manner. Lets us first have a look at that animation!!

14

Select Main menu: Control: Test movie

Your movie will start to play. You will notice that your map is shown as a continuous looping animation caused by continuous playing off the frames 1 up till 30. Is this what we want….? No! Thus we have to do something: tell FlashMX to stop playing the animation at a certain frame positions! To return to the work area (Stage)

Close the FlashMX Player in the main menu > File > Close

Adding labels and actions to key frames Insert two new layers: Basic actions and Labels

Select in the main menu > Insert > Layer or press in the Lower left corner of the layer panel.

Rename Layer names to resp. “Actions” and “Labels”

The label layer is created to add names to essential key frames. This is done to facilitate the design process and navigational actions. We will tell

FlashMX to go to a certain labeled frame and then stop. Labeling a key frame:

Select in the “Labels” layer frame 10 and insert a “blank key frame” by keyboard shortcut F7

A key-frame is opened at location frame 10. (This is a key frame without any content). We will use the Properties inspector, down under the stage to label the frame.

Type ‘Level_low’ as label and accept by the Return key. Don’t change other parameters! Notice the red marker and the label name appearing at the frame location.

15

Repeat this for other key frames in the labels layer. Mention frames 15: Level_med; Frame 20: Level_high; Frame 25: Level_no; Frame

30: Level_all; Note the red flag and the frame label appearing in the timeline.

Allocation of Actions to a Key frame: We will allocate a so-called “Stop” Action to Frame1 to stop the animation.

Select frame 1 of the “Actions” layer

Select In the main menu > Window > Actions The Actions panel will open, through which you can allocate specific actions to frames, objects such as buttons etc.

Double click actions Actions

and select: Movie control:

Select by double clicking:

Stop Notice that at Frame 1 a lowercase “ a” of action pops-up:

If you test the movie again (Ctrl + Enter) you will notice that the animation does not play and that the map is shown as appearing at frame location 1! This is in fact the map the base map! (Notice that also the temples and Injuries are still visible, and the Injuries invisible. We will add functionality later to let the user choose himself to have this information visible or not!)

16

Ok, let us assume the user wants to view all buildings with low earthquake damage level. The user therefore has to select the related legend item; click on it and the requested information will become visible. Therefore we must execute two activities, tell FlashMX: • That the legend items have to “behave” as a button (instead as being purely a

graphic object) • Allocate to each created “button” a specific action, namely: goto to specific frame

containing the information and stay (stop) at that frame location!

Creating FlashMX buttons:

Lock all layers with exception of the “Legend” and the “Actions” layer.

Select the legend item “High level damage”. Up till now this is just a graphic object and not a button.

Change the properties of the legend item from Graphic to Button using shortcut F8 and select Button. Leave all other settings

Repeat these three steps for each of the other legend items: goto_med; goto_low; goto_no; goto_all (the grey box next to the coloured legend items)

17

An alternative way is to create one button only. This button can be saved in the Symbol Library. You can “drag out” of the Symbol Library a so-called “instance” onto the stage. Each “instance” can be edited (e.g. you can change the text of the button) and assign actions to this instance. Using instances instead of symbols will keep the file size small.

Allocate button properties to the legend item “Buildings” (Goto_topo)

Allocate button properties to the legend item “Injuries” (Injuries on_off) Allocate button properties to the legend item “Shakya” (Shakya on_off) Allocate button properties to the legend item “Temple” (Temple on_off) Allocate button properties to the legend item “Grid” (Grid on_off) The last 4 buttons will be used to switch on-off complete layers at any frame location. This will be dealt with in alter activity.

Save your file under Ward20 Actvity 4 “yourname’!!

18

Activity 4: Adding Actions to buttons

If you did not finish Activity 4, import Ward20 Activity004.fla

The intention is that the user can select a button using the mouse-pointer, release the mouse and at that moment FlashMX will (internally goto frame: damage_high) and show that subject in the map to the user.

Select the “Goto_high” legend item (which is now a button!) Allocate a mouse action:

Select: Action panel: Actions: Movie control by keyboard short-cut F9 Double-click Action control: On

By default the mouse action “on release” is selected.

Select Action control: Goto

The panel shows now a number of options related to the Goto action (Action script)

Check: Goto and Stop, using the menu toggle

Scene: <current scene> can be kept like this.

Type: select (via drop down menu bar arrow): Frame Label

Frame: Level_high This will tell FlashMX to start play the movie and move up to the frame labeled: Level_high and to stop at that position!.

Save your file (Ctrl+S) and test the movie (Ctrl + Enter).

19

Allocate identical Actions to the other legend items: Medium, Low, No, All and Buildings (topo).

Save your file (Ctrl+S) as Ward20 Activity 005 “yourname” and test the movie (Ctrl

+ Enter). Congratulations, You have finished your first, interactive FlashMX based web map!

Activity 6 Creating switch on / off buttons In the map just created, map objects are made visible by clicking on a specific legend item. To switch off its visibility, you have to select another item that then at its turn will become visible. This is not a bad method but there are some disadvantages: 1) There may be subjects that you want to see only at the moment you decide or in another relation as offered by the default choices. For instance, you want the make the gird visible or invisible at any moment, regardless the subject shown at that moment. The same applies to the Injuries, temples and shakyas. Some elements you want to see directly when the map is opened (such as the grid, others only at the time you need them (temples, shakyas, and injuries). Working with the same content in several frames will also make the file larger. The FlashMX documents are also called “Movies”. A “Movie” can be displayed (played) in another movie. Imagine a cartoon film with Donald Duck dancing in front of a TV on which you can see a MTV clip of some rapper! A “Movie” can be connected to a specific action. For instance if a movie is loaded music starts playing. A movie can also contain an animation, such as a pyro-clastic flow. At the moment a Movie is loaded on the user systems, included movies can be visible or not visible. We will use this method in the coming activity.

20

We have decided that at the moment the map is loaded: a) The grid must be visible (visibility = true) b) Injuries are not visible (visibility = false) c) Temples are not visible (visibility = false) d) Shakyas are not visible (visibility = false) The visibility state of the objects can be changed through an action connected to the on / off buttons. They will change true into false expression or false into true.

Activity 6: Changing layers into Movie (clips)

If you did not finish Activity 5, import Ward20 Activity005.fla Let us first change the layers Grid, Injuries, Shakya and Temples into Movie Clips.

Unlock the appropriate layers and lock all others.

Extend the visibility of the layers up till frame 30 (Ctrl+Alt and drag frame towards location 30)

Select Layer Grid

Change property of the layer into Movie (F8)

Give name “GridMovie” to MovieClip

Actions initiated by buttons should be allocated to a copy of the original MovieClip. This copy is called an instance. Typing in into the property inspector the name of the instance creates such instance.

In the lower-left corner of the properties inspector (Ctrl+F3) type in the name of the instance: GridMC and accept by Return!!

Repeat procedure for other layers (InjuriesMC, TemplesMC, ShakyasMC)

21

Visible and unvisible Movie Clips By creating MovieClips we will have the possibility to open a map with specific map thems on or off. For instance, at the moment the map is displayed we would like to have the grid visible. Howver, it is not necessary et that the Injuries, the Shakyas and the temples are visible. The solution is to tell FlashMX, that at moment of laoding the map, the visibility of the Grid movieclip is on (true) while those of the other mentioned themes is off (false).

Lock all layers with execpetion of the Grid layer. Select in the grid in the map and notice the MC clip symbol.

Open the action panel

Select: MovieClipControl : onClipEvent (load)

setProperty > Visibility

Target: GridMC and check Expression Value: True and check Expression

Lock all layers with execpetion of the Injuries layer. Select the Injuries

Open the action panel

Select: MovieClipControl : onClipEvent (load)

Set property > Visibility Target: InjuriesMC and check Expression Value: False and check Expression

Repeat this activity for Shakyas and Temples (both with value False)

Test the movie; the grid should be visible, injuries, temples and shakya’s invisible.

Save your file as Ward20 Activity 006 “yourname”

22

Activity 7: Allocating Button actions to MovieClip instances.

If you did not finish Activity 6, import Ward20 Activity 006b.fla

The actions which should be allocated to the on / off buttons is either: Change the visibility of the involved Movie Instances to on (“true”) or off (“false”) or off (“false) to on (true”).

Unlock the layer Title and Legend layer

Select the grid on / off button in the legend

Open the action panel (F9)

Select Actions:

Type in the following action script (if you have opened Activity 6b the script is already available:

on (release) {

if (GridMC._visible == true) { setProperty(GridMC, _visible, false); } else { setProperty(GridMC, _visible, true); }

}

Select the Injuries on / off button

Open the action panel (F9)

Type in / read the following actionscript:

on (release) { if (InjuriesMC._visible == false) { setProperty(InjuriesMC, _visible, true); } else { setProperty(InjuriesMC, _visible, false); }

23

Question: Do you notice differences? Question?: Can you explain the differences?

Select the Temples on / off button

Open the action panel (F9)

Select the Injuries on / off button

Change the Target and Value Expressions in such a way that the involved buttons will switch on/off the Temples and Shakyas.

Select the Injuries on / off button

Test the movie

Save your file as Ward20 Activity 007 “yourname”

With this Activity the Introduction to the basics of FlashMX has come to an end.

Achievements up till Activity 7:

In the pre-ceeding Activities you have learned: The basic function of the Time line The use of symbols The use of frames and key-frames The meaning and use of MovieClips The meaning and (basic) use of FlashMX ActionScript. By execting the Actvities you have created a map with a so-called “Clickabel legend” The user is now able to view the map-themes according to his own needs. In the Appendix containing Activity 8, 9 and 10 you will learn how to create objects that can be shifted around in the map (such as a scale-line), you will create a simple map animation and a transparency-slider by which you change the transparency rate of individual map objects and or MovieClips.

24

Introduction to Macromedia FlashMX

Building a inter-active Earth Quake Damage map using Macromedia FlashMX

APPENDIX

(Creating a draggable map-object)

Developed by:

Jeroen van den Worm

Department of Geoinformation, Cartography and Visualisation International Institute for Geoinformation Science and Earth Observation (ITC)

Enschede, the Netherlands

© ITC, 2002

25

Creating a draggable map object Did you ever have to measure a distance on an analogue map? In practice this may mean that you have to find a ruler somewhere in your room after which you have to measure the distance in mm’s and calculate the real distance in relation to the scale of the map. For this map, we will create a drag gable scale-line that be dragged around the map to any place where it is needed. The same technique can also be used for other map objects, for instance a legend that can be placed into another position by the user.

Lock all layers, except the scale line layer

Select the scale line and convert it to a button (Name: StartDrag)

Select the scale line button and convert it to a movie with Instance name: StartDragMC

Select the scale line and add the following action through the Movie and MovieClip

control Actions list.

Take care: Uncheck Lock mouse to center! The rectangle coordinates indicate the space within it is possible to drag the scale line around.

26

This space is limited by indicating the max. TopLeft and BottomRight coordinates of the area that you want the object to be shifted around and the centre location of the movie. To read the TL and BR coordinates you have to swicth on the rulers first. These can be measured by using the the rulers and guides.

Select: View: Check Rulers and check Guides visibility Take care that the centre point of the legend movie is centred.

Open the scale movie Check whether its centre point is centralized. Return to the stage Move the scale line to its extreme topleft point and place a guideline through the

centre point. Repeat for the LR corner point Note down the coordinates of the guidelines Open the scale-line actionscript and indicate the coordinates (RLx, Rly, BRx,Bry) Close the action-script window and check dragging. Take care that the scale-line does

not exceed the frameline boundary. With this action the exercise has come to an end.

27