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

Slides:



Advertisements
Similar presentations
INTRODUCTION TO ADOBE FLASH CS4
Advertisements

Tutorial 4 Creating Complex Animations. XP Objectives Modify an animation’s motion path Modify motion tweens using the Motion Editor Create an animation.
Tutorial 7 Planning and Creating a Flash Web Site.
Tutorial 6 Creating Special Effects with Graphics and Gradients.
Tutorial 1 Introducing Adobe Flash CS4 Professional.
Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols.
Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.
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.
Introduction to Macromedia Flash 8
Frame(GIF) and Vector Animation. Two Applications for Creating Animations 1.Photoshop – GIF Animation 2.Flash – Vector Animation.
3.02 Computer Animation Software and Design Guidelines
Creating Animation Pertemuan Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
3.02 Computer Animation Software and Design Guidelines
Frame Part of timeline panel You can remove normal frames from a certain layer by (MRC + Remove Frames). You can remove normal frames from a certain layer.
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.
Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.
Lehigh University Introduction to Flash MX Sharmeen Mecklai.
Adobe Flash Professional CS5 Provides a comprehensive authoring environment for creating digital animation and interactive Web sites. Used to create engaging.
Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Buttons library Edit a button instance.
4-1 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animation and Guidelines for Flash Project Design Macromedia Flash Design & Application.
Macromedia Flash CS4. What is Flash CS4? –Animation and interactive authoring program –Tools for complex animation, as well as excellent drawing tools.
FLASH LESSON 1: INTRODUCTION BASIC MOTION TWEEN
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
UNDERSTANDING ADOBE FLASH. The Flash Interface  The flash interface provides you with:  A menu bar  Panels  A work area: stage.
Working with Symbols and Interactivity
XP Tutorial 1 Introduction to Macromedia Flash MX 2004.
Adobe Flash CS3 Revealed Chapter 1 - GETTING STARTED WITH FLASH.
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.
Distributed Multimedia Programming Week - 1. Document Window  The Document Window is divided in to six main components Timeline – The Timeline is where.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols.
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.
Adobe Flash CS4 – Illustrated Unit D: Creating Animation.
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.
Dm 11 - Flash Special Effects Special Effects CREATING.
Macromedia Flash MX 2004 – Design Professional Special Effects CREATING.
Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation.
Macromedia Flash 8 Revealed WORKING WITH SYMBOLS AND INTERACTIVITY.
XP Tutorial 2 Drawing, Adding Text, and Creating Symbols.
Adding Text and Navigation to the Home Page – Lesson 51 Adding Text and Navigation to the Home Page Lesson 5.
Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
Chapter2 Create animation. Objectives Import image Use the blank keyframe Add sound Publish the movie as an SWF file Use a motion tween animation.
Flash Develop Rich Internet Content and Applications –Design motion graphics or build data-driven applications Flash Document = “.fla” filename extension.
Flash Vector Illustration Animation Broadcast Media Mobile Computing Games Game Consoles Internet Edutainment Kiosks.
Video in Macromedia Flash (Optional) – Lesson 121 Video in Macromedia Flash (Optional) Lesson 12.
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.
Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 101 Integrating Components and Dynamic Text Boxes with the Animated Map Lesson.
CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.
Dreamweaver MX. 2 Timeline Overview (p. 480) n Animations can be achieved with DHTML (__________ HTML) using JavaScript code and _____ or later browsers.
Tutorial 3 Creating Animations.
Creating Special Animations
Tutorial 3 Creating Animations.
Flash Interface, Commands and Functions
Creating Complex Animations
Animation Part III: Interactive Multimedia Authoring with Flash
INTRODUCTION TO ADOBE FLASH CS4
Chapter Lessons Create shape-tweened animations Create a mask effect
INTRODUCTION TO FLASH ANIMATION
Develop Rich Internet Content and Applications
Presentation transcript:

Tutorial 3 Creating Animations

XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the Timeline Work with scenes Create animations Create and modify motion tweens New Perspectives on Adobe Flash CS42

XP Objectives Apply a motion preset animation Test animations Create a classic tween animation Use graphic symbols in animations Create a frame-by-frame animation Create shape tween animations New Perspectives on Adobe Flash CS43

XP The Timeline Timeline – Grid appearing below the Stage in the program window – Used to create, modify, and organize layers and frames A few elements of the Timeline – Layers organize the content of a document – Frames contain the content for an animation and represent a particular instant in time Keyframes: frame that contains a new symbol instance or a new graphic – Playhead marks current frame New Perspectives on Adobe Flash CS44

XP The Timeline New Perspectives on Adobe Flash CS45

