Saturday, February 6, 2010

ADDING FLASH TO BLOGGER


A Flash header can really liven up your blog!  Flash headers can be exciting, dynamic, full of colors and fun.  They really make your blog come to life.  An example of this can be found here.   If you need help creating a Flash file we have a page (click here) devoted to learning Flash.  Create anything from headers, to banners, to dynamic websites and video games without writing one line of code.

Note: After finishing this tutorial you may still need to tweak your blog (center header, remove navbar and border lines, and inserting a background picture.  You can go to this page by clicking here.

I'll start with a new Blogger account and walk you through the steps of adding a Flash header. First, open up Blogger:
flash header blogger, flash blogger

As you can see this is a new account. The first thing we're going to do is click on the Edit HTML link:
flash header blogger, flash blogger
If you're working on a new blog (which I recommend so you can experiment all you want) then you don't have to worry about backing up your template. If you're working on an existing template you should back it up first. Click on Download Full Template:
flash header blogger, flash blogger

Save your template to your hard drive. Next, click on Expand Widget Template:
flash header blogger, flash blogger


Scroll down until you see this line of code (Tip: if you're on Firefox hit Ctrl + F; then type in maxwidgets. Firefox will automatically take you to the code you see below):
flash header blogger, flash blogger

Change maxwidgets to '2' and showaddelement to 'yes':
flash header blogger, flash blogger

Save the template:
flash header blogger, flash blogger

Next, click on the Page Elements link:
flash header blogger, flash blogger

You should now see Add a Gadget in the Header section:


flash header blogger, flash blogger




Click this link and you should see the Add a Gadget window:
flash header blogger, flash blogger

Click on HTML/JavaScript:
flash header blogger, flash blogger

Copy the following code and paste it into the Content window:
<object width="991" height="708">
<param value="flash_header.swf" name="movie"/>
<embed width="991" src="http://nongeekbooks.com/flash_header.swf" height="708">
</embed>
</object>

The Content window should now look like this:
flash header blogger, flash blogger

On the third line you'll see that the Flash file is located at: www.nongeektutorials.com/flash_header.swf. So what I have done is create a Flash file, then I uploaded it to the nongeekbooks.com server. The name of the flash file is: flash_header.swf. If you have your own hosting account you simply need to upload your Flash file to the server. If you don't have your own server then you can click here. At this link you'll find plenty of free servers where you can upload your Flash file.
Also, when you create your own Flash file, your width and height will probably be different than mine. So make sure you change the dimensions on the code:
flash header blogger, flash blogger
You'll also have to edit the web address, and name of the Flash file:
flash header blogger, flash blogger
When you're done click on SAVE:
flash header blogger, flash blogger

Now, click on the PREVIEW button so you can view the blog (if you used the above code you'll be seeing my sample Flash header):


You should now see the sample Flash header above your blog:
flash header blogger, flash blogger

Note: Your template may need some final tweaking, such as removing border lines, changing background color, centering the header, removing the top navigation bar, etc.. To learn how to do all this click here.

If you are interested in creating all sorts of Flash files, from headers to video games (without writing any code at all!) then go to our E-Book page.  Thousands of illustrations make learning Flash a breeze.




Flash Looping Background 

download files



Have you ever seen those Flash Ads that have a moving background that is on a perpetual loop?  Like a plane flying through clouds, where the clouds loop continuously making the plane appear to be soaring through the sky. In this exercise we'll create a looping background as a superhero flies through the sky.

After you download the files open the FLA file. In the library we have four images. A smoke image, the superhero, and two different cloud images. So the first thing we'll do is create the moving cloud background. Rename Layer 1: Clouds. Then, drag Clouds.jpg over to the stage. We want the right edge of the Cloud image to be flush with the right edge of the stage. Open the Align panel and select Align right edge, Align top edge and select To stage:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


The cloud image should now be flush with the right edge of the stage.  Select this image and convert it to a Movie clip. Name it Clouds Movie:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Hit OK and close. Double-click on this new Movie clip to enter its editing stage. Now we're going to make two copies of the cloud image for the background animation. Before we copy this cloud image we need to make it a graphic. Select the cloud image on the stage and go to Modify, Convert to Symbol; in the Convert to Symbol box select Graphic for Type and type Cloud Symbol for the Name. Hit OK when you're done.

The reason you convert images to graphics before you copy them, is because Flash only has to download the cloud graphic once and all of its copies will download instantly and won't add to the overall download size.

Select this cloud graphic and go to Edit, Copy. Select Edit, and Paste in Place. Click on this new copy and go to Modify, Transform, Flip Horizontal.

This will flip your picture. Drag this new symbol to the left. You'll want the right side of this copied symbol to line up with the left side of the original cloud image. Zoom in if you have to, to make sure all edges line up perfectly:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

Since we flipped the image horizontally the two symbols now connect seamlessly. Select the original cloud symbol and go to Edit, Copy. Next, go to Edit, Paste in Place

Drag this third symbol all the way left until its right edge lines up with the second symbol's left edge. You should now have a really wide cloud image made up of three copies of the Cloud Symbol:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

We're going to mark the right edge of the stage with the Ruler Tool. Go to View, Rulers:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

You should now see rulers at the top and to the left of the stage. Click-and-hold on the Ruler at the left; click-and-drag a Ruler line to the right until it's lined up with the right edge of the stage:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

Your line should now be lined up with the right edge of the stage. Create a new keyframe on frame 140 of Layer 1; you should now see the borders of the three images (they'll show up as blue lines):
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

You may have to zoom out to 50%. Hold SHIFT down and click-and-hold on the right edge of the leftmost cloud; drag the entire cloud image to the right so that the right edge of the leftmost cloud image is flush with the ruler line. Your stage should now look like this:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

Select any frame between 1 and 140 and insert a Motion Tween. Test your movie by going to Control, Test Movie (Ctrl + Enter). The cloud animation should be seamless as it loops continuously. So now let's add the superhero!

Go back to Scene 1. Create a new layer and name it Superhero. Turn off the visibility of Layer 1 so we can see the stage:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Drag the image flying.png to the center of the stage from the library:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Select this new image and convert it to a Movie clip (Modify, Convert to Symbol). Name it Superhero. Hit OK when you're finished. Double-click on this Movie clip to enter its editing stage.  We're now going to animate the superhero. Create a keyframe on frame 200; now, select any frame between the two keyframes and insert a Motion Tween. Insert a keyframe on frame 100. Select the superhero on the stage and move him to the left side of the stage:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


If you want, you can drag him down slightly. So now we're going to add the propeller animation and the jetpack smoke. If we add these elements on this timeline we'll have to animate them so that they follow the superhero, which probably won't work. So the easy way to do it is to put these elements within the superhero symbol. Let's do that now.  Go to frame 1 and double-click on the superhero symbol on the stage. You should now be in its editing stage. 

Create a new layer and name it Propeller. Zoom into the stage about 800% or until you have a close view of the superhero's propeller:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials
Click on the Eyedropper Tool:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Click on the superhero's propeller:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


You should now have the propeller's color as the Fill color. Select the Rectangle Tool and turn off the Stroke color. Create a rectangle shape over the superhero's existing propeller:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


So now we're going to animate this propeller. Select this new shape and convert it to a Movie clip (Modify, Convert to Symbol). Name it Propeller Movie. When you're done double-click on this new Movie clip to enter its editing stage. Create a keyframe on frame 20; next, select any frame between the two keyframes and insert a Motion Tween

Now, select the first keyframe. Open the Properties panel. Change Rotate to CW and type 6 for times:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


If you grab your timeline needle and scrub the timeline you'll see that your propeller is now spinning. It should do 6 full rotations within the 20 frames. Click on the Back button above the timeline/stage:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


This will take you back to the superhero image stage. We'll now add the smoke to the superhero's jetpack. Create a new layer and name it Smoke. Next, drag smoke.png over to the stage. Position this image over the superhero's jetpack. Next, convert this image to a Movie clip (Modify, Convert to Symbol). Name this new Movie clip Smoke. Double-click this Movie clip to enter its editing stage.

Select the smoke image on the stage and convert it to a graphic (Modify, Convert to Symbol ). Name this new symbol Smoke Graphic and hit OK. We're converting this image to a graphic so we can add effects to it.



With this new symbol selected, open the Properties panel.  Change Color to Brightness and the percentage to -100%:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


The smoke symbol should now be darker:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Select the smoke image and grab the Free Transform Tool:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 
 
You should now see a bounding box surrounding your smoke image:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Grab a corner of the bounding box, hold down SHIFT, and push inward until the smoke shrinks to about 30% of its size:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Create a new keyframe on frame 40. Select any frame between 1 and 40 and insert a Motion Tween. Select frame 40 then select the smoke symbol on the stage. Select the Free Transform Tool and enlarge the smoke image about 400%:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials
Drag this smoke image so that's completely off the stage on the right side:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

We now need to take down the alpha of this smoke image. Since we already have one effect on this smoke image (Brightness -100) we'll have to use the Advanced setting to apply another effect. Change Color to Advanced. Then, click on the Settings... button:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


In the Advanced Effect box take the Alpha down to 0:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Hit OK. Your smoke image should now be transparent. If you play the timeline you'll see the smoke gradually get larger until it fades away. 

Create a new layer and name it Smoke 2. Create a keyframe on frame 10. Click on the name of the first layer: Layer 1. This will highlight all the frames of this layer:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

Next, go to Edit, Timeline, Copy Frames. This will copy all the frames of Layer 1. Select the keyframe on frame 10 of Smoke 2. Go to Edit, Timeline, Paste Frames. You should now have a copy of all the frames of Layer 1 on the layer Smoke 2:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

Create a new layer and name it Smoke 3. Create a keyframe on frame 15. Select this keyframe and go to Edit, Timeline, Paste Frames:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

Test the movie. The animation looks pretty good but the background clouds are a bit too dark; it's hard to see the propeller spinning and the smoke. We need to make the clouds less dark. 

Go back to Scene 1. Turn on the visibility for Layer 1. Select the cloud symbol on the stage. Open the Properties panel and change Color to Brightness and change the percentage to 39:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


We're now able to see the superhero much better. So we're almost done. We just need to add one more cloud element. Before we do that we need to turn the visibility off for Layer 1 so we can see the stage.
Create a new layer and name it Cloud. Make sure this layer is above the Superhero layer:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Drag the image clouds.png from the library to the left of the stage:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

With this image still selected convert it to a Movie clip. Name it Cloud Foreground:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Hit OK when you're done. Double-click on this new Movie clip to enter its editing stage. Grab the Free Transform Tool and enlarge your cloud about 100%:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Let's make this cloud a little more blue and take the alpha down. Remember, if you want to add more than one effect you have to use the Advanced setting. Let's do that now. Before we can add the effects, however, we need to make this cloud a symbol. Convert this cloud image to a graphic and name it Cloud Graphic. Hit OK when you're finished.

With the new symbol still selected open the Properties panel. Change Color to Advanced and click on the Settings... button. Change the Alpha to 60% and increase the Blue to 122:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Hit OK when you're finished. Now we're ready to animate the cloud. Create a keyframe on frame 30. Select any frame between the keyframes and insert a Motion Tween.  Next, drag the cloud symbol to the right until it's completely off the stage:
flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials 


Create a new layer and name it Cloud Copy. Create a keyframe on frame 100 of this new layer. Click on the Layer 1 name to highlight its frames; go to Edit, Timeline, Copy Frames. Select frame 100 of the Cloud Copy layer and go to Edit, Timeline, Paste Frames. Since this is a copy then we should try to alter it slightly. 

Select the Free Transform Tool and enlarge the cloud about 25%.  You may have to drag the cloud to the left to make sure that parts of the cloud aren't on the stage.

Open the Properties panel and click on the Settings... button. Take the Alpha down to 40%:





flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials

Hit OK. Click on the second keyframe of this layer. Select the cloud symbol on the stage. Grab the Free Transform Tool and enlarge this symbol also. Drag it slightly right to make sure it's completely off the stage.
With this symbol selected click on the Settings... button in the Properties panel and change the Alpha to 40%. Since this cloud is a little larger it should be moving at a slightly different speed. Click the second keyframe of this layer; select this keyframe again and drag it to the right about 10 frames. 


Insert a frame on frame 200 of this layer. Test your movie.  Looks pretty good!  You can always tweak this animation by adding more smoke clouds,  slowing down the background cloud animation by lengthening the animation, and playing around with the superhero's flight path. Feel free to get creative!  


If you are interested in creating all sorts of Flash files, from headers to video games (without writing any code at all!) then go to our E-Book page.  Thousands of illustrations make learning Flash a breeze.