Everyday Flash

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.

UPDATE May 19th 2008. Source code. I was asked to post the source code of some other examples on the blog and I did it. Later on I thought there is no reason to leave this one behind. So, before anyone asks: the classes are commited to my Google Code account, and there is also a ZIP with the code and the assets here.

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.

Today I switched my blog from Blogger to Wordpress. I was a tough decision, but it was better to do it now, then later, when my blog will have more content. This operation might have caused, as a side effect, the resetting of all the posts in the RSS feed, which in turn did show them as "unread" in the readers. They are not new though, so just mark them as read... and sorry for the mess! :)

Got a background music on your Flash website? It would be nice to add a tiny equalizer in the footer. Or maybe you're developing an AS3 application that features MP3 playback? An equalizer will surely be useful in there too...

During the long years I spent on creating campaign sites in Flash, the need for an equalizer kept coming back. However, with a tight deadline (all dealines are tight, aren't they?) there isn't always enough time to develop such 'sweet candy' elements. If you've ever been there, search no more and check this out:

I developed this classic sound equalizer, while I was playing with the BitmapData object in AS3. Now, it surely ain't a breakthrough or a milestone in actionscript development, and lots of really cool sound visualizations are already out there [1] [2]. The way I see it, this classic equalizer is a ready-to-use, easy-to-use (even for the non-gurus) and highly customizable component. Thanks to the usage of BitmapData rather then vector graphics it is also pretty fast.

Feel free to play around with the demo above, and if you like it, you can get all the SOURCE HERE. I publish it under the MIT license which means that you are free to use it for anything you want.

Inside the source ZIP you will find a few AS3 classes, a FLA cointaining an example and a READ_FIRST text file, which you should... well, read first. The equalizer is pure code, so there are no assets. Just add the packages to your classpath and you are ready to go. The basic class that is responsible for drawing the equalizer is the com.everydayflash.equalizer.Equalizer. Since it extends the Sprite class, just create an instance of it and add it to your DisplayObject like this:

import com.everydayflash.equalizer.Equalizer;
var eq:Equalizer = new Equalizer();
addChild(eq);

.. and that's all folks, you should see an equalizer by now. Of course for the equalizer to work there must be SOME sound playing in your Flash application... I leave this to you, but in case you do not know how to play a sound in Flash, here's a simple tutorial I googled for you.

In order to customize the way it looks, the Equalizer class constructor takes an optional argument, which is an instance of com.everydayflash.equalizer.EqualizerSettings class. Check the source of this class to see all the options that can be set in there (more or less everything that is available in the demo above). Also check the example Main.as class to see how to use it - it is merely a few extra lines of code.

Have fun and email me if you have any questions!

After almost 1,5 year in FI I decided to take another path, and from the end of March 2008 I will be starting as a Flash Developer in a web & film production company B-Reel.

Work in FI was my best profesional experience so far, and I would recommend anyone who wants to learn how to create and deliver the highest quality to apply there. It is also a place where one can meet the most skilled developers around, and last but not least, they have a beautiful office here in Stockholm.

B-Reel is a company that specializes in online campaings that combines video, animation and interactivity.

As a way to explore some Papervision3D basic features (and also for fun) I created this miniature application that lets you explore some of the most important and famous works of art. If you did not pay a visit to any museum for a long time, here's a chance to make it up!