Unit 5 - Enhancing user experience with Adobe Flash CS4

fawnhobbiesSoftware and s/w Development

Jul 4, 2012 (5 years and 4 months ago)

408 views

© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 1
Unit 5
Enhancing user experience
with Adobe Flash CS4
Timing: 10–12 hours
Unit overview
In this unit, students begin using Adobe Flash CS4 to enhance user experience on the web. Students
discover ways in which rich media and animation created with Flash can improve digital communication.
They develop Flash skills through creating an introductory project, evaluating effective uses of Flash on
the web, and building a digital narrative. Students apply the skills and understanding they gain in this unit
to creating digital narratives and designing client websites in succeeding units.
The focus of this unit is building Flash skills, understanding how professionals use those skills to
strengthen communication with interaction and animation, and using Flash to enhance a user’s experience
on a website.
Unit objectives
At the completion of the unit, students will have developed the following skills:
Project management skills
• Evaluating user experience on the web for
different techniques used in rich media
Research and communication skills
• Researching audience and appropriate sites
• Using Flash effectively
• Connecting goals with user interaction
• Researching appropriate uses of multimedia
• Researching and categorizing uses of Flash

Technical skills
Flash
• Identifying parts of the user interface
• Using drawing tools
• Working with layers
• Organizing layers and libraries
• Using animation methods
• Creating interactive buttons
• Working with bitmaps
• Using basic ActionScript
• Importing and compressing audio
• Optimizing file size
• Producing video


Publishing Flash documents

2 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
Activity summary
The unit contains the following activities, with handouts and other materials.
Activity Activity materials
Activity 5.1: Enhancing user experience with rich
media
Presentation: Introduction to Adobe Flash CS4
Worksheet: The Flash workspace
Guide: The Flash workspace
Guide: How to create an animated face
Guide: Symbols, instances, and the library
Guide: Frames and keyframes
Guide: Creating animation in Flash CS4
Guide: How to get started with ActionScript
Guide: How to create a button symbol
Sample assets (electronic files)
Activity 5.2: Examining Adobe Flash on the web Worksheet: Analyzing Flash on the web
Guide: Analyzing Flash on the web
Activity 5.3: Enhancing user experience with video Guide: How to produce Flash video for use on the
web
Guide: How to import sound
Sample assets (electronic files)
Activity 5.4: Enhancing user experience with
advanced animation techniques
Guide: How to use guides and rulers
Guide: Working with symbols
Guide: How to create masks
Guide: How to use a motion guide with a motion
tween animation
Guide: How to ease tweens
Guide: How to create character animations
Sample assets (electronic files)


© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 3
Activity 5.1
Enhancing user experience with rich media
Objectives
• Identify parts of the Adobe Flash CS4 workspace, including the Timeline, frames, layers, the Stage,
scenes, tools, panels, and the Property inspector.
• Define symbols, instances, and libraries in Flash.
• Create an interactive animated movie that incorporates motion and shape tweens, sound, and buttons.
Materials
• Adobe Flash CS4 installed on teacher and student workstations
• Presentation: Introduction to Adobe Flash CS4
• Worksheet: The Flash workspace
• Guide: The Flash workspace
• Guide: How to create an animated face
• Guide: Symbols, instances, and the library
• Guide: Frames and keyframes
• Guide: Creating animation in Flash CS4
• Guide: How to get started with ActionScript
• Guide: How to create a button symbol
• Sample animated face movie files (electronic files)
• sample_animated_face.fla
• sample_animated_face.swf
Time
180–225 minutes
Overview
The teacher introduces the Flash workspace. Students create a Flash movie that includes music,
interactive buttons, and animated shapes on different layers.
Student product: Animated face project
4 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
Activity steps
1. Show students websites that use Flash elements. Discuss how designers use Flash to enhance the user
experience. Some elements to discuss include:
• Navigation systems
• Integrated user interface
• Animated screen elements
• Rich media advertising
Note: Rich media advertising consists of communication using a combination of graphics with video,
audio, or animation. An example is banner ads.
2. Using the presentation, introduce students to the Flash interface. You might open the sample
animated face document to explain and demonstrate the following elements:
• Flash document: Where you create your Flash content. You save a Flash document as a file with
a .fla extension. When you open Flash the Welcome screen gives you the choice of four Flash file
formats – ActionScript 3.0, ActionScript 2.0, Adobe AIR, and Mobile. The format you choose
will depend on the platform on which you plan to publish your Flash movie.
• Tools panel: Tools for drawing, painting, writing, selecting, moving, modifying, viewing, and
coloring.
• Panels: Additional tools for modifying and creating objects.
• Property inspector: Where you set or change the most commonly used attributes of objects in a
Flash document.
• Movie: A published Flash document. Explain the difference between FLA and SWF files.
• Stage: Where you compose the content of a Flash document.
• Timeline: Where you organize and control the content of a Flash document over time, using
layers and frames.
• Frame: A single picture in a series that form the content of a Flash document.
• Keyframe: A frame where a new symbol instance appears in the Timeline. A keyframe can also
be a frame in which you define a change to an object’s properties for a classic tween animation.
Keyframes can also include ActionScript code to control some aspect of your document.
• Property keyframe: A frame in which you define a change to an object’s properties for an
animation.
• Layers: Where you organize the various content elements in a Flash document.
• Scene: Each document can contain multiple scenes, each with its own Timeline and Stage. Scenes
can be placed within other scenes.
• Edit bar: Indicates the current scene. On the right side, you can select the scene to open on the
Stage or change the magnification for viewing the Stage.
• Symbol: An element stored in a library, for reuse in a Flash document.
• Instance: A copy of a symbol when it is on the Stage. Each instance references the complete
information stored in the corresponding library symbol, without duplicating that information. The
use of instances minimizes the file size of a Flash movie.
• Library: Where you store and organize symbols.
© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 5
• Motion tweening: An automated way to create smooth movement and changes over time.
• Classic tweening: A more complex form of creating smooth movement and changes over time.
Classic tweening provides certain capabilities that motion tweening does not.
• Shape tweening: An automated way to create shape changes over time.
• Sounds: Music loops or sound effects that play during the movie or are triggered by an action.
• Actions: ActionScript statements that control an object or the Timeline when a movie is played.
• XFL file: XFL is an XML representation of a FLA document. It is a declarative file format. In
Flash Professional CS4, XFL is an exchange format for importing InDesign, After Effects and
Device Central generated documents.
Presentation: Introduction to Adobe Flash CS4
Worksheet: The Flash workspace
Guide: The Flash workspace
Electronic file: sample_animated_face.swf
Electronic file: sample_animated_face.fla
3. Using the “I do, we do, you do” method, build a simple animated face with students. Highlight the
following elements:
• Drawings on separate layers
• A motion tween on one layer
• A shape tween on another layer
• A static object that persists throughout the movie on a separate layer
Guide: How to create an animated face
Electronic file: sample_animated_face.swf
Electronic file: sample_animated_face.fla
4. During the process of creating the animated face with students, find opportunities to discuss the
following:
• Various ways to open, close, expand, and collapse panels
• Stage size and its relationship to screen resolution
• Document properties and settings (and how to open the Document Properties dialog box)
• How non-symbol shapes merge if you place one over the other in the same layer
• The difference between bitmap images and vector images in Flash
• Drawing tools, such as shapes and lines
• Selection tools, such as marquee, lasso, and magic wand
• The Timeline and its use in animation
• The difference between keyframes, property keyframes, and regular frames.
• Using the motion editor to adjust and modify animations
• Frame rate and timing (typically 12 frames per second) and the effect of frame rate on file size
• The definition of shape in Flash
• Symbols, instances, and the library
6 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
• Editing modes, such as editing an object on the Stage or editing a symbol
• Locking and unlocking layers to protect objects you are not manipulating
• Publishing the face using different methods
• The differences between a SWF file and its corresponding FLA file
Guide: Symbols, instances, and the library
Guide: Frames and keyframes
Guide: Creating animation in Flash CS4
5. As you build the Flash document, watch for the following teaching opportunities:
• When you create an instance of an object from the library, discuss why you use symbols and
libraries.
• When you create tweens, discuss the difference between motion tweens and shape tweens.
Explain that students will learn how to use classic tweens in Activity 6.1.
6. Once students have created the initial face, pair students and have them check each other’s animated
faces. They should test and discuss the following:
• Select each keyframe and property keyframe and determine if more than one object is highlighted
on the Stage. (Objects should be on separate layers if they are to be animated.)
• Select each keyframe and property keyframe and determine if an object is a shape or a symbol
and if the correct type of tween has been applied. (Motion tweens animate symbols; shape tweens
animate shapes.)
• In turn, select each keyframe and property keyframe along the Timeline and make sure the object
is in the expected location on the Stage based on the point in the movie.
7. Inform students that these techniques for checking that their Flash document is clean will help when
they are looking for errors in more complex movies later.
8. Once students successfully create the simple face, inform them that they will now add some user
control and a soundtrack.
9. Using the “I do, we do, you do” method, introduce students to the basic concepts of using
ActionScript to stop their movies from looping. Some key terms you might want to define as you step
students through this process include:
• Class
• Object
• Property
• Variable
• Method
• Function
• Event
Guide: How to get started with ActionScript
10. Building on the basic concepts of ActionScript, demonstrate how to create a button to stop and play
the movie. Watch for the following teaching opportunities:
© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 7
• When you create a button, make sure students understand the different button states.
• What are events handlers and listeners?
Guide: How to create a button symbol
11. Demonstrate how to add sound on a separate layer and use actions to make sure the sound stops when
the movie stops. Be sure to discuss copyright issues related to sounds students propose to add to their
movies.
12. If students complete their animated face and buttons early, challenge them to add one or more of the
following features on their own; then have them show the result to a partner and explain how they
created the feature.
• Add eyebrows that don’t move.
• Add eyebrows that move up as the eyes move.
• Add a tongue that comes out as the face smiles.
• Add eyes that open and close as the face smiles.
13. Ask students to share their completed movies with the rest of the class.
14. Have students add their animations to a new animation section in their portfolios to illustrate their
graphics work.

Preparation
• Identify websites that use Flash elements. You can use sites from the Flash Showcase indicated in
Background resources.
• If you plan to use the worksheet and guides, make photocopies.
• Review the Flash workspace.
• Familiarize yourself with the new method for motion tweening in Flash CS4 using the guides
provided for students or video workshops indicated in the Background resources.
• You might choose to create the animated face movie yourself (including the elements that require
ActionScript) to see where students may have difficulties.
• You might gather some copyright-free sound clips for students to use in their movies.
Extensions
Classroom techniques: As you cover each animation technique with the class, you might ask small groups
of students to highlight examples they create as they build the face animation.
Great uses of Flash: Have students look on the web for sites with Flash elements that inspire them. They
should write brief descriptions of elements that are impressive and how they think each element was
created in Flash.
8 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
Rationale
Designers choose different ways to present their website content—from animated graphics to rich client
interfaces. Many professional web developers use vector graphic and animation software to help them
enhance their designs creatively and efficiently on web pages.
Background resources
• Flash Showcase
www.adobe.com/showcase/

• Links to free downloadable music loops and sound effect clips
www.flashkit.com

• Access tutorials, articles, and other resources in the Flash developer center
www.adobe.com/devnet/flash/

• Access video tutorials on Flash
http://tv.adobe.com/

• Resources and technical material available for Flash
www.adobe.com/support/flash/

Assessment

Does not me
et expectations

Meets expectations

Exceeds
e
xpectations

Animated face
Absent or incomplete. Students understand the
basics of Adobe Flash
CS4 including interface
elements, methods to
create and modify
animations, types of
animation, and library
elements. Students can
define terms associated
with creating animation
in Flash, including
frames, keyframes, and
tweens. Students create
an animated face that
uses basic techniques in
Flash without any errors
in the Timeline.
Students understand and
can articulate the basics
of Adobe Flash CS4
including interface
elements, methods to
create and modify
animations, types of
animation, and library
elements. Students can
define terms associated
with creating animation
in Flash, including
frames, keyframes, and
tweens. Students create
an animated face that
uses basic techniques in
Flash without any errors
in the Timeline. Students
can troubleshoot errors in
peer movies to help them
improve their work.
© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 9

Does not me
et expectations

Meets expectations

Exceeds
e
xpectations

Interactivity and
sound
Absent or incomplete. Students understand the
terminology and the
basics of object-oriented
programming as it is used
in ActionScript. Students
build a button to control
the animated face movie
that includes sound.
Students understand the
terminology and the
basics of object-oriented
programming as it is used
in ActionScript. Students
can clearly articulate the
concepts around
programming. Students
build a button to control
the animated face movie
that includes sound.
ISTE NETS*S Standards for Students
This activity is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and
content area the student selects you may research your own state content standards to see how this activity
aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students
IV. Critical Thinking, Problem-Solving & Decision-Making
Students use critical thinking skills to plan and conduct research, manage projects, solve problems
and make informed decisions using appropriate digital tools and resources. Students:
B. plan and manage activities to develop a solution or complete a project.
C. collect and analyze data to identify solutions and/or make informed decisions.
V. Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and
ethical behavior. Students:
B. exhibit positive attitudes toward technology uses that support collaboration, learning, and
productivity.
D. exhibit leadership for digital citizenship.
Adobe Certified Associate, Rich Media Communication objectives
3.1 Identify elements of the Flash interface.
3.2 Use the Property inspector.
3.3 Use the Timeline.
3.4 Use the Motion Editor.
3.5 Understand Flash file types.
3.6 Identify best practices for managing the file size of a published Flash document.
10 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
4.2 Adjust document properties.
4.4 Use tools on the Tools panel to select, create, and manipulate graphics and text.
4.6 Create text.
4.7 Adjust text properties.
4.8 Create objects and convert them to symbols, including graphics, movie clips, and buttons.
4.9 Understand symbols and the library.
4.10 Edit symbols and instances.
4.12 Create animations (changes in shape, position, size, color, and transparency).
4.13 Add simple controls through ActionScript 3.0.
4.16 Publish Flash documents.
Key terms
• Timeline
• Stage
• layer
• scene
• frame
• keyframe
• property keyframe
• library
• symbol
• instance
• shape
• motion tween
• shape tween
• action, ActionScript
• button, button state
• rich media
• class
• object
• property
• variable
• method
• function
• event
© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 11
Activity 5.2
Examining Flash on the web
Objectives
• Identify the use of technical elements such as tweens, images, text animations, actions, and sound in
Adobe Flash CS4 movies and ads on the web.
Materials
• Adobe Flash CS4 installed on teacher and student workstations
• Worksheet: Analyzing Flash on the web
• Guide: Analyzing Flash on the web
Time
50 minutes
Overview
The teacher and students identify Flash techniques on the web to give students a real-world perspective on
animations created in the previous activity.
Student product: Basic analysis of Flash on the web
Activity steps
1. Have students open one or more websites that illustrate a variety of Flash techniques. (Alternatively,
you could open such sites on the teacher workstation.)
2. As a class, identify the following Flash techniques on the websites:
• Motion tweens
• Shape tweens
• Movie clips
• Buttons
• Combinations of symbols, such as buttons that contain animated movie clips
• Sound (number of sounds used, number of times a sound is looped)
• Stop actions
• Go to and play actions
Worksheet: Analyzing Flash on the web
Guide: Analyzing Flash on the web
12 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
3. Have students speculate on the types or combinations of techniques that might be involved to create
some of the more complicated effects they see.
4. Discuss the purposes for implementing content as rich media. You might include the following:
• Incorporating audio and video
• Providing continuity
• Providing transitions
• Illustrating change over time
• Getting multiple layers of information from one part of the display
• Enriching graphical representations
• Visualizing three-dimensional structures
• Attracting attention
5. If time permits, challenge students to comment on one or more of the following:
• A surprising technique
• A challenging technique
• An unidentified technique
• A creative design solution

Preparation
• Compile a list of websites that use Flash. You can use websites from the Flash Showcase.
• If you plan to use the worksheet and guide, make photocopies.
Rationale
Designers and animators generate ideas by examining the work of other designers and animators.
Analyzing the work of others helps design teams develop and construct better websites.
Background resources
• Flash Showcase
www.adobe.com/showcase/

© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 13
Assessment

Does not meet expectations

Meets expectations

Exceeds
e
x
pectations

Analyzing Flash
Absent or incomplete. Students research rich
media sites and can
identify animation
techniques. Students
understand when the use
of rich media elements
are effective on websites.
Students research rich
media sites and can
identify animation
techniques. Students
understand and can
clearly articulate when
the use of rich media
elements are effective on
websites as well as
identify when these
elements are not
effective.
ISTE NETS*S Standards for Students
This activity is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and
content area the student selects you may research your own state content standards to see how this activity
aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students
I. Creativity and Innovation
Students demonstrate creative thinking, construct knowledge, and develop innovative products and
processes using technology. Students:
D. identify trends and forecast possibilities.
III. Research and Information Fluency
Students apply digital tools to gather, evaluate, and use information. Students:
C. evaluate and select information sources and digital tools based on the appropriateness to specific
tasks.
VI. Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems and operations.
Students:
A. understand and use technology systems.
D. transfer current knowledge to learning of new technologies.
Key terms
• action • Flash technique

