Unit 5 Enhancing user experience with Adobe Flash CS4

Transcription

1 Unit 5 Enhancing user experience with Adobe Flash CS4 Timing: 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 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 1

2 Activity summary The unit contains the following activities, with handouts and other materials. Activity Activity 5.1: Enhancing user experience with rich media Activity 5.2: Examining Adobe Flash on the web Activity 5.3: Enhancing user experience with video Activity 5.4: Enhancing user experience with advanced animation techniques Activity materials 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) Worksheet: Analyzing Flash on the web Guide: Analyzing Flash on the web Guide: How to produce Flash video for use on the web Guide: How to import sound Sample assets (electronic files) 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) 2 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 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 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 3

4 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. 4 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 5

6 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 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: 6 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 7

8 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 Links to free downloadable music loops and sound effect clips Access tutorials, articles, and other resources in the Flash developer center Access video tutorials on Flash Resources and technical material available for Flash Assessment Does not meet expectations Meets expectations Exceeds expectations 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. 8 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

9 Interactivity and sound Does not meet expectations Meets expectations Exceeds expectations 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 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 9

10 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 Edit symbols and instances Create animations (changes in shape, position, size, color, and transparency) Add simple controls through ActionScript 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 10 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 11

12 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 12 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

13 Assessment Does not meet expectations Meets expectations Exceeds expectations 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 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 13

14 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 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) Music videos (RealPlayer) Entertainment videos (Windows Media Player) Tutorials (Flash video in Flash Player) 14 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 Entertainment: Flash video to show the latest Asian music videos Research: Online polls using video interactivity as part of the poll (click Take a Sample Poll) Tutorials (Flash video in Flash Player) 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 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 15

16 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) Flash video examples: CNN uses Flash video to provide recent news and events. ImaginAsian TV (IATV) uses Flash video to show the latest Asian music videos. Online polls using video interactivity as part of the poll (click Take a Sample Poll) User submitted videos on YouTube: 16 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

17 Examples of the uses of video players: QuickTime RealPlayer Windows Media Player Assessment Flash video project Does not meet expectations Meets expectations Exceeds expectations 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 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 17

18 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 Import and use sound Add and export video. Key terms Flash video Script Assist 18 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 minutes 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 19

20 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 Visionlearning s Three States of Matter The home page of Leo Burnett, a marketing communications company PBS Kids show Fetch! Face-Off game 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. 20 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 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. National Geographic s Lewis and Clark Journey map Visionlearning s Three States of Matter Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 21

22 The home page of Leo Burnett, a marketing communications company PBS Kids show Fetch! Face-Off game Assessment Animation techniques Does not meet expectations Meets expectations Exceeds expectations 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. 22 Enhancing user experience with Adobe Flash CS Adobe Systems Incorporated

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 Edit symbols and instances Create masks Create animations (changes in shape, position, size, color, and transparency) Add simple controls through ActionScript Publish Flash documents. Key terms masking easing character animation 2008 Adobe Systems Incorporated Enhancing user experience with Adobe Flash CS4 23

24 INTRODUCTION TO ADOBE FLASH CS4 Copyright 2008 Adobe Systems Incorporated. All rights reserved. 1

25 Flash workspace Menu bar Stage Panels Motion Editor Tools Timeline Layers Copyright 2008 Adobe Systems Incorporated. All rights reserved. 2

26 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. 3

27 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. 4

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

29 Timeline You can organize and control the content of a movie over time. Frames Playhead Layers Copyright 2008 Adobe Systems Incorporated. All rights reserved. 6

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

31 Frames and keyframes Keyframe with content Empty frames Blank keyframe Empty slots for new frames Copyright 2008 Adobe Systems Incorporated. All rights reserved. 8

32 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. 9

33 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. 10

34 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. 11

35 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. 12

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

37 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. 14

38 Shape tweening 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. 15

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

40 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. Copyright 2008 Adobe Systems Incorporated. All rights reserved. 17