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 R 51 G 255 B 0 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.. 3. Select the following settings Select GotoAnd Stop type = frame label frame = off 4. Click on frame 2, and highlight the button. 5.Click the + symbol on the actions panel and select actions=> Movie Control=> goto. 6. Select the following settings Select GotoAnd Stop type = frame label frame = off 7. Publish your movie.

Shape Tween Vortex

Shape Tween Vortex

This is a lesson in shape tweening gradients, and frame manipulation. Practice the frame manipulations and you will become very fast and proficient at flash.

1. Open a new movie. Open the properties inspector and set the movie properties to a square,

• 500 wide by
• 500 high.
• 12 fps,
• background = Black.

Save your file.

2. Double click your hand tool on your tool box so your stage fits to screen.
3. Select your oval tool. Set the stoke color to black, stroke thickness = 5, solid. Set your fill to a radial rainbow gradient fromt he gradient presets.

4. Hold your shift key down and draw a circle that is larger then the stage so all of the stage is covered.

5. Use your line tool set at 5 pixel thickness and black color to draw a line through the center to split the circle in two. Use the line tool to split those sections so you end up with 4. Split those sections again to end up with 8. Split one more time so you end up with 16.
6. Select your arrow tool. Double click the lines in the middle being careful to only get the lines. hold your shift key down and double click the outline of the circle. This should select all the black lines without any fill. Click Modify=> Shape=> convert lines to fill. Deselect all by clicking  somewhere else on the work area.
7. Click one on the black area. This should select all the black fill. Hit your backspace key to delete the black fill. This should leave a sliced pie.
8. We need to separate the sliced pie to their own dishes so to speak. Click right on frame one of layer 1 so highlight all the contents on the stage and work area. Click Modify=> distribute to layers. Ea slice should now have it's own layer and the original layer should be empty.
9. We need to identify the layers and place them in order so our vortex will go smoothly. We will need to click on them in order and change the name of the layer. Click on the top left slice. Find the highlighted layer in the layers palette and rename it 1. Click on the Number 2 slice, going counter clockwise on the circle. Find it's layer and call it 2. Continue around the circle locating each layer for each slice in order until all the slices are labeled but layer 1. Highlight the unused layer 1 and Click the trash can on the bottom of the layers palette.
10. Open your layers palette up long so you can see most all of the layers if possible. reorder the layers so that 1 is on top and 16 is on bottom. Just click and drag each layer to the new position.

11. Use your arrow tool to Click-drag over all the frame 1 frames on the layers. This will highlight all the layers. Be careful to click-drag from the get go. If you click then clickdrag you will drag the contents of the frame. Open the properties inspector and select Tween = Shape.
12. Click and drag the frame 17 column on the timeline. There is nothing there but there will be in a second. When all the frame 17's are highlighted, hit your F6 key once to insert keyframes in each of the layers on frame 17.
13. With frame 17 highlighted, and keyframes present there, go to the color mixer. The fill color is Radial rainbow.  On the gradient editor, click the first color carrot and then set alpha to 0%.
Click on the second color carot and set alpha to 0%. Do the same for each of the color carrots below the gradient editor.
14. Click back on frame 1 on any layer. Use the arrow tool to Marquee select all of the pie slices on the stage. Select the transform tool. Select the scale option for transform. Hold your shift key down and scale your shapes to a smallish circle in the center.

