Flash Game Design  
 
   
 
Tutorials Articles
   
       
 
 
A tutorial showing you how to make animated floating bubbles using Flash
  
Flash website Shooting Bullets Jagged Transition Circular Slideshow
 
 
  Falling Star Text Basic Flash Site Rotatin Gallery Drop Down Menu
 
 
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
 
   
More Flash Tutorials
Funky Flash Site Glitter Graphic Jagged Transition
   
Bubble Flow Text Basic Flash Site Advanced Flash Site
Scroll Gallery Falling Star Text Drop Down Menu
     
Rotating Gallery Shooting Bullets XML menu
     
     
 
Site Copyright © 2006 - 2009 Nick DS. All rights reserved.