Featured Tutorials

adobe,photoshop,panorama,panoramic,images,photos,photo merge,merging,how to,automatic,automatically Panoramic images the easy way with Photoshop PhotoMerge

Panoramic images the easy way with Photoshop PhotoMerge

Creating Panoramic images from your photos is easier than you think, when you know how. So..

swift3d,3D,sci-fi,flash animation,3d flash,swift 3D,flash city,future city,future city model,3d city model,3d city,3ds max,brazil renderer,futuristic city,future world Futuristic city, 3D techniques in Flash

Futuristic city, 3D techniques in Flash

See the tricks behing the advanced Flash animation that was used to bring this futuristic ..

flash tutorials, fireworks, particle effects, flash animation,fireworks in flash,creating fireworks,fireworks movie,fireworks display,how to create fireworks,flash fireworks tutorial,fireworks tutorial Flash Firework Frenzy

Flash Firework Frenzy

Create a realistic particle based firework display using Flash. This technique was once us..

photoshop tutorials, gradient filter, web 2.0 buttons,web 20 buttons,web3 buttons,gradient buttons,button in photoshop,photoshop buttons,button tutorial,create buttons,vector button,vector tutorial Creating Gradient Buttons

Creating Gradient Buttons

In this crazy new world of web 2.0 some designs call for some bright, shiny gradient butto..

flash tutorials, iris window, enter button, animated porthole,iris in flash,iris illustration,drawing an iris,iris in flash,flash iris,flash tutorial,iris tutorial Iris Porthole Door Animation in Flash

Iris Porthole Door Animation in Flash

Very cool effect that could be used for an intro or as an enter button for any web site...

Featured Videos

I often use this text effect for intros or as a button roll over ..

This detailed tutorial will teach you how to create a realistic l..

This video will show you how to draw an eye from scratch in Photo..

This tutorial will teach you some of the basics of the third part..

This tutorial will teach you how to use the new Photoshop CS3 Van..

Flash Fireworks Tutorial -
Creating realistic fireworks in Flash

This tutorial will teach you how to create realistic particle based firework display using Adobe Flash.

Download the FLA source file for this tutorial / wipeout44_fireworks.zip / Flash 8 No Sound

1

The first stage is to setup the flash movie and create the basic shape of the firework particle itself, this is made up of 3 basic shapes, a star, circle and elongated triangle. So go head and create a new movie in flash a width 500 x height 500 pixels then a background colour of black and Frame rate of 20.

2

First create a basic diamond shape using the line tool (you may want to set the line colour to white so that is it visible on the background) then fill this shape in with white using the "fill tool" shown above.

3

Next group this shape using the (CTRL + G), this will stop it interfering with other shapes. Next copy (CTRL + C) and paste (CTRL + V) another copy of this shape, then rotate this 90 degrees. Finally select both shapes by holding down the SHIFT key then group them as one (CTRL + G).

4

Next create a circle shape using the circle tool, then load up the Window -> Colour Mixer panel, set the type to radial and both of the colours to white. Finally select the right hand colour slider and set its Alpha to 0% (this will create a fade from the 100% slider to 0%, in order words white to transparent)

5

The final shape is created using a combination of these two previous techniques, simple create the shape with the line tool, fill it, then use the Colour Mixer to create a gradient 100% to 0% fade. The final step is to then use the Gradient Transform tool shown above to flip the gradient effect 90 degrees so that's its fades downwards.

6

Now left click on each of the shapes and press the (CTRL + G) keys to create each shape as a group (this is a good way of stopped you from accidentally distorting the shapes) Now position all of the shapes in the arrangement shown above, select all, now group them all together using CTRL + G. Finally right click on the new group "Create Symbol" and give it the name "particle".

7

This next step may seem strange but now you will need to click the "Scene 1" link at the top left of the timeline window this will take you back to the main timeline. Once here right click on your new "particle" movie clip and once again select "Create Symbol" this time give it the name "bang" this then sets the "particle" movie within a new movie titled "bang".

8

You should now be (or make sure that your are) in the movie clip editor for "bang", now left click on the "particle" movieclip and give it a global instance name in the Windows -> Properties panel shown above. Then right click on the first frame in the timeline and select "Actions" now enter the following action script code:

Translating this script into something you can understand goes like this n=8; n<50 basically means that it will generate a minimum of 8 and a maximum of 50 particles per bang. The rest of the script basically generates random directions, alpha amounts and sizes for the particles, if you look closely you can probably see this.

9

Close the "Actions" panel and double click on the "particle" movie clip so that you are editing its time line. Now resize the grouped shapes to about 20% of its original size (this will make it easier to animate)

 

10

Now we need to give this particle some motion, so you need to right click on frame 15 in the timeline. Now choose the "Insert Key Frame" option, next drag over all of the frames in the layer, right click and select "Create Motion Tween".

Once again click on frame 15 (left click this time) once you are on this frame click on the particle shape and move it about 100 pixels upwards (see above)

11

Next repeat the same step but this time create a new key frame at frame 30, now move the particle upwards about 50 pixels.

Once moved select the resize tool, then grab the top of the particle and adjustthe height to about 50% of its original size (see above).

12

Once again repeat this step this time insert a keyframe on frame 40, move the particle about 15 pixels upwards. To finish the effect set the alpha for this last frame to 0% in the Windows -> Properties panel.

You will also need to right click on the last frame select "Actions" and insert the following actionscript:

stop();
When entering custom action-script code into the script editor, you will need to turn off the "Script Assist" option. (More flash tips)

 

13

Before we test the final effect you will need to adjust some of your flash movies settings. First load up the File -> Publish Settings menu, select the "Flash" tab and set the version to "Flash Player 6" (this setting has to be applied as for some unknown reason the firework effect script will not function in any other versions) Now click "OK"

Next load up the Modify -> Document menu and set the frame rate to 24 fps (this will ensure a nice smooth firework animation)

14

Now save all your hard work, and test your movie with the Control -> Test Movie menu.

You should end up with something simular to the above. If not go back over the steps.

 Subscribe to our feed

Send to a friend