Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.

Slides:



Advertisements
Similar presentations
Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
Advertisements

CIS 205—Web Design & Development Flash Chapter 3 Appendix B on Creating Animations.
Tutorial 4 Creating Special Animations. XP Objectives Create an animation using a motion guide layer Create an animation using a mask layer Animate text.
Create shape-tweened animation Create a mask effect Add sound Add scenes Create a slide show presentation Unit Lessons.
Macromedia Flash MX 2004 – Design Professional and Interactivity WORKING WITH SYMBOLS.
© Anselm Spoerri Lecture 10 Flash –Recap –Key Components & Tools –Animating Bitmaps –How to modify Color and Transparency of Bitmap –Animating along Motion.
© Anselm Spoerri Lecture 11 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall Navigation Layout, Import Images & Organize.
Macromedia Flash 5 Intermediate Level Course. Animation Basics Playhead In-Between Frames Keyframe Current Frame Number Framerate Current Time Frames.
Work with symbols and instances Work with Libraries Create buttons Assign actions to buttons Unit Lessons.
Macromedia Flash MX 2004 – Design Professional Animations CREATING.
Frame(GIF) and Vector Animation. Two Applications for Creating Animations 1.Photoshop – GIF Animation 2.Flash – Vector Animation.
Creating Animation Pertemuan Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
Roentgen photo effect. This detailed, thoroughly explained lesson will show you how to create very attractive roentgen photo effect. You can use this.
Chapter 3 Working with Symbols and Interactivity.
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
Dm11 – Flash Creating Animations Animations CREATING.
Exercise : Animated Navigation Structure in Flash 1.Develop Answers to “What did you learn in ITI program?” “What do you have to offer?” “What are your.
Chapter 4 Creating Animations.
Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Buttons library Edit a button instance.
FLASH LESSON 1: INTRODUCTION BASIC MOTION TWEEN
Chapter Lessons Create frame-by-frame animations
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
Working with Symbols and Interactivity
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
XP Tutorial 4 Special Animations. XP New Perspectives on Macromedia Flash MX Special Layers for Animation Animation Using a Motion Guide Layer.
DIAMOND SHINE EFFECT. IN THIS STEP BY STEP LESSON, I WILL SHOW YOU HOW TO CREATE VERY ATTRACTIVE DIAMOND SHINE EFFECT USING SOME SPECIAL FLASH TIPS AND.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
Adobe Flash CS3 Revealed
© 2011 Delmar, Cengage Learning Chapter 4 Creating Animations.
Chapter 4 Creating Animations. Chapter 4 Lessons 1.Create motion tween animations 2.Create classic tween animations 3.Create frame-by-frame animations.
Frame, Timeline and Vector Animation. Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set.
Motion Tweening – Lesson 81 Motion Tweening Lesson 8.
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.
Flash CS 5 Interface BY NSCHEWCZYK | ©2012. MENU BAR A bar at the top of the window. It lists menu options including: File, Edit, View, Insert, Modify,
Dm 11 - Flash Special Effects Special Effects CREATING.
Macromedia Flash MX 2004 – Design Professional Special Effects CREATING.
1 Flash Basics Exercise Guide Making Animated Text  1.1 Open Flash 5.0 working environment frame 1  1.2 Highlight frame 1 of the first layer Insert.
Macromedia Flash 8 Revealed WORKING WITH SYMBOLS AND INTERACTIVITY.
Macromedia Flash Design Professional And Interactivity WORKING WITH SYMBOLS.
1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.
Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
Flash Develop Rich Internet Content and Applications –Design motion graphics or build data-driven applications Flash Document = “.fla” filename extension.
Video in Macromedia Flash (Optional) – Lesson 121 Video in Macromedia Flash (Optional) Lesson 12.
FLASH!!!!!!!!!!!!!!!!!!!!!!!!! A TUTORIAL BY BRITTANY HESS AND MARGARET DENTON.
CIS 205—Web Design & Development Flash Chapter 3 Appendix on Using Buttons.
Flash Concepts and Demos - Overview Recap Unit 2 –Buttons (Simple Text and Animated Button) –Gradient Tool –ActionScript (stop, getURL) –Embed Flash Movie.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
DM 11- Flash –Unit C and Interactivity WORKING WITH SYMBOLS.
Animation in flash. Frame-by-Frame Animation An animation is made from a series of framed images displayed one after the other to create the motion. Flash.
CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.
Macromedia Flash MX Design Professional And Interactivity WORKING WITH SYMBOLS.
Dreamweaver MX. 2 Timeline Overview (p. 480) n Animations can be achieved with DHTML (__________ HTML) using JavaScript code and _____ or later browsers.
Flash Demonstration – Unit 3 Create Multi-Part Animation –Animate Images –Fade-in and Fade-out Text –Add Interactivity to Instance of MovieClip –Animated.
Prof. Anselm SpoerriMultimedia Production Rutgers Lecture 11 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall.
 Motion Tween allow us to move a shape on the stage from one place to another.  In order to use motion tween, the shape to be moved must be converted.
