Create an Animated Lava Lamp for Your Website

If you are in the lava lamp business or want to add a cool-looking lava lamp to the design of your website, I have provided an easy way to do this using Macromedia Flash that will give you an animated lava lamp design to place on your website.

Step 1: Create a New Flash Document

For this first step, we will be preparing the Stage for the size of the lava lamp that we will be creating. In this tutorial, I will be creating a fairly sizable stage for the lava lamp with the dimensions of 100×300.

To set the stage with these dimensions, create a new Flash document and click on the “Size” button within the Properties Inspector. Within the “Document Properties” window that will appear, enter 100 in the width box and 500 for the height. After you have entered these dimensions within the “Document Properties” window, click on the “OK” button and your stage will appear as a vertical rectangle (as shown below).

Step 2: Draw the Lava Lamp

Using the Line Tool from the Toolbox, draw a lava lamp on the Stage similar to the design shown below.

To give the lamp a more realistic and shiny look, select the Paint Bucket Tool from the Toolbox, and then select the Silver Gradient option from the Fill Color palette (shown below).

After the Silver Gradient has been selected from the Fill Color palette, click once in the middle of the top and bottom sections of the lava lamp that you have created. This will fill in the Silver Gradient color on both of these sections to give it a more realistic feel.

We will also be filling in the middle section of the lamp (where the lava will be). To do this, while you have the Paint Bucket Tool selected from the Toolbox, choose a dark blue color from the Fill Color palette. For this tutorial, we will be using the #000099 color. After the dark blue color has been selected, click once in the middle section of the lava lamp for it to be filled with dark blue. Your lava lamp will now look similar to the image shown below.

Step 3: Create Animated Bubbles

In this step, we will be making your lava lamp come to life with animation. To get the lava lamp ready for animation, we will need to make the middle section of the lava lamp a movie clip. To do this, select the Arrow Tool from the Toolbox, and select all of the lines surrounding the mid-section of your lava lamp. You can do this by holding down the Shift key and clicking on all of the corresponding sides.

When all of the sides of the middle section have been selected, the lines will appear thicker with white dots marking them as shown below.

With all of the lines of the middle selection selected, press your F8 key and a “Convert to Symbol” window will appear. From within the “Convert to Symbol” window, enter “Bubbles” (without quotes) in the Name field, select Movie Clip from the Behavior field, and then press “OK.” The middle section of your lava lamp will now be ready for animation.

After the middle section has been converted to a mobile clip and named “Bubbles,” double click on the mid section. This will load the middle section’s timeline for you to create the animations in. You can tell that you are within this object’s timeline, because “Bubbles” will appear just below the Timeline.

Within Bubbles’ timeline, select the Oval Tool from the Toolbox, and choose the Red Gradient from the Fill Color palette. After these have been selected, start to draw an oval within the middle section of the lava lamp. For best effect, place the oval at either the top or bottom of the middle section.

For us to work better, click on the Arrow Tool from the Toolbox and click near the outside of the oval that you have just created. This will select the outline of the oval. Once the outline of the oval has been selected, press the Delete key to remove the outline. This is not a necessity, but will make working with the oval better. Your stage will now look like this:

Step 4: Add Shape Tweening

To make the lava within the middle section of the lamp move around, we will be adding a process called Shape Tweening. To do this, select the 30th keyframe within the Timeline and then press your F6 key. This will extend the first keyframe to the 30th keyframe, and all of the frames between keyframe 1 and keyframe 30 will be shaded.

With the 30th keyframe still selected, and with the Arrow Tool from the Toolbox enabled, move the oval around to a new position within the middle section of the lava lamp. In this example, I will be moving mine to the top. After you have moved the oval to the new desired location, select the Free Transform Tool from the Toolbox. When the Free Transform Tool from the Toolbox has been selected, move the crosshairs of your oval around to make it a new shape.

After you have moved the oval around on the 30th keyframe and morphed the oval into a new shape, select one of the keyframes between keyframe 1 and keyframe 30, and from within the Properties Inspector, select the “Shape” from the Tween option. You will now see the timeline turns green with a solid line through it. This means that applying the shape tweening was successful.

To test a single iteration of the animation of your oval moving from keyframe 1 to keyframe 30, press your Enter key.

To add the realistic effect of the lava coming back down after it has reached the top, we will basically be repeating the shape tweening process. Select the 60th keyframe within the Timeline, press your F6 key to extend the keyframes from keyframe 30 to keyframe 60. With the 60th keyframe still selected, click on the Arrow Tool from the Toolbox and move the oval back down to the bottom of the mid section of the lava lamp. You may also want to use the Free Transform Tool to modify the oval’s shape.

After you have moved the oval to its new location and have modified its shape on keyframe 60, click one of the keyframes between keyframe 30 and keyframe 60 within the Timeline, and select “Shape” from the Tweet menu list within the Properties Inspector to enable shape tweening in the second half of your Timeline.

After all of the shape tweening processes have been completed, click on the “Scene 1” link located just below the Timeline. This will return you to the main Stage for the lava lamp document you have created.

To save your lava lamp creation to be used on a website, click on the File menu and select the Export Movie option. You will then be presented with an Export Movie window to save your lava lamp file as an .SWF file to be used on your website. Your lava lamp file will look similar to the example published below:

Please be sure to leave any questions or feedback regarding this tutorial in the comments section below.

Categorized as Flash

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment