8/4/2019 Basics of Flash Animation

http://slidepdf.com/reader/full/basics-of-flash-animation 1/2

Basics of Flash Animation

Flash Tutorial to create simple animation using Motion, Shape, Guided Tween andFrame Animation

While working in Flash you will find it really necessary to create simple animation sequences. In this Tutorial you'll learn how to create

Simple Animations in Flash. In Flash, animation can be done in four basic ways:

Motion Tween

Shape Tween

Frame-by-Frame Animation

Guided Motion Tween

It is very simple and neatly explained below.

A. Creating Motion Tween in Flash

1. Draw a vector using any of the drawing tools in Flash, say a small circle and convert it into a symbol ( ) by selecting the

Graphic option and name the symbol say ' '.

F8

ball

2. Click the 20th frame in the Timeline and insert a frame ( ).F5

3. Now right-click the 20th frame in the Timeline and select Create Motion Tween (or Motion option from the Tween panel of 

the Properties inspector) and insert a Key Frame ( ).F6

4. Select the 10th frame and insert a Key frame ( ) and move the ball to a different position say, above the current position

to create a motion sequence (automatically tweened by Flash).

F6

5. Save your work and test the Movie ( ). That's it you have created simple animation using Motion Tween.Ctrl + Enter

Fig: Timeline of Motion Tween

: Use the Color Panel of the Properties inspector to reduce the Alpha value from 100 to 32 for the 1st and last frames to

produce Simple Alpha Tweening as shown in the Example.

Note

B. Creating Shape Tween in Flash

1. You can create Shape Tweened animations using Shape option from the Tween panel of the Properties inspector. Draw a

vector using any of the drawing tools in Flash, say a small circle and remove its border.

2. Click the 10th frame in the Timeline and insert a Key Frame ( ). Now draw another shape say a diamond using the

rectangle tool without a border.

F6

3. Now right-click on any frame in between these two Key Frames and select Shape option from the Tween panel of the

Properties inspector.

4. Save your work and test the Movie ( ). That's it you have learnt how to create Shape Tween in Flash.Ctrl + Enter

Fig: Timeline of Shape Tween

: Only vectors can be Shape Tweened (Not for Symbols). Note both the Tweens have different colors along the Timeline as

shown above. Make sure that the line is smooth without being broken to ensure correct Tweening.

Note

Client Testimonials

Smartwebby's creative

team took our ideas forthe website and built on it,

creating the most

magnificent website we

have today. Their

, should be the

benchmark for all others in

their industry. We never

thought that doing

business with an

international company,

over the internet,

communicating via email

could be so easy!

excellent professional

service, at a reasonable

cost

Read full

quote...

-- Anish Patel (U.S.A)

P.H.P. Associates, Inc.

Flash MX 2004

Tutorials

 

Flash Animation

Flash Symbols

Animation Basics

Flash Graphic Tips

Advanced Buttons

Sound in Flash Buttons

Cool Flash Effects

Flash Text Basics

Flash Actionscript

Flash Custom Cursor

Start/Stop Movieclips

HTML Text in Flash

Showing Time in Flash

Sound On/Off Buttons

Text Scrollbars in Flash

Simple Flash Preloader

Flash Imports Data

Flash & ASP Guide

Introduction

Basics of Flash & ASP

Preparing the Stage

Flash to Database

Database to Flash

ASP data to Flash

Flash Displays data

Flash preloader

Validation of fields

Web site Add-ons

Check out these easy-to-

use, interactive and sticky

web applications for your

web site.

Smart Multi Poll 1.0

Smart Survey 1.0

Smart Quote

Smart Guest Book 2.0

Free Smart GuestBook

Free Smart Referrer

 

Our

should interest you!

Guide to Flash 'n' ASP

Our

professional dreamweavertemplates now include HTML

pages for all links!

Save Time!

Templates Home

Business - 1

Business - 2

Business - 3

Christian/Church

DHTML/Java-Script

Family/Personal - 1

Family/Personal - 2

Flash Templates

Food/Restaurants

Free Templates

Government

Health & Beauty

Hi-Tech/Abstract

Low Cost/General

Learning/Kids

Pets/Animals

Photography

Professionals

Real Estate/Home

Telecommunication

Travel/Leisure

Sports/Recreation

What's New

Hot Link

 Professional Custom Web Design ($275 onwards) Three Custom Designed Logo Options for just $100 Top

Quality Dreamweaver Templates ($9.95 onwards) Download Best Free Dreamweaver Templates Reques

a Custom Quote Client Testimonial

Services Portfolio Rates & Deals Web Products Free Resources About Us

8/4/2019 Basics of Flash Animation

http://slidepdf.com/reader/full/basics-of-flash-animation 2/2

Fig: Timeline of Broken Tween

C. Frame-by-Frame Animation

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Animation' typed as shown in the

example and break it using Break Apart ( ) to separate the alphabets as shown below:Ctrl + B

Fig: Showing Text after Break Apart

2. In Frame-by-Frame animation we create the object for each frame so as to produce an animation sequence.

3. Insert Keyframe ( ) and move the alphabets so as to produce an animation sequence.F6

4. Repeat the above step as far as desired to create Frame-by-Frame animation as shown in the example.

5. Save your work and test the Movie ( ). That's it you have created an animation using Frame-by-Frame

animation.

Ctrl + Enter

Fig: Timeline of Frame-by-Frame Animation

D. Creating a Guided Motion Tween in Flash

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Flash' typed and break it using Break

Apart ( ) as done in the previous example and put each alphabet in different layers and name the layers as shown in

the picture below.

Ctrl + B

2. Insert a guide layer by right-clicking the topmost layer and select ' ' ( ),

draw any path using the pencil tool in the guide layer as shown in the example.

Add Guide Layer Insert-->Timeline-->Motion Guide

3. Now create Motion tween by selecting the object in the 1st frame and snapping its registration point to one end of the path.

4. Snap the object in the last frame to the other end of the path in the guide layer.

5. Repeat the same for all the objects (alphabets) by snapping their registration points to the path in the guide layer.

6. Save your work and test the Movie ( ). That's it you have learnt how to create motion along a guided path.Ctrl + Enter

Fig: Timeline of Guided Motion Tween

Check out these quality free web templates and download them without any registration or sign-up!

Absolutely FREE Web Templates

FREE Web Design Guide

From web design tips & ideas to HTML, CSS Styles, Fireworks & Dreamweaver you'll find all you need to know about effective web site design right here!

Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization

Quality Dreamweaver Templates

 | | | | | | |Home About Portfolio Services Free Resources Quality Dreamweaver Templates Free Dreamweaver Templates Contact Us

Copyright © 2005 www.smartwebby.com - All Rights Reserved. |Privacy Policy Page Top