Flash on the Beach 09 – Play with Vectors

This year I was only able to go to Flash on the Beach on the very last day. Never the less it was once again a really awesome experience and I learned a lot and got a lot of inspiration as well. I’ll try and post my notes from all the talks I’ve seen, but it might take a while…

23-09-2009 9.00 Koen de Wieggheleire – Play with Vectors
Koen did a very in depth talk about the Vector class in AS3.

The Vector class is a dence array which means that it can’t have any gaps, so something like the below would throw an error:

ActionScript

  1. myVector[0] = 'bla'; // See how we're skipping positions 1 and 2?
  2. myVector[3] = 'something else';

You can you an array as a ‘data provider’ to populate a Vector:

ActionScript

  1. myVector = Vector.<String>(myArray);

Using the Vector class will give you a performance boost of about 40 to 60%.
Unfortunately you can’t directly bind to a Vector in Flex, you can however write a wrapper class and bind to that. 😉

How to use in 3D

The Matrix3D class is somewhat complex to understand, but the image below should clarify it a bit

You can use myDisplayObject.transform.matrix3D to retrieve a DO’s Matrix3D or assign a new matrix3D to it. There are also build in methods to user rather than creating a new Matrix3D all the time, see http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/geom/Matrix3D.html

Nice thing I only found out now about matrixes: You can skew objects with it! Rock on!!! \m/

How to use with 2D

Pretty much the entire graphics API in Flash relies on Vectors. The drawPath() method below (which is pretty much the core of drawing vector shapes) takes two Vectors (the Vector data type) as arguments.

ActionScript

  1. graphics.drawPath(commands, data)
  • the commands argument is a Vector containing GraphicPathCommands
  • the data argument is a Vector containing x and y pairs that determine the path to draw.

The new Illustrator can export to FXG and you can actually import this FXG data on the fly in Flash, parse it and draw the exact same.

Some notes on UVT (texture) mapping:

  • U matches up with the x location
  • V matches up with the y location
  • T determines the focal length

The right value for T can be calculated with the following formula: T = focalLength / (focalLength + z)

Useful links:

Flash on the Beach – day 2 (part 1)

09.00-10.00 Aral Balkan
Grab the Low-Hanging Fruit (or 5 Rules for Hedonistic Creatives)

I was too early to remember what his rules were. I did, however, take some notes of what striked me as interesting and worth knowing more about. I think the general idea of his talk was that we should not constrain our self to AS only, but also look at what else is out there. In other words: Think (and work) outside the box!
Have a look at Scratch for instance, a simple tool created by MIT to program. This might be really nice to do quick prototyping.
Another thing I want to have a look at is the Python programming language and / or Ruby on Rails.

Site: http://aralbalkan.com/

References:
http://scratch.mit.edu/ (Scratch)
http://ipython.scipy.org/moin/ (access to all python methods and docs through a command line iirc)

10.15 – 11.15 Niqui Merret
Accessibility – beyond the basics

A great talk about how to make Flash sites more accessible. Interesting to know is that Flex has accessibility turned off by default.

Use the AccessibilityProperties class to control the presentation of Flash objects to accessibility aids, such as screen readers. After setting all the properties don’t forget to call the Accessibility.updateProperties() method. Then check to see if MSAA is active, if it’s not queue the accessibility updates, set a delay for about 2 seconds and try again.
For pv3d it is advised to use the layers that are available in pv3d, though I think you could apply accessibility properties to any do3d.

Site: http://niquimerret.com/

References:
http://code.google.com/p/accessible/ (by Charles Brandt)
http://jadehopper.com/

11.30 – 12.30 Joa Ebert
Audiotool’s Private Parts

Joa is just brilliant. His talk was about how they optimized a lot of the Hobnox Audiotool. It was for the utmost importance that performance would be as good as possible, cause any delay would cause a hick up in the audio.

The first step was to improve how the cables between audio components were calculated. How you usually do that is in 3 steps.

  1. Create nodes representing each component
  2. Build a graph out of those nodes
  3. Use a path finder to determine best routes

To optimize this they made use of the Quadtree method. An added benefit of this was that they could reuse it to see if there was already a component in a spot when the user drags a new component on the screen.

