Flash Demonstration – Unit 3 Create Multi-Part Animation –Animate Images –Fade-in and Fade-out Text –Add Interactivity to Instance of MovieClip –Animated.

Slides:



Advertisements
Similar presentations
INTRODUCTION TO ADOBE FLASH CS4
Advertisements

Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.
CIS 205—Web Design & Development Flash Chapter 3 Appendix B on Creating Animations.
© 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.
© Anselm Spoerri Lecture 12 Flash –Done So Far and Build Upon It –Create Function –Create “Button” using ActionScript –Name Keyframes –Create “Disjointed.
Introduction to Macromedia Flash 8
Frame(GIF) and Vector Animation. Two Applications for Creating Animations 1.Photoshop – GIF Animation 2.Flash – Vector Animation.
1 Flash and Animation Presented by : Behzad Sajed Khosrowshahi.
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
BUILDING RICH MEDIA ELEMENTS. Design Decisions Based on Design Specification  Following the design specification will ensure that the application is.
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.
Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.
Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Button library Create a button Learn.
Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Buttons library Edit a button instance.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH CS3.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
© Anselm Spoerri Lecture 9 Flash –Introduction –Timeline –Layers –Symbol –Keyframe –Tweened Animations –Demonstration –Creating Tweened Animations –Shape.
XP Tutorial 4 Special Animations. XP New Perspectives on Macromedia Flash MX Special Layers for Animation Animation Using a Motion Guide Layer.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Creating Buttons – Lesson 51 Creating Buttons Lesson 5.
Adobe Flash CS3 Revealed
Frame, Timeline and Vector Animation. Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.
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,
Distributed Multimedia Programming Week – 4A Buttons Movie Clips.
© Anselm Spoerri Lecture 10 – Related: Part 1 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall Navigation Layout, Import.
Building the Events Components– Lesson 111 Building the Events Components Lesson 11.
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.
Distributed Multimedia Programming Week - 3 Shape Tweening Symbols and Instances.
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.
Macromedia Flash MX Design Professional Macromedia Flash MX GETTING STARTED WITH.
© Anselm SpoerriDigital Media Production Digital Media Production Digital Media Production Anselm Spoerri PhD (MIT) Rutgers University
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.
Flash 1. Document Properties Set frame rate and dimensions of project Set frame rate and dimensions of project (default width=550 and height=400)
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.
© Anselm Spoerri Lecture 10 Flash –Recap –Key Concepts, Components & Tools –Demonstration –Buttons: Simple Text Button | Animated Button –Gradient Tool.
Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 101 Integrating Components and Dynamic Text Boxes with the Animated Map Lesson.
 Movieclip symbols are reusable pieces of flash animation  consisting usually of one or more graphic/button symbols  thus they are flash movies within.
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.
Tutorial 3 Creating Animations.
Tutorial 3 Creating Animations.
Adding Buttons, Actions, and Sounds
Flash Interface, Commands and Functions
Macromedia Flash Tutorial
Flash Demonstration – Unit 5 – ActionScript 2.0
Computer presentation
CT1514 Flash-2.
INTRODUCTION TO ADOBE FLASH CS4
Animate Workspace. Objective % Utilize appropriate tools and methods to produce digital animation.
INTRODUCTION TO FLASH ANIMATION
Develop Rich Internet Content and Applications
Flash Concepts and Demos - Overview
Flash Demonstration – Unit 5
ANIMATE WORKSPACE Stage Timeline Properties Panel Library Panel
Flash Demonstration – Unit 5 – ActionScript 3.0
Exercise : Animated Navigation Structure in Animate (= Flash)
Exercise : Animated Navigation Structure in Flash
Presentation transcript:

Flash Demonstration – Unit 3 Create Multi-Part Animation –Animate Images –Fade-in and Fade-out Text –Add Interactivity to Instance of MovieClip –Animated Buttons for UP and DOWN States –Insert SWFs in Web Page (demoed in Unit 2)

Step 0 – Download files, Launch Flash, Create Document Download Files – Unit 3 Launch Flash Create Flash Document and Set its Properties –File > New –Modify > Document or use Property Inspector –Frame Rate = 12 Dimensions = 300 x 300 Background color = White Using Grid, Rulers and Guides –Rulers View > Rulers –Guides –View > Guides > Show Guides

Step 1 – Import Images, Create Text and Create Layers Import Images to Use in Animation 1)Convert them to Graphic or MovieClip Symbol 2)Create Layer for each image in Main Timeline Place Text in Symbols to Use in Animation 1)Create Graphic Symbol for each text fragment so that we can fade-in and fade-out symbol instance that contains text 2)Place text in Graphic Symbol 3)Create Layer for each text fragment in Main Timeline

Step 2 – Create Tweened Animations Animate Instance of Symbols with Images 1)Create Keyframes for Tweened Animations and “Pauses” 2)Use Classic Tween since it can provide more flexibility 3)Specify Position and/or Size and/or Transparency (Alpha) in Keyframes Animate Instance of Symbols with Text 1)Create Keyframes for Tweened Animations and “Pauses” 2)Make sure that related text fragments line up spatially before creating subsequent keyframes 3)Use Classic Tween since it can provide more flexibility 4)Specify Position and/or Size and/or Transparency (Alpha) in Keyframes

Step 3 – Orchestrating Tweened Animations Placement of Keyframes 1)If the next tween needs to begin right after current tween is completed, then the “end” keyframe of the current tween and the “start” keyframe need to be in the same frame. 2)If the next tween needs to partially overlap with the current tween is completed, then the “start” keyframe of the next tween needs to be placed in a frame during the current tween occurs. 3)If the current and next tweens need to fully overlap (to create a cross-fade), then they need to have “start” and “end” keyframes in the same frames on the timeline. Lengthening or Shortening Tween 1)At Specific Frame in Timeline, Select ALL the frames in the different layers that need to remain in sync 2)Right-click on selected frames and select Insert Frame or Remove Frames

Step 4 – Adding ActionScript 3.0 Controlling and Stopping Playhead 1)Select Frame you want to attach ActionScript to 2)Open Actions Panel and Enter “stop ();” Adding Interactivity to Instance of MovieClip Symbol 1)Select Instance of MovieClip on Timeline 2)Name Instance in Properties panel 3)Open “Actions” Window via “Window > Actions” 4)Open “Code Snippets” Window via “Window > Code Snippets” Select Actions in left panel Double-click on “Click to Go to Web Page” and code will be added to frame in which selected and named instance is located Customize Code: specify URL

Step 4 – Adding ActionScript 2.0 Controlling and Stopping Playhead 1)Select Frame you want to attach ActionScript to 2)Open Actions Panel and Enter “stop ();” Adding Interactivity to Instance of MovieClip Symbol 1)Select Instance of MovieClip on Timeline 2)Open Actions Panel and Enter 3)“on (eventType) { getURL (“URL”, “_self”) }”