Sunday, November 11, 2007

Animation in Blogger Header

I figured out how to make an animated header in Blogger.
I put it on a separate Blogger page, here.

I didn't like those big Amazon slideshows on my main page anyway, but I spent a lot of time reading those books and writing minireviews, so I decided to do a funonmarslikes blog. May or may not keep updating it, but I was pleasantly surprised that I could get the animation into the header, as it wasn't easy.

Also Whinsey has some new animation over at her blog.
Time for a hike. The woman taking care of our animals at home called to say one of the exotic Australian doves had flown away. .. We've had a pair for ten years. Maybe it will return-- white doves do, but these doves have stranger personalities.


linda said...

You cracked the code. Congratulations. The animation in the header is wonderful!

p.s. I really hope your dove will return. Keep us informed.

Sally said...

Thanks, Linda. It requires doing a matching split of a png file and flash animation, because blogger insists on a still image on top. But I made the still on top only 100 px, and animation also 100 px, both 900 px wide. In case you want to fool with it.

Namowal said...

Pretty clever hack, Sally, using a split to fool Blogger. I always like a good workaround.

linda said...

So could you make the top png file 1 px high and the bottom animation 199 px high(or something like that), if they add up to 200?

Sally said...

Linda, Before I moved onto this page I'd done a little experimenting that didn't work out.

Here's what you can do just to test it. Create a blogger test page. Create an image that's not very tall, and see if you can use that as the header page element. You know, where you find "Add or Arrange Elements."

I couldn't get a really thin image to be accepted, but I might have been doing something else wrong.

If that works, then the flash part will definitely work to fill up the rest, because it's basically another sidebar element (type: html/javascript), that's been tricked into going in the middle.

I used a 200 px x 900 total file space size for the two elements, and just split them.

Katy said...

Do the comments only show the time, not the date? That's the way the old blog was, also. Why did you want to change the old blog---I'm still lost in all this. I hate tech change, I hate change, I want to live in a cave with a smoky fire. Try another watercolor and let your readers see it. Just think of it as a cave drawing. Draw a buffalo on that tech wall, or pot roast of somesuch.

Sally said...

Katy, You can't go in the cave. The bear's there!

I appreciate your comments on the new look. But my old one had a Halloween theme and I just wanted to break out, being a code freak, and having no work at all.

I know what you mean about going to a site and finding it's changed and finding it upsetting. Every morning I used to go to the German Shepherd forum first thing, and then they changed the look and put these awful jittery highlights over every post as well as ads midway through every page. I never go there anymore. Hope you'll adjust to this blog look.

Katy said...

Aha, now I see the comment date. My goodness you're up early. I'm dealing with rampaging raccoons and possums here, no bears yet. And one half grown cat who could probably tree a bear. Yes, I'm finding my way around the site more easily now. I worked with programmers and database and tech people for years. I really got to hate it. Except for loving digital cameras and pretty good cheap photo printers I haven't recovered.

ShantanuDas said...

Hi Sally!!! Yes.. I have seen the feet too!! If you had not told me I would not have seen! I think I may just become a fan of yours...let me see now.. If my flash works.. because of your tutorial.. I will surely!! Will see.

ShantanuDas said...

Ohh!! Hello!! I have now found out my basic problem! I thought I am making flash files properly. But my flash file does not work on the blog. while yours do! why is it? I made mine with Adobe image ready CS2 for your information.. Can you please suggest the reason??

Sally said...

Hi ShantanuDas,

It's not easy to trouble shoot blind, but here are a couple of things I'd check:

Did you include a png file as well as the swf file? Read through that part.

Is your swf posted on an independent web host, not google?

Does ImageReady make true swfs? Does it play as an swf outside of google?

Check your code closely to see there are no typo errors.

ShantanuDas said...

Hi Sally, sorry I got busy offline so could not come and tell you earlier that I traced my problem after some trial and error. I think you did not get time to visit my blog.. which is a photography blog then you would have noticed the flash file is working now...

What I did was use your swf test.. . it worked.. then it struck me somehow.. now I dont remember how it struck me ...that the file hosting site did not have a direct link... i was using mediafire which works with orkut etc.. but what you said here needs a simple URL and so looked around for a free fle server.. and hosted the swf file on snap andthen it worked.. So that was the problem.

I then got busy working on java script for 'recent comments' which i saw on ur site.. but that did not work for me... I do not know why! Must be I am using a .JS file which is different from yours. even though i clicked the link beneath your 'recent comments' and created the widget on the next page and then uploaded on my blog.. so my mind got diverted into that and I forgot to comment back here...

Anyway... thanks for the reply.. Btw do you know why your 'recent comments' is working and mine did not work ? Are you using a different JS file stored somewhere else? After all I did not do anything but go to that link and create/upload. I found comments on that blog that many others too find the thing not working.. and yet urs is working... SO I guess the only reason is you must be using a different JS file stored on a different URL... is it so? Can you please tell me where I can get a free host that allows JS files and also direct link.. I am not finding one for JS files!! The Snap has direct link so I cld host the flash file but it does not allow JS files.

[Now I am using a different code and a different JS file taken from someone else.. ]

ShantanuDas said...

Further.. I have today just tried first step in this flash hosting.. next I wil try your header trick. Does swf files have the scope to have hyperlinks on each frame? If that can be done and I use your trick to upload a SWF file into the header.. then my header will be what I want.. a clickable mash of my chosen photos leading the reader to the selected blogs... right??

You will notice on my photoblog an image map at the top. I originally planned to have that image map picture hosted into the header. I found it does not allow HTM file even though the upload file has HTM in the window and I needed and HTM file..

SO I did a workaround. I used the 'add page element' type html/java option to create a gadget and hosted the gif file into a hidden blogpost and used thet link inside the html code I pasted in this gadget and now the map is there. But if SWF file can have a LINK then I will do what I said.

So to end.. I have only two questions..
1. Do you know of any file hosting service that allows storage of .JS files and has direct link for the stored files..
2. Does SWF file allow creation of hyperlink on each frame?

I think my comment has become bigger than your post.. haha!
Sorry.. bye..