Chiru's Education: Making a Lava Lamp

Making a Lava Lamp

Creating the bulb and base

Animating the Lava

Construct the movie

Script a button

A. Create the bulb

Using the rectangle tool, create one tall rectangle for your bulb with a black stroke color and no fill for now.
Using the line tool, draw a horizontal line through the rectangle at about 1/3 from the bottom. Place a vertical line down the middle of your rectangle from above the top to below the bottom.
Grab the intersection of the horizontal line and the rectangle, drag that corner out from both sides, as equal as possible, about 1/2 the width of the rectangle. Do the same to the top and bottom sides of the original rectangle, dragging out about 1/4 the width of the original rectangle. Using the arrow tool mouse over in he middle of the top and bottom halves and drag them out to create smooth arcs.
Click the center vertical line one and remove the line by hitting delete. Remove The other three sections of that center vertical line by repeating the process.
Click on the fill tool (paint bucket) and select the background color. Open the Fill tool. Select Linear Gradient. A black to white gradient should come up. Move the white slider to the middle of the gradient. Click on the area where the white slider WAS and a new color swatch comes up. Click on the swatch and then the color pallet on the right and select black as your color. (The example used a Dark green in place of the black.)
Using the fill tool, fill the TOP part above the horizontal guide line with this gradient.
Click on the options for "Transform Fill" while your fill tool is selected and then click on your gradient. move the center point to the right of center of your image, still within the borders of the gradient, and rotate the gradient so the white line is parallel with the right line. squeeze or stretch your gradient so that there is grey on either side of the white, and no black shows.
Click on the fill tool (paint bucket) and select the background color. Open the Fill tool. Select Linear Gradient. The previous gradient will come up. Move the white slider slightly so the gradient is not identical (this prevents the grouping of the two gradients as one).
Using the fill tool, fill the Bottom part above the horizontal guide line with this gradient
Click on the options for "Transform Fill" while your fill tool is selected and then click on your gradient. move the center point to the right of center of your image, still within the borders of the gradient, and rotate the gradient so the white line is parallel with the right line. squeeze or stretch your gradient so that there is grey on either side of the white, and no black shows.
Using the arrow tool mouse over the horizontal line inside the image and drag it from the center to give it a rounded appearance.
Using your arrow tool, click once on the Horizontal line separating the top and bottom and click delete. Do the same for the horizontal lines outside the object
Highlight your work and select the menu INSERT => CONVERT TO SYMBOL. Call it bulb and give it the properties of a graphic.

B. Create the Base

Create a square using the rectangle tool with black line color, and white to black to white linear gradient (see gradients above)
Draw a Vertical line down the middle of your square (as a guide).
Drag the top and bottom lines down about 1/4 of the height along the vertical line.
Bend the top two lines inward and the bottom outward to give each a smooth curve.
Click the line tool and add a line from the top left corner to the top right corner. bend this outward slightly.
Remove all parts of the vertical line (guide)
Using the fill tool =>transform gradient to adjust your gradient to move the center to the right side of center of your image and squeeze to make the black to show up on the image.
Using the Fill tool and the fill panel create a new gradient. You will need to adjust the gradient that is default or when you use it this will be grouped with the adjacent gradient. Move the center white color over a small amount.
Add This linear gradient to the top oval.
Adjust the top gradient using the gradient options => transform tools.
Place the white vertical line just off (right) center in the main part of the shape. with black way off the image. Rotate the gradient so the center white is going from the off center line on the main fill part back to the opposite side ( like 5 and 11 o'clock, or 7 and 1 o'clock.)
Highlight all and click INSERT => convert to symbol. Call it base

C. Animating the Lava
Creating the Lava Shape change.

Create a new symbol. Call it lava and select movie clip.
Create an oval shape using the Oval Tool of in Frame one of Layer 1.
Highlight the oval and click on Insert=> convert to symbol. Call it Lava Stop.
Step back in your movie clip by clicking Edit => Undo to back up so that your oval is no longer a symbol.
Highlight frame 25. Right click on Frame 25 and select INSERT KEYFRAME.
Right click on Frame 60 and select INSERT KEYFRAME.
Click on Frame 25. Edit the shape in Frame 25 to an odd shape like a horseshoe by bending the stroke lines.
Click on Frame 1 and open your properties inspectorl by clicking windows => properties. Select tweening = shape. Do the same for frame 15.

Creating the Lava Movement.

