0

   

How to animate sprite in Flash 8

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

You can download sprites at sites such as sprite-resource.com and reiner’s tileset.com. Choose, download a sprite sheet, extract it, then we can begin animating.

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.

trace_bitmap_sakura

Then, click on the background of the sprite. it is now a separate area from the character!

sakura_cut_background

Remove the background by press Ctrl+X or Delete.

sakura_background_removed

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.

cut_other_sakura

In the first frame, select all the sprites except for the first action/sprite.

other_sakura_cut

Remove them by pressing the delete key.

cut_other_sakura2

In the 2nd frame, select all sprites/actions except the 2nd sprite.

2nd_sakura_cut

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.

 

onion_skin_sakura

drag_sprite_1

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.

sakura_cutframes

Firstly, select all frames in the timeline, then right click and select ‘Cut Frames’.

10_convert_dot_to_mc

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.

sakura_paste_frames

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.

movieclip_sakura

Now you’re done! Press Ctrl+Enter to view your movie.

 

prev/nextAdding motion tween+motion guide to sprites in Flash»