14 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
Activity 5.3
Enhancing user experience with video
Objectives
• Examine websites that incorporate Flash video.
• Incorporate video in a Flash document for use on a website.
• Identify challenges with using video on the web and the ways in which Flash video addresses these
challenges and improves user experience.
Materials
• Guide: How to produce Flash video for use on the web
• Guide: How to import sound
• Sample video file: sample_video.mov
Time
180–225 minutes
Overview
The instructor introduces video on the web by showing examples and discussing how these videos are
used to enhance the user’s experience on the site. Student groups learn to produce Flash video and present
their projects to the class.
Student product: Presentation of Flash video
Activity steps
1. Brainstorm with students the different kinds of video they’ve seen on the web and what type of video
player these sites use. Some examples follow:
• Video trailers of upcoming movies (QuickTime)
www.apple.com/trailers/

• Music videos (RealPlayer)
www.rhapsody.com/musicvideos

• Entertainment videos (Windows Media Player)
www.windowsmedia.com

• Tutorials (Flash video in Flash Player)
http://tv.adobe.com

© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 15
2. As you view these sites, you might ask students to identify some of the general challenges of
incorporating video on a website. Some topics you can use to guide the conversation include:
• Bandwidth limitations: Video files are generally quite large, requiring megabytes of data to
display even short video clips.
• Complex video authoring for the web: No standard tool sets exist for creating interactivity,
navigation control, and fusion of video with other rich media content.
• Time-consuming player downloads: Most video playback requires site visitors to download a
plug-in or application to view a video.
• Lack of compelling integration of video and other web content: Most video formats restrict
playback of video to a separate generic window, interrupting the user experience.
3. Discuss how Flash video addresses these challenges. The benefits of Flash video implemented
through Flash Player include:
• Availability: Flash Player is the most widely installed Internet video client, running on over 94%
of all Internet-connected personal computers.
• Creative control: Designers can integrate Flash Video into a website by customizing the skin that
frames the video.
• Video in context: Because Flash treats Flash Video as a media type, you can integrate video
directly into a web page just as you would any image or sound you bring into Flash.
4. Show students how Flash video is used to enhance the experience of different audiences. Some
examples you might start with include:
• News: Flash video to provide recent news and events
www.cnn.com/video/

• Entertainment: Flash video to show the latest Asian music videos
www.iatv.tv/music/

• Research: Online polls using video interactivity as part of the poll (click Take a Sample Poll)
http://hertzresearch.com/software.html

• Tutorials (Flash video in Flash Player)
http://tv.adobe.com

5. Have students identify ways in which these videos address the intended audience and the site purpose
and goals.
6. Demonstrate the ways to incorporate video into a Flash document. You might want to highlight the
following aspects of incorporating video:
• Delivery options, such as progressive, streaming, and embedded video
• How delivery option affects the file size of the published Flash document
• Video file formats that can be used in a Flash document
• Using the Adobe Media Encoder to encode video into Flash Video format
Discuss the advantages of storing video files outside the published Flash document.
Guide: How to produce Flash video for use on the web
Electronic file: sample_video.mov
16 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
7. Break students into small groups and have each group use the sample video to create a Flash video.
8. Assign one of three scenarios to each group:
• A local news team is reporting a story about the Golden Gate Bridge on their website.
• A movie director is shooting the trailer for a movie based in San Francisco.
• A tourism website is creating a feature to lure tourists to San Francisco.
Ask each group to write a two- or three-sentence narration that will appeal to the audience each
organization is trying to attract.
9. Have each group record its narration, import the audio into the Flash document with the video, and
apply appropriate audio compression settings. Ask each group to modify the skin of its video to
appeal to its target audience.
Guide: How to import sound
10. Ask each group to publish its Flash document, share it with the class, and explain why its narration
and video skin should attract the target audience.

Preparation
• You might want to go through the guide How to produce video for use on the web.
• If you plan to use the guides, make photocopies.
• If you plan to use the sample asset file, make sure students have access to it from their machines.
Rationale
Designers and developers use video and the content around it in different ways to address specific
audience needs and to make content that is customized to the needs of the audience. The web allows
integration of video with data, content, and interactive controls to create rich experiences.
Background resources
• Flash Showcase (type Flash video into the search field then click Search button)
www.adobe.com/showcase/

