Blender animation

[designingamy]

Hello all,

I have a question when it comes to Blender. I used it to create an animation for my website. But the problem comes to knowing how to put it on my site. I am a little clueless when it comes to this. I am using Web Studio to design the site. Anyone know how this could be done?

Thanks bunches!
~Amy

[infinityspiral]

Well the easiest/quickest way would be to composite your animation to a video and then upload to YouTube. YouTube then provides the code to paste the player with your video into your website.

If you'd like a custom player (non-branded) then I'd reccommend using Flash to create it because it's more compatible across the board versus Windows Media Player.

[designingamy]

Hi! Thanks for responding.

The problem with putting it on Youtube is that I won't want it to look like a video. I want it to be part of my banner on my website, not have options for anyone to play it but let it play automatically over and over and over.

I don't know much about flash. I would hate to have to start over after I completed this thing with all its stupid frames!!! Blender was horrid to figure out.

Do you or anyone know how to get this to my site?

Thanks bunches,
~Amy

[Eye for Video]

Well I’m not real familiar with Blender so I did a crash course to familiarize myself a little. Nowhere in the literature did I see much about using it as Web content in the context you mentioned, as part of a banner. It is seems more suited to output as a feature animation video.
OK, that being said, let’s see if we can tackle the problem. Did you create the animation in exactly the same dimension that it would appear in your banner? So for example, most typical banners are about 800 to 1000 pixels wide by about 150 to 200 pixels high (resulting in a ratio of about 5:1). Most video animation will use a 4:3 or 16:9 ratio, not even close for the banner.
If the animation is to take up just part of the banner, will it fit inside that 200 pixel high (for example) without resizing it? If it will, then the next thing is to determine a file format that is Web compatible. As Infinity mentioned, choosing a Flash .swf or .flv format would give you the most options for incorporating into a banner. You see, the Web browser of the viewer must have a pluggin capable of displaying the animation. While there are a lot of pluggins out there, Blender is not one of them. Even if it were, it must be installed on the end viewers machine before they can display it.
So, choosing a file format to output the animation is key to using it on the Web. If it is a short, simple animation, can you output it as an animated .gif file? That type file is fairly Web friendly, but may have some problems displaying on older versions of IE.
Other file formats I see listed, such as .avi and .mov, are not at all Web friendly but could be transcoded into a Flash format. Your best bet is to convert it to a Flash .swf file. This is an animation format that is very Web friendly and can be placed on a Web page over the top of, or in a particular spot in a banner. If you have to convert to a video format, such as .flv or wmv, then a video player can be placed on the page as an <object> and the <object> can have the video play inside it. The player does not have to have any controls or status bar visible, so you could make it look just like a rectangle with an animation playing in it and (sort of) blend into the background. Once you have a Web friendly file format, there lots of sample code available to place it on the page. Placing it over the top of or inside a banner will require a little more work. Let us know your progress and when you get to that phase, let us know if you still need help.
Sorry I don’t have any better suggestions, but I don’t think Blender was really intended to produce Web friendly output. Well at least now you know…
Best wishes,
Eye for Video
www.cidigitalmedia.com

[designingamy]

Thanks for your response!

I was told I could create PNG sequence files and then use a free flash converter to change it to a .swf file. I'm yet to know just how to do that :confused:

I created my banner using photoshop and then left a space for the animation to go on top of it. I do not know how large the animation is. I'm a newbie and I don't even know where to go to find that info out in Blender. I'm thinking I should have just bought Flash but don't have the money to sink into it right now.

Any other advice you can give will be very helpful!

~Amy

[Eye for Video]

Well you’re really dealing with two issues. One, creating an animation, and the second, getting that animation on the Web.
Here’s a good rule in project planning.. “Begin with the end in mind”. Sounds simple enough… In this case start with the dimensions for your full banner. Measure and know exactly what they will be. OK, lets just say the banner will be 1000 px by 200 px. The animation will only take up a small portion, lets say 200 px X 200 px. This is the size to create the animation. Creating the animation any larger than this and then resizing it to fit on the page may result in loss of quality (from the resizing) or an excessively large file with slow downloading time, if the larger animation is simply displayed at a smaller resolution.
Next, “with the end in mind”.. you know you have to have a format that can be placed on a Web page. Since it’s animated, that leaves out the usual jpg, png, or regular .gif… but you could use an animated .gif or perhaps a Flash .swf file to display the animation.
Now since you already have an animation, lets see if it can be converted. First, how many frames is it? Doing a .png sequence means creating an image out of each frame and converting each image into a frame in Flash. It could be done but it would take a little work as well as more software to convert the file.
You also have to consider how it will fit into the banner. Will it just lay over the background?? is there a background?? does the animation need to be transparent so the background can be see through it?? Also, unless the animation takes up the entire banner, you will have to go some creative positioning with the HTML or CSS to fit the animation into any position other than the very top left corner.
Since you already have Photoshop, have you ever created an animated .gif? In Photoshop versions other than CS3, the (already included) companion program Image Ready can be used to create simple frame by frame animations. In your case you would still have to get a sequence of .png images from your Blender animation, then bring them into Image Ready and place them in the various frames. It works by putting each image on a separate layer, then allows you to turn on or off as many layers as needed. So for example, the background layer stays turned on for the entire show. The sun rising layers have the sun in one position in frame one, then turns that off and turns on position two in the next frame, making it seem like the sun is moving and on and on…
Like I said, for simple animations and uses already created images, but you may want to give it a try.
In the long run, Flash is the way to go for animation destined for the Web.
Good luck on your project,
Eye for Video
www.cidigitalmedia.com

[designingamy]

Wow, what a lot of good advice, thank you!

