So I’ve started on Stephen Wolfram’s epic tome, ’A new Kind of Science’. I have known about Cellular Automata for some time.. I remember playing around with them in late High School, using BASIC. I went to the computer lab and got all the computers rendering different rules, producing different patterns. The machines were so slow it took like five minutes for a single screen to be rendered.

So it is with some sense of familiarity and nostalgia that I look on these wedge shaped fractal patterns again.. and with great interest that I’m reading Mr Wolfram’s eloquent expositions of how they may be the key to understanding the universe.

Basically they work by evaluating each pixel in an image, and applying some rule which takes into account the values of surrounding pixels, and then changes the color of the pixel according to the rule. In the book, the simplest examples at the start just consider the pixel above the current one, and the pixels to the left and right. You can also think of this as applying the rule on the first row, placing the result in the second row, and then applying the rule to the second row and placing the result in the third, and so on. A rule may be something such as ‘if the pixels to the top-left and top-right of the pixel are black, make the pixel black’.

So after reading a bit, I felt inspired to code up some of the examples. After doing a few of them I got to thinking that there must be a way to generalize them so that a single program could generate them. I was also thinking that binary/boolean arithmetic had to be helpful here somehow. The verbal descriptions seemed helpful at first, but were quite tricky to implement, requiring lots of if-then cases. After a while I had worked out a nice system of constructing the rule as an array of outcomes (either black or white). The array has 8 items – as there are 8 possible permutations of the 3 preceding rows pixels (the current pixel and its neighbours, in the previous row.) If you visualize the index as a binary number, with the 1’s as black pixels and the 0’s as white, then you can translate the visual representation of the rules in the books (3 cells – the condition , or match, with the resulting pixel below) into simple numbers. This code probably is clearer than my explanation:

        //initial condition --> result
        rule[0] = WHITE; //000 -> white
        rule[1] = BLACK; //001 -> black
        rule[2] = BLACK; //010 -> black
        rule[3] = WHITE; //011 -> black
        rule[4] = BLACK; //100 -> black
        rule[5] = WHITE; //101 -> black
        rule[6] = WHITE; //110 -> white
        rule[7] = WHITE; //111 -> white

After that insight I was able to create an application that lets you toggle the rules (click to toggle the result). The rules are also numbered from 0-255, so you can enter the number in the input field, or click the next / previous buttons.

flash 10 required

As always, you can right-click and zoom in to see details…

Da Code

CellularAutomataEngine.as

For about a year, I’ve been using Vim for Flex and Flash development. At work, on Ubuntu, I use gvim; at home on the Mac I use MacVim . I’ve gradually customized my environment so that I now have a pretty nice workflow. So I’m going to share some of the things I’ve learned, as well as some of the scripts I have found, or written. This will be a series of posts.. I’m assuming some knowledge of vim and Flash development here. The best book I’ve found on vim is this one.

Filetype

I can’t remember if there was an actionscript filetype entry originally, but if not you’ll need to create it, and some other entries in filetype.vim.. might as well create one for PixelBender, which I’ve associated with C, since there is currently no syntax file for PixelBender (on my todo list).

"Actionscript
au BufNewFile,BufRead *.as          setf actionscript

"MXML - 
au BufNewFile,BufRead *.mxml        setf mxml

"pixel bender - using c syntax
au BufNewFile,BufRead *.pbk         call s:FTlpc()

Filetype Plugins

Actionscript

actionscript.vim

MXML

1. syntax file by Abdul Qabiz

2. However I’m using a simpler one which just pulls in xml syntax, except for CDATA sections.. It’s so short I’m just going to print it here.. can’t remember where I got it from

   if exists("b:current_syntax")
   "         finish
   endif
   
   
   if !exists("main_syntax")
       let main_syntax = 'mxml'
   endif
   
   
   runtime! syntax/xml.vim
   unlet b:current_syntax
   
   
   if filereadable(expand("<sfile>:p:h")."/actionscript.vim")
           unlet! b:current_syntax
            syn include @vimActionScript <sfile>:p:h/actionscript.vim
             syn region actionScript start=+<!\[CDATA\[+ end=+\]\]>+ contains=@vimActionScript
   endif
   

If you are using xml.vim, you can simply symlink .vim/ftplugin/mxml.vim to it.

Colorscheme

This is a matter of personal taste.. my favorite is vividchalk.vim . I modified it slightly to not use italics, which are not available in my favorite font, Monaco. I just commented out the line, around 150. “hi Comment gui=italic

So my actionscript code looks like this ( I like my code big and readable):

There’s still a lot more to cover, but I think I’ll just leave it there for now… stay tuned for more.

I’m not sure how many people are aware of this technique. You simply export you flash movie as a swc, exporting some symbols as classes, and then link the swc when compiling you AS3 or Flex project. I didn’t find it documented anywhere, and instead found many other laborious hacks for doing this, involving loading swfs as ByteArrays. This is much simpler.. it may look like a lot of steps, but most of it is stuff you would be doing anyway, as a Flash designer / developer.

Flash IDE to Actionscript 3

