NameSilo

Tweens And Animations

Spaceship Spaceship
Watch
A tween is a movement between at least two keyframes. There are two types of tweens a motion tween and a shape tween.

Motion tween is a tween where an object’s changes seize and or position smoothly. it is usually a blue arrow linking two keyframes.
pic002.jpg


Creating motion tweens.

To create a tween you first of all have to create two tweens. Draw an object on your workspace. Then you press on key frame 10 for example with the mouse then you press F6. That will create a keyframe. It should look something like this so far.
pic004.jpg


If you press return or enter the red indicator will move from frame 1 to frame 10, but between 1 and 10 there is no change. On keyframe 1 or 10 change the size by the free transform tool or position by the select tool. Right click on the area between keyframes 1 and 10 then press “create motion tween”. If it looks something like this no problem, just right on key frame 10 the one that is not shaded blue and press “create motion tween”.
pic008.jpg
. Now it should look like this
pic006.jpg
.

If you get this
pic010.jpg
then one of the things it means is that not all the objects in keyframe 1 are the ones in keyframe 10. For example an extra object could have been on keyframe 10 that is not on 1. So all the objects on keyframe (kf) 1 should be on kf 10 or else the part that is common in both keyframes will be tweened while the new object will just appear from nowhere. Later in this tutorial I will tell you common used of motion tweens.

Fading text

1) Create a new document
2) Create a keyframe on frames 1
3) On keyframe 1 write “welcome here”
4) Right click on the text and press convert to symbol,
5) Select graphic
6) Create a keyframe on frames 10
7) On the text pres once then in the colour choose alpha change it to 100 to be visible
8) On keyframe 1 change the text’s alpha to 0
9) Click on any frame between keyframes 1 and 10
10) In the properties panel select shape for the tween.

Like before if a keyframe is not highlighted blue, right click on it and press create motion
pic012.gif
to see what i mean.

Shape tweens.

A shape tween is when an object transforms from one shape to another. To make it clearer will be doing three things: changing a square to a circle; “hello” to “how are you”, and also changing a red square to a blue square.

Changing a square into a circle.

1. Create a new document
2. Create a keyframe on frame 1
3. On keyframe 1 draw a square
4. Create a keyframe on frames 10
5. On keyframe 10 delete the square and draw a circle
6. Click on any frame between keyframes 1 and 10
7. In the properties panel select shape for the tween.
8. Like before if a keyframe is not green right click on it and press create motion tween.
pic014.gif
. now your time line should look like this
pic015.jpg


Creating a red square to a blue square

1) Create a new document
2) Create a keyframe on frames 1
3) On keyframe 1 draw a red square
4) Create a keyframe on frames 10
5) On keyframe 10 delete the square and draw a blue circle
6) Click on any frame between keyframes 1 and 10
7) In the properties panel select shape for the tween.
8) Like before if a keyframe is not green right click on it and press create motion tween.

To change colour you select the square for example and then in the bucket in the properties panel change the colour or in the tool bar change the bucket colour to what every you want or from the colour swatches panel on the side. You may have noticed that these steps are very similar to the ones above the.

Changing hello to how are you(morphing text)

1) Create a new document
2) Create a keyframe on frames 1
3) Select the text tool and click on the work area
4) Type hello
5) Go to modify and the break apart
6) Do the above step again
7) Create a keyframe on frames 10
8) On keyframe 10 delete hello
9) Select the text tool and click on the work area
10) Type how are you
11) Go to modify and the break apart
12) Do the above step again.
13) Click on any frame between keyframes 1 and 10
14) In the properties panel select shape for the tween.
15) Like before if a keyframe is not green right click on it and press shape tween in the properties panel
16) Press return or enter.
You will see that you can change the colour of the text on either keyframes to whatever you want but after breaking apart twice. The timeline should look like this.
pic016.jpg


This all I have for you about tweens but here are some common web uses of motion tweens:

-from big to small and vice versa
-from right to left and vice versa as like a marquee
-fade in or out

These are the only ones I can think of right now but there are hundreds of other effects. If you have any problems please do not hesitate to contact me and i will be happy to help.
PS I am sorry i had to start using links as i can't use anymore images.
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Unstoppable DomainsUnstoppable Domains
Appraise.net

We're social

Unstoppable Domains
Domain Recover
DomainEasy — Live Options
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back