My animation will be over the banner, needs to be transparent to see the background around it and when I looked it needs to be about 200 X 200 pixels. And it will be placed in the top left hand. You must be reading my mind... :)

Editor and Windows Media Player don't support Blender. They don't support the .png files. I found a free software at www.swftools.org but when after I downloaded it, I had no idea what to do then. There are no instructions. I asked someone and they said to use the command prompt to run the tools. I still have no idea what that means. Any ideas?

Thanks!
~Amy

[designingamy]

Wow, what a lot of good advice, thank you!

My animation will be over the banner, needs to be transparent to see the background around it and when I looked it needs to be about 200 X 200 pixels. And it will be placed in the top left hand. You must be reading my mind... :)

Editor and Windows Media Player don't support Blender. They don't support the .png files. I found a free software at www.swftools.org but when after I downloaded it, I had no idea what to do then. There are no instructions. I asked someone and they said to use the command prompt to run the tools. I still have no idea what that means. Any ideas?

Thanks!
~Amy

[designingamy]

Oops sorry, didn't mean to duplicate that

[Eye for Video]

Hello Amy,
After a quick look at www.swftools.org I felt like turning and running the other way. To “use the command prompt to run the tools” reminds me of the bad old days before Graphical User Interfaces, when you had a black screen and a blinking cursor after the C: Hopefully things have progressed past that. With all due respect to the hardcore…. I just want to create graphics, not learn a new language.
Can you export from Blender a series of .png images? You understand that converting the animation requires an image for every frame of the sequence, right? If you can, take a look at the exported images to see that they are a good representation of what you are trying to accomplish. If they are, then there is hope that they can be converted to something else.
How many frames are you working with? If it’s 100 frames it’s one thing… if it’s 2000… well that’s another.
Do you anticipate creating these animation on a regular basis or is this a one time deal for the banner?
To give you hope, here is a great Blender animation displayed on the Web, from the Blender Web site:

http://www.responsibilityproject.com/films/lighthouse/

However, you’ll notice that it’s being played by a Flash player.
Eye for Video
www.cidigitalmedia.com

[designingamy]

The lighthouse animation was very cool. The sad thing is that I watched the interview and the guys who were given credit for it said they sketched some stuff and then gave it to a guy in Australia to animate. They didn't do the hard work, they just gave their idea to someone who probably slaved for a long time. Hehe!

Anywho, my animation is 199 frames. Not too long, and I would hope it would just keep spinning and spinning and spinning without stopping. No, I don't see myself using Blender again. It's just been irritating trying to find information and help on the subject. I do believe I will instead get Flash, but for right now I need this animation to work. I've spent too much time trying to figure it out, you know?

I can change the Blender format to .png, but it seems everytime I try to save it, it will only save .blend and software that changes .png into .swf fails to recognize it. I don't really know where to go from here.

~Amy

[designingamy]

YEAH!!! I finally got it worked out and previewed it and everything looks great! :D

However, the only thing I'm worried about is that the file size is 6.74 MB. Do you think that is rather large for an animation on a banner? I want this to be on every page.

~Amy

[Eye for Video]

Oucchh! That's pretty darn big. As a comparison, a flash video playing at about 400bps bitrate would be about 4MB per minute of video. A video like that would still require several seconds of buffering before beginning to play, that is if it can be progressively downloaded.
So is you final file format .swf? I'm not sure if that will progressively download (load a little into a buffer and then start playing while the rest downloads) or not. Your best bet is to put it on a Web page, upload it to your host and test it. If you have to wait until all 6.7 MB download... that could be a really long time.

[designingamy]

Yeah, it's pretty big. I don't understand. In Blender it's only 933KB, but when I changed the .png files to .swf and put it into a slideshow that Flash Image Builder offered, it shot up to 6.74MB. I'm not sure, but I believe I may have to go into Blender and make it smaller somehow. I'm not wanting to, though, especially since it all fits so nice now. Any idea on a different way to make it smaller?

Thanks!
~Amy

[designingamy]

Well, I was able to change the Blender animation and got it from 6.74MB to 3.37MB but it doesn't look as good. And I believe 3.37 will still cause it to take about 20 seconds with cable DSL to upload. Geez.

Hmmmmm.....I guess I have no other choice but to get Flash? The problem is that this is a 3D type animation so....Can Flash do that?

~Amy

[Eye for Video]

I’m sure that the conversion to .png sequences is not the only and certainly not the optimal way to convert Blender for Web use. The reason the file is so large is that the conversion process relies on converting the frames into bitmaps rather than the vector graphics used in the original creation. In other words, it created a sequence of still photos an played them back like flipping pages of a book. The problem with file size comes because the book is pretty thick and contains lot of detail. Throw of a few pages, get rid of some of the detail… smaller file but no where near the quality.
The reason 3D looks so good is because it’s using a lot of pixels (and computing power) to display something. Most 3D is destined for presentation as a movie, through a player like Windows Media Player (for .wmv, etc. files) or a Flash player (for .flv files). The hosting servers have special software to progressively feed out those file types even while the viewer is watching the first part of it. Animations which do not fit that category may have to be completely downloaded before play begins, that’s the rub.
Can Flash do 3D, well not really. Can it do as well as a very compressed and transcoded 3D, probably much better. It is a vector graphics program like Blender, which helps keep file sizes under control. In your case the real issue was using the Blender animation in the banner. I’ve watched a number of Blender movies over the Internet. They’re amazing! But they were transcoded to Flash and played in a Flash player, which progressively downloaded the file.
My advice, keep Blender for movie creation but switch to Flash for short animations for Web display.
Best wishes,
Eye for Video
www.cidigitalmedia.com