CT1514 Flash-2.

Slides:



Advertisements
Similar presentations
INTRODUCTION TO ADOBE FLASH CS4
Advertisements

Flash animation For beginners. Lesson objectives To understand how to animate a ball To understand how to loop animations To learn how to use animation.
Tutorial 4 Creating Special Animations. XP Objectives Create an animation using a motion guide layer Create an animation using a mask layer Animate text.
Macromedia Flash 5 Intermediate Level Course. Animation Basics Playhead In-Between Frames Keyframe Current Frame Number Framerate Current Time Frames.
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
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
3.02 Computer Animation Software and Design Guidelines
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
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.
Chapter 3 Working with Symbols and Interactivity.
CDM105 Session 10 Macromedia FLASH MX 2004 Part 3 : Complex Animation Techniques.
Introduction to Flash FYS100 Creative Discovery in Digital Art Forms Spring 2007 Burg.
Flash II MIS439 Eva Tao March 19, 2007 Source:
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.
CDM105 Session 9 Macromedia FLASH MX 2004 Part 2 : Animation with Motion Tweening and Shape Tweening.
CT1514.  What is Motion Guide Layer?  Controls the movement of objects in a Motion tween animation  How to create a Motion Guide Layer?  Click on.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
© 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 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
Creating a Logo – Lesson 3 1 Creating a Logo Lesson 3.
CSC 361/661 Digital Media Spring 2010 Professor Burg.
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.
© 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.
Week 11 Hands on Flash Pelekanou Olga INF221 INTRODUCTION TO MULTIMEDIA.
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.
Introduction to Flash. A Metaphor Definitions Stage is the rectangular area where you place graphic content, including vector art, text boxes, buttons,
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.
Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation.
Creating an Animated Map – Lesson 91 Creating an Animated Map Lesson 9.
Unit 7 – Desktop Publishing Animation Animation Skills Lesson – Overview of Adobe Flash Canvas TimeLine Tools Properties.
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)
 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.
Layers in Adobe After Effect
Creating Special Animations
Adding Buttons, Actions, and Sounds
Flash Interface, Commands and Functions
3.02 Computer Animation Software and Design Guidelines
Creating Complex Animations
Agenda 1 - Flash continued -
Animation Part III: Interactive Multimedia Authoring with Flash
INTRODUCTION TO ADOBE FLASH CS4
Flash animation For beginners.
Animate Some more advanced concepts
Chapter Lessons Create shape-tweened animations Create a mask effect
INTRODUCTION TO FLASH ANIMATION
CT1514 Flash -3.
Working with Symbols and Interactivity
Develop Rich Internet Content and Applications
Flash Concepts and Demos - Overview
Tweening along a path.
Let Flash do Guessing at Animation for you.
Objective % Select and utilize tools for digital animation production.
Flash Demonstration – Unit 5 – ActionScript 3.0
Exercise : Animated Navigation Structure in Animate (= Flash)
Presentation transcript:

CT1514 Flash-2

Motion Guide Layer What is Motion Guide Layer? Controls the movement of objects in a Motion tween animation How to create a Motion Guide Layer? How to draw a Motion path on the Guide Layer? Sing either the pencil tool or the line tool

Motion Guide Layer Note: the created motion Guide layer will guide a selected layer ( an usually appears above that layer). How to make it guide another layer or several layers? (Hint: Drag-drop)

Working with the (Library Panel) Every created symbol in the current session is saved into the library panel You can import any already designed image as symbol to the library panel from (File  import to library)

Example 1: Motion Guide Layer

Example 2: Motion Guide Layer

Mask Layer For spotlight effects and transitions, use a mask layer to create a hole through which underlying layers are visible. A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. Group multiple layers under a single mask layer to create sophisticated effects.

Example 3 Open a 550X400 new project Name the current layer “Spot light” and do the following: On frame (0) insert a keyframe, draw a circle, and convert it to a symbol. On frame(30) insert a keyframe then move the circle to the opposite end. On frame (60) insert a keyframe then move the circle back to its original position Apply Motion tween on the frames (0) and (30) Add new layer and name it “Text” and type a text (Welcome). Make the “Spot light” layer a Mask layer (Right click Mask) Drag the “Text” layer under the “Spot light “ layer Your time line will be as following:

Grouping Objects You can group any number of object into one object using: Ctrl+G or Modify  Group The objects to be grouped can be: Images Shapes Symbols Texts

Introduction To Action Scripts How to Stop your movie from Repeating? stop();

Introduction To Action Scripts: Automatic Stop How to Stop your movie from Repeating Automatically at a certain time? 1-insert keyframe at that certain time 2-Go to the Action panel then type: Stop(); Note that: Actions are the same as changes, can be applied on a Keyframe only Not a normal frame

Introduction To Action Scripts: Manual Stop How to Stop your movie at any time Manually? 1-Create a button or clickable text on a separate layer 2-Highlight your button or clickable text then go to code snippets -> evant handlers -> mouse click event 3- write stop(); as in the following code : button_1.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler); function fl_MouseClickHandler(event:MouseEvent):void { // Start your custom code // This example code displays the words "Mouse clicked" in the Output panel. stop(); // End your custom code }

Introduction To Action Scripts: Manual Play How to Play your movie at any time Manually? 1-Create a button or clickable text on a separate layer 2-Highlight your button or clickable text then go to code snippets -> evant handlers -> mouse click event 3- write play(); as in the following code : button_1.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler); function fl_MouseClickHandler(event:MouseEvent):void { // Start your custom code // This example code displays the words "Mouse clicked" in the Output panel. play(); // End your custom code }

How to Create a Clickable Button? Add a new layer (for each button) Draw the button Type the button text and place it on top of the button Group (Button + Text) together using ctrl+G Convert the grouped object into a button symbol Select the grouped object then go to the action panel to type the script

How to Create a Clickable Text? Add a new layer (for each clickable) Type the button text Convert the text to a button symbol Select the text then go to the code snippets to type the script

How to Create a Clickable Image? Add a new layer (for each Image) Import the image to library then drag it to stage Type the image text and place it on top of the image Group (image + Text) together using ctrl+G Convert the grouped object into a button symbol Select the grouped object then go to the code snippets to type the script