Anatomic

Flash, Actionscript, Papervision3D and assorted other nonsense. 
Tags



January 20, 2010

Playing with graphics: making pretty patterns from sound with Actionscript 3

Bit of a big one to download but worth the wait - using code to produce interesting graphics based on data from a song.

(download)

Song used is Calvertron - Doggy Style (Zodiac Cartel Mix)

Loading mentions Retweet

Comments [2]

January 20, 2010

Performance test with AS3 and thousands of particles

(download)

I've never experimented with using bitmapData and the copyPixels() method to increase performance when animating a large number of particles so I thought I'd have a quick play to see what could be achieved.

This demo has 2000 particles that bounce off the walls, have gravity and friction and are given a small motion blur and it manages a nice 24/25 fps (see the stats).

As I said above, this is a first proper experiment where I've tried to bypass the Flash Player vector renderer and I'm amazed by the results!

Click your mouse to restart the animation.

Loading mentions Retweet

Comments [0]

January 14, 2010

Starting to play around with generative art using Actionscript 3.0

Up until recently I've not had much of a chance to play with generative art, though it's something that I've meaning meaning to check out for ages.  I've looked into Processing and had a little play with NodeBox before, but have never really used Flash in this capacity.  Flash, however, is an excellent environment to get into generative art as coding on the timeline can be loose and fast, with no need to get into classes and objects (unless you want to).  I think the term is 'sketching' and it's a good way to think of this sort of coding.  It's coding for designers, not developers.  Quick (and dirty) little scripts with no regard for performance that solely exist to produce interesting (if not beautiful) graphical output.


Lissajous Curve

Lissajous is a term that I've heard several times, most recently from Brendan Dawes (http://brendandawes.com) as he used the formula in his recent 'Elena' iPhone app.  Lissajous Curves (or Bowditch Curves) refers to a family of curves investigated by Nicholas Bowditch and later by Jules Antoine Lissajous and are produced from the following equations:

x = A sin(at + d), y = B sin(bt)

I don't profess to being an expert in this field, so I'd highly recommend having a good search for more information.

The curves change quite dramatically when the constants in the equations are changed, with some of the most interesting patterns happening if they are changed over time.

Some images

Below are some of the images that I've produced using these equations.  There's nothing more complicated than drawing dots, squares and lines involved in most of them.  I found that the code tends to change quite fluidly after a 'run' and this is something that I really enjoyed about this sort of work.  It changes, it evolves.  There's a constant 'what if...?'  You are encouraged to explore different algorithms and different ideas to see what happens.  It brings back the 'happy accident' to coding.  Although I've not done that much yet, I can definitely see myself turning to generative art as a break from photoshop and more application based flash development.

Further reading

If this has got you thinking about generative art, I'd definitely recommend reading some of the posts from the following people:

Also check out http://www.letitbloom.com/ for some great work by the above people and more (hint, press refresh!).

 

 

           
Click here to download:
Starting_to_play_around_with_g.zip (4368 KB)

Loading mentions Retweet

Comments [2]

January 8, 2010

How to reuse actionscript code when working with Flash CS4 - a quick AS3 tutorial

Just a quick one this, hopefully showcasing how to use classes with MovieClips in Flash CS4.  I'll cover two basic methods, one ties different MovieClips to a base class and the other re-uses a button class.

Making a reusable button

To keep it quick and easy this will be a simple fade in and out effect on a button so start off by making a button design that contains a dynamic text field with an instance name of 'label'.
Once our MovieClip is created, it needs to be setup to export for ActionScript.
 
 

First, open the properties for the symbol in the Library, then tick the 'Export for ActionScript' box and fill in the correct linkage.  
Notice here that for the class I've typed in net.anatomicdesign.Button - this is something that I'd encourage any developer to do as it is industry best-practice.  For small things like this it doesn't make too much sense, but on larger projects organising your classes into proper packages is really important so it's good to get into good habits.

From here, create a new ActionScript3 document called Button.as and save it in the folder net/anatomicdesign/ (or whatever the package names are that you choose to use).

Now it's just a case of filling in the code.  I normally start off by deciding what I want to happen in a class and then building up functionality from there so, for the button class we'll typically need event listeners for mouse over, out and click.  From here, you can go on to insert the code needed to animate the button (perhaps using a Tweening library such as TweenLite) in the correct functions.  Note that if the button needs any setting up, that code should be added to the constructor (the function that is given the same name as the class).  For this example, I'm adding a parameter to the button that sets the button's label and I'm also going to alpha out the button slightly.

To use the button you can either place instances on the stage and set the labels using timeline code (using the setLabel function) or you can simply delete the instance from the stage and add the button using code such as

var buttonA:Button = new Button('First Button');

Giving different button designs the same functionality

A slight twist on the previous example is using a base class to provide the same functionality to different MovieClips.
Instead of linking the Class to the Button.as, we'll leave the name the same as the Symbol name and instead set the Base Class to be Button.as

Doing this, Flash will create a unique class for the button at runtime, but it will inherit the super class' functions.  So if Button.as (at its most basic) looked something like the code below, any button that had the Base Class set to Button.as would be  ready with listeners setup for mouse over, out and click.  This could be taken further if you wanted them to have the same animation/tweened properties by adding the appropriate code to the relevant functions.

