Lehigh University Introduction to Flash MX Sharmeen Mecklai.

Lehigh University

Introduction to Flash MX

Sharmeen Mecklai

Lehigh University 2

Flash-the big picture

Flash Program HTML page

AuthoringEnvironment

.FLA file

.SWF file

WebServer

AccessVia Internet

BrowserEquippedWith FlashPlayer

Lehigh University 3

Getting started with Flash

Workspace:

The workspace provides easy access to everything you need to create a movie.

Stage:

What you put on stage is what you get when you create the movie.

Lehigh University 4

Property Inspector:Displays the most frequently used settings for a tool or an object.Tool Box:The toolbox contains the tools you will use to create, place and modify text and graphics. Stroke color:

This is the outline color Fill color:

This color fills the object

Timeline:The Timeline organizes and controls a movie content over time.Frames:Flash divides length of time into frames. Each frame can have its own content, or it can use the content of its previous frame.F5 adds frames.F5 adds frames.Key Frame:Key frames are markers in time, indicating start and end points for different pieces in action. F6 inserts a key frame.F6 inserts a key frame.

Lehigh University 6

New terms

Layers:

To help organize the content, the timeline is divided into layers. A background layer for example, may carry over into each frame of a movie, while an animation layer may be for a specific frame.

Lehigh University 7

Example of layers

Choose File> Open, navigate to the Flash MX program folder, and open lessons/Work files/layers.fla

Lehigh University 8

Library:The library stores reusable elements called symbols.

For example, if you want to reuse a graphic, movie clip, or sound, you can drag it to the library, and then drag it to the stage whenever you need it.

F11 will cause the library to appear.

Lehigh University 9

Types of Symbols

• Graphic symbols

• Button symbols

• Movie Clip symbols

Lehigh University 10

Graphic symbol

A graphic symbol is a symbol whose contents remain static.

So if you know that you’re going to use an object over and over again, but you do not need it to be interactive or animated, then you should use a graphic symbol


Creating a graphic symbol

• Select the text tool from the tools panel and then click on the stage. In the text field that appears write Graphic Symbol.

• Click on the arrow tool so that you can select the text that you have just placed on the stage and then choose the Insert>Convert to symbol menu option.

• The Convert to Symbol dialog box will appear


Creating a graphic symbol(contd.)

• Select the Text tool from the tools panel and click on the stage. In the text field that appears, write the words Graphic Symbol.

• Click on the Arrow tool so that you can select the text that you have just placed on the stage and then choose the Insert > Convert to Symbol dialog box menu option.

• The Convert to Symbol box will appear


Creating a graphic symbol (contd.)

• Change the behavior of the symbol to a graphic by clicking on the bottom-most radio button - next to the word Graphic.

• Next, change the name from Symbol 1 to Graphic Symbol.

• Now double click on the graphic symbol text field. This will take us into a separate editing window where you can edit the symbol.


Button symbols

Buttons are essential features of any interactive web site.

Why?

Because we’re all tuned-in to clicking on buttons and having them do things for us-its almost an unconscious action.


Creating a button symbol

• In the same movie where you created your graphic symbol, select the Oval tool and draw a circle.

• Select the circle and change it into a symbol, either by using the Insert > Convert to Symbol or F8 shortcut.

• In the Convert to Symbol dialog box, choose the Button behavior type.

• Name your button Button Symbol and press OK.


Creating a button symbol(contd.)

• Double click on the instance of your Button Symbol on the stage, and you will be taken into the edit symbols mode. Note that your timeline has changed.

• Every button timeline has only four frames, each of which controls a different aspect of the button’s behavior.

• The names of the 4 frames are: Up, Over, Down and

Hit-which refers to the four possible conditions that a button can find itself in.


Button States

• Up-What the button will look like when it is in its ‘static’ state: that is, when the button is sitting there in the movie interface, waiting for the user to come and interact with it.

• Over-What the button will look like when the user runs their mouse over it.

• Down-What the button will look like when the user clicks on it.


Button Slides(contd.)

• Hit-This is a special state that you cannot see in your finished movie. The hit state defines the part of the button that is actually clickable. Think of it as a target area for the mouse to hit: hitting this target area will make the button work. Make sure that whatever part of the button you want the people to be able to click is defined in the hit state.


Making buttons from text example

• In the same movie, make sure that you are in scene 1. If you are not in scene 1, click on scene 1, which will take you back on the main stage.

• Using the Text tool, find a clear part of your stage and type Hello in any font and color.

• Using the arrow tool select the text and press F8 to get the Convert to Symbol dialog box and name the symbol as Hello.


Making buttons from text example (contd).

• Now double click the button symbol that you just created so that you can be in an edit symbol mode.

• Insert a key frame (F6) in all the states.

• Click on the Over state in the time line. Your button will automatically be selected.

• Select a color from the property inspector that is different then the original button symbol color.



• Now select the Down state key frame in the timeline and and change it to another color.

• Now test the movie by pressing CTRL-ENTER.

• Note that when you move your mouse over the text, it seems to flicker on and off. This is because the Hit state of the Button is defined, by default, as the actual text itself.



• Go back to the Edit Symbols mode and click on the Hit state key frame.

• Using the Rectangle tool, drag out a rectangle (make sure it has a fill) that just covers all of your text: Don’t worry about not being able to see the text any more. This is because the Hit state image is invisible in the displayed movie.

• Test your movie again by pressing CTRL-ENTER


Movie Clip Symbols

• Movie Clip Symbols are also referred to as movie clips.

• The simplest explanation of movie clips is that they are ‘a movie within a movie’.

• Like the button symbol, the movie clip has its own timeline and this timeline is not just limited to the four standard frames as in the button timeline.


Creating a movie clip symbol

• Close the current movie you are working on and create a fresh new movie.

• On the main stage, use the rectangle tool and draw a square-any color you like.

• Select the square using the arrow tool and use F8 to get the Convert to Symbol dialog box.

• Select Movie Clip as the behavior and name the new symbol Square Clip.


Creating a movie clip symbol(contd.)

• Now double click on the square with the Arrow tool to get into Edit Symbols mode.

• Notice the timeline inside your new movie clip. This timeline works like your normal one in the main movie. The difference is that your movie clip symbol’s timeline only applies to what happens inside the symbol itself: any action and animation that you create using the timeline will be encapsulated inside this movie clip.



• Still inside your new movie clip, click on frame 20 and press F6 to insert a key frame.

• Now click outside the square in frame 20 to deselect it, and use the Arrow tool to pull out the sides and make an irregular shape.

• Click on frame 1 and go to the property inspector. Select Shape from the Tween drop-down menu to create a shape tween between the two key frames.



• Now click on the Scene tab below the timeline to get back to the main stage.

• Use Control > Test Movie (CTRL-ENTER) to test the movie.


Shape Tween versus Motion Tween

A shape tween is a morphing operation, where the original object is transformed into a different object, for example a rectangle changing into a circle.

A motion tween is the representation of an object moving around the stage.

Lehigh University Introduction to Flash MX Sharmeen Mecklai.

Documents

Transcript of Lehigh University Introduction to Flash MX Sharmeen Mecklai.