Introduction to Flash MX

1
Introduction to Flash MX

• Mrs. Rogé
• Nikki Rowe High School

2
Intro to Flash MX Lessons

• Understand the Macromedia Flash environment
• Open a document and play a movie
• Create and save a movie
• Work with layers and the timeline
• Plan a Web site
• Distribute a Macromedia Flash movie.

3
Using Flash MX

• What is Flash MX?
• A animation and interactive authoring program
• Has tools for complex animation, as well as
  excellent drawing tools

4
Using Flash

• What can Flash MX be used for?
• Web sites
• Web-based applications
• CD-Rom and interactive applications
• Video

5
Optimized for the web

• Flashs Native format is vector images, which
  reduce the size of graphic files.
• Vectors are scalable
• Flash provides streaming content over the
  internet
• instead of waiting for the entire contents of a
  web page to load.

6
The Development Environment

• You can customize your workspace
• Flash works on a movie metaphor
• Create Scenes on a Stage
• Scenes run in frames on a timeline
• You create a movie by arranging objects on the
  stage
• You can play the movie on the stage using
  VCR-like controls

7
Playback of Flash content

• Movies are viewable through a browser
• Macromedia Flash Player is required
• Free download from Macromedias Web site
• Movies can be played through the browser, the
  player, or as a stand-alone projector

8
How Flash Starts up

• Three parts to the Development Environment
• Stage
• Timeline
• Workspace
• You can display other parts of the program
• The toolbox
• The properties panel

9
timeline
toolbox
stage
panels
properties panel
workspace (gray area surrounding the stage)
10
The Stage

• Contains all objects that are seen by the viewer
  in the final movie
• You can draw objects on, or import objects to the
  stage

11
The Timeline

• Used to organize and control the movies content
  by specifying when each object appears on the
  stage
• Images are contained within frames, which are
  units of the timeline.
• The timeline has separate layers
• The timeline has a playback head

12
The Toolbox

• Contains a set of tools used to draw and edit
  graphics and text
• Divided into four sections Tools, View,Colors,
  Option
• Panels, such as the Properties Panel are used to
  organize and modify objects and features in a
  movie

13
arrow (V)
subselect (A)
line (N)
lasso (L)
pen (P)
text (T)
rectangle (R)
oval (O)
pencil (Y)
brush (B)
free transform (Q)
fill transform (F)
paint bucket (K)
ink bottle (S)
eyedropper (I)
eraser (E)
zoom (Z)
hand (H)
stroke color
fill color
swap colors
black white
no color
tool modifiers
14
Opening a movie in Flash

• The .fla extension is native, and can only be
  opened in Flash
• Flash exports web-ready files as .swf
• .swf files should be tested before being
  published
• Always keep the original .fla file

15
Previewing a movie

• Flash movies can be previewed in the development
  environment
• Control menu commands
• Play, rewind, step forward, step backward.
• The Controller acts similar to a VCR Controller

16
Testing a movie

• When previewing a movie, some interactive
  functions do not work unless the movie is played
  using the Flash Player.
• Use Control gt Test Movie to test using the Flash
  player

17
Creating a Macromedia Flash Movie

• Movies are created by placing objects on the
  stage, editing these objects, animating them and
  adding interactivity
• You can create graphics in Flash,or import them
  from another program such as Photoshop

18
Creating a Macromedia Flash Movie

• Objects placed on the stage are automatically
  placed in a layer, and in the currently selected
  frame of the timeline
• A keyframe represents a frame which contains an
  object.
• Always the first frame of every animation

19
An object in a keyframe
Keyframe representing object
Object on the stage
20
Creating an animation

• A basic animation requires two keyframes
• The first keyframe sets the starting position
• The second keyframe sets the ending position
• The number of frames between two keyframes
  determines the length of the animation

21
Motion animation
Arrow between keyframes indicates motion animation
22
Adding an Effect to an Object

• In addition to animating an objects location, you
  can also animate an objects appearance
• Shape
• Color
• Brightness
• Transparency
• Rotation

23
Understanding the Timeline
Frame View Icon
Playhead
Frames
Layers
Status Bar

• Understanding how to read the timeline can help
  you determine whats happening in your movie
  frame by frame

24
Layers

• Like transparent acetate sheets of content
  stacked on top of one another
• Adding a layer causes it to be placed on top of
  the other layers
• Can be re-ordered by dragging up or down

25
Using Frames
The timeline is made up of individual units
called frames Content is displayed in frames as
the playhead moves over them when the movie
plays The status bar indicates current frame the
playhead is on
26
Using the Playhead

• The playhead indicates which frame is playing
• Can be dragged left or right
• Dragging back and forth allows you to check some
  animations in Flash without exporting to swf

27
Understanding Scenes

• A section of the timeline designated for a
  specific part of the movie.
• You can create and name scenes as you wish
• Great way to manage your flash movie production

28
Adjusting the Timeline view
29
Modifying the frame rate
Change movie dimensions
Adjust the Background color
Adjust the frame rate
30
Plan a Web site

• First step in any site production
• Step 1 State the Purpose(Goals)
• Step 2 Identify the Target Audience
• Who will use the Web site?

31
Plan a Web site

• Step 3 Determining the Treatment
• What is the look and feel?
• Tone
• Approach
• Emphasis

32
Plan a Web site

• Step 4 Develop the Specifications
• Playback System
• Elements to Include
• Functionality
• User Interface

33
Create a Storyboard
34
Using Screen Design guidelines

• Balance
• Unity
• Movement
• User Interface

35
Using Interactive Design guidelines

• Make it simple, easy to understand
• Build in consistency in the navigation scheme
• Provide feedback
• Give the user control

36
Distributing Flash Movies

• File gt Publish to export movies out of Flash
• Export to .swf format
• Generate the HTML code that references the
  Macromedia Shockwave file

37
HTML code
.swf extension indicates aMacromedia Shockwave
file
Code specifying the Macromedia Shockwave Movie
that the browser will play
38
Other Publish options

• Stand-alone Projector Files
• QuickTime .mov files

39
Introductory Tasks

• Understand the Macromedia Flash environment
• Open a document and play a movie
• Create and save a movie
• Work with layers and the timeline
• Plan a Web site
• Distribute a Macromedia Flash movie.