Forum: Log-In | Register | Contact | Shop


SwishMax Tutorials And Resources
Where Imagination Is The Creation

 


Add


Welcome To Swish-Designs.co.uk Have a Nice Friday

Fireworks Effect Swishmax 2 Tutorial

In this tutorial you will learn how to create a realistic looking fireworks effect, using swishscript and the vector tools that come with swishmax along with a little imagination, when i say imagination i will show you the basics you can then experiment and get all different kinds of explosions going on.

Example:




Step.1

open SwishMax 2 and set your movie propertie to 261 x 231 25 fps and black background see fig.1 below.

fig_1fig.1


Step.2

we are going to start with the initial explosion, so select the Elipse tool and whilst holding down the Shift key drag out a smalish circe, give the circle a Radial Gradient colour fill see fig.2 below.

fig.2fig.2


Step.3

duplicate this shape another twice and place in a triangle like shape, one at the top and two at the bottom, once you have done so group the three shapes together as a group and name it explode.
once you have that, group explode as a sprite and name it particle. now group particle together and name it works. your outline panel should now look like fig.2a below.

fig.2a fig.2a

if everything is in order click on the particle sprite now on the timeline select the first frame at the side of the explode group. then click add effect button and add a move effect. once the move effect is on the timeline click on it and then using the up arrow move the group up about 20 pixels see fig.2b below.

fig.2b fig.2b

ok now add the following code to the particle sprite

onFrame (45) {
gotoAndPlay(1);
}
onFrame (46) {
stop();
}

double click on the move action and click on the alpha dropdown box and set to transparent. Your timeline should now look like fig.2c below.

fig.2c fig.2c


Step.3

now to make the explosion work we will be using some swishscript, the same script will be added to each particle we crate throughtout the tutorial. So add the following code to the works sprite.

onFrame (44) {
for (ex=8; ex<50; ex++) {
duplicateMovieClip("particle", "particle" add ex, ex);
setProperty("particle" add ex, _rotation, random(360));
setProperty("particle" add ex, _alpha, random(30)+80);
setProperty("particle" add ex, _xscale, 50+Number(random(60)));
setProperty("particle" add ex, _yscale, 50+Number(random(60)));
tellTarget (("particle" add ex)) {
gotoAndPlay(random(5));
}
}
}

thats it for the explosion. if your press Ctrl+Shift+T to test what you have so far in your browser, you should have something looking like fig.3 below.

fig.3


Step.4

now you have the explosion we need to create some spark trailers, we will create these trailers using the pen tool (p) we want to create a half moon type shape see fig.4 below to see how.

fig.4 fig.4

once you have got the shape give it a linear colour fill and name it streamer see fig.4a below for the radial gradient coulor fill.

fig.4a fig.4a

Now group streamer as a group and name it explode, and then group explode as a sprite and name as particle and then group particle as a sprite and name it works1 just as you did for the explosion. your outline panel after adding the streamer should now look like fig.4b below.

fig.4b fig.4b

if you have everything looking ok so far click on the particle sprite add the move actio as befor but this time starting from frame 1 to frame 41, double click on the move action to get the properties and on the alpha drop down box select to transparent.whilst it is still selected using the up arrow key move your selection up about 25 pixels, your timeline for works1 sould look like fig.4c below.

fig.4c fig.4c

Ok lets add the following code to the particle sprite inside works1 sprite.

onFrame (45) {
gotoAndPlay(1);
}

inow place the following code on the works1 sprite.

onSelfEvent (load) {
for (ex=8; ex<50; ex++) {
duplicateMovieClip("particle", "particle" add ex, ex);
setProperty("particle" add ex, _rotation, random(360));
setProperty("particle" add ex, _alpha, random(35)+80);
setProperty("particle" add ex, _xscale, 50+Number(random(60)));
setProperty("particle" add ex, _yscale, 50+Number(random(60)));
tellTarget (("particle" add ex)) {
gotoAndPlay(random(5));
}
}
}

If you press Ctrl+Shift+T to test what you have so far in your browser you should have something looking like fig.4d below.

fig.4d


Step.5

Ok you are ready for the final burst, the main firework we are going to create a star burst with a trail see the animation below in fig,5 to see how its done.

fig.5 fig.5

name the rectangle shape which you turned into an elongated trianlge trail and leave the star shape named star you can make this main burst whatever colour you want, i have used a linear gradien colour on both shapes. see fig.5a below.

fig.5a fig.5a

now group the two shapes as a group and name explode then group as a sprite and name it particle and finaly group as sprite an name as works2 your outline panel should look something like fig.5b below.

fig.5b fig.5b

click on the particle sprite and on the timeline add a move action on frame 4 over 37 frames
double click the move action and on the alpha dropdown box select transparent. whilst the move action is highlighted move the selection up around 35 - 40 pixels using the up arrow key. then add the following code to particle sprite.

onFrame (45) {
gotoAndPlay(1);
}

your timeline for works2 sprite should look something like fig.5c below.

fig.5c fig.5c

All there is left to do now is add the following code to the works2 sprite.

onSelfEvent (load) {
for (ex=3; ex<50; ex++) {
duplicateMovieClip("particle", "particle" add ex, ex);
setProperty("particle" add ex, _rotation, random(360));
setProperty("particle" add ex, _alpha, random(35)+80);
setProperty("particle" add ex, _xscale, 50+Number(random(60)));
setProperty("particle" add ex, _yscale, 50+Number(random(60)));
tellTarget (("particle" add ex)) {
gotoAndPlay(random(3));
}
}
}


Thats it lets see if everything has gone to plan press Ctrl+Shift+T to test what you have in your browser, you should have something looking like fig.5d below.

fig.5d (final result),

here are a few more examples of what this script can do with some imagination.



you can buy the source file for this tutorial for £2.00.


Item price £2.00
swishmax 2 *.swi file format.
electronic download upon successfull payment.