Animated Lights For Your Christmas Tree!, Swishmax - beginner Options

[RedDragon]

Hi, in this tutorial I will show you how you can easily add some animated lights to your Christmas tree. As an extra you can add a function that switches off the lights, so you get a better view at the Christmas-lights.

End-result

Open a new document in SwishMax, and import the image of your choice. I went for a fake tree from this site



Once you've imported the tree, you can start drawing the lights. Several ways to do this, I choose the easy way, a circle with a radial gradient.

Select the Ellipse Tool



In the shape panel, fill in the following settings, pick a yellow of your choice:



Draw a small circle on the tree



In the outline panel, rightclick and select Convert - Convert to Sprite. Click on the sprite and add the following code in the Expert Panel:

CODE

onFrame (80) {
    gotoAndPlay(1);
}

When the sprite is opened, you will see the circle in the timeline, add a fade-in and fade-out effect:



What you have so far is 1 light that will fade in and fade out in a continuous loop. Next step is to copy this sprite a number of times so that the entire tree gets filled with lights.



What you have now is a tree with lights that go on and off simultaneously. If that is what you want you're done, if you want them to appear in a more or less random way, add place effects in the main timeline. Do this by rightclicking in the main timeline, and selecting 'Place'.



As you can see, I added a stop effect after the last place-effect.

If you want to add a light switch, you can follow the next steps too, otherwise you are set to go!

------------

Select the rectangle tool



In the shape panel, select black with 75% transparancy



In the outline panel, rightclick and select Convert - Convert to Sprite. Go to the sprite panel and name the sprite 'night'. Move the sprite on top of the tree, but under the lights!



Enter the following code for this sprite in the expert panel:

CODE

onFrame (1) {
    setLabel("off");
}
onFrame (2) {
    stop();
}
onFrame (3) {
    setLabel("on");
}
onFrame (4) {
    stop();
}

The entered code will result in this:



Now select the rectangle tool again, and add a new shape, with transparency set to 0%.

Convert it to a sprite and name it 'switch'.

Select the shape, copy it and then right click and select 'Paste in place'. You now have 2 hapes in exactly the same position.

Open the expert panel for the sprite and enter the following code:

CODE

onFrame (1) {
    setLabel("_1");
}
onFrame (2) {
    stop();
}
onFrame (3) {
    setLabel("_2");
}
onFrame (4) {
    stop();
}

Select the first shape, and enter this code:

CODE

on (press) {
    _parent.night.gotoAndPlay("off");
    gotoAndPlay("_1");
}

Add a remove effect on frame1, and a place effect on frame3

Select the first shape, and enter this code:

CODE

on (press) {
    _parent.night.gotoAndPlay("on");
    gotoAndPlay("_2");
}

Add a place effect on frame1, and a remove effect on frame3

This results in the following timeline:



And you're done!! If you followed all the steps correctly, you should now have something like the tree below

Merry Christmas!

[Eddie_K]

I can feel the Christmas spirit already

Simple and clean tut Red! Thanks

[*D*]

Awesome results Rick and that tree is pretty kewl love the click and change.

[alias.infnit]

That's great

[velvis]

ok but now tell me how to do it in FLASH!

[Daisy__]

Wow!! That's a great tutorial and the result is Have to try it!


Thank you!

[Faakher]

its realy cool....
Thanks for sharing....

Faakher

[erbe0279]

really great but I've noticed it to late :/

[cleigh]

Great info that can be applied in other general animations. Thanks

[RedDragon]

You're welcome