Part One : In Flash IDE

1. Open ye olde Flash IDE (in my case CS3)
2. Draw some stuff on stage
3. Select and hit F8 to convert to symbol
4. Select MovieClip for type and ‘export for actionscript’
5. Enter the class name you want it exported as, eg. Smiley
6. Make sure File > Publish Settings ‘export swc’ option is checked
7. Publish - you should see a .swc with the same filename as your .fla

Part Two in ActionScript

1. In your favourite ActionScript development environment… create a class which extends Sprite
2. Create a new instance of the class you exported in the IDE
3. Add that instance to the stage
4. Save - mine looks like something this…

    package 
    { 
        import flash.display.Sprite;
        public class SmileyTest extends Sprite
        {
            private var smile:Smiley = new Smiley();
            public function SmileyTest()
            {
                addChild(smile);
            }
        }
    }

Part Three - compile

Use whatever you use normally, but make sure you add the .swc to your library path, eg.

mxmlc --library-path+=MyFlashLibrary.swc FlashAssetTest.as

When you run the swf you should see you expected graphic item show up on stage. Yay!

Using Timeline Scripting and Tweens

Since you exported a MovieClip, you have access to the MovieClip API in ActionScript, including such old favourites as ‘gotoAndPlay()’ etc. So after you created your symbol in the IDE, you can go into it and do animation on the timeline, make some tweens, set up some frame labels, and control it all from within you ActionScript class. Who says the timeline is dead ! I can see this being very useful for easy animations in games, playing sounds etc.

Getting a Sprite

Now you may not be interested in that, but you may want to save a few bytes by using a Sprite instead of a MovieClip. No problem! Just change the export type to Sprite instead of MovieClip, and you will see the filesize drop slightly, and presumably runtime memory usage will also. Unfortunately it doesn’t seem to work for Shape.. the IDE sets it back to MovieClip.

Flash IDE to Flex

Same steps in IDE except you’ll need to change the export class to mx.flash.UIMovieClip. Then you can use it in a mxml file such as this

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" >                  
<local:Ufo />        
</mx:Application>

There is a extension for the IDE called the Flex Component Kit but as far as I can tell, it simply automates the settings outlined above (setting the export class is the only setting which is different for the plain ActionScript export). I guess it will save you typing the export class type = mx.flash.UIMovieClip.

That’s all. I’ll attach a zip of my files I was using to test this, in case you get stuck. I think this workflow would be really useful for collaboration between designers and developers, as the developer can work on the logic of the app, and just update the .swc of graphics assets as they are updated. I’m just thinking it will help me crank out some game graphics by drawing them in Flash (or Illustrator and importing them into Flash IDE) and then using them in an ActionScript project with my favorite coding IDE instead of coding in the Flash IDE.

update*

I just found this free excerpt from Colin Moock’s Lost ActionScript Weekend series, with a video tutorial on how to do this.

I’ve been at FITC for the last three days.. here’s brief rundown of the presentations I attended, and what I found interesting about them… btw. the presentations were all recorded and will be on tv.adobe.com.

Apparently Japan has a thriving flash community. Here are some of the things that stood out for me:

Perhaps best-known is the wonderful site: http://wonderfl.kayac.com/ which allows you to edit actionscript code and see the results almost immediately rendered alongside it. I love the simplicity of this , and how it encourages you to experiment. You can also browse code by others, and if you want to edit it, you just ‘fork’ it and away you go. In the presentation this was described as ‘collaborate by forking’ which got a few chuckles from the crowd :) I must say that this site performs really well, considering the massive usage it must be getting, so the engineers - eg. mash - behind it clearly know what they are doing. I was really happy to discover that I can use ItsAllText firefox plugin to edit the code with Vim, so I can use my familiar environment for coding. I think the big win of this is the collaborative aspect - I think I’m going to learn a lot by reading and tinkering with other people’s code.

Of course, there’s the awesome FLARToolkit by saqoosha, which lets you do Augmented Reality stuff in flash (with a webcam). Check out http://livingsasquatch.com/. But there are also many other interesting projects in the SPARK project, as explained by ‘yossy’, a 20 year old who’s been doing actionscript development for 10 years! There’s a full listing of the Spark projects in English: http://www.libspark.org/wiki/WikiStart/en where you will also find links to the wikis by each developers about their projects.

sazameki this features a virtual instrument called ano gakki (?) There’s also a very simple sequencer and mixer, allowing you to control generated sound. It’s not hobnox but you can roll your own UI to do something different (I’d like to see a virtual tenori on)

betweenAS3 yet another tweening engine… I know, but this has a functional programming style (you can nest tweens inside each other) which I like. Also, it can handle tweening massive numbers of particles.. it outperformed other tween engines by far in the demo particle system yossy showed.

Frocessing a graphics library with a surprising range of capabilities, from HSL color, to 2D and 3D transforms, and SVG support.

swfasssist - a flash compiler and player done with actionscript - ?? Holy crap.

SwfWheel - better cross-browser and platform support for the scroll wheel, very useful for the UI developers.

