This is a small class I recently created for a project. Basically it makes you tween the “percents drawed” of an outline shape. The shape is simply defined by an array of points, so you could also draw simple lines with this!
The cool thing is that you don’t have to be a math genius or animate many lines separately, you just tween the percentage of the entire shape to render/draw.
See an example here
Get the source class and example here
Tip: click the stage of the example and see how a shape (only the first shape in this example) can change the positions runtime.
You will of course need TweenLite to use my example.
Most Flash developers know of Five3D and Vectorvision – the 3d “engines” based on vector graphics. They gained a lot of popularity and for good reason. I have used them frequently, and I will continue using them on specific projects, they are awesome!
I just developed a small demo using my own 3d vector drawing tool – not nearly as large and useful as the others, but for small animations and really simple stuff, it’s a quick way to draw in 3d without using other libraries and without Flash converting everything to bitmaps. And it just feels nice to know what your code actually does.
To be honest, I tried using Matrix3D but ended up with a simple solution of using “local3DToGlobal” – which works great, but I suspect it being a bit slow – if anyone has insight on this please post a comment.
Check out this small demo with three objects inside.
In this demo I tried building a house – but as you can see there is no z sorting!
This demo has vector drawn text – using the same font classes as Fived3D/Vectorvision/Papervision
Shading can be applied easily, which is pretty cool for simple shapes.
It’s made really simple so it’s easy to use (and low in filesize of course), I’ll post the code soon when I get it cleaned up a bit.
Some time ago I promised to share the source code behind some of the Kenneth Elgaard website. I have had some requests since then, and I’m sorry it took so long, but now I have the code ready!
The advantage in this solution (in my opinion) is the ability to utilize Flash Player 10 native 3d, instead of standard 3d engines. Not that Aways3D, Papervision etc. aren’t great, but for really simple stuff (like this), it’s nice to be in control of all the code, and of course not add extra kb. to the filesize. Another benefit is the ability to resize these 3d objects runtime, in this example the cube is always the same width/height as the entire stage – just like the website I did for Kenneth Elgaard. (Please notice though that the cube is pushed back on the z axis – that’s why it doesn’t fill out the screen!)
This example also uses simple shading on the sides.
Check this example out and try moving the cube around and scaling the browser window.
Download source here
April 28, 2010 – 11:25 am
As most of you Flash developers most likely have experienced, Flash (and Photoshop for that matter) doesn’t create perfectly smoothed gradients!
The common trick is to apply a little noise in Photoshop (or similar) and save as an image.
The exact same idea was behind this “PerfectGradient” class. I simply wanted to be able to create gradient backgrounds with less banding and without loading a jpg/png.
Obviously this is not alway the best solution – sometimes you don’t want noise in the image and sometimes there is no banding problems with your colors – but for some cases, especially large background gradients, this could be very useful.
This class only supports rectangle gradients with two colors – either in linear or radial gradient style , but feel free to extend it. The syntax is easy, below is an example:
private var _linearBrightA:PerfectGradient = new PerfectGradient(500, 1000, 0xBBBBBB, 0xCCCCCC, Math.PI * .5, "linear", true, false, "lighten");
The parameters in the constructor are: width, height, color 1, color 2, gradient rotation, gradient style, use noise, use blur, blendmode for the noise and blur overlay.
Take a look here to see some different examples (click to switch between different examples). Every example has 3 PerfectGradients – one with only noise, one with both noise and blur, and one withoout any (clean gradient).
The banding issues are hard to see on small screen resolutions.
Download the example and class here
February 4, 2010 – 3:06 pm
I have seen a lot of Flash developers struggling with the issue of drawing and animating piecharts. I recently developed this simple class to take care of this, so I hope it gives someone a helping hand.
It’s really simple, just use a “radius”, “start angle” and an “end angle”, by tweening the “end angle” value, you get an animated piechart – simple but nice.
Here are three examples:
Using a circle mask for image transitions
Multiple piechart animations simultaneously
Advanced version with a gradient applied
January 22, 2010 – 3:51 pm
Some time ago I developed some distortion classes in order to achieve an rgb split effect and some random perlin noise. I found out that a small “engine” for those purposes would sometimes be very useful (at least to me), so today I finally had time to wrap it up.
To call it an engine is maybe a bit overstated, actually it’s just a quick way to set up different types of distortion and change the amount of distortion applied.
January 2, 2010 – 8:47 pm
I just want to share this little experiment with you. I have been looking for an easy way to use as3dmod to bend materials with a “lighter” 3d engine. But as3dmod works only with the more advanced engines like Away3D and Papervision (and it works very well with them).
However I sometimes need (wish for) a lighter version easy to use in normal small projects, banners etc. and this is the purpose of my own “bend” modifier. It’s really simple and can’t do half of what as3dmod is capable of (it’s not build with triangles but simply rows of squares!), so there’s no twisting etc. but only a simple bend is possible.
The good thing from my point of view, and the reason I created this, is that it uses the native 3d in Flash Player. My example swf below is about 12 kb including the TweenLite engine, and it compiles a LOT faster than my projects involving Papervision and Away3D.
Source will be up soon – it’s not rocket science, but maybe you can use it for something! The example is build by 32 segments – which is a lot more than I would usually do with 3d engines, but here it seems to work fine.
I still recommend as3dmod and the real 3d engines for serious 3d Flash work – they perform really well and offers a lot of posibilities.
Take a look here
November 24, 2009 – 3:29 pm
Wow, long header for this post. But this is a simple experiment! I was inspired by a cool RGB splitting effect on an image I saw recently, but I figured it would look cool to have it be even more interactive. This led me to develop this: DEMO
It’s a simple webcam stream which rgb splits the bitmapdata in 3d space according to the mouse position – just move around your mouse cursor and see.
Nothing crazy actionscript wise – but it looks cool, right?
September 17, 2009 – 5:50 pm
There’s a new kid on the (crowded) block. Another 3D engine has been released, but this one is worth a serious look. It’s a new lighter version of Awayd3D called Awayd3DLite. I have been playing a little around with this engine, and for my purpose it’s just as good as Papervision, but compiling time and filesize is reduced tremendously – so I’m probably using this in the future! The engine has primitive objects such as cubes, planes and spheres, so unless you are doing really heavy/advanced 3D development, this engine is highly recommended.
Note that you must publish for Flash Player 10 to take this engine into consideration (but you are already doing that I hope…)
Here are some other links for my favourite engines – or at least the ones I’ve tried 
Five3D
Papervision
Alternativa
Btw. my next project is using my own “engine” for simple 3D stuff like cubes and z-sorting.
There has been a lot of 3D in Flash lately, but not many developers have used the “new” Flash Player 10 (CS4) 3D features. I have tried to use it for several projects, and I understand why many still prefer Papervision3D, Away and similar libraries. I also still use and recommend Papervision for most of my 3D projects, but for simple stuff, the new 3D features actually holds some cool possibilities, such as faster compiling time, lower file size, better control of garbage collection and my favourite: scalable content – that’s extremely complicated in Papervision (for instance scaling a 3D plane up/down).
There’s a lot of bugs especially with mouse events in the new CS4 3D, but if all you need is a simple plane or cube, you can easily use this and benefit from the low file size etc.
I have made a small example with a 3D cube. This doesn’t resize or hold animated content, but you get the idea when you see the code! It’s actually really simple. The z sorting class is made by Drew Cummins and works great. The cube loads 4 images when created – click the cube to load next image and rotate.
You can see the demo here ( – click the cube to load next image and rotate)
Source code here ( – remember to add images in the “pics” folder, they are not included in the source)