The aim of this demo was to update John Grden’s legendary Papervision3D X-Wing model – as seen in this classic papervision demo – and really bring it to life with some nice animated 3D particle effects.

The demo combines Papervision3D and the Stardust Particle Engine to add particle effects to the existing 3D model. I used Stardust’s built in Papervision extension to add the classic red glow of the X-Wing engines and then animate those engines as the ship accelerates away from camera. It’s quite a subtle effect, but if you look closely you can see a kind of red heat haze, I also like the way the white flames fade in and out as the ship speeds up and slows down.

I know this kind of effect could easily be done in something like Unity but I think it’s pretty cool to see it done in real-time in Flash. The original Papervision3D X-Wing demos were a real inspiration to me, and it’s amazing just how much a little effect like this can add to what is already an amazing 3D model.

Click here to view the demo and source code.

This demo is another example of the cool effects that can be made in Flash and ActionScript 3 using the Stardust Particle Engine.

By combining a simple particle effect with lots of Flash filters and some BitmapData processing, it’s possible to create some pretty abstract looking flame effects. The initial idea was to make something similar to the neon particle systems seen in games like Geometry Wars and Grid Runner, but after playing around with the Flash bitmap filters for a while I ended up with this cool looking flame effect instead.

The code is actually fairly similar to my earlier tutorial on using the Stardust engine, but this time I’m setting the velocity of the particles based on the speed and direction of the spaceship to create a nice engine flame effect that reacts to the ship’s movement.

Click here to view the demo and download the source code.

The Stardust Particle Engine is a great new addition to that long list of open source AS3 projects out there on the web. While Stardust can look like a fairly complex system to get started with, this tutorial will hopefully show you how to setup a simple particle effect using the library and give you enough understanding of how it works to start making your own effects as well.

Stardust has a lot of cool features, and much of its structure and functionality will be familiar to people who have already used the Flint particle effects library or the Box2DFlash physics engine.

What makes this engine different is the way it brings all these features together in a modular and well designed package. It supports 2D and 3D particle effects (via its own internal 3D engine and through plugins for Papervision3D, ZedBox or ND3D), particle masking to help create more complex logic, and even the option to configure your effects using external XML files.

In addition to this great list of features is an excellent set of documentation, a nice introductory user guide, lots of really good code examples and even some FlashDevelop class templates that make it much easier to extend the core classes for your own effects. All of these extras are available from the links on the Stardust project home page.

So anyway, on with the tutorial, what we’re going to do is create a very simple multi-coloured smoke effect that will follow the mouse around the screen. It’s nothing too amazing I guess, but hopefully it will work as an intro on how to get started using the Stardust particle effects engine.

As part of my series of quick guides to open source AS3 projects I thought it would be interesting to look at the range of code frameworks and toolkits that are currently available for Flash website development.

If you’ve ever tried developing a website completely in Flash then you will know just how much work it can take to setup the initial project structure and make Flash behave in a similar way to a standard HTML website. From asset loading and memory management to deep linking and browser history support, chances are that there is a site framework or code toolkit that makes building websites in AS3 that little bit easier.

This post is the first in a series of quick guides for programmers new to Flash and ActionScript development.

While much of what is covered will probably be familiar ground to many ActionScript developers, for Flash newbies these guides will hopefully offer a good introduction to the code libraries available for use in your projects. This one will focus on the range of 3D engines that are now available for Flash, highlighting the key features of each engine and hopefully help make it a little bit easier to choose one to use.

Following on from my previous post about the new 3D features of Flash Player 10, I decided to take a look at a more advanced way of drawing 3D graphics in AS3, using the new drawTriangles method of the updated Graphics class.

This demo was my attempt at creating a version of Soulwire’s Papervision3D Ribbon class using native Flash Player 10 code, and while the demo doesn’t support the more advanced features of the Papervision version, the final result does look quite similar. In fact, if you take a look at the code you’ll see just how simple 3D can be when using Flash 10.

