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.


0 comments: