Adobe Illustrator continues to receive praise from the press. Read our materials to discover the joys of using it on your own.  Home Vector Graphics Adobe Illustrator Fireworks Animation
Your Ad Here

Fireworks Animation


1. Draw a small dot using the ellipse tool and fill it with a light blue color. Make a bigger dot above the first one.

image 1

2. Go to 'Object > Blend > Blend Options' and use the following settings. Select both dots and go to 'Object > Blend > Make Blend'

image 2

3. Draw a path with the pen tool to make a small arc next to your blend. The stroke and fill of your path do not matter.

image 3

4. Select your path and your blend of dots and go to 'Object > Blend > Replace Spine'. This will make your blend follow the path.

image 4

5. Copy your bigger dot ('ctrl+c' to copy, then 'ctrl+f' to paste in front), create a new layer, and move your new dot to the new layer. I will call this dot3 from now on. Hide layer 1 for now by clicking the eye next to the layer in the Layers window.

image 5

6. Click the little arrow in the Symbols window (see below). Select the 'Nature' symbol collection.

image 6

Grab and drag the 'Snowflake' symbol on to your canvas. Place the middle of the snowflake on top of dot3.

image 7

7. With your snowflake symbol still selected, go to 'Filter > Distort > Pucker & Bloat' and use the following settings:

image 8

8. Select dot3 and the snowflake and blend them: 'Object > Blend > Make Blend'. Now unhide layer 1 and you should see the result below. In the next step, you will duplicate everything.

image 9

9. Select and copy everything and flip it horizontally (Go to 'Object > Transform > Reflect' and for 'Axis' select "Vertical'). Now select your new snowflake object (called 'Snowflake 2' by default) and the 'Symbol Stainer' tool (circled in red below). Select a shade of red and click the snowflake symbol to change it's color to red. Now select your copied blend of dots and give each dot a red fill.

image 10

10. Now you have another firework that is red and goes in the opposite direction. I hid all of the blue firework objects to make it easier to see the red.

image 11

11. Here is the final result before animation. I made the dot blends a little smaller (optional). Arrange your objects in to 4 layers like so:

layer 4 - red snowflake blend
layer 3 - blend of red dots
layer 2 - blue snowflake blend
layer 1 - blend of blue dots

The order of layers will determine the sequence of the animation.

image 12

12. Go to 'File > Export', type in "animation" for the file name, then for 'Format' select "Macromedia Flash (*.SWF)"

image 13

Use these settings. Things you need to change are circled in red. Basically, what you're doing is converting each blend into it's individual steps so we can display one step in each frame of the animation.

image 14

13. Open up the HTML file that Illustrator created (in our case "animation.html") and enjoy.



About the Author:

SlickTutorials offers clear and detailed tutorials for Photoshop and Illustrator.

Author's URL: SlickTutorials
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two-dimensional or three-dimensional space. More Vector Graphics: Most Popular Materials | Fresh Materials | More Adobe Illustrator Tutorials at Vectorials.com

Add comments to "Fireworks Animation"

Only registered users can write comment

No comments yet...