15. Click-drag in a single motion on Layer 2 from frames 1 to 17 to highlight them all. Then mouse over the layer so you can see the rectangle form beneath the cursor. When you see this, you can drag the selected frames to a new location. Drag the frames to the right 1 frame over.
16. Do the same on layer 3 but drag the content over 2 frames. On layer 4 drag 3 frames. Layer 5 drag 4 frames. Keep going until you have completed the bottom, layer 16. The only layer that has not been moved is the top or first layer.
17. Click-Drag in one motion from layer1 frame 17 straight down to layer 16, frame 17. Hit F6 to insert keyframes on the highlighted frames. The frame on layer 1 will not change. (If your having trouble highlighting the column together, just click on each frame separately in frame 17 and hit F6.)
Click-Drag  The frame 18 Column starting at layer2 and drag down to layer 16. Hit F6 to insert keyframes on that column.
Concept:: Our Movie is going to be 17 frames long, with the frames to the right of frame 17 being transported or moved to the blank keyframe prior to the start of the tween on the layer. This will allow us to make a flowing animation for our vortex with no pauses.
18. Click on the frame on layer 2, frame 18. Since it is a keyframe, and the previous frame is a keyframe we can simply clickdrag the frame over to frame 1 an drop it there. For now ignore the incomplete shape tween leftr on frame 18.
19. Click-drag to select the layer 3 frames 18-19. Click drag the frames to over frames 1-2 and drop. These frames will fill 1 and two. For now, ignore the incomplete shape tween left on frame 18-19.
20. Click-drag to select the layer 4 frames 18-20. Click drag the frames to over frames 1-3 and drop. These frames will fill 1 and two. For now, ignore the incomplete shape tween left on frame 18-20.
21. Click-drag to select the layer 5 frames 18-21. Click drag the frames to over frames 1-4 and drop. These frames will fill 1 and two. For now, ignore the incomplete shape tween left on frame 18-21.
Continue working down the layers, moving the frames from 18 up to the beginning of the animation. Leave the residual incomplete shape tween frames at the end of these layers for the next step.
22. Click drag in the single motion to highlight all the incomplete shape tweens from frame 18 to 32 or higher. 
23. Right click and select Remove Frames from the menu.
24. Your project file is ready to publish.

• Click File=> save
• Click File Publish. Your movie and html files should be in the same folder as the .fla you saved.

How to Create an animated image in Flash ?

How to Create an animated image in Flash ?

Creating a file

Let’s start by opening Flash CS3 and creating a new file. From the File menu, select the New option. In the dialog box that appears, select Type: Flash File ActionScript 3.0. Even though we won’t be using ActionScript at all in this example, let’s keep the file compatible with the most recent iteration. Your layout should look like Figure A.
                          Figure A:

 Lots of animation tutorials get you started by having you animate a bouncing ball, but we’ll go a little farther than that. We’re going to animate a moon coming out from behind a planet, revolving around to the front, and then disappearing behind the planet — while increasing and decreasing in size as it comes toward and moves away from the camera on its orbit.
The orbiting idea came from a TechRepublic member who is trying to perform the same function using JavaScript. Can you describe how to accomplish this animation using JavaScript? Submit your answer using our new Blog Submission Tool.
Start by saving your file. It’s always a good idea to save your file as soon as you create it, because as you work and save every few minutes, a fast hit on [Ctrl]+[S] will be a habit that you’ll form quickly.
Let’s start by changing the color of the stage to black so that our planet and moon will be living in outer space instead of on a boring whiteboard.
Go to the bottom of the screen and in the Properties palette, click the Background color box and choose a black swatch. While you’re in the Properties palette, click in the field labeled Frame Rate and change the number from 12 to 24. Since most film animation displays 24 frames per second, this setting will look much more pleasing to the viewer. Refer to Figure B to see how these changes should appear.
                                 Figure B

 

 Next, go to the Layers palette at the top of the screen. It’s tied directly to the Timeline window, so as you add layers to your file, you add layers to the working Timeline. Double-click the first layer and rename it “Planet.” Click the Insert Layer button again and rename the new layer you create “Moon.” Finally, click the Insert Layer button one more time and name the third layer “Mask.” Your Layers palette should resemble Figure C.

                                    Figure C 

 Now let’s get drawing.

Start by selecting the layer named Planet in the Layers palette to ensure that the planet you’re about to draw is on the correct layer. Then, select the Oval tool from the Toolbox on the far left, and for the Fill color, choose a pleasant blue. Also, make sure that no Stroke option is selected; otherwise, when you draw the planet on the stage, it will have a line around it. Refer to Figure D if you are unfamiliar with the Toolbox.
                      Figure D

Go to the Black stage and while holding down the [Shift] key (to constrain our Oval tool into drawing a circle), click and drag to draw a circle on the stage that will represent our planet. Don’t draw the planet too large, or there will not be enough room to animate the moon in orbit.

Next, lock the Planet and Mask layers and select the Moon layer in the Layers palette.
This step is important!
The Timeline can animate only one object on a layer, and it will be much easier for you to create your animations if you keep all of your stage objects on separate layers. Figure E shows you how to lock a layer.

Figure E

Now, go back to the Toolbox and select the Oval tool again. For the fill color, choose an orange-yellow hue. Then, go back to the stage and draw a smaller circle that will represent the moon. Your stage should look like Figure F.