Create a New Symbol and call it Moving Lava. Set this as a Movie clip. Open this symbol.
In Frame 1 drag the Lava Symbol from the library to your stage
Right click on frame 30 and insert a KEYFRAME.
Right click on frame 45 and insert a KEYFRAME.
Right click on Frame 60 and Insert KEYFRAME
Right click on frame 75 and insert a KEYFRAME.
Right click on frame 100 and insert KEYFRAME
Right click on Frame 120 and Insert KEYFRAME.
Click on frame 45. Highlight the image and using the move tool, move it to the top of your bulb image. Align the lava from frame 60 in the same location.
On frames 30 and 75 you will resize the image to a very narrow and long image so it nearly fills the bulb inb height, but has gotten narrow in width.
Select the frame properties of Motion tween for frames 1, 30, 60, 75.

Creating a Second Lava Movement

Open your library by clicking Windows => Library
Right click on the symbol Moving Lava and select duplicate. Name this Moving Lava 2.
Open the symbol moving lava 2 to edit it.
We will need to have a second lava on a different time interval then the first.
Highlight frame 1. Click the menu Edit => Copy. Grab the dot representing a keyframe for frame1 and drag it to frame2.
Click back on frame 1 and select edit paste in place.
While frame 1 is highlighted, insert frames by hitting the F5 key about 35 or more times.
Now you are ready to construct your movie.

D. Construct the movie
Setting up your layers

Clean off all symbols from your main movie stage.
Rename layer1 BASE
Insert a layer and call it Bottom Bulb
Insert a layer above that called lava1
Insert a layer above that called lava2
Insert a layer above that called top bulb and top
Insert a layer above that called Labels
Insert a layer above that called Actions

.FRAME 1: Creating the lava lamp in the OFF state.

The first frame will be your lava lamp when it is off. Click on frame 1 layer 1 and drag the base into this frame.
Click on layer bottom bulb, frame1, and place the bulb on top the base. Resize the base as needed. highlight the bulb and opent he effects panel. Set tint to black at 50%
Click on lava2 layer frame 1 and drag the "lava stop" symbol onto the stage. position it atop the base. Resize as needed.
Click on layer 1 of frame top bulb and top. Drag the bulb from the library onto the stage and position it above the bulb. You may want to highlight both and use the align tool to orient them in identical positions. Lock the bottom bulb layer and click on the bulb. Open the effects panel and Set the alpha to 37.
Drag the base onto the stage and resize it to fit the top of the lamp.
On frame 1 of the labels layer set the FRAME name to OFF.
On frame 1 of actions insert an action of STOP by pulling up the actions panel (windows => actions) click the + symbol and then basic actions => stop.

FRAME 2: Creating the lava lamp in the ON state.

Click on the base frame 2. Hit your F5 key. This will insert another frame into the keyframe on 1
Click on Frame 2 of the bottom bulb layer and then hit F6. This will insert a new keyframe exactly like the one before it. click elswhere on the stage.
Click directly on the bulb to select the symbol. Open your properties inspector. Set color to Advanced. Click on the settings button to bring up the advanced settings. Set the values as follows
1. R 51
2. G 255
3. B 0
4. Alpha 47%

Click on Frame 2 of the lava 1 panel and drag moving lava 1 there. Double click the symbole and ajust the frames for the height of the Lamp bulb.
Click on Frame 2 of lava 2 and drag the moving lava there. Align both lava using onion skinning to where the lava stop is on frame1.
On frame 2 of the top bulb and top, hit the F5 key.
On the labels layer on frame two insert Blank Keyframe and on the frames panel, name it ON.
On the actions layer for frame two, insert a Blank Keyframe, and then add a stop action like described above.

Now you are ready to make and script the button.

Creating the control mechanism/buttonMaking a button.
1. Select frame 1 of the bottom bulb layer. Select the Rectangle tool.
2. Set the fill color to be the green radial gradient on the bottom of the color palette. Select the line color as black.
3. Draw a rectangle on the stage where it is blank.
4. Using your arrow tool, highlight the rectangle and select the menu Insert => convert to symbol. Call it Button and select the property of button for this symbol.

5. Double click on the button symbol on the stage. In the Button, right click on the second frame and INSERT KEYFRAME. Click on the fourth frame and hit your F5 key.
6.

On Frame number two, highlight the button and select the fill color of the white to black radial fill color.
7. Double click on the stage to bring you back to the movie.
8. Highlight just the button on the stage, select edit=>copy.
9. Click on frame 2 of the bottom bulb layer. Select Edit Paste in Place.
Action Scripting the button.
1. Click on the button on frame 1 to select it. Open your actions panel by clicking the menu window=> actions.
2. Click the + symbol on the actions panel and select actions=> Movie Control=> goto..