common object example

Summary:

Pow! Wham! Zap! - Create Comic Book Style Action Graphicsin Flash

    ●  Advertising is full of flashy exploding shapes with words that get your attention. Use them in your composition to direct the viewer's eye and add emphasis.


Learn About:

Polystar ToolStroke and Fill ColorsAdjusting Shapes with the Selection Tool Distort TransformFilters

  •   This tutorial is part of the Aesop's Fables and the Drag and Drop projects.


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

Powzap

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

pow

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 and look for a scene where you can use an exclamation …

 

 

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

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


Step #2: Select the Polystar Tool ~

Select the Polystar Tool located behind the Rectangle Tool.


Step #3: 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 =


Step #4: Fill Color ~

Click on Fill Color

… and select Radial as the Fill Style.


Step #5: Set the Gradient Color ~

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


Step #6: The Other Side ~

Then do the right side of the gradient …

You can adjust the value here:


Step #7: Open Properties ~

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

… and select Polygon from the Style drop down.


 

Set the number of sides - approximately 8 for now.

 

Of course, try your own settings and don't be afraid to experiment.

 


Step #8: Drag a Shape ~

Drag your polygon on the stage.

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

Get Adobe Flash player



Step #9: Adjust the Shape ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

selection tool

… pull the corners of the shape …

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

Get Adobe Flash player

… until you get something like this:


Step #10: Distort the Shape ~

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

free transform tool

… click on the image and distort the shape slightly

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

Get Adobe Flash player


Step #11: Copy the Image ~

Right-Click and copy the image …

right click

… make a New Layer and paste what you copied.

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

Get Adobe Flash player


Change the color and adjust with the Free Transform Tool so the inner shape is slightly smaller and inside.

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

Get Adobe Flash player


Step #12: Add Text ~

Add a new Text layer ABOVE your shape layers …

text top

… select the Text Tool or hit the keyboard shortcut letter (t) and type your text.

text tool


Type something you can use in your project!

wham

 


Step #13: Rotate the Text ~

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

free transform tool

… and adjust the text.

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

Get Adobe Flash player



Step #14: Break Apart the Text ~

Hit Cmd (⌘) + B + TWICE!


Now you can skew the text.

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

Get Adobe Flash player

 

 

Hold Cmd(⌘) and drag the corners:

 


Step #15: Make a Movie Clip ~

Select EVERYTHING and hit f8(or Right-Click and select: ) to make a Movie Clip.

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

Get Adobe Flash player


Step #17: Double Click on the Movie Clip AGAIN ~

Double-click on the new symbol AGAIN to edit it.


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 #18: New Keyframe ~

Right-Click on approximately frame 10 or 15 and Insert Keyframe:

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

Get Adobe Flash player


Step #19: Make the Shape Bigger ~

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


…then, holding Alt (⌥) + Shift make the shapes a little bigger:

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

Get Adobe Flash player


Step #20: Motion Tween ~

Right-Click between keyframes 1 and 15 - select "Create Classic Tween"

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

Get Adobe Flash player


… and hit the keyboard shortcut: Cmd(⌘)+Enter to view your work!

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

Get Adobe Flash player



Step #21: Make it go Backwards ~

Now go back to Frame 1 keyframe - Right-Click and select Copy Frames

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

Get Adobe Flash player

… click on Frame 30 (or twice the distance from Frame 1) …

… Right-Click and Paste Frames.

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

Get Adobe Flash player

Lastly, Right-Click between frame 15 and 30, and select Create Classic Tween.

create-classic-tween.jpg


Step #22: Filters ~

Go back to Scene 1 …

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

Get Adobe Flash player

… go to: Window > Properties > Filters & add Drop Shadow - Bevel and any thing else that looks good to you …

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

Get Adobe Flash player

… add Bevel too.

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

Get Adobe Flash player


Hit the keyboard shortcut: Cmd(⌘)+Enter to view your work!


Last Step: Save and Attach ~

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.