The second optimization came from having a good look at garbage collection again. As you don’t control when this is going to happen it can cause unwanted delays. Their solution was tricking the garbage collector by using object pools. This way there is no object creation and no object destruction at runtime.

You have a list op pools with objects, kinda like this:
O –> O –> O –> O.
You take one out,
use it,
and put it back at the end when you’re done with it.

The third optimization came from creating their own event system. It turned out that Flash’s proprietary event system caused a lot of garbage collection to occur. By writing their own system they could stack events in the object pool, so no garbage collection would occur on events. Another benefit of writing their own event system was being able to implement it in their own way, a feature they added were winapi-like hooks.

A final tip was to have a console for each project, it is so easy to have one for debugging.

Site: http://www.joa-ebert.com/

References:
http://www.hobnox.com/audiotool.1046.html (Hobnox Audiotool)
http://en.wikipedia.org/wiki/Quadtree (Quadtree)
http://en.wikipedia.org/wiki/Object_pool (Object pools)

Flash on the Beach – day 1

09.00-10.00 Richard Galvan
Flash now and in the future – keynote

10.15 – 11.15 Carlos Ulloa
The best way to predict the future is to invent it

Carlos spoke about pv3d and work planning. He talked about how they are working on a race game in pv3d and what they have done to come to the ‘final’ result. I put final in quotes, because they are not done yet and what he was showing was a beta, impressive none the less.
He referred to a couple of techniques they used to create the race track and AI, which reminded me a lot of the time when I had my internship at VESC / BumbleBeast (a sim / game developer in the Netherlands) about 4 years ago now. He was talking about using splines (lines in a 3d world) to lay out the track and using them for the AI and positioning (replay) cameras.
The most important thing to remember from his talk is to have a look at game developer forums and blogs if you want to do gaming in flash. There is a lot of information on gaming out there. You won’t find complete code for you, but you can probably use the idea or port some C# to AS.

Site: carlosulloa.com

11.30 – 12.30 Dr. Woohoo
Transforming ideas to pixels to atoms

He’s done some cool stuff and likes hooking up tools with each other. He especially like hooking the whole Adobe CS Suite together, Flash with InDesign with PhotoShop, etc… He does this by making use of the ExtendScript ToolKit (ESTK) and the cs3.swc. ESTK features a Scriptlistener that should help you get on your way to get to learn the CS3 API by seeing what functions are being used to perform certain actions, i.e. duplicate a layer in PhotoShop.
He created an interesting tool (Patch panel) to get him colour palettes for Illustrator from images loaded in a swf.

Site: http://blog.drwoohoo.com/

References:
http://www.blurb.com/ (Publish your own books)
http://inthemod.com/inthemod.html (In The Mod is dedicated to understanding the color palettes and hidden relationships of (in)famous paintings)

13.30 – 14.30 Mark Anders
A Preview of Flex 4 and “Thermo”

We all know by now how thermo is going to make developer and designer’s lives better by making layout easily interchangeable. Not majorly interesting, but learned a couple of things.
The most important one FXG is cool! This is a layout (and layout only) description language for Flex 4 (codename Gumbo).

Site: http://www.andersblog.com/

References:
http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification (FXG Standard)

14.45 – 15.45 Richard Lord
Creating particle effects with Flint

Particles ROCK!!! That’s basically all I have to say about it. I just want to go and play with this.
Some features:
-    2D and 3D particles
-    Can easily handle 10-15K particles at one time
-    PV3D and Away3D integration

Site: http://www.bigroom.co.uk/

References:
http://flintparticles.org/ (Flint)

16.00 – 17.00 Erik Natzke
Beyond the Knowledge: The Art of Play

Cool stuff by Erik Natzke! He’s taken about 2 years to develop a tool for him to paint using Flash. It is really amazing, you have to see it to believe it! Basically what he created is a 2D IK (Inver Kinematics) system to paint with.

So check some of his work:
-    http://uk.youtube.com/user/eriknatzke
-    http://www.flickr.com/photos/natzke/

Site: http://jot.eriknatzke.com/