Everyday Flash

A long, long time ago I used to skate. It was a time when Tony Hawk was still in his teens, boneless was the coolest trick and Future Primitive was the latest skateboarding movie, available exclusively on a VHS tape (remember those?).

I was never very successful at skateboarding. However, I always admired the smooth moves of the deck under the feet of guys more talented then myself. So, many years later I thought it would be nice to pay tribute to this sport, and Papervision3D seemed like the perfect tool. The execution however appeared a task much more difficult than I imagined. Fortunately, I had some free time in July and August so I sat to my desk and started coding. Today you can see the results.

Source. As usual, I post all the source files - you can get them here (this time under CC license, not MIT). I also plan to write some technical details on how the application works soon. For the moment, I will just mention that it is built with Papervision3D and the animations are done with Tweener.

Now, no more talk. Just click here and bust some perfect ollies, dudes! And to be sure not to miss the rest of the story, subscribe to this blog’s RSS or just bookmark this page.

Recently I wrote a tutorial for The Tech Labs, and it has been published yesterday. It is a tutorial which shows how to build a simple 3d photo album using the FIVe3D and TweenLite libraries. You can read it here. I hope you’ll will find it useful!

The Tech Labs is a website recently started by Carlos Pinho. It “is intended to be a tool to contribute for the research, information and knowledge for the IT professionals as also for the non-techies.” Be sure to check it out. There’s already a few good tutorials in there and new stuff is coming every week.

Carlos also runs the Flash Enabled blog, which features cool stuff from all over the web. You will find there plenty of links to resources ranging from Photoshop tips, to Actionscript and Flash/Flex tutorials. It is a great source of information, so be sure to visit!

I used to work for a company that made of the concept of pixel perfection one of the pillars of their success. Today most of the top clients and agencies demand high quality, and pixel perfection became one of the important components of a great website. Obviously, it concerns 3D as well.

To achieve it, sooner or later in your 3D adventures you will come across one of these problems:
1. A material should be rendered as in 1:1 scale of the original texture
2. A precise, pixel level match between 2d and 3d content is necessary

In order to check how to solve these problems, I created a very simple demo. First, I had to make sure my textures are not scaled. I started to browse the Papervision3D forum and it wasn't long before I found the magic formula:

Many thanks to unnormaJH and kjangsa3 for this tip. I would add that it works just as it is only with planes. In my example I worked with a cube, and a cubes Z position is defined by the point in the center of it - which means that the face facing the camera will be closer half the cubes width, so remember that this needs to be adjusted.

UPDATE. With the new Camera classes (GW rev. 639 an higher) the formula changes a bit. The "-1" in "zoom-1" is no longer needed. So it looks like this:

The second problem - a pixel perfect match between 2D and 3D - is mainly about being able to figure out the screen X and Y coordinates of the 3D object. They can be obtained that way:

That, I found in an article on PV3D.org which shows how to do this. There is also an example of how to get the X and Y coordinates of a single vertex.

In the demo above, knowing the screen coordinates of the cube, I use the BitmapData.draw method to take a snapshot of the 2D background at this position for use as the texture. If you scale the browser window you can see how the texture on the cube is being updated to exactly match the background tile.

In the real world, what you'll need much more often is to do the opposite, that is drawing 2d content exactly on top of a 3d object. An example would be replacing a texture with a Sprite containing some interactive elements. By knowing the screen coordinates of your 3d object, and by making sure it is scaled 1:1 it is a quite easy task to make that look seamless & perfect!

Source code - get it here.

Credits The tile graphics come from Squidfingers.

I have been recently asked a couple of times about the source code that I publish and how to compile it. I decided to write a short note on that.

For my experiments, I use a combination of FlashDevelop and the free Flex SDK from Adobe Open Source. It is much better suited to work with AS3 then Flash IDE, and what's most cool - it is 100% free!

To start developing Flash on free software, you simply need to download and install FlashDevelop and the Flex SDK. Installing the SDK means merely downloading a ZIP and copying its contents into a folder on your disk. Please also note that FlashDevelop is currently available for PC only.

Once you have both, open FlashDevelop, go to the 'Tools > Program Settings' menu, choose the 'AS3Context' group and look for the 'Flex SDK Location' property. Set it to the folder where you just copied/installed the SDK. Now create a new project with the 'Actionscript 3 Default Project' template and you are ready to go. Really, it is so simple!