Hope this helps out some people that are just getting to grips with Object Oriented Programming within Flash using ActionScript 3.  AS3 is really powerful and a lot faster than AS2 so keep plugging away if you're struggling, it'll all be worth it in the end!!

Loading mentions Retweet

Comments [0]

December 26, 2009

Actionscript 3 Display List Tutorial Part 1: Getting To Grips With The Basics

I've been meaning to write a little introduction to the Display List for quite some time so hopefully this post will provide some very useful tips and tricks for people that are just delving into working with AS3.  It's not an advanced tutorial but hopefully there'll be something of use to most Flashers!

To start with AS3 is different to AS2 in that a display object doesn't have access to the Stage until it is added to the display list.  This is a key thing to keep in mind when working with movieclips and sprites in code, especially when trying to initialise a movieclip that needs to know the stage size before it is added to the display list.  This might sound weird if you're new to Flash and haven't touched AS2, but if you're coming from AS2 it's an important change to the way everything works. With that out of the way, what is the display list?

Display List Basics
Think of the Display List like a family tree.  Sitting at the top is the Stage, it's the top level display object container and if you want to have something visible to the user then that movieclip (or sprite) needs to be added as a child to the stage.  This looks something like this:

     stage.addChild(myDisplayObject);

With AS3 you don't necessarily need to write that line of code, especially if you are working with a Document Class.  Typically you will write the code like this

     this.addChild(myDisplayObject); //when working inside the Document Class
     myDocumentClass.addChild(anotherDisplayObject); //when working with a class that holds a reference to the Document Class

Now, in this family tree business you don't have everyone with one parent (that would be madness) - you have variations generations of parents and children (who can become parents themselves).  The Display List works in a similar way with Movieclips and Sprites having functionality to be parents to other Movieclips (and Sprites) as well as children.  In its simplest form this means that you can add Movieclips to other Movieclips as children.  The key thing here is that an object can only have one parent, but (unlike the family tree metaphor) that parent can be changed at any time.  You can also remove an object from the Display List completely.  The following example shows some variations of adding, re-parenting and removing objects from the Display List.

     var a:MovieClip = new MovieClip();
     var b:MovieClip = new MovieClip();
     var c:MovieClip = new MovieClip();
 
     stage.addChild(a); //add the first movieclip to the stage
     b.addChild(c); //add c to b.  NOTE:  neither of these two clips are on the stage yet, as the parent hasn't been added to the display list
     a.addChild(b); //now all three are visible as a is the parent of b and a has already been added to the display list
 
     a.addChild(c); //we have re-parented c from b to a so both b and c are children of a
 
     a.removeChild(b); //the only items visible now are a and c

The order that you add children to a parent determines their depth in the list, with the last added child being the highest up in the Display List.  This is important to remember if you find that objects are hiding other objects in a way that you don't want.  If you find yourself in this situation you can simply add the hidden object again (no need to remove it) and that will move it to the top of its parents list.

What Else Can You Do With This?
This is working with the display list at its most basic and doesn't really hold much of interest other than getting your objects to be viewable by the user.  I'll go over some more advanced techniques in the next part of the tutorial (which starts to look at other functions that allow you to work with the Display List) but as a parting shot I'll just cover some ways to hide objects from view.

The Flash Player isn't the most performance savvy piece of software so whenever possible you have to lighten it's processing load to get the best possible performance and hiding objects is one little tip that can claw back precious miliseconds of processing.  Simply put, setting a Movieclip's alpha value to 0 will still result in a performance hit as it will still be rendered by the Flash Player.  Typically if you are going to set alpha to 0, you should also set visible = false for that object so that the Flash Player will ignore that object when doing a render.  It doesn't seem like much when you're working on a small project, but if you start working with a large number of Movieclips this sort of optimisation becomes absolutely essential.

Lastly, if you're not going to need a Movieclip for quite some time (if at all) then it's best to remove it from the Display List altogether.  To sum up:

     myClip.alpha = 0;  //bad
 
     myClip.alpha = 0;
     myClip.visible = false; //better
 
     stage.removeChild(myClip); //best - substitute stage for the clip's parent

Loading mentions Retweet
Filed under  //   actionscript 3   flash   tutorial  

Comments [0]

December 22, 2009

The coldest drive to work yet!

Loading mentions Retweet

Comments [1]

December 18, 2009

Ice skating in Guiseley!

Loading mentions Retweet

Comments [0]

December 13, 2009

Geordie Jeans, specially tight ... around the arse

"The leave room for me farts to float about in ya know like, for when I'm gaanin oot."

Loading mentions Retweet

Comments [0]

December 7, 2009

'Tache me up one time!

For our christmas party at Coolpink we were heading out to the Casino so Leigh and myself thought the only way to achieve true gentleman status was to sport a moustache.

I think this post serves more as an acute reminder to never again grow a 'tache than as a cheap laugh at my own expense!

It's truly awful.

Loading mentions Retweet

Comments [1]

December 1, 2009

Another Augmented Reality Snapshot

Loading mentions Retweet

Comments [0]