XP Changing the View of the Timeline Close panels in the Flash program window Move the Timeline Undock the Timeline and display it as a floating panel Modify the dimensions of the frames – Tiny, Small, Normal, Medium, and Large frame widths Adjust the height of the Timeline window New Perspectives on Adobe Flash CS46

XP Frames in Preview and Short View New Perspectives on Adobe Flash CS47

XP Organizing Layers Using the Timeline Add new layers as you create an animation Lengthy or complex animations could have a large number of layers Select a layer to edit its content Name each layer according to its content New Perspectives on Adobe Flash CS48

XP Adding Layer Folders Layer folder: Timeline container holding layers Layers placed in a folder are indented to the right Layer folders help organize content Layer folders can be collapsed to reduce clutter Inserting and using layer folders – Click layer, then click New Folder button – Change the name of the layer folder – Click and drag layers into the new folder New Perspectives on Adobe Flash CS49

XP Adding Layer Folders New Perspectives on Adobe Flash CS410

XP Selecting, Copying, and Moving Frames Actions allowed on one layer or between layers Selecting frames – Individual: click single frame in Timeline – Multiple: click and drag mouse pointer across frames Copying and moving selected frames – Right-click frames and then select Copy Frames – Right-click frames and then select Cut Frames Use Paste Frame on target frame to finish copy/move New Perspectives on Adobe Flash CS411

XP Using Scenes and Multiple Timelines Scenes break up a document into smaller sections Each new scene has a separate timeline Using the Scene panel – Path to Scene panel: Window  Other Panels  Scene – Actions: add, delete, duplicate, and move scenes New Perspectives on Adobe Flash CS412

XP Multiple Scenes in One Document New Perspectives on Adobe Flash CS413

XP Creating Animation Displaying frames in rapid succession Tweened animation – Developer creates content for beginning and ending frames – Flash creates content for the in-between frames Frame-by-frame animation – Developer creates content for each frame New Perspectives on Adobe Flash CS414

XP Creating a Motion Tween A motion tween is an animation where an object changes its position, rotates, scales in size, or changes in color – In Flash, these are called object-based animations New Perspectives on Adobe Flash CS415

XP Creating a Motion Tween To create a motion tween animation: – Add an instance of a symbol or text block at the start of the animation – Apply a motion tween to the object – Flash creates a 24-frame tween span – Modify object properties New Perspectives on Adobe Flash CS416

XP Motion Tween Properties New Perspectives on Adobe Flash CS417

XP Creating a Motion Tween New Perspectives on Adobe Flash CS418

XP Modifying a Motion Tween You can change the properties of the target object anywhere within the tween span or by changing the curve of the motion path – Flash automatically adjusts the rest of the motion tween New Perspectives on Adobe Flash CS419

XP Using Motion Presets A motion preset is a prebuilt motion tween animation – There are 30 default motion preset animations – Some default motion presets include: New Perspectives on Adobe Flash CS420

XP Using Motion Presets New Perspectives on Adobe Flash CS421

XP Applying a Motion Preset Animation Click Selection tool Draw a marquee around the object Convert the selected object to a movie click symbol If necessary, move the object Click Window, and then click Motion Presets Double-click the Default Presets folder, and then select a motion preset Click the Apply button New Perspectives on Adobe Flash CS422

XP Testing an Document’s Animation To test an animation on the Stage, on the Application bar, click Control, and then click Play (or press the Enter key). To test a few frames of animation, scrub the playhead along the Timeline header. To test the animation in a Flash Player window, on the Application bar, click Control, and then click Test Movie. To test the animation in a Web page, on the Application bar, click File, point to Publish Preview, and click Default - (HTML). New Perspectives on Adobe Flash CS423

XP Using Graphic Symbols in Animations You can specify which frames to play first with a graphic instance Graphic symbols have their own Timelines To change a symbol instance to a graphic instance: – Select symbol – In Property inspector, click Instance behavior – Click Graphic – Set properties New Perspectives on Adobe Flash CS424

XP Creating Frame-by-Frame Animation Requires content be added to all frames in animation – Example: 15 frames must each be supplied with content Graphic object need not change in every frame Creating a frame-by-frame animation – Start with a graphic object in the initial frame – Add a keyframe where you need the object to change – As you add keyframes, you change the object’s position – Test the animation after all keyframes are added New Perspectives on Adobe Flash CS425

XP Sample Frame-by-Frame Animation New Perspectives on Adobe Flash CS426

XP Creating Shape Tween A shape tween is an animation that takes one shape and transforms it into another shape To create a shape tween: – Create the graphic content at the beginning and ending frames – Flash creates the tweened frames – The object in the shape tween must not be a symbol or grouped object New Perspectives on Adobe Flash CS427