Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Star Rotating in Flash

    ●  You need something to entice your viewers look further than just the opening part of your work.

    ●  Part of what makes someone want to click to view your work is animation - your buttons have to DO SOMETHING.


Learn About:

PolyStar ToolFiltersText Drop Shadow

  •   This tutorial is part of the Aesop's Fables, Drag and Drop Game, and the Run and Jump Game Projects.

  •   It is part of a series:

  •   81_player_Fl.htm   •   82_game_background_Fl.htm  •   83_game_visuals_Fl.htm   •   131_parallax_background_Fl.htm   •   43_stop_scene_game_Fl.htm   •   24_Star_Rotating_Fl.htm  •   65_locked_door_fl.htm

Other People's Work:

Here are examples of work inspired by this tutorial.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #1: Open YOUR PROJECT in Flash ~

Open YOUR PROJECT in Flash …

 

 

… (Remember: all these tutorials are intended to be
applied to YOUR PROJECT) …

… make a New Layer, and lock lock your other layers.

new layer


Step #2: Stroke Color ~

Go to: Window > Color or hit the keyboard shortcut letters: Cmd(⌘)+Shift(⇧)+F9

+ +

… click on stroke …

… and set the stroke color to none = null.


Step #3: Fill Style ~

Click on Fill Color

… and select Radial as the Fill Style.


Step #4: Fill Style ~

Double-Click on " " at the end of the color spectrum and select the color you want.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



Step #5: The Other Side ~

Then do the right side of the gradient …


The idea is to lower the Value of one side so it's a darker color, like this:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #6: Select the Polystar Tool ~

Select the Polystar Tool usually located under the Rectangle Tool.


Step #7: Open Properties ~

With the Polystar Tool still selected, click on Options in Properties …

… and select Star from the Style drop down.

Change the number of sides and the star point size.

star sides

 

Change the Number of Sides and the Star point size to whatever you like …

 

You DO NOT have to use these settings!

Do your own THinG!

Try different stuff!


Step #8: Drag a Star Shape ~

Drag your star on the stage.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #9: Movie Clip ~

Double-Click the star to select both Stroke and Fill …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… then hit (or Right-Click and select: ) and select Movie Clip - not Button.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #10: Double-Click the Star AGAIN ~

Double-Click on the Star AGAIN

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Now you are working INSIDE the Movie Clip.
movie within a movie

Remember: A Movie Clip is a movie WITHIN a movie.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #11: Insert a Keyframe ~

Go out about 15 frames - Right-Click and select Insert Keyframe:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #12: Motion Tween ~

Then: RIGHT-click somewhere in between frames 1 and 15 and select "Create Classic Tween"

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



Step #13: Rotate the Image ~

Now - in the Properties menu (Window > Properties) select CCW (Counter Clockwise) or CW (Clockwise) from the Rotate box, whichever way you want it to spin.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

 

 

You don't have to use these settings! Experiment!

 

Step #14: Go Back to Scene 1 ~

Go back to Scene 1 by clicking in the menu bar.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #15: Filters ~

Now, click on the Star, go to: Window > Properties > Filters and click on Filters

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… add Drop Shadow

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and add Bevel too.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #16: Add Text ~

Add ANOTHER new layer and call it Text

text on top

… select the Text Tool or hit the keyboard shortcut letter (t) …

… and type something you can use in your project:

If you're working on a the Drag and Drop Project, type Reset.

If you're working on your Aesops' Fables Project, type Click to Play or something like that.



If you're working on
the Run and Jump Game Project, type Start, WHATEVER you can use in your work!



Step #17: Filters Again ~

Go to Filters again andadd them to your text too:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Experiment with all the filter settings.

 

Try different things - take a risk!


Step #18: Free Transform the Text ~

Then select the Free Transform Tool or hit the keyboard shortcut letter (Q) …

free transform tool

… and Rotate the Text slightly.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step#19: Select the Star ONCE ~

Select the button by clicking ONCE on it.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

 

 

You know the object is selected when it has the blue line around it.

 

Step#20: Name the Instance ~

With the button selected, go to Properties and find the Instance Name area …

instance name

Call it start_btn - spelled exactly correct!

my button


Step #21: Copy the Code ~

Click on your Actions and Labels keyframe where you'd like the pause):

Hit Alt (⌥)alt option key F9 - open the Actions panel and copy this code:

start_btn.addEventListener(MouseEvent.CLICK, go);
function go(event:MouseEvent):void {
nextScene();
}

start_btn.buttonMode = true;

Note: If you're using Frames, use: nextFrame( );


Step#22: Paste the Code ~

Then click in the Code area, clear some space, and Paste

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

It looks something like this:

Hit F9 again to close the Actions panel.

Last Step: Save and View your work ~

View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter cmd enter

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.


  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.