Now that you have learned the Motion tween, we will move on to the shape tween.
This is a relatively powerful method of morphing shapes in flash.
1. Firstly, if you are not working from the last page, you will need to open flash and create a new document.
Now draw a shape in the main stage.
If you have come from the previous motion graphics tutorial, then right-click on the myShape graphic in the 'Library Panel'. Choose Duplicate and press OK.
fig.1
A new symbol should appear in the 'Library panel'. ('myShape copy' or something like that.)
Rename your top layer 'MOTION'.
Create a new layer above the 'MOTION' layer, and name it 'SHAPE'. Select the first frame in the SHAPE layer.
Drag your duplicated graphic onto the right hand side of the flash project stage (myShape copy).
It is also useful sometimes to hide or lock layers while you work on other ones. These options are found in the flash 'Layers panel' to the left of the flash 'Timeline'. Play with them until you are comfortable you know what they do. (Locking in flash allows you to still see the layers you don't wish to work on or select. The eye hides them completely.)
fig.2
Hide the two layers you are not working on. (MOTION and PICTURE.)
2. Now, right-click on the instance of 'myShape copy' on stage, and choose 'Break Apart' (or press <Ctrl> + <B>).
Only the graphic on the stage has been broken apart, the 'myShape copy' graphic is still in the library. To get rid of it, click the 'Library panel' menu button ( see fig.3 below) and 'Select Unused Items'.
fig.3
Now press <Delete> and whatever is in your library that is not being used will be deleted. You must select unused items first.
3. Select the shape on stage that was just broken apart, and make it red by choosing red in the colour palette, then pick the 'Paint Bucket' tool from the 'Tool panel' and click on your new shape.
fig.4
4. Right, now for the shape tween. Make a keyframe in the last frame of your movie (F6 once you have selected the frame), mine is frame 60.
5. Now select your middle frame in the 'SHAPE' layer and add a keyframe. Mine is frame30.
Now drag your shape across to the other side of the stage. (I have gone from right to left.)
This is what you should have so far.
fig.5
6. Left-click on an inbetween frame in the first half of your movie i.e. anything from 2 - 29 for me. Look above at fig.5 for reference.
Now if you look at the bottom of the screen in the 'Properties panel', you should see an option called 'tween' with a drop down menu next to it.
fig.6
7. Select 'Shape'.
8. Left-click another inbetween frame in the second half of your movie. i.e. for me that would be frame45. Make this a 'Shape' tween as well.
Unlike the motion tween, the shape is taken into consideration during runtime (when you watch the movie) and therefore flash does not convert the keyframes into graphics. This however uses more resources when watching the movie. You won't see your computer struggle with a simple one like this, but if you experiment a little you will find that shape tweens can be quite draining on your CPU.
Also, the timeline changes to green instead of blue, to show you that you that you have assigned a 'shape tween' rather than a 'motion tween'.
REMEMBER: You must keep parts of animation separated on different layers. If you ever see the dotted lines instead of arrows in the timeline i.e. fig.7, the chances are that your have something else (normally a graphic or movieclip) on that layer that can't shape tween.
fig.8 Bad tweening gives you dotted lines...
9. When you preview your movie (<Ctrl> + <Enter>) you should see this. (Hidden and locked layers still show up in the '.swf' that flash creates when you preview your movie.
fig.9
Now you're probably thinking, "so what man, it looks exactly the same just the other way round". Well, hold on because we're coming to the difference.
10. Now press <Q> or select the 'Free Transform Tool' in the 'Tool' panel.
fig.10
11. Select the middle keyframe of your 'SHAPE' layer. Mine is frame30. You should see a new selection box around your shape with selection points around it. Use the horizontal middle point to make your shape thinner.
fig.11
12. Now select the first frame of the 'SHAPE' layer and change the shapes' colour to white. Repeat this for the middle frame and the last frame. (You should only have 3 keyframes in your 'SHAPE' layer.)
NOTE: The reason I did not make it white to begin with is that it is easier to see and work on in a clear colour. This may suit some shape tweening more than others, if there were 100 frames I would make the shape white to start with and change the background colour of the Scene.
13. Lastly, and this is only for the people who have done the complete motion graphics tutorial, unhide or unlock (or both) your 'MOTION' layer, left-click one of the keyframes, left-click the graphic in the 'MOTION' layer, and look down at the 'Properties' panel (where the tween drop down menu was).
You should see an option named 'Color' with a drop down menu beside it. Click on the menu and select 'Alpha'. Now another drop down menu appears to the right of the 'Color' menu. Scrub the slider to 50%.
fig.12
'Alpha' means transparency in many pieces of software.
14. Preview the movie and you should get something like this.
fig.13
The 'Alpha' colour also tweens from 100% pure white to 50% transparent white. This is because it sits on a 'Motion' tween timeline.
15. Now you can see the basis of this effect, work into the scene you have created to make a few of your own movements.
REMEMBER: All movements need their own layer (which you should name). When you create a simple 'Motion tween', make your shape into a graphic first. When you make a simple 'Shape' tween, keep your shape as it is.
If you made a mistake or would like my source file, download it by clicking here.
Flash 8 motion graphics tutorial for beginners. Working .fla
It won't take alot of your time to make it more like this.
I hope you found this flash tutorial useful, and hope that you have learned your way around flash a little bit. Flash is a very exciting program to work with, and I will be adding to this tutorial in the future, so watch this space.
I would also highly recommend that you visit kirupa. It is one of the best resources for flash learning on the web. I will be putting some of their tutorials on here in an easier to understand format and with up to date coding, so don't forget about me.
