Introduction to Flash MX

1
Introduction to Flash MX

• Sharmeen Mecklai

2
Flash-the big picture
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.

4
Property InspectorDisplays the most frequently
used settings for a tool or an object.Tool
BoxThe 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
5
TimelineThe Timeline organizes and controls a
movie content over time.FramesFlash 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.Key FrameKey
frames are markers in time, indicating start and
end points for different pieces in action. F6
inserts a key frame.
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.

7
Example of layers

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

8
LibraryThe 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.
9
Types of Symbols

• Graphic symbols
• Button symbols
• Movie Clip symbols

10
Graphic symbol

• A graphic symbol is a symbol whose contents
  remain static.
• So if you know that youre 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

11
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 InsertgtConvert to symbol menu
  option.
• The Convert to Symbol dialog box will appear

12
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 gt Convert to Symbol
  dialog box menu option.
• The Convert to Symbol box will appear

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

14
Button symbols

• Buttons are essential features of any interactive
  web site.
• Why?
• Because were all tuned-in to clicking on buttons
  and having them do things for us-its almost an
  unconscious action.

15
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 gt 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.

16
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
  buttons 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.

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

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

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

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

21
Making buttons from text example (contd).

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

22
Making buttons from text example (contd).

• 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 Dont 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

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

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

25
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 symbols 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.

26
Creating a movie clip symbol(contd.)

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

27
Creating a movie clip symbol(contd.)

• Now click on the Scene tab below the timeline to
  get back to the main stage.
• Use Control gt Test Movie (CTRL-ENTER) to test
  the movie.

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