For a more in depth coverage of the topic you can refer to this thread on the FlashDevelop forum. Also, John Lindquist from PV3D.org posted a very good tutorial on FlashDevelop and Papervision3D, so be sure to read that too.

Since in FlashDevelop you do not have a FLA file to work with, there is no library either. That means that external assets are not imported, and they must be embedded in a different way. For that, the Flex style [Embed] tag is used.

I prepared a little test project in FlashDevelop that illustrates how to embed different types of objects (images, sounds, movieclips and fonts) with this technique. Download it, take a look at the source code and I am sure you will grasp the concept in no time. If you installed FlashDevelop with the Flex SDK properly, you should be able to compile this project and see the results. For a more in depth information about embedding assets in Flex refer to the official documentation.

Overall, for 3D in Flash this setup is much better then the traditional Flash IDE. It is more flexible, you do not need to keep an empty FLA file used only to compile SWFs, and since there is no timeline and no frames, you can only write code in classes - and this enforces better OOP practices!

This time I have something less mind-twisting then the bend modifier and all that math. The idea was to create an animation of leaves flying around, propelled by wind controlled with the microphone. This little experiment was also a good occasion to work with some new Papervision3D features.

Effects. The Papervision3D team decided to merge the Effects branch with Great White earlier this month. All the detailed information about that can be found on by Andy Zupko's blog. There is a lot of cool stuff, so be sure to check it out. One of those is a new property of the DisplayObject3D called 'useOwnContainer'. When set to true, all the classic bitmap effects can be applied directly to a mesh. In this case I used the BlurFilter, and the ColorMatrixFilter for the depth-of-field effect. The inspiration came from the really cool depth-of-field experiments by Mr.doob.

SimpleLevelOfDetail. With this one, the idea is that the further an object is from the camera, the less faces it has. That way we can get an important performance gain without sacrificing the quality too much. I tried to implement it, but I ran into some trouble. Later, after a brief discussion on the PV3D forum, Andy Zupko added the 'SimpleLevelOfDetail' class that implements this concept. I used it here. Thanks a lot, Andy!

Bend modifier. Finally, I use the Bend class to give the leaves a slightly more natural look.

Now, the fun part. The leaves react to the activity level of the microphone, so if you take yours and start to blow into it, they will take off and fly around. Be careful, if you blow too hard you will get a head rush! :)

If you do not have a microphone use your mouse wheel to create wind. Keep in mind however that it isn't as much fun as with a mic. Also, on Windows, the microphone volume settings are really tricky and well hidden in multiple places, so if something is not working - double check those in the first place.

Last but not least, here's the source code.

First of all, thanks for the great feedback I got after the first post on bending. I really appreciate it.

This time, I post an updated version of the Bend class for Papervision3D that works with every simple DisplayObject3D - that is, a DisplayObject3D that does not contain any child objects. Click here for a demo. The algorithm has been refined and the class public methods have been changed. Here's an updated use-case:

The bend() method accepts four arguments, out of which the two first are new:

• The axis of the bend
• The direction of the bend

Now: I tried to write the theory behind those axes. I really did! But then this post was becoming boring and highly incomprehensible, so I gave up.

The best thing to do is to experiment with those setting. Each argument can take one of the three values: Bend.X, Bend.Y and Bend.Z. Different primitives will need different settings for the bending to look correct, but on the other hand, playing with them can lead to quite fascinating and weird-looking shapes, so be sure to try different combinations.

If you do not have time to experiment however, I created a special method, that magically bends the object the right way:

The two other arguments are 'force' and 'offset'. Both are described in detail in the source code. Additionally, I also published the source of the demo here. Have fun!

Bending objects is one of the classic features of any 3D package. I thought it would be nice to be able to bend stuff in Papervision3D too.

First, I had to spend a couple of days trying to understand the concept of bending. It is fairly obvious when you see it, but when it comes to express bending with mathematical formulas, it is not. Plus, I am not very strong in math, and that doesn't help :)

Eventually I grasped the concept: bending means distributing all the vertices of an object around a point in space. The closer the point is from the object, the stronger the bend. I will prepare a separate post explaining this theory soon. For now, just play with the demo.

Currently the Bend class only accepts Planes, but I am working on a version that will be able to bend anything else. The source for the Bend class is here. It is a very basic version and the algorithm is not yet optimized, but it should give everyone who's interested a fairly good idea on how it is done. You can also grab the class and use it with your planes created in Papervision3D. Here's a basic use case:

Check the source file for detailed info about the arguments.

