Flickering postcard used as intro to Learnflash.com

[cressa]

i was looking hard at the intro to learnflash.com, the animation is very intricate. i was wondering if this was done with a preset animation from something swift 3d?? i know swift doesnt have a preset identical to this advanced but perhaps after importing it, the individual frames had blurring and other filters applied?? if it is all hand-done, then i dont intend offence to the creator (call it a roundabout compliment) But just to put my mind at ease, can someone please tell me one way or the other?

looking forward to an explanation,


cressa


(dont know why this ended up in the script assist section, i wanted it to be a general query, sorry for the double post, i thought when i didnt see it in General, that i hadnt submitted it properly)

[Jer]

Hi Cressa,
I couldnt find the intro you spoke of. Where can it be found? The link you gave just goes directly to the home page of a company selling Flash learning products. Is it a link off of the home page?

Without seeing their animation, I cant tell you how I think it was done. But with Swift3D, you can export it and then frame-by-frame apply photoshop filters to do motion blurring, but that is very time consuming and brings up the file size (depending on how large the width and height are of the things to be blurred).

Flash 8 can now do 2D blurring which is enough to create the same effect that you would be doing in Photoshop, and since Flash produces these effects live, there is no jump in file size and you can adjust it while an object is in motion with ActionScript or tweening to make the blur greater and lesser during the animation to simulate things moving faster(more blur), slower(less blur), and lense aperature(things too close or too far will blur more and things in the main view distance will be crisp and sharp).

If it was not done in Flash 8, or the frames are all pre-rendered and the blur is a true 3D motion blur (you can see depth trails in the motion on the z-axis), then this was done with a 3D program such as Poser(which has this filter already but no Swift3D export), or 3DS-Max, Lightwave, Maya, etc (which all have the ability to export to Swift3D using the plugin and all have a 3D blur filter). Swift3D doesnt have a 3D blur or any blur, so it can only be done with the aid of another program.

Jer

[cressa]

Jer,

i was going to add a direct link but naively i thought that everyone knew about Learnflash.com.

here it is

learnflash intro


i have been messing about with as many flash related programs as i can and from what i've learned, the motion involved with the intro is done as a frame by frame animation, no tweening at all, this is usually a sign that its been imported (not always tho)

check it out and let me know what you think, id like to recreate the effect so i learn from it, it has an extremely organic feel to it which i find hard to reproduce


thanks for replying

cressa

[Jer]

ok I see it now.
That is a black postcard with a white border on it and a thin 2D shadow border on the outside edge of the white border.

Using Poser6 (and 5 has this too), I can import any PSD, JPG or PNG as a texture, and apply it to a rectangle of the same size and shape. I convert this into a Cloth object and then set the position of the cloth where I want it so that gravity in Poser will naturally move the postcard. Then I set the characteristics of the cloth to react like weak cardboard (bendable but a little stiff, so that it doesnt react like a silk cloth and collapse on itself). Doing this involves about 15 parameters including density, friction on itself, air friction, and others. Then I use an insisible wind machine to help push the cardboard or spin it naturally in the scene and I set the cardboard to be able to collide with the wind and the ground or other invisible objects to get the effect I want. Then after messing around a bit I get a good animation just the way I want it. For their sample, they had the object spin around and flip as it came toward the camera. Using gravity and a wind machine(or more than 1) you can have it spin really cool.

You have it start on the ground (or an invisible box). Set the camera perfectly with good lighting on it. This will be the final resting frame, the one where the card has already finished moving. Then on the next few frames, have one of the fans blow a small puff of air on the lower left corner of the post card to do the trick they do for the mouse over. Do a full render of the puff and export it to a sequence of PNG files. Then undo that change, and this time set the fan strong enough to blow that card really high into the scene, and have it off center or use other fans to help spin it way out of control. Then do a full render of this scene and export it to a sequence of PNG files. Now import it all into Flash and you will reverse the spin-out sequence so that the post card starts on the ground, then comes to life and hits your screen.

Its easy for me to do this now, it just takes a fast computer with lots of ram, good video card, and a lot of patience for the trial and error with the cloth, wind and gravity parameters to get it just right. But it may be way beyond someone who has never used a 3D program before, or someone not used to the Bryce/Poser 3D navigation controls, or if its beyond the time/budget of your client/project.

By the way, the final thing they did in Flash was add the vector content on top of the post card on the last frame in Flash, and added the corner peel rollover animation which I showed above with a light puff of wind from the fan.

Jer

I almost forgot..
When you set your render settings in Poser, set it to the best renderer (dont use preview quality), and set it to have 2D motion blur (yes its called 2D, but it really follows the motion of the objects perfectly through 3D space, much much more realistic than the Photoshop motion blur and Flash blur... really amazing!).

Poser does support 3D blur, but damn.. it takes a loooooong time to render a scene with 3D blur turned on.

[sneakersupplier]

It is a wonderful article,i like it,thank you very much!

-----------------------------
<a href="http://www.salelvbags.com">Louis Vuitton Handbags</a>