To play, start slide show and click on circle Lesson 3 Lesson 3 Lesson 3 Lesson 4 Lesson Lesson 4.
Tutorial 3 Creating Animations.
Creating Special Animations
Tutorial 3 Creating Animations.
Flash Interface, Commands and Functions
Animate Some more advanced concepts
Chapter Lessons Create shape-tweened animations Create a mask effect
Working with Symbols and Interactivity
Flash Concepts and Demos - Overview
Exercise : Animated Navigation Structure in Animate (= Flash)
Exercise : Animated Navigation Structure in Flash
Presentation transcript:

Flash MX II

Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation Tweened animation allows creating the starting and ending frames, and let Flash create and “guess” the frames in between.

Flash MX – Tweened Animation 1) Create blank keyframe 2) Create 10 frames to display the show 3) After 10 frames are created 4) Create motion tween 5) Insert keyframe at the end of the slide. A tweened animation is created.

Flash MX – Control display Select Frame 1 –Control -> Play OR –Press There are many features to control the show in the.

Flash MX -- Animation After tweened animation is created by different keyframes, you can use motion tweening: – create motion, – change the size of a group or symbol, – rotate, – change color, – select the path

Flash MX – change color In each keyframe: Select the color in properties. Brightness: change the color in different brightness (black or white) Tint: change into different colors in different RGB and look up color table Alpha: change the level of transparency Advanced: change the brightness, tint and alpha at the same time

Flash MX – Motion path Using a motion path to make a symbol move in a complex pattern. Using a motion guide layer to draw a path for an object to follow. Guide layers are indicated by a guide icon to the left of the layer name. Guide layers do not appear in a published Flash movie

Flash MX – Guide layer 1)Create one keyframe in first frame 2)Create several frames to the slide show 3)Insert Motion Guide 4)Insert keyframe in motion guide PS: Don’t create motion tween before the motion guide. If motion tween is created first, a straight line motion is already created. Therefore it will not follow the motion guide.

Flash MX – Motion path 1) Use the Pencil tool to draw a curving line from the ball to the end of the path in the Guild layer. 2) Select the first frame in the normal layer, select the arrow tool and the Snap modifier (Options function) 3) If the Snap modifier is on, a small black ring appears under the pointer. 4) Move the ball so that its center point is over one end of the line. 5) Insert motion tween in normal layer 6) Select the end frame and insert keyframe, and move the bal l to the other end of the line. 7) Press

Flash MX – Create button 1)Create Symbol OR Convert to Symbol 2)Button states are created by copying the button graphic to a keyframe and modifying it 3)The Timeline for a button has three frames for each of the button states: Up, Over, and Down. The Hit frame defines the area of the button that responds to the mouse.

Flash MX – Create button To edit the symbol: Right-click the symbol in the scene or in the library and choose OR double-click the symbol in the scene or in the library Click the Scene1 to back to the scene 1) Insert keyframe in each state. 2) change the color, re-size or rotate in different state PS: don’t transform the object.

Flash MX – Different state Up: When the mouse is not in the button, the button is in the Up state. Over: When the mouse is on the button, the button is in the Over state. Down: When the mouse is click on the button, the button is in the Down state. Hit: Define the area of the button to respone.

Flash MX – Action Script Making to click the button advance the play-head to different frame of the scene. It can do so by attaching an action to the button instance in the Actions panel. Add script in your slide

Flash MX – Goto Double-click to the special frame Choose the Frame to go special frame Use function normally, otherwise the show will stop.

Flash MX -- Goto After an action script is added. In the Timeline, a symbol “a” is displayed. Beware to add another at the end of the frame, otherwise it will play all the frames. 1)frame 1 create to frame 9 2)frame 8 also create to frame 1 then when we play a show, the movie will loop from frame 1 to frame 8. If we click the button, it will jump to frame 9.

Flash MX -- URL To link with URL, use type the web site in the URL and choose the display window At the bottom, added scripts are all displayed in there. You can click different scripts to edit each script.

Flash MX -- Publish Change the show to the Flash or HTML format PS: mostly it will change to HTML to make sure all the viewer can view it.

Flash MX – Publish setting

Flash MX -- help Find more about Flash in the “Tutorial” and “Lessons” by choosing “Help” Also there are many samples in the Help ActionScript Dictionary