Understand the Macromedia Flash environment

1
Unit Lessons
OVERVIEW

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

2
Using Flash MX
INTRODUCTION

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

3
Using Flash
INTRODUCTION

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

4
Optimized for the web
INTRODUCTION

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

5
The Development Environment
LESSON 1

• 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

6
Playback of Flash content
LESSON 1

• 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

7
How Flash Starts up
LESSON 1

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

8
LESSON 1
timeline
toolbox
stage
panels
9
The Stage
LESSON 1

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

10
The Timeline
LESSON 1

• 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

11
The Toolbox
LESSON 1

• 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

12
Opening a movie in Flash
LESSON 2

• 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

13
Previewing a movie
LESSON 2

• 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

14
Testing a movie
LESSON 2

• 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

15
Creating a Macromedia Flash Movie
LESSON 3

• 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

16
Creating a Macromedia Flash Movie
LESSON 3

• 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

17
An object in a keyframe
LESSON 3
Keyframe representing object
Object on the stage
18
Creating an animation
LESSON 3

• 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

19
Motion animation
LESSON 3
Arrow between keyframes indicates motion animation
20
Adding an Effect to an Object
LESSON 3

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

21
Understanding the Timeline
LESSON 4
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

22
Layers
LESSON 4

• 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

23
Using Frames
LESSON 4

• 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

24
Using the Playhead
LESSON 4

• 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

25
Understanding Scenes
LESSON 4

• 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

26
Adjusting the Timeline view
LESSON 4
27
Modifying the frame rate
LESSON 4
Change movie dimensions
Adjust the Background color
Adjust the frame rate
28
Plan a Web site
LESSON 5

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

29
Plan a Web site
LESSON 5

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

30
Plan a Web site
LESSON 5

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

31
Create a Storyboard
LESSON 5
32
Using Screen Design guidelines
LESSON 5

• Balance
• Unity
• Movement
• User Interface

33
Using Interactive Design guidelines
LESSON 5

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

34
Distributing Flash Movies
LESSON 6

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

35
HTML code
LESSON 6
.swf extension indicates aMacromedia Shockwave
file
Code specifying the Macromedia Shockwave Movie
that the browser will play
36
Other Publish options
LESSON 6

• Stand-alone Projector Files
• Quicktime .mov files

37
Unit Tasks
SUMMARY

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