Everyday Flash

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.

A couple of weeks ago the Away3D team announced the release of version 2.0. The news was accompanied with a stunning demo called Green Planet. I was impressed, so I downloaded the source and started to play with it.

From the start I was interested in checking some light and shading possibilities that Away3D offers. I was not disappointed. It turns out that Away3D has some really nice features and they are easy to use. Not everything is well documented, so I had to opt for a trial-and-error technique, but it is ok, as it was released just a few days ago one cannot expect a full documentation. Click on the image above to see a demo I created. Below I share some hopefully useful tips.

For the light source I use the PointLight3D. It takes as initObject argument where you need to pass its x, y and z coordinates, but also some settings for the light itself. We have a brightness parameter, which is pretty self explanatory, and three others: ambient, diffuse and specular. Now, if you don't have a clue what these are, as it was the case with me, start by reading this. The exact values that those settings can take is not quite clear, but I tried different options and ended up with something like this:

If you want your bitmap material to react to the light, a basic BitmapMaterial won't do the job. I experimented many materials available in the package and found out that WhiteShadingBitmapMaterial works pretty well. It is straightforward in setup as it just takes a bitmapData as argument. In my code it looks like this:

The sun does not need to react to any light, for it is light itself. It also does not need any bitmap texture either, so I just use a basic ColorMaterial. But the sun needs to have a glow. And for that I found one super cool feature in Away3D, and it is called ownCanvas. It is a boolean value, and by setting it to true (default is false) you can assign filters to 3d objects exactly the same way you would assign them to regular sprites. Here's how it looks in the code:

A final tip, and this one I found on the Away3D discussion group, is to set the stage.quality to LOW. There is no visible difference in rendering quality, but a huge one in performance. And remember, that you can always check the performance by selecting 'Away3D project stats' option from the right-click menu.

A couple of weeks ago Thibault Imbert from ByteArray.org announced that he just finished a book on ActionScript 3. It was supposed to be released by O'Reilly France. However, for different reasons, the editor couldn't publish it. Thibault then decided to release it for free in form of a PDF file! He created a fresh new blog for this occasion, where he announced that the book will be available on April 21st. Given all the great stuff I found on ByteArray.org, I was sure that the book will be amazing, and couldn't wait to see it.

When the day arrived, instead of the book, all we found on the blog was a short and enigmatic post saying that some negotiations are on the way with a new publisher. Many, including myself, felt disappointed, even though we understood the situation.

Today Thibault Imbert added a much longer post explaining what is exactly going on. It is in French, so for those who do not speak the language of Molière here's a short abstract:

• the book will be available for free
• there might be a possibility to order a on-demand printed version in the future
• there will be a wiki setup for the translations and readers feedback
• it will be available to download soon, but no fixed date is announced this time

This is good news. The "Pratique d'ActionScript 3" is written in French, but if the book is published on the web, it won't be long until an English version is available, and maybe even more translations will follow. In the long term, the community will make a huge profit of having a good and freely available resource covering the most important aspect of ActionScript 3. The book can play a similar role as Bruce Eckel's "Thinking in Java" played for the Java enthusiasts.

As you can see, it is a story in development... and interesting to follow. Let's hope the book will be available soon. In any case, I will keep you updated.

I downloaded the FIVe3D engine in AS3 a couple of days ago and started to play with it a bit.

The first thing to notice is its simplicity. What I liked in particular is that the structure of classes corresponds exactly to the structure used in standard AS3. Where in AS3 there is a Sprite, in FIVe3D there is a Sprite3D. And you can use a special property Sprite3D.graphics3D to draw 3d objects exactly as you would use classic Sprite.graphics to draw 2d objects. Of course, all the methods like lineTo, curveTo, beginFill or drawRect are there. So if you ever worked with the drawing API everything will look very familiar in FIVe3D. And there is a Shape3D too...

Another nice feature is that the class Sprite3D extends a regular Sprite. As a consequence, all the features of a Sprite are available in Sprite3D, including event handling. It basically means that adding interactivity to you 3d objects works exactly the same way as with regular Sprites - just use listeners and the MouseEvent class!

However, the most impressive part of the package is the way fonts are handled. Font outlines are transformed in FIVe3D into special classes that hold all the coordinates needed to render each character. At runtime, they are rendered as shapes drawn using the Graphics3D object.

From a designers point of view the nice thing about FIVe3D is the quality of the rendering. Flash has always had very good antialiasing support for vector graphics, and FIVe3D takes full advantage of this.

The last big pro of FIVe3D is the size of the files. An animation with a few simple shapes and lines probably will not exceed 10KB. Isn't that nice?

As a final note, be sure to download the updated version 2.0.1 available now on the project page. The initial 2.0.0 version was throwing some errors when compiled under 'Strict Mode' in Flash IDE. Now it is fixed.

Also, remeber to come back here some time, because I will be definitely posting more on that subject.

UPDATE MAY 12th 2008 I posted the source files of this demo. You can download them here.

Good news reached my RSS reader this morning. Zeh Fernando on his blog is informing us that Mathieu Badimon just released his 3D engine in AS3 - FIVe3d.

With all the hype about Papervision3D, Away3D and others, FIVe3d is an interesting tool to look at, because unlike others it renders 3D graphics using vector rather than bitmap data. There are some cases, like projects with lots of simple shapes with no textures and, above all, text, where this approach should give much better results. Check out the project site and you will immediately see what I mean.

There is an excellent post by Andy Zupko about rendering text in Papervision3D, that describes some tips and tricks to use text in PV3D. I think it would be interesting to compare how those two engines are dealing with this.

I got some feedback about the sound equalizer that I posted a few days ago, and especially about the reflection effect I used in there. I thought that maybe it was a good idea to write a tutorial about how to make these kind of reflection using AS3. It is a pretty straightforward technique, but it involves some bitmap manipulation, matrix transformations and color and alpha channel editing - three very interesting features of Actionscript.

It's my first tutorial ever and I must say it is hard to write one, much harder than I expected. Nevertheless, it is now here. The funny part of the story is that while I was writing it I actually came up with some improvements and tweaks on how to make those reflections, so I can honestly say I've learned some new stuff on the way. Take a look and tell me what you think:

+ REFLECTION EFFECT TUTORIAL (full article) +

Since a few days there is a lot of buzz about the Flash Player 9,0,124,0 Security Update. There seems to be a lot and confusing informations flying around on what's going to happen now. Without adding too much, I just want to share a very consise and clear article I found this morning on Adobe Developer Connection. Every new security feature intorduced in the update is explained there in detail, so go ahead, take a look and do not be afraid.