Figure F

The planet and moon are on the stage, so it’s time to animate the moon. Flash can put an object in motion only if it exists as a Symbol. So before we can put the moon in orbit, we have to turn it into a Symbol. Click on the moon to select it, then right-click on it to bring up a contextual menu. From that menu, choose Convert To Symbol. A dialog box will appear, as shown in Figure G. Give the Symbol a name of (you guessed it — Moon) and select the Movie Clip option. Click OK to return to the stage, where you’ll notice that the moon has a blue bounding box around it.

Figure G

Rather than painstakingly animating the moon in orbit by hand, you’re going to rely on Flash’s Motion Guides and keyframes to do all of the heavy lifting. A Motion Guide is exactly what it sounds like: a line that will guide a symbol about the stage. Keyframes are specific frames in the Timeline in which you can change the position or properties of a symbol and have Flash animate the transitions between the frames.
Right-click on the Moon layer and from the contextual menu, select Add Motion Guide. Click on the Motion Guide layer to select it, as shown in Figure H.

Figure H

The Motion Guide layer is where you will create your orbit path for the moon. Select the Oval tool from the Toolbox again, but this time, select a White stroke and no fill. Then, go back to the Stage and draw a narrow, horizontal oval around the center of the planet, as shown in Figure I.

Figure I

Motion Guides work best when they have a beginning point and an end point, but right now our orbit is a closed circle. Choose the Selection tool from the Toolbox and click and drag to select a small segment of the orbit path near the top center. Press the [Backspace] key to delete it. Your Motion Guide should look like Figure J.

Figure J

Select the Moon Symbol and place it at the left-hand open end of the Motion Guide. It should snap into position via an anchor point in the center of the Moon Symbol. Then, choose the Free Transform tool from the Toolbox and reduce the size of the Moon Symbol to about half of its current size. Your stage should look like Figure K.

Figure K

Here’s where keyframes come into play. Go up to the Timeline and click and place your mouse into the 48th frame at the top layer (the one labeled Mask). Click and drag straight down to the bottom layer to select the frame across all four layers. Then, right-click in the selection and from the pop-up menu, choose the Insert Keyframe. Your Timeline palette should look like Figure L.

Figure L

Now, go back to the Stage and select the Moon symbol. Click and drag it to the opposite end of the Motion Guide, allowing it to snap into place, as shown in Figure M.

Figure M

Here is where the magic happens. Go back to the Timeline and select Frame 1 of the Moon layer. Right-click the frame and choose Create Motion Tween. The Moon layer will turn blue, with an arrow leading from keyframe 1 to keyframe 48. If you press the [Enter] key, you will get a preview of the animation, as the moon revolves around the planet. But our animation lacks depth. Let’s start by making the moon appear bigger as it revolves toward us. Use your mouse to select Frame 24 in the Moon layer and right-click on it. Select Insert Keyframe again, making your Timeline look like the example in Figure N.

Figure N

Now, select the moon on the stage and choose the Free Transform tool from the Toolbox again. This time, increase the size of the moon by about 100 percent (Figure O). Hit [Enter] again to preview the animation and see the moon increase and decrease in size as it moves to and from the camera.

Figure O

 We’re almost there. All we need to do now is make it look as if the moon disappears behind the planet at the back of its orbit.

Lock the Moon layer and the Motion Guide layer and then unlock the Planet layer and the Mask layer. Select the planet and copy it to the Clipboard. Go back to the Timeline and just as you did before, select Frame 6 of the Mask layer and insert a Keyframe. Then, in the same layer, insert another Keyframe at Frame 43. Your Timeline should look like Figure P.

Figure P

 Select Frame 1 of the Timeline in the Mask layer. From the Edit menu, choose Paste In Place to drop a copy of the planet in the exact position as it exists on the Planet layer. Repeat this process at Keyframe 43 of the Mask layer. Finally, select Keyframe 48 of the Mask layer, right-click and then select Clear Keyframe to remove the empty Keyframe and extend the mask to the end of the movie.

Press [Ctrl]+[Enter] to test your movie. You’ll see that the Guide layer is not visible in the final SWF file.
That’s all there is to creating an animated 3-D effect with 2-D objects in Flash. Keep the Flash Timeline in mind the next time you need to quickly create a simple, attention-grabbing animation.