Using drawTriangles to render 3D graphics is fairly straight forward, requiring you to pass in a number of different Vectors to describe the geometry of a 3D mesh. A Vector is Flash 10’s new typed array class, and is very useful for making sure that an array contains only one type of data. The drawTriangles method accepts four parameters, three of them Vectors, but I won’t go into this in detail here as there are many good articles that explain it far better than I can, such as this excellent introduction to drawTriangles by Ryan Taylor.

What I will note is that from my tests and what what I have read, it seems that drawTriangles (while very useful) is best suited to quick and simple 3D effects. If you’re looking to render light sourced materials with proper z-sorting, or more than one texture map per object, then you will probably need to write your own classes to do just that, much as this post by Neuro Productions explains.

In fact, what really makes 3D in Flash 10 shine are the new utility classes such as Matrix3D, Vector3D and Utils3D. If you look at the code for the demo below you will see that there is really not much complex maths being used, instead it is mostly taken care of with these new classes.  And it is these classes which new engines like PapervisionX or Away3DLite will most likely be using to boost speed and improve visual quality in Flash Player 10.

Click here to view the demo and source code

So I finally got around to setting up Flex 4 with FlashDevelop 3 and thought I would have a go at making another music visualizer, this time using some of the new features in Flash Player 10.

Setting up Flex 4 turned out to be much easier than I expected (was just a case of swapping it for Flex 3 in the FlashDevelop compile settings), and while you don’t get code completion for the new Flash 10 classes everything else runs fine.

While there’s lots of great new features in Flash 10, the one thing I wanted to try out was the new built in 3D transforms and drawing API. So I set about trying to make some kind of 3D sound tunnel, the aim was to get something that looked like an old Llamasoft game, although I’m not sure quite how successful that was.

Anyway, the code turned out to be surprisingly easy to write, it seems that Adobe have gone to some real effort to make sure that the new 3D effects in Flash 10 are as easy to use as possible. In many ways it’s actually quite similar to how Five3D works, you can rotate any display object on any axis, move the vanishing point of the scene and even adjust things like camera focus and field of view, although as far as I know you cannot actually move the camera itself.

While this is all great, there are a few limitations to these new 3D effects as Keith Peters has pointed out in his posts about the visual quality of 3D in Flash 10 and the effect this has on nested display objects with 3D transforms. Some of this, such as the lack of anti-aliasing, you will be able to see in the demo below.

Despite these issues, I think the Flash 10 3D effects will come in very useful on some future project where low file sizes and simple code might be more important than higher visual quality.

Check out the demo and source code below, as usual the music (or you could just call it noise) was made using the Hobnox AudioTool ToneMatrix, which is their version of the Yamaha Tenori-On.

Click here for demo and source code

Following on from my earlier post about loading xml from a VizualPV3D scene into Papervision3D, this class extends VizualPV3DLoader by adding some basic integration with the brilliant JigLibFlash 3D physics engine.

At the moment it is really more of a tech demo than a fully featured class, but it shows potential and I thought it might be useful to post it here. The class takes any cubes that are listed in the scene xml and turns them into physics objects using JigLibFlash, creating a set of static surfaces that could be used as the backdrop for your project. You can then create extra physics objects manually in ActionScript and add them into the scene as well.

So what could you do with this? Well theoretically it might be possible to make a simple 3D game using VizualPV3D to build the levels out of cubes, then animate parts of each level to make moving platforms or doors, before adding other more interactive elements like enemies or a player character using some extra ActionScript.

For more inspiration, there are some really cool JigLibFlash demos over on the project’s main blog, which are definitely worth checking out.

Here’s an example of how you might use the class in a project.

//include the class
import me.pv3d.VizualPV3DPhysics;

//elsewhere add it to your physics enabled papervision3d scene
var light:PointLight3D = new PointLight3D(); //light
var physics:Papervision3DPhysics = new Papervision3DPhysics(scene, 5);
var pv3d:VizualPV3DPhysics = new VizualPV3DPhysics('./assets/', light, physics);
pv3d.load('scene.xml');
scene.addChild(pv3d);