• Flash video examples:
• CNN uses Flash video to provide recent news and events.
www.cnn.com/video/

• ImaginAsian TV (IATV) uses Flash video to show the latest Asian music videos.
www.iatv.tv/music/

• Online polls using video interactivity as part of the poll (click Take a Sample Poll)
http://hertzresearch.com/software.html

• User submitted videos on YouTube:
www.youtube.com

© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 17
• Examples of the uses of video players:
• QuickTime
www.apple.com/trailers/

• RealPlayer
www.rhapsody.com/musicvideos

• Windows Media Player
www.windowsmedia.com

Assessment

Does not meet expectations

Meets expectations

Exceeds
e
xpectations

Flash video
project
Absent or incomplete. Students understand the
uses and advantages of
Flash video. Students can
produce a Flash video
tailored to a particular
audience. Student
narration focuses the
video content to a
specific audience and
purpose.
Students understand and
can articulate the uses
and advantages of Flash
video. Students can
produce a Flash video
tailored to a particular
audience. Students alter
elements of the video
skin to better suit the
audience and purpose.
Student narration focuses
the video content to a
specific audience and
purpose.
ISTE NETS*S Standards for Students
This activity is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and
content area the student selects you may research your own state content standards to see how this activity
aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students
IV. Critical Thinking, Problem-Solving & Decision-Making
Students use critical thinking skills to plan and conduct research, manage projects, solve problems
and make informed decisions using appropriate digital tools and resources. Students:
B. plan and manage activities to develop a solution or complete a project.
D. use multiple processes and diverse perspectives to explore alternative solutions.
VI. Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems and operations.
Students:
A. understand and use technology systems.
B. select and use applications effectively and productively.
C. troubleshoot systems and applications.
18 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
D. transfer current knowledge to learning of new technologies.
Adobe Certified Associate, Rich Media Communication objectives
1.1 Identify the purpose, audience, and audience needs for rich media content.
1.6 Communicate with others (such as peers and clients) about design and content plans.
3.6 Identify best practices for managing the file size of a published Flash document.
4.14 Import and use sound.
4.15 Add and export video.
Key terms
• Flash video • Script Assist

© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 19
Activity 5.4
Enhancing user experience with advanced
animation techniques
Objectives
• Examine websites that use masking, path, easing, and character animation techniques.
• Build mask effects, path animation, ease effects, and character animations involving advanced motion
tweens.
• Identify how masking, path, easing, and character animations can be used to enhance user experience
on the web.
Materials
• Guide: How to use guides and rulers
• Guide: Working with symbols
• Guide: How to create masks
• Guide: How to use a motion guide with a motion tween animation
• Guide: How to ease tweens
• Guide: How to create character animations
• Sample masking, path, ease, and character animations:
• mask_sample.fla
• mask_sample.swf
• path_anim_sample.fla
• path_anim_sample.swf
• ease_sample_classic.fla
• ease_sample_classic.swf
• ease_sample_motion.fla
• ease_sample_motion.swf
• character_anim_sample.fla
• character_anim_sample.swf
Time
180–225 minutes
20 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
Overview
The instructor introduces masking, path, easing, and character animations by showing examples and
discussing how these effects enhance the user’s experience on the site. Student groups learn to create
these effects and present them to the class.
Student product: Presentation of a mask effect, a path animation, an animation using easing, and a
character animation
Activity steps
1. Introduce masking, path animation, eases, and character animation by showing students some sites
that use these specific techniques, such as the following:
• National Geographic’s Lewis and Clark Journey map
www.nationalgeographic.com/lewisandclark/journey_leg_1.html

• Visionlearning’s Three States of Matter
http://web.visionlearning.com/custom/chemistry/animations/CHE1.1-an-threestates.shtml

• The home page of Leo Burnett, a marketing communications company
www.leoburnett.com/

• PBS Kids show Fetch! Face-Off game
http://pbskids.org/fetch/games/faceoff/game.html

