Flash Game Design  
 
Flash Tutorials Photoshop Tutorials Flash Games  
A tutorial showing you how to make animated floating bubbles using Flash
 
Step 1.
Start off by creating a new document, using the settings shown below
 
Step 2.
Create a new MC called float0 and click "Export for Actionscript". This will give the MC an identifier, with the same name as the MC. When the Actionscript is written later, the path will be added to the stage, using the "float0" as a reference.
 
Step 3.
In the float0 MC add the bubble image (image a) to the first layer, and then convert it to an MC called bubbleMC. Click "Export for Actionsctip" to give it an identifier.
a)   b)
 
Step 4.
Convert the "bubbleMc" to another MC called "emptyClip", but don't click "Export for Acionscript" this time.
 
Step 5.
Go back to the float0 MC and right click on the first layer, which i've now name bubbles, and then choose "Add Motion Guide".
 
Step 6.
As you can see int he image below a new layer as been added. We can now use this layer to create line which we can make the bubble follow along. Use the pen tool to create a line of any color, and using the settings shown below. When the Flash movie is plublished, the guide won't be visible.
 
Step 7.
Bend the line to the right and then copy and paste it.
     
 
 
Step 8.
Flip the copy horizontally (modify > transform > flip horizontal). Move the copy below the original, so that they're joining.
     
 
 
Step 9.
Move the bubble MC, so that the circle is over the curly line.
     
 
 
Step 10.
Click on frame 30 of the guide layer, and insert a frame (f5)
 
Step 11.
Insert a keyframe (f6) at frame 30 of the bubble layer.
 
Step 12.
Leave the keyframe highlighted and move the bubble to the top of the guide line, making sure that the little circle is touching the line. If it's not it won't follow the path.
 
Step 13.
Click on a frame, inbetween 1 & 30, of the bubble layer, and choose "Create Motion Tween".
 
Step 14.
By moving the playhead (the red line) back anf forth, the bubble should now follow the guide. From the propeties panel, cahnge the "Ease" to -100. This will make the bubble start off slowly and then increase in speed.
Next go to Animated Bubble Text Effect - Part 2) Part: 1 | 2 | 3
 
 
 
 
   
     
     
 
Top Flash
Create a Spot the Difference Game
Create a Shooter Game
Flash Gallery Tutorial
Flash Website Tutorial
 
 
 
 
 
 
 
Game Websites
Hidden Object Games
Tower Defense Games
Hunting Games
 
 
 
 
 
 
 
 
 
     
Site Copyright © 2006 - 2011 Nick DS. All rights reserved.