//then when the scene has loaded access objects by name and move them about
var mybox:RidgidBody = pv3d.getPhysicsBodyByName("mybox");
mybox.y += 10;

Here’s a very simple demo based on the game idea above, links to the demo and source code are below.

View demo and download source code

VizualPV3DPhysics

Demo 1

Music visualizers really are great, all those colours and patterns you see generated by the music in media players like iTunes are nice to watch, and with AS3 it turns out that it’s actually fairly simple to make something similar in Flash. That’s great because it offers a cool way to learn more about ActionScript graphics programming, the drawing API, Filters and the BitmapData class.

To get the sound spectrum data from the currently playing sound it’s just a matter of passing a ByteArray to SoundMixer.computeSpectrum on each frame, then looping through it and using the values you get to draw some nice stuff on the screen. Combine that with some user input and you can make some pretty amazing lightshows with just a few lines of code.

Here’s the basics of how to get the sound spectrum data:

var sound:Sound = new Sound();
sound.load('music.mp3');
var soundchannel:SoundChannel = sound.play();
addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event)
{
    var bytes:ByteArray = new ByteArray();
    SoundMixer.computeSpectrum(bytes);
    for(var i:int=0; i<512; i++)
    {
        var value:Number = bytes.readFloat();
        //now use 'value' as the basis for
        //drawing your graphics to the stage
    }
}

The demos below are mainly based on an example by Todd Yard from his excellent book on AS3 Image Effects. I’ve added in some extra BitmapData effects filters and after trails but the main structure is quite similar. A few other posts I found useful while reading up on this subject included this one by Grant Skinner, this one on Antti Kupila’s Blog and a Papervision3D version by John Lindquist. It’s also worth checking out the Adobe live docs for the SoundMixer Class as there is some useful info and examples on there as well.

Also if your interested in audio visualizers in general, then the Lightsynths on the Llamasoft website are definitely worth a look, Llamasoft is the creator of the Xbox 360 music visualizer and Atari Jaguar classic Tempest 2000.

Anyway, below are some screen grabs of the demos I made plus links to the demos and source code too. The music used was just something quick I put together using the fantastic Hobnox AudioTool and it’s ToneMatrix setup.

Click here to see the demo and download the source.

Demo 2

Click here to see the demo and download the source.

If you haven’t yet seen it, VizualPV3D is the excellent GUI interface from Juxt Interactive for creating 3D scenes using Papervision3D. It’s currently in alpha, but definitely worth checking out as it already has loads of great features and makes creating complex 3D scenes in Flash very easy indeed.

Having played around with the program for a while I then wanted to import the scenes I’d created into a new AS3 project but couldn’t find any classes included to do that. I think these features may be added in a future version, but for now I wanted something simple and reusable to try and get the geometry and materials of the scene imported quickly, so I wrote a basic class to do just that.

The class is called VizualPV3DLoader and currently supports the following: basic primitive shapes (cube, cylinder, cone, sphere and plane), basic materials (wireframe, flatshade, cellshade, gourad and phong), external BitmapAssetMaterial’s, positioning elements in the 3d scene and grouping elements together within empty DisplayObject3D containers.

The class itself extends DisplayObject3D, so you can add it straight into your main scene. From there you can access all the groups and objects in it by name. I’m looking at adding in a few more features in the future, including: more materials, text3D support and maybe event integration with a physics library.

Usage is fairly easy…

//include the class
import me.pv3d.VizualPV3DLoader;
//elsewhere add it to your papervision3d scene
var vLoader:VizualPV3DLoader = new VizualPV3DLoader('assets/', light);
vLoader.load('scene.xml');
scene.addChild(vLoader);

The constructor takes a couple of parameters, the first is for the assets directory (where your external textures are stored) and the second is for an instance of PointLight3D for use with any shaded materials. You can also add a listener for a VizualPV3DEvent.SCENE_READY event, which might be useful if its a really complex scene that takes a while to process.

Below is a screen grab of a simple demo I made with the class and a link to view the demo and download the source code, maybe someone will find it useful.

View Demo and Source Code