15
Lesson 2 Using Tweens

Graphical Animation - Lesson 2

Embed Size (px)

DESCRIPTION

Tweens!

Citation preview

Page 1: Graphical Animation - Lesson 2

Lesson 2Using Tweens

Page 2: Graphical Animation - Lesson 2

What is a Tween?

Tweening is the process of creating “in-between” frames in an animation.

It is used to create the animation effect of movement, or changing shape.

There are 2 types of tween we will learn today:

Motion Tween Shape Tween

Page 3: Graphical Animation - Lesson 2

Creating a Motion Tween

Create a new Flash Animation. In Frame 1, draw a small shape on the

background, this is the shape we will move.

Insert a Key Frame at Frame 30. Right Click between Frame 1 and Frame

30. Click – Create Motion Tween.

That’s it. Now preview your movie.

Page 4: Graphical Animation - Lesson 2

Creating a Motion Tween You can also speed up and slow down

the speed of your Motion Tween. To speed up, remove frames, to slow

down, add more frames. You can also make the shape accelerate

or decelerate. Make sure you have selected your

Motion Tween, then change the Ease, located in the Property Bar at the bottom of the screen. Set it at -100. Your shape now starts slowly and speeds up. Try it at 100. What happens?

Page 5: Graphical Animation - Lesson 2

Edit the Ease of your Motion Tween here.

Can’t see it? Click the Small arrow shown in the box below to display your Property Bar.

Page 6: Graphical Animation - Lesson 2

Creating a Motion TweenAfter creating your Motion Tween select

the Final Frame, click the Free Transform Tool and change your shape.

We can use this to make objects look like they are coming from a distance.

Try it!

You can rotate, flip and edit your shape to create some interesting looking animations.

Page 7: Graphical Animation - Lesson 2

Task 1

Create an animation of a bouncing ball.

Use motion tweens and ease to try and get the speed and movement realistic.

Page 8: Graphical Animation - Lesson 2

Creating a Shape Tween

A Shape Tween is when one object transforms into a different object.

Create a new Flash Movie. Insert a shape or draw a simple picture.Then, at Frame 30, insert a Blank Key Frame.Select a Frame in the middle, and at the

bottom of your screen, click Tween, and select Shape.

You have created a Shape Tween. Preview it to view your animation.

We can use Ease in the same way as before. Try it.

Page 9: Graphical Animation - Lesson 2

Creating a Shape TweenThis does not always create a clear animation. Use of colours, more than one shape and text

can create strange looking animations, have a play and try to create some smooth Shape Tweens.

If you want to use Shape Tween on Text or an Imported Image, you must select the text/image and Select Modify – Break Apart TWICE before you create your Shape Tween.

Hint: Use Shape Tween with similar Shapes at different parts of the screen to create effects such as shapes coming from a distance.

Page 10: Graphical Animation - Lesson 2

Task 2

Create an animation using a shape tween.

Change the colours and shapes of your object, then change it back to your original object.

You can cut ‘n’ paste the frames to create this movement.

Page 11: Graphical Animation - Lesson 2

Inserting a Background First, create a new Layer, by clicking

the icon shown below. Double click on Layer 1 to change

the name to Background.

Page 12: Graphical Animation - Lesson 2

Inserting a BackgroundMake sure you are on your background

layer.Now find your background, save it and use

File Import – Import to Stage, or just Cut and Paste your Image into the Movie.

Always keep different parts of your animation on separate Layers, it makes editing simpler and tidier.

Make sure you Insert Frame at the end of the animation on every layer to make sure the background does not disappear half way through your movie!

Page 13: Graphical Animation - Lesson 2

Task 3

Create a Flash Movie, that contains a nice photographic background, a Motion Tween and a Shape Tween.

Use a different layer for each part of the animation.

I want the animation to be realistic. Try one of these:

A car driving along the road A plane taking off A train passing by a city A sunrise

Page 14: Graphical Animation - Lesson 2

Task 3

Please save your animation every few minutes.

You must Save and Store your Animation today.

When your animation is complete: File – Export – Export Movie to save your

COMPLETED Image. File – Save As to save your Image that you

have NOT FINISHED. Next lesson we will be uploading your

finished Animation to a simple website.

Page 15: Graphical Animation - Lesson 2

Task 3 I want you to upload this final movie to

the Internet. Use www.webs.com to display your file.

Make sure you upload the *******.swf file.

Sign up for an account and see if you can upload your file...

Email me your web page URL when you are done!

[email protected]