Anatomic

It's taken far too long to get this post up, so many apologies but I hope something of interest comes from it anyway!

Click here to download:

IMG_0206.MOV (20405 KB)

Loading mentions Retweet

FITC got started properly today and judging by the crush to get into the Keynote by Richard Galvan and Mark Anders it was going to be a busy day!

Loading mentions Retweet

Today was day zero of the FITC Amsterdam conference with three workshops being held in the Felix Meritis centre, a gorgeous building inside and out, with some really unusual features. Our workshop was on the first floor and the room had a large ceiling with huge pillars lining the longest sides. The main Concertzaal room is equally impressive and spacious - though it needs to be judging by how popular the event is!

I was booked to attend the Byte My Flash track, hosted by Lee Brimelow and Thibault Imbert, a full day workshop about programming at byte level in Actionscript 3. The two other tracks covered custom events and getting creative using the HYPE framework and both looked good. I was a bit gutted to not get to see Branden Hall and I think this could be a recurring problem with such a talent packed schedule of events!

The ByteArray workshop definitely had the potential to get quite gnarly but for the most part it was kept at a good, understandable level. Lee is an accomplished and excellent speaker about programming flash and Thibault is a crazy French Actionscript ninja so we were in safe hands. The hardest thing seemed to be getting the Flex 4 and AIR 2.0 frameworks set up properly for Thibault's topics - I'll echo Lee's comment about Flex and the trouble it causes! (As a quick side note, check out bytearray.org - it's Thibault's blog and has so much crazy stuff packed into it!)

We covered stuff like making a custom FTP client, decoding PSD and BMP images, creating sounds from code, reading pop mail and finished by making an air app that uses the AIR 2.0 NativeProcess class to encode live microphone data to an mp3 file. Pretty damn cool stuff and only a taster of what is possible when you work at byte level. It's exciting to think how much potential there is to extend the Flash Player.

Even cooler (potential oxymoron coming up) was the World of Warcraft demo from Mike Chambers, showing us a neat app that could send images over a socket to a client on an iPhone developed in Flash CS5. Impressive!

After the workshop I went back to the hotel for a bit and checked on twitter to see what sort of buzz there was about FITC and to see if there was anyone around that fancied chatting about flash over dinner.

One of the things I really enjoy about working with the Flash Platform is the community and tonight was a great example of how strong it is. Five of us (the majority strangers to one another) met at the Pancake Bakery in the North of the city after arranging to meet up on Twitter. It was great, especially given that I'm the only person from Coolpink to head over (all alone in the big city!) and didn't know anyone here in Amsterdam. It was really interesting to see how different nationalities go about their business and how their industry is viewed by their surrounding economy - I never want to work as a Flash Designer in Portugal!

That's it for today, I'm putting my feet up in the hotel bar and getting ready for a really busy day tomorrow. So many good talks, but I'm really excited to see Erik Natzke and Ralph Hauwert. Looking at the schedule I think I'm going to be camping out in the main room!

Loading mentions Retweet

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

(download)

Click here to download:

EmbeddedSound.swf (6048 KB)

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

Loading mentions Retweet

(download)

Click here to download:

emergentBehaviour2.swf (4 KB)

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

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:

• Keith Peters (Bit 101) - www.bit101.com www.artfromcode.com
• Erik Natzke - http://jot.eriknatzke.com/
• Joshua Davies - http://www.joshuadavis.com/
• Brendan Dawes - http://www.brendandawes.com/
• Quasimondo - http://www.quasimondo.com/
• Zen Bullets - http://zenbullets.com/blog
• Dr. Woohoo! - http://www.drwoohoo.com/

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

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.

 

 

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

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

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