OK, what else…

Joe Berkovitz’s moccasin framework for developing visual editor applications looks really good, having developed such an application before, I know it is hard, and having some of the mechanics readymade will help a lot.

Brian Lesser presented on using RTMFP , the new protocol for real time streaming between flash players. You still need a server to do the initial connection either Status or the yet-to-be-released version of Flash Media Server. Apparently Flash PLayer 10 now has UDP capabilties built into it, who knew?

Speaking of Flash Player, I checked out the Flash PLayer Internals session by Jim Corbett. This was pretty much the same as one I saw online but there were some interesting tidbits about Ichabod - the headless flash player being used by Google to index flash content. It operates in conjunction with a virtual user. They are currently working on issues to do with how it accesses network resources. There are many other possible applications for this technology, so I hope that it eventually becomes available to the rest of us, and not just Google. The new Text Layout Format is powerful, but low-level, so you probably want to use the actionscript components for it, which will be available in Flex 4 , coming soon ( I hope).

ByteArray for beginners gave me a head start on using the ByteArray class in flash, which is incredibly powerful, allowing you to implement encoders/decoders for any filetype, and also use any existing network protocol over a socket (or invent your own). The class provides methods to read and write data to a ByteArray as a String, or various other types, so you don’t have to speak binary :)

Ralph Hauwert was mind-blowing … starting off with his formative inspirations, he then took a deep dive (for me) into how to make normal maps, texture maps, bump maps and lighting even without doing traditional polygonal 3D. Then he explained some of the technical breakthroughs - a 3-way coordination between Alchemy, ByteArray, and PixleBender, which are going to appear in the next version of Papervision. He also explained how they are refactoring PV3D to allow alternative renderers. The demos of the new engine were very impressive, lightning fast, even rendering a version of Quake in the flash player without a single stutter. I also enjoyed the few demos of voxel-based 3D and 8 bit music, specifically a Commodore64 sound emulator, based on Tiny SID which lets you play the original music from those games.

The Commodore / Amiga era games cropped up again as inspiration in James Paterson’s presentation. James Paterson is behind presstube.com. He combines his own drawings and animations in flash, and recently has been developing some interative environments as a home for the various strange beings he loves to invent see here and click on the thumbnails to enter the enviroment. You may need to check on the presentation to understand how to use it, which I highly recommend as it gave a lot of insight into the creative process as well as being very funny. It’s great to see hand drawn art still alive and well in this over-digital era, and this is inspiring me to get back to my own drawings and see if I can bring them to life in a similar way.

I started off the conference with te presenation on SourceBinder a collaborative node-based editor for flash, built in flex. I was able to make an interactive 3D cube controlled by my WiiMote, in minutes. I found the interface mostly intuitive, though it is an alpha product, so there’s the occasional glitch. Its interesting to compare this with Wonderfl - similar goals, but different approaches: Sourcebinder avoids codingbut lets you connect other people’s code like lego. However you can also create your own nodes if you want.

To be honest, the Adobe Keynote seemed a bit flat compared to the other sessions, as they didn’t have anything major to announce, except that a new version of Flash Cs4 will be released soon, to address performance issues. There was an interesting demo of creating your own tool to do procedural drawing.

Joshua Davis was entertaining, the first time I’d seen him speak. Again, I enjoyed the insights into the creative development process of what he does : ‘computational design’. Instead of interactivity as an end goal, he ends up creating a static design by iterating on an interactive process. What I found interesting is how much time this takes, even weeks, before something worthwile is achieved.

This emphasis on iteration was a feature of Mario Klingeman’s session, called The Tinkerer’s Box. By use of some heavy computational geometry and recursive algorithms (as well as some simpler ideas) and many, many variations and experimentation, some really cool effects were achieved, like portraits made up of tiny triangles or spaghetti like lines.

Finally, I attended two sessions by or featuring Grant Skinner… the first about his work as a flash developer in the context of console game devlopment .. apparently console games are making increasing use of flash to develop in-game interfaces. To do this, they sacleform developed a custom flash player which pushes triangles up to the GPU. Some really hardcore engineering going on here. Grant has architected a component set for use in this enviroment, called CLIK. I enjoyed the insight into how to build components which are highly flexible and modular, a topic which he also touched on in his other presentation on Actionscript Development. I got some concrete tips on improving my coding practices here, such as the concept of cohesion, which is how focused a chunk of code (say, a Class) is. You should be able to express what it does in a single sentence, or at least very briefly, or it may be lacking in cohesion (ie, doing too much stuff that it shouldn’t be).

Of course this just scratches the surface… there was so much more which I’m still digesting, and I’m feeling inspired, motivated and informed to do more and better work (and play) with flash in the future.

I had an idea that you could simulate a QTVR-style panorama in flash by projecting a spherical projection onto the inside of a sphere, and then looking at it from the inside. It worked :)

flash 10 required

Da Code

PanoramaTest

Sphere

Note: I got the panorama image from here http://www.all-in-one.ee/~dersch/. Using this and other software you can create your own panoramas from multiple images.