2. Explain that the motion tweening learned in the first activity to simply change position can be applied
in different ways to create more advanced effects.
3. Have students indicate the ways in which using these techniques enhances the user’s ability to
understand the information being presented.
4. Demonstrate to students the steps to create a masking effect.
Electronic file: mask_sample.swf
5. Demonstrate to students the steps to create a path animation
Electronic file: path_anim_sample.swf
6. Demonstrate to students the steps for easing a tween, using the classic and motion tween easing
methods.
Electronic file: ease_sample_classic.swf
Electronic file: ease_sample_motion.swf
7. Demonstrate to students how to use the bones tool and motion tweens to create character animations.
Electronic file: character_anim_sample.swf
8. Break students into small groups. Assign each group to create a masking effect, a path animation, an
easing effect, or a character animation.
© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 21
9. Have students build an example of the effect and brainstorm three applications for their effect. Have
them use the guides and rulers in Flash to accurately line up the objects they use when creating their
masking effects, eases, and path and character animations.
Note: Be sure to provide students with any needed assets for them to create the effect.
Guide: How to use guides and rulers
Guide: Working with symbols
Guide: How to create masks
Guide: How to use a motion guide with a motion tween animation
Guide: How to ease tweens
Guide: How to create character animations
10. After students have had a chance to complete their tasks, have a few groups share their samples and
explain the applications they would see for their techniques.
11. Let students know that later in the course they will create a digital narrative and design a website for a
client. In each of these projects, students will have the opportunity to apply what they have learned
about Flash video, masking, easing, and character animations.

Preparation
• You might want to go through the guides How to create masks, How to ease tweens, How to use a
motion guide with a Motion tween animation and How to create character animations.
• You might find a few more examples of masking, path, easing, and character animation techniques on
www.flashkit.com
.
• If you plan to use the guides, make photocopies.
• If you plan to use the sample asset files, make sure students have access to them from their machines.
Rationale
Motion tweens can be used for more than moving objects from one position to another. Designers use
masking to reveal different levels of information or imagery; they use path animations to show progress
over time; they use eases to make animations more natural; they use character animations to make
animations of characters more lifelike.
Background resources
• Flash Kit has examples of masking and path animations; search for “mask effects” and “motion path.”
www.flashkit.com

• National Geographic’s Lewis and Clark Journey map
www.nationalgeographic.com/lewisandclark/journey_leg_1.html

• Visionlearning’s Three States of Matter
http://web.visionlearning.com/custom/chemistry/animations/CHE1.1-an-threestates.shtml

22 Enhancing user experience with Adobe Flash CS4 © 2008 Adobe Systems Incorporated
• The home page of Leo Burnett, a marketing communications company
www.leoburnett.com/

• PBS Kids show Fetch! Face-Off game
http://pbskids.org/fetch/games/faceoff/game.html

Assessment

Does not meet expectations

Meets expectations

Exceeds
e
xpectations

Animation
techniques
Absent or incomplete. Students can create a
mask animation, a path
animation, add an ease to
a motion animation, and
create a character
animation. Students can
articulate when it is
appropriate to use these
techniques and why they
are appropriate to use.
Students can create a
mask animation, a path
animation, add an ease to
a motion animation, and
create a character
animation. Students can
help other students learn
these techniques.
Students can articulate
when it is appropriate to
use these techniques and
why they are appropriate
to use.
ISTE NETS*S Standards for Students
This activity is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and
content area the student selects you may research your own state content standards to see how this activity
aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students
V. Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and
ethical behavior. Students:
B. exhibit positive attitudes toward technology uses that support collaboration, learning, and
productivity.
C. demonstrate personal responsibility for lifelong learning.
D. exhibit leadership for digital citizenship.
VI. Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems and operations.
Students:
A. understand and use technology systems.
B. select and use applications effectively and productively.
C. troubleshoot systems and applications.
D. transfer current knowledge to learning of new technologies.
© 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 23
Adobe Certified Associate, Rich Media Communication objectives
1.6 Communicate with others (such as peers and clients) about design and content plans.
3.4 Use the Motion Editor.
4.3 Use Flash guides and rulers.
4.4 Use tools on the Tools panel to select, create, and manipulate graphics and text.
4.8 Create objects and convert them to symbols, including graphics, movie clips, and buttons.
4.10 Edit symbols and instances.
4.11 Create masks.
4.12 Create animations (changes in shape, position, size, color, and transparency).
4.13 Add simple controls through ActionScript 3.0.
4.16 Publish Flash documents.
Key terms
• masking
• easing
• character animation

®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
1
INTRODUCTION TO ADOBE FLASH CS4
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
2
Flash workspace
Tools
Layers
Panels
Stage
Motion
Editor
Timeline
Menu
bar
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
3
Stage

Compose movie content on the Stage.

Set Stage size by selecting Modify > Document:

