How to create 3D effect in flash-based website?

Well, for 3D stuff the most well known is going to be Swift 3D. The animation that you linked to isn’t quite 3D, it reminds me of fractals, but I’m not sure of the name for it.

What they’re doing is a series of painted images in movie clips (some with 2D animation over top) that are fit together and continually scaling. Basically you take one image, take a small area at the center of it, and create a new image with more detail from that small area. The borders of the new image match up with those of the larger, outer image. If you look closely you can see that when you approach the newer image its detail is finer than its surroundings but they blend pretty well. I’m guessing they’re just fading out the edges of the new incoming image so that any inconsistencies in position and quality aren’t as noticeable.

You could actually do something like this on the timeline in Flash but I’m sure this site is doing it somewhat more programatically. They’re likely doing some culling to remove images that have since zoomed out of view and only add in the upcoming images to zoom in when they’re needed. You’d have to do this because having an large number of movie clips with rather large bitmaps all scaling siultaneously would very much tax some computers and make the whole thing very choppy. Done properly, you would only ever have between 3 to 5 images showing depending on the size of the screen you’re displaying it in.

I can’t really recommend any reading material for this but I think you could probably do it without too much difficulty depending on your level of ability with Flash. The tough/time consuming part is getting all those really nice images that all fit seamlessly together.

I agree with paulc.

A lot of great looks can be achieved in Flash by starting with great art. Flash sites used to tend to have very basic color and and geometry. But if you apply the function of Flash with the smart use of good art, you can fool the eye into some very impressive looking stuff. That is what I think the first site is doing.

Sorry, my response above was talking about the Tin Man site only. The Becks Beer site is using 3D (albeit just displaying 2D objects in 3D space). Since the version is 9.0.45 they’re probably using the Papervision library.

The two effects are done differently.

“I agree with Paul C” – I agree with your answer

“A lot of great looks can be achieved in Flash by starting with great art. Flash sites used to tend to have very basic color and and geometry. But if you apply the function of Flash with the smart use of good art, you can fool the eye into some very impressive looking stuff. That is what I think the first site is doing.” – My general opinion. I wasn’t disagreeing with you.

I am aware they are done differently.

Sorry for the confusion.

@Bri_L, no you made perfect sense. I just realized after reading your answer that I hadn’t looked at the first site.

@paulc. thanx sounds like i need to learn more about AS, now i just know a little basic things about it! thanx again, your answer is great!

I agree, great answer paulc

@paulc, what about this.http://www.massivecube.com/

@stephen, virtually any interactive 3D stuff you see in Flash these days is done with Papervision or the Sandy 3D Engine. Both are open source and relatively mature so you’ll see all kinds of sites using them.

@paulc, wow they are pretty cool! but the AS scares me :D, i have finished javascript and i heard that AS & JS are both based on ECMAScript! anyway your answers are great! much appreciate that!

@stephen, yes both are derived from ECMAScript but JavaScript is prototype based and AS3 (which is basically the standard for Flash now) is class based so the two aren’t necessarily identical but you should find the syntax pretty familiar. (Actually, I’m generalizing and could get really technical about the whole prototype/class differences in AS but its really beyond the point). Don’t let AS scare you, just start small and build your way up. If I can do it anyone can.

@paulc,I really have no idea about the different btw prototype-based & class-based ! could you tell me some general idea bout that?i believe that will be helpful for me learning as!