This tutorial covers how to import, cut, position, and animate sprites in Macromedia Flash 8. You will learn how to make the sprite animation below.
Here is the summary of steps:
1) Download sprite sheet
2) Import sprite sheet to Flash
3) Remove sprite sheet background
4) Add frames and remove excess sprites
5) Position sprites correctly
6) Convert sprite to movieclip
What are Sprites?
Sprites are basically small bitmaps or image files that are made up of pixels. Mario, for example, is a sprite.
1- Download sprite sheet
2- Import sprite sheet to Flash
Open Flash 8, then drag the image file from it’s directory, straight onto the stage of Flash 8.
An alternative way is to select File>Import>Import to Stage. Choose the sprite image file in the dialog box, then click ‘open’. The sprite sheet is imported to the stage.
3- Remove background of sprites
This process will transform the sprites into vectors. By transforming the sprite into vectors, you can easily eliminate the opaque background of the sprite.
To do so, select the sprite in the first frame. Then, in the top selection pane, select Modify>Bitmap>Trace Bitmap.
Make sure the settings are as the image below, then click OK.
Then, click on the background of the sprite. it is now a separate area from the character!
Remove the background by press Ctrl+X or Delete.
Remove excess background bits within the sprites.
4- Add frames and remove excess sprites
Firstly, add keyframes to the timeline by pressing F6, until the number of frames is the same as the number of actions/sprites. In this case, 12 frames.
Now we have to ensure that each frame only contains one sprite/action of the character. We do so by removing the excess sprites in each frames.
In the first frame, select all the sprites except for the first action/sprite.
Remove them by pressing the delete key.
In the 2nd frame, select all sprites/actions except the 2nd sprite.
Then remove them. Do the same for the next few frames.
5- Position sprites correctly
In this step, use the Onion Skin view to place your sprites on the same position correctly.
First, click on the Onion Skin icon (refer to image below). This feature enables you to view objects in different frames.
Then, select the 2nd frame, and drag the sprite so that it is moved to the same position with the first sprite/action. Do so for all frames.
One tip to ensure proper alignment, is to make sure the character’s left, or right foot’s position is the same.
6- Convert sprites to movieclip
This step involves creating a movieclip object to hold the frames. This makes it easier to position the character anywhere on the stage.
Firstly, select all frames in the timeline, then right click and select ‘Cut Frames’.
Then, draw a dot or circle (any object will do) using the Brush Tool. Convert it to a movieclip by pressing F8, then click ‘OK’ in the dialog box that pop-upped.
Double click the movieclip to enter it’s timeline. Right click on the first frame, and select ‘Paste Frames’ to transfer the frames into the movieclip.
Now you’re done! Press Ctrl+Enter to view your movie.