To specify the Stage size in pixels, enter values in the Width and Height boxes. The
minimum size is 1 x 1 pixels; the maximum is 2880 x 2880 pixels.

To minimize document size, click the Contents button to the right of Match (but first
create all of the objects on the Stage).

To set the Stage size to the maximum available print area, click Printer.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
4
Tools panel
Tools create the content of a movie.

Selection tools:Select, scale, distort, rotate objects

Drawing tools:Draw, paint, create text, and erase
objects

View tools: Zoom and pan

Color tools: Set stroke and fill colors

Options: Modify the currently selected tool
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
5
Panels
Panels provide additional tools for creating and
editing movies.

Click the panel to view additional options for the
current panel.

You can hide or show panels by using the options on
the Window menu.
Panels
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
6
You can organize and control the content of a movie over time.
Timeline
Layers
Frames Playhead
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
7
Frames and keyframes

Frames:Like films, Flash movies divide lengths of time into frames, which are
organized on the Timeline.

Keyframes:Frames that define a change in what is displayed in a movie or include
frame actions to modify a movie. When you open a new blank movie document, it
contains one layer with one blank keyframe.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
8
Frames and keyframes
Keyframe with content
Blank keyframe
Empty frames
Empty slots for new frames
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
9
Layers

Layers are like multiple film strips
stacked on top of each other, each with
a different element that appears on the
Stage.

Graphics

Animations

Text

Sounds

Buttons

Frame actions
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
10
Symbols and libraries

Symbols are elements you reuse within a movie to reduce file size.

Types of symbols include graphics, buttons, movie clips, sound files, and text.

A library is where you store and organize symbols.

When you drag a symbol from a library to the Stage, you create an instance of the
symbol.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
11
Advantages of using symbols

Easy editing: If you change the symbol in the library, all instances of the
symbol are updated automatically.

Smaller file sizes: Symbols are downloaded only once, regardless of the
number of instances you’ve included in the movie. This reduces the size of
your published movies and decreases download times.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
12
Animation with tweening

Tweening: A tween is an animation that is created by specifying a state for an object
property in one frame and another state for that same object in another frame. Flash
calculates the values for that object’s properties in between those two frames. The
term tween comes from the phrase “in between.”

Flash supports three different types of tweening.

Motion tweens, introduced in Flash CS4 Professional, are powerful and simple to create. Motion tweens
allow you to create most tweened effects.

Classic tweens, which were the only method for motion animation in earlier versions of Flash , are more
complex to create, but provide certain capabilities that motion tweens do not.

Shape tweens allow you draw a shape at one specific frame in the Timeline, and change that shape or
draw another shape at another specific frame. Flash then interpolates the intermediate shapes for the
frames in between, creating the animation of one shape morphing into another.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
13
Motion tweening

Motion tweens can only have one object instance associated with them and use
property keyframes instead of keyframes.

Motion tween spans can be stretched and resized in the Timeline and are treated as
a single object.

With motion tweens, eases apply across the entire length of a motion tween span.
Easing only specific frames of a motion tween requires the creation of a custom ease
curve.

The Motion Editor enables you to view all Motion tween properties and their
property keyframes.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
14
Classic tweening

Classic tweens use keyframes. Keyframes are frames in which a new instance of an
object appears.

Classic tweens consist of groups of individually selectable frames in the Timeline.

With classic tweens, eases can be applied to the groups of frames between the
keyframes within the tween.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Shape tweening
15

Shape tweens work best with simple shapes. Avoid shapes with cutouts or negative
spaces in them. Experiment with the shapes you want to use to determine the
results. You can use shape hints to tell Flash which points on the beginning shape
should correspond to specific points on the end shape.

You can also tween the position and color of shapes within a shape tween.

To apply shape tweening to groups, instances, or bitmap images, break these
elements apart.

To apply shape tweening to text, break the text apart twice to convert the text to
objects.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
16
Sound

First, import a sound file into the library.

Add sound to a movie by dragging an
instance of the sound into a frame.

To minimize file size, loop shorter sounds
(to make them repeat).
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
17
Actions

ActionScript statements instruct a movie to do something while it is playing.
ActionScript can be attached to a frame or to an object:

Frames:ActionScript attached to a frame is triggered when the movie plays that frame.

Objects:ActionScript attached to an object is triggered when the viewer interacts with the
object, such as moving the pointer over a hotspot or clicking a button.