animate tutorial

Adobe Animate Tutorial Create Spinning Stars

A fun Animate tutorial is to create spinning stars. Follow the instructions to make a movie clip symbol of a star that can be inserted onto the stage many times. To make the symbol you will need to draw a star in the Editing Pane, convert it to a graphic symbol, and then create a motion tween. Afterwards, you will insert the movie clip onto the stage. Let’s get started!

This Animate tutorial is from the technology project, TechnoAnimate. It is an extension activity that combines students’ existing knowledge of illustration and animation techniques to enrich their learning further. They create spinning stars and add them to their space adventure cartoon. The Adobe Animate lessons by TechnoKids are ideal for high school students and beginners.

Create a Movie Clip Symbol

A movie clip symbol is a saved animated sequence. It is stored in the Adobe Animate Library. Just like a real library that provides access to a range of resources, the Animate Library stores graphics, movies, and sound files. The Library simplifies animation. As a result, an animator can quickly add saved files onto the stage, using it again and again to create scenes.

In your case, you will be adding many stars to the stage. This will create a night sky. When you add a movie clip symbol from the Library onto the stage, Adobe Animate will loop the animation. This creates a fun-looking scene of twirling stars.

Your first task is to create a movie clip symbol that will store the animation in the Library. Let’s get started!

  1. Create a new document in Adobe Animate. Save the file as stars.
  2. From the Insert menu, select New Symbol.
  3. Type spinning star in the Name box.
  4. Click the Type arrow. Select Movie Clip. Click OK.
IMPORTANT: Pick MOVIE CLIP as the Type.

Draw a Star

When you create a movie clip symbol, the Editing Pane opens. It is a canvas placed over the stage. Follow the instructions to draw a star using the Polystar Tool.

  1. From the Tools Panel, select the Polystar Tool.

TIP: Are you having trouble finding the tool? The Polystar Tool is on the Rectangle flyout menu. Press the R key to select the Rectangle. Now right click on the Rectangle tool and select Polystar Tool from the menu.

  1. Turn Object drawing mode ON. TIP: Press the J key until the Object Drawing mode symbol turns darker. It will be at the bottom of the Tools Panel.
The symbol will be darker.
  1. From the Properties panel, set the star appearance by selecting a fill color, stroke color, stroke size, and style.
If you cannot see the Property Inspector from the Window menu select Properties.
  1. In the Tool Options area, pick the settings:
    • Click the Style arrow and select star.
    • Set the Number of Sides to 5.
    • Set Star point size to a value between 0.5 and 1.
Change the Style to STAR.
  1. Draw a star in the center of the Editing Pane.

TIP: To resize or move the star, use the Free Transform Tool on the Tools panel. To select it, press Q on the keyboard.

Convert Star to a Graphic Symbol

You are going to apply a motion tween to the star. A motion tween is a type of animation that moves an object from one position to another over time. It can only be applied to graphic symbols. For this reason, you must convert your drawing.

  1. From the Tools Panel, select the Selection Tool. Or press the V key on the keyboard to pick the tool.
  2. Select the star.
  3. From the Modify menu select Convert to Symbol.
  4. Type star in the Name box and set the Type to Graphic. Click OK.
You must do this step so that a motion tween can be used to spin the star.

Create a Motion Tween

  1. From the Insert menu, select Create Motion Tween.
  2. In the Timeline, drag the end of the tween to the desired frame in the Timeline where you would like the motion to end. For example, Frame 60.
  1. Select Frame 1 in the Timeline.
  2. Spin the star:
    • From the Properties panel, click the Frame tab.
    • In the Tweening area, select Clockwise from the Rotate box.
    • Set the Count to 1x.
Adjust the Tweening settings to spin the star.
  1. Move the playhead or press the ENTER key to view the animation.
  2. When done, click the back arrow to return to the stage.
Close the Editing Pane.

Add Spinning Stars to the Stage

Great news! You are ready to add your spinning star many times to the stage.

  1. Click the Library tab.
  2. Drag the movie clip spinning star onto the stage from the Library.
Add spinning star NOT star. Star is a graphic and will not animate.
  1. To resize or move the star, use the Free Transform Tool on the Tools panel. To select it, press Q on the keyboard.
  2. Drag two more stars onto the stage from the Library.
Do not worry if you cannot play the animation. Read the next instruction.

Test the Scene to View the Animation

IMPORTANT! Look at the Timeline. The movie clip takes up only ONE FRAME. This means, you CANNOT see the animation by dragging the play head or pressing ENTER.

A movie clip symbol only takes up one frame.
  1. Select Test Scene from the Control menu. Watch the scene.
  2. When finished, close the Preview window.
A movie clip must be previewed to see the animation.
  1. From the File menu, select Save.

Time to Get Fancy

Great work! Your stars are spinning. Below are some ideas if you want to do EVEN MORE with your scene.

Do you want a dark sky? You need to change the stage color. To do this, click anywhere on the stage. From the Properties pane, click the Doc tab. In the Document Settings area, click the Stage box. Pick a color.

Do you want different colored stars? You need to adjust the tint. To start, select a star. From the Properties pane, click the Object tab. In the Color Effects area, click the None arrow. Pick Tint. Click the box beside Tint and pick a color.

Do you want a star to move across the stage? Okay…this is more advanced. First, insert a new layer on the Timeline. Next, drag a spinning star movie clip from the Library onto the stage. From the Insert menu select Create Motion Tween. Insert a keyframe into Frame 120. With Frame 120 selected, drag the star to a new position on the stage. You did it! Move the playhead to see the star move.

Do you want to export the file as a video? On Layer_1 add a keyframe to the Timeline in Frame 120.
From the File menu, select Export > Export Video/Media. Pick the H.264 format. Click Export.