Everyday Flash

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!

It is official - Flash Player 10 (Astro) is there, and you can download and install it from Adobe Labs. At a first glance, the most exciting things in the new player are (from my point of view):

3D support. Of course! Adobe says "Complex effects are simple with APIs that extend what you already know" so I guess a Sprite3D is on its way.

Custom filters support with Pixel Bender (formerly known as Hydra). I played with it a little bit a few weeks ago, but now we will be able to actually see it in action in the player. Sweet.

Performance improvement with hardware acceleration.

So be sure to install it, and check out the demos. The source code for the examples is provided too!

One weekend, two events, and they are due in two weeks. Pretty cool, isn't it?

On Friday May 23rd I will be at Multimania08 in Kortrijk, Belgium and on Saturday 24th and Sunday 25th I will be in Paris attending the Web Flash Festival 2008. Both of this events are dedicated to Flash and technologies that revolve around it, and both seem really exciting. There will be lots of interesting conferences including Ralph Hauwert, André Michelle and Quasimodo, presentation from agencies such as Group94 and Diplomatic Cover and much more.

I am looking forward in particular to learn new stuff about 3D in Flash and have some interesting discussions on this topic, so if you are attending one of those events and if you are interested in that too, drop me an email at bartek [AT] everydayflash [DOT] com or just post a comment below.

See you in Belgium and France soon!

Rotating cubes, planes and spheres in 3D is fun. However this time, I thought that I'd try something less basic when it comes to 3D animation. So here's the idea: the Papervision3D universe is composed of triangles. Each object is a structure formed of one or more of them. The points where the triangles meet are called vertices (plural for vertex). A vertex, represented by the class Vertex3D, is basically a point in the 3D space with a 'x', 'y' and 'z' coordinates. The interesting part is that each of those vertices can be manipulated separately.

Click on the image above to view a demo. Once I grasped the basic idea that vertices can be manipulated, such effect was pretty simple to acheive. First I create a plane, I add a bitmap texture, and then I access the vertices of the plane one by one and manipulate their 'z' property.

For the animation I create a small bitmapData object and apply the perlinNoise on it at each frame with different settings to create this illusion of wavy movement. Then I translate the color value of each pixel to the 'z' property of each vertex in the 3D plane. Later I multiply this value by stage.mouseX, so the effect will vary in intensity depending on the mouse position... And voilà! I have a waving flag, a small piece of a stormy sea, a rodeo-style magic carpet or whatever.

Move your mouse cursor around from the right to the left side of the screen. Click anywhere to switch between a bitmap texture and a wireframe texture. In the wireframe mode the movement of the vertices is much easier to spot and understand.

BTW. I created a project on Google Code because I needed an SVN account for personal use, but I discovered that the code browser is also pretty cool for sharing stuff and it even formats AS3 in a nice way! So, if you are interested in the source for this example, it is here.