Motion tween using Graphic symbols. Creating Motion Tween in Flash:

1. Start Macromedia Flash with new document.
2. Go to Modify>>Document (Keyboard Shortcut Ctrl+J) and set document properties as below.



Width=400pixels
Height=200pixels
BG color=#0077B0
Frame Rate=30fps
Leave rest all properties as is.

3. Double click on layer name in the Timeline and rename it as background. You can also rename the layers in the layer properties. Right click on the layer and select properties and type ?Background? in the name field. Leave all other properties as is.

4. Using line tool (Keyboard short cut N) , hold shift and draw a black line in the center of the document and Type A and B at left and Right as shown in below example:



Tip: To draw straight line using line tool, hold shift key while drawing.

5. Create New layer above background layer and name the layer Car (To insert New layer click the + icon extreme left bottom of the timeline).

6. Creating Car graphic:

To Create car graphics follow these steps:

(1) Lock the background layer to avoid accidental displacement of the objects that are drawn on background layer. To lock any layer just click on lock Icon (Beside Eye Icon).To unlock click again on same Icon.
(2) With the help of rectangle tool, Oval tool and line tool draw a small Car at position A on the layer named car as shown below:

You can choose any colors for car. And make sure that the Car Graphic is drawn on Frame number 1 of the Car layer.

 

Converting Car to Graphic symbol:

(1) Select Selection tool and drag a selection line around the car to select whole Car graphic.

(2) Go to Modify >> Convert to Symbol to open Convert Symbol dialogue box. Choose. Symbol behavior as Graphic and name of the symbol Car. See the below example:

Click Ok.

(3) All graphics that you create will be stored in a Library. To access library the keyboard shortcuts are Ctrl+L or F11. The library panel opens right of the screen where you can see the Car Graphic that you just Created.

You can drag any number of car graphics on stage. But for this tutorial only one Car graphic symbol is needed.

Motion Tween:

To add animation to Car graphic you need two key frames . First Key frame is starting position of Car at point ?A? and second Key frame is ending point of car at point ?B?.

We have already created starting point of car key frame at frame No.1 on to the Car layer in time line. Following steps describes the Motion tween process.

(1) Left click on frame no 40 of the car layer to highlight the frame and again right click to access options menu and select insert key frame from the dropdown options menu.

(2) You can see a black spot which indicates that key frame is inserted at that particular frame.

(3) Go to stage and drag Car graphic to point B.

(4) Right click anywhere between frame No.1 and Frame No.40 in the Car timeline and select ?Create Motion Tween? option from dropdown menu. If everything you did correct you can see an arrow starting at frame 1 and pointing toward frame 40 with light blue highlighted background. Your time line and the Car graphic position should be as shown below:



To play animation in flash player press Ctrl+Enter. You can see the Car moving from A to B and looping thereafter. To stop Car at Frame B you need to insert a stop action at frame 40 on separate layer called Actions. Learn about actions in upcoming tutorials.
:) Tutorial Composed by:
Coolgraphs