UPDATE June 16th 2008. Check the next post for a newer version of Bend class (demo included).

In general this kind of transformations are called modifiers and can be organized in stacks. This means that one modifier can be applied to an object, and then another one can be applied to the result of this transformation. For an interesting list of possible modifiers check here (examples are from 3dsMAX).

Modifiers stack is a powerful tool in 3dsMAX, it would definitely be good to have something like this in Papervision3D, don't you think?

Ever since Mathieu Badimon released FIVe3d AS3, I was thinking that it would be great to build a 3D animated banner using this library.

The main challenge with banners is obviously the file size. I had to customize FIVe3d a little bit for this one. By organizing some imports and removing some parts of code I did not use I gained a couple of kilobytes. For the animation I used TweenLite, which is a much lighter alternative to Tweener. My final result is around 40KB. My original plan was something closer to 30KB... but ok!

Except for the final 2D animation of the logo, everything is 100% script. All the 3D objects are drawn in code using the FIVe3d drawing functions (which are based on the standard Drawing API). The result is around a 1000 lines of code, plus the code of the libraries - pretty much for a banner, huh?

At Multimania in Belgium, I've seen Serge Jespers from Adobe presenting a sneak peak of
Flash CS4 IDE. It seems that it will be possible to prepare this kind of animations directly on the timeline... and probably in a matter of a couple of hours! So this kind of experiments will become obsolete. Nevertheless, this is still a distant future and now FIVe3D rocks!

Source. For anyone who wants to see how it's done here are the sources. The code is not super clean, but I hope it is readable. As always I release it under MIT license.

As a final note, a few words about the site this banner was made for. Futbolowo.pl is a community site run by a friend of mine (it is all in Polish only). It allows local football clubs to run their websites based on a specialized content management engine.

Click once to activate, then click anywhere to move the registration point. Use SPACE to change the object or any other key to change the direction of the rotation.

This time I want to share a simple solution to a relatively simple, but annoying problem.

The problem: the Sprite.rotation property rotates the object always around the registration point of the Sprite. If you need to rotate it around some other point, it's not automatic.

One way to achieve this is to move the content inside the Sprite in order to change its position in relation to the registration point. It works, but it's not elegant and not very handy if the Sprite has many children - you would need to move all of them.

Another way is to wrap your Sprite into another Sprite and rotate the parent. This solution is a bit better, but still has lots of shortcomings. And what about if you need to change the registration point of the object during rotation?

Solution: the Rotator class can be used as a replacement for the default Sprite.rotation property. This class uses a combination of trigonometric functions to rotate an object around a point along with the rotation property itself to create a correct circular movement. It allows you to have a proper rotation no matter if the point is placed inside the rotated object or outside of it. And, what's most fun, you can change the registration point at any moment. Play with the demo above to see it in action.

Source. Check out the source of the class here, or just grab a ZIP with the complete demo here.

Example. It can be used either directly, in an 'ENTER_FRAME' animation, or in combination with Tweener or other similar libraries. It works not only with a Sprite, but also with any class that extends the DisplayObject.

Use it like this:

or like this:

I have been thinking about doing something like this for some time now, but I had no idea where to start. However, recently, after I experimented with animating vertices in Papervision3D, things started to look brighter, so a couple of days ago I sat down and started coding...

Basic concept here is that there is one Plane and two BitmapData objects - a texture and a terrain. The Plane never moves, but instead the texture and the terrain are scrolled on it.

The texture is assigned as material to the plane. At each frame the texture BitmapData is scrolled by an offset and the material is updated.

The terrain is a grey scale bitmap. It is scrolled in the same way as the texture. Each pixel of the terrain is mapped to a single vertex of the plane - the lighter the pixel color is, the higher the z position of the vertex will be. It is done the the same way as in my previous example. Only this time it is not a generated noise, but rather a map drawn manually, so that is works good with the texture.

Hills and turns. Additionally, each vertex on the plane has its x and z positions rearranged continuously using Math.sin() and Math.cos() functions with different phases - that creates the illusion of uphills, downhills and turns...

Lighting. Finally there is one more bitmap - a light map, that is blended with the texture using MULTIPLY mode to create the effect of light and darkness.

Source. I think it is a pretty nice effect and a good starting point for maybe a car racing game or something. Check the demo, try it in full screen by pressing SPACE and grab the source to see it in detail (also available in a zip bundle containing all the graphical assets I used).

Credits. In this demo I used textures from OpenFootage.net. They have some great stuff in there!