Tutorials

Add a Moving Hot Air Balloon to a Picture

Step 1. Finding the Perfect Hot Air Balloon

 Steal Hot Air Balloon Picture from Website. Go to your internet browser and input the following link into the address bar.

http://static-p.arttoday.com/d/photos/thm/thm8/PH /
ss5255_20030417/ss20030417_10000/10003.thl.jpg

 Use this link for optimal hot air balloon picture. To steal picture, right click on picture and click on "Save Picture As...". Save picture to the folder of your choice. Open picture with Photoshop to edit stolen photograph. Preferably, use version 7.0 or higher. This is only a suggestion to which hot air balloon to use. You may select your own if you have one. (although I don't know many people with their own hot air balloons that they can take a picture of)


Awesome Hot Air Balloon


Step 2. Select the Perfect Background Picture

 Nab the perfect picture of the sky. Find one on Google.com and save to your folder. Open the picture on Photoshop to adjust the image size. Crop and change the image size. Adjust until the photo is 600 X 450 pixels.


Cropping Tool


Changing the Image Size


Step 3. Setting up the Background

 Since you will be creating a motion document (making the balloon move), you will need to use a program like Macromedia Flash. For our purposes, we will use Macromedia Flash MX. Go to your adjusted background picture and use the "Rectangular Marquee Tool" to select the background. Press ctrl+c to copy the image. Switch over to Flash MX and create a new document with a name of your liking. Edit the document properties so that the document size is 600 X 450 pixels. Then paste the background by pressing ctrl+v. Move around with the cursor until it fits the Flash document.


Rectangular Marquee Tool


Adjusting Flash Document Size


Finished result of adding background photo to Flash document


Step 4. GRAB YOUR BALLOONS

 Now that we have the background set, our next move is to copy the balloon but not the background of the balloon picture. Thus, we will need to do some photoshop work. Use the "Wand" tool to select all the parts of the background. It may help to press ctrl++ to zoom in a bit. Once you select all of the background, right click on the selected portion, and press "select inverse". Copy the balloon onto a new document. Now, you can move the balloon as much as you please.


Select Inverse


Final Background-less balloon


Step 5. GET OUT THE BLENDER

 We need to create layers in the Flash document. Right click on "Layer 1" under Timeline and select "Insert Layer". On the timeline, make sure only one of the layers is shaded in grey. Highlight the little bars in the timeline under both layers. Drag them out until the numbers read 300. The bars should look like they merged together. That is the area that will be the "Flash Film". On the layer with the grey shade, drag the bar back to 0. This ensures that the background is present throughout the entire movie. Go back to photoshop and select the balloon. Copy the balloon into the empty layer. Put it near the top. Make sure the first timeline bar is highlighted. Right click the layer and select "Create Motion Tween". Next, scroll to the very end of the movie. Right click on the last bar in the motion tween and select "Insert Keyframe". Click on the keyframe and drag it to the end of the movie. Now on the last bar, move the picture of the balloon to where you want it to float down to.


Insert a new layer


Make sure that only one bar is shaded grey


Drag the movie to its full length


Add the balloon to the picture


Create a motion tween


Insert a keyframe


Drag the balloon to the final position. The place where you want the balloon to end up.


Step 6. Last minute Touches

 Now, lets get the timing right. Firstly, make sure there are only two bars in Layer 2 with black circles in them (black circle = Keyframe). This makes sure the balloon floats down continuously. Next, if you want to make the balloon float down faster or slower, click outside of your document in the grey area. Now on the far bottom toobar titled "properties", there should be an option that you can change called "frame rate". FPS is frames per second, so more fps means the movie moves faster and less fps means the movie moves slower. You can also change speed of the movie by making the movie longer. Highlight the last bar in the timeline under both layers. Drag them both to the right to make the movie longer. Now, when you have the timing correct, you should be done. Press enter to see the movie play by itself.


Step 7. Publish Your Work

 To publish your work, click on File-->Publish Settings-->Make sure under the formats tab, flash and html are checked off, under the html tab, make sure loop is checked off. The on the right hand side of the menu, select "Publish". Your production is done! This is what it should look like.