Interactive Multimedia Authoring with Flash: A Comprehensive Guide
Discover the process of multimedia production, common types of multimedia projects, multimedia authoring programs, and the multimedia production process. Learn to combine text, images, audio, video, and animation into interactive presentations. Explore media elements, types supported by Adobe Flash, and how to export projects for different platforms.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Animation Part I: Interactive Multimedia Authoring with Flash Computers and Creativity Richard D. Webster, COSC 109 Instructor Office: 7800 York Road, Room 422 | Phone: (410) 704-2424 e-mail: webster@towson.edu 109 website: https://tigerweb.towson.edu/webster/109/index.html 1
What is Multimedia Authoring? Process of multimedia production Assembling media elements Adding interactivity Export project for distribution to end users Final product can be: played back in a Web browser a stand-alone executable 2
Common Types of Multimedia Production Business presentations Advertising kiosks Games Educational: training and tutorials Use of multimedia authoring program 3
Multimedia Authoring Program Allow you to combine text, images, audio, video, animation into an interactive presentation May have its own scripting language to add interactivity Examples: Adobe Flash/ActionScript Adobe Director/Lingo 4
Multimedia Production Process 1. Collect media elements 2. Assemble media elements 3. Add interactivity By scripting or computer programming Example: Use ActionScript in Flash 4. Export the project into a format that your target audience can play 5
Media Elements Often created outside of the multimedia authoring program In Flash: Use pencil and brush tools Create vector graphics 6
Types of Media Elements Supported by Adobe Flash Bitmap images Photoshop (PSD), BMP, GIF, JPEG, PNG, TIFF Vector graphics Flash Movie (SWF), Adobe Illustrator Digital Video QuickTime (MOV), AVI, Flash Video (FLV) Digital Audio WAV, MP3, AIFF, AU 7
Export the Project Web playback SWF file Smaller size than stand-alone Playable in a Web browser that has the Flash player Windows, Mac OS, and Linux Stand-alone version Mobile apps AIR app for iOS AIR app for Android 8
Animation Like video A sequence of images Create illusion of movement when played in succession Commonly used in multimedia projects Animation sequence is created as a sequence of frames Usually on a timeline 9
What a Timeline Looks Like in Adobe Flash Frame numbers A layer with a seqence of frames Details about timeline is covered in Sections 8.5.3 and 8.6, which are in the next two Powerpoints. 10
Types of Techniques to Create Animation in Multimedia Authoring Program Frame-by-frame Tweening Scripting 11
Frame-by-Frame By explicitly placing different visual content for each frame Each frame is a keyframe A frame in which the content is explicitly specified. Different from a frame in which the content is interpolated between frames. Like flipbook animation http://www.youtube.com/watch?v=FH97UerMW6I http://www.youtube.com/watch?v=zO8MlSjo0T0 12
Frame-by-Frame Example Frame: 1 2 3 4 5 6 7 13
Frame-by-Frame Example Frame 1 Frame 6 Frame 2 Frame 7 Frame 3 Frame 8 Frame 4 Frame 9 Animation playing 2 fps Frame 5 14
Tweened Animation Content in frames between 2 keyframes is interpolated These interpolated frames are called in- between frames. 15
Continuing with the Bird Example In tweened animation, what you need to do: create 2 keyframes: frames 1 and 10 only explicitly place the bird at x=11 in frame 1 and x=20 in frame what the computer does for you: Creates all the in-between frames automatically place the bird at x=12 in frame 2 place the bird at x=13 in frame 3 ... place the bird at x=19 in frame 9 16
Example of Bird Tweening Position Frame 1 Frame 6 Frame 2 Frame 7 Frame 3 Frame 8 Frame 4 Frame 9 Animation playing 2 fps Frame 5 17
What can be tweened? Position (shown in the bird example) Rotation Size Color Opacity Shape 18
Tweening Both Classic tween and Motion tween can be used to animate symbol instances. Shape tween is used to animate shapes 19
Example of Shape Tweened Bird Frame 1 Frame 50 Frame 10 Frame 60 Frame 20 Frame 70 Frame 30 Frame 80 Animation playing 30 fps Frame 40 20
Example of Shape Tweened Bird Position (tweened) Rotation Size (tweened) Color Opacity (tweened) Shape (tweened) Animation playing 30 fps 21
Animation by Scripting/Programming Does not rely on a sequence of frames on timeline Dynamic: Animation can be programmed to respond to the user's interaction Animation can be different in a different play through 22
Frame-by-Frame vs. Tweened vs. Scripted Frame-by-Frame Tweened Scripted Rely on a fixed sequence of visual content on timeline Always same animation every time you play Dynamic and interactive Require scripting 23
Frame-by-Frame vs. Tweened vs. Scripted Frame-by-Frame Tweened Scripted Relative work in general required in creating the visual content longest shortest Choice of animation involving complex or organic motion such as walking and dancing may be Choice of animation involving continuous motion that can be interpolated 24
Animation Frame Rate Playback speed of the animation In frames per second (fps) Too low: choppy Too high: choppy if the computer is not fast enough to process and display the frames Maximum rate in authoring programs not exceed the frame rate setting not guaranteed to maintain the frame rate (slower computer may play at frame rate lower than the setting) 25
Adjusting Speed of a Frame-based Animation Suppose you have a frame-based animation and want to change its playback speed. General Strategy: Avoid eliminating frames if possible To speed up: Increase frame rate if possible and keep the number of frames (preferred) Keep the frame rate but reduce the number of frames (not preferred) To slow down: Keep frame rate but add more frames (preferred) Reduce frame rate but keep the number of frames 26
Example of Adjusting Speed Suppose you have this 5-frame animation and you want to slow it down. Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 27
Example of Adjusting Speed Suppose you have this 5-frame animation and you want to slow it down. If you reduce the frame rate and keep the same frame number: 28
Example of Adjusting Speed Suppose you have this 5-frame animation and you want to slow it down. If you reduce frame rate and keep the same frame number: If you keep the frame rate and add more frames: 29
Flash - Most Essential Workspace Elements Tools Stage Timeline Property Inspector Library 30
Tools Panel Contains tools to select the visual content modify the content (like using the appropriate tools to draw vector graphics) draw scale rotate erase 31
Most Essential Workspace Elements Stage 32
Stage Where a Flash movie plays Background color can be set: in Property Inspector, or by choosing Modify > Document... Area outside of the stage: Gray color Objects placed there will not be visible when the movie plays. Note that if a graphic is in the gray area outside the stage, that graphic will not be visible when the movie plays 33
Most Essential Workspace Elements Timeline 34
Timeline and Keyframes Timeline A stack of layers Content in a layer cover the ones beneath it A series of frames across A circle in a frame: a keyframe A solid circle in a frame: a keyframe with content on the stage An empty circle in a frame: a keyframe without any content on the stage 35
Keyframes in Flash In this example: 1. Which frames are keyframes? 2. Which keyframes have content on the stage? 3. Which keyframes do not have content on the stage? 36
Frames and Keyframes Any non-keyframes frames subsequence to a keyframe has the same content as that keyframe 37
Frames and Keyframes Examples Keyframe: frame 1 Frames 1 4 has the same content as in frame 1 in Layer 1 on stage 38
To Create Keyframes in Flash Do any of the followings: Select a frame in the Timeline and select Insert > Timeline > Keyframe Select a frame in the Timeline and hit the F6 key Right-click (Windows) or Control-click (Mac OS) a frame in the Timeline and select Insert Keyframe. 39
To Convert a Keyframe into a Regular Frame Do any of the followings: Select a frame in the Timeline and select Insert > Timeline > Clear Keyframe Select a frame in the Timeline and hit the Shift-F6 keys Right-click (Windows) or Control-click (Mac OS) a frame in the Timeline and select Clear Keyframe. 40
To Insert Frames in Flash Do any of the following: Select a frame in the Timeline and select Insert > Timeline > Frames Select a frame in the Timeline and hit the F5 key Right-click (Windows) or Control-click a frame in the Timeline and select Insert Frame. 41
To Remove Frames Do any of the following: Select a frame in the Timeline and hit the Shift-F5 keys Right-click (Windows) or Control-click (Mac OS) a frame in the Timeline and select Remove Frames. 42
Most Essential Workspace Elements Property Inspector 43
Property Inspector Displays the information and properties that can be edited If a frame on the Timeline: displays the frame property If the frame selected is a keyframe, you can also assign a frame label and a tweening to that frame. If an object on the Stage is selected: displays the object s properties that you can edit, e.g., x and y width and height 44
Property Inspector This object on stage is selected. Its x, y, width and height are displayed and can be changed by entering different numbers. 45
Most Essential Workspace Elements Library 46
Library Stores symbols, imported bitmaps, and sounds to be used in the project. Symbols are explained in Section 8.6 and next Powerpoint. 47
Review When publishing a Flash movie as a stand- alone executable, you would publish the movie in its .flaformat. When publishing a Flash movie for the web, you would publish the movie as a .swf file. A dynamic animation technique which allows animation to respond to user interaction is animation by scripting. 48
Review . . . The timeline is the panel made up of a stack of layers with frames indicated across. The tools panel provides you with the tools needed to draw vector graphics. Graphics must be located on the stage to be visible when the movie plays. Graphics in the gray area outside of the stage will not show up when the movie plays. 49
Review . . . Both Classic Tween and Motion Tween can be used to animate symbol instances. Shape Tween is the tweening used to animate shapes. The color and width of the path in the motion guide have no effect in an object s motion. 50
