I caught word that KitchenSync was used for some of the animation! *Blush*

A few things are right here:

1. Making something creative every day.
2. Cute animals
3. Viral self-promotion
4. Lolz LLC is an awesome compnany.

lolz days of xmas

This could be very useful for code optimization and for a general understanding of what’s going on behind the scenes.

Perhaps the most striking comparisons in this tool are the ones that compare Vectors to Arrays. Looping Vectors appears to be about 60x faster than looping through Arrays. Someone recently asked me when you would want to use Vectors and my response was whenever you possibly can. And if you think about it, the times which you need an untyped Array are (should be) almost never.

…was a pretty cool example of integrating flash, video, and the real world. It still didn’t make me want to see the movie though.

http://eagleeyefreefall.com/

Take this FLA animation.

As you can see, there is a simple animation using a guide layer and labels on the key frames.

The following SWF uses KitchenSync to control the same ball animation. As you can see, the duration and easing functions of the animation can be controlled. You can even animate backwards!

See it in action.

The source that controls this is here.

package {
	import flash.display.MovieClip;

	import org.as3lib.kitchensync.KitchenSync;
	import org.as3lib.kitchensync.action.*;
	import org.as3lib.kitchensync.action.tweentarget.*;
	import org.as3lib.kitchensync.easing.Bounce;
	import org.as3lib.kitchensync.easing.Cubic;
	import org.as3lib.kitchensync.easing.Linear;
	import org.as3lib.kitchensync.easing.Oscillate;

	/**
	*	Demos the TimelineController which controls the animation of a MovieClip's timeline.
	*/
	public class FlashIntegrationTest extends MovieClip
	{
		protected var test1:MovieClip;

		public function FlashIntegrationTest()
		{
			super();
			// initialize kitchensync.
			KitchenSync.initialize(this, "1.5");

			// add a movieclip from the library
			test1 = MovieClip(new AnimationTest1());
			addChild(test1);

			// define the start and end frame with strings or ints or FrameLabel's
			var startLabel:* = "start";
			var endLabel:* = "end";

			// set up the TimelineController tween target.
			var tweenTarget:TimelineController = new TimelineController(test1, startLabel, endLabel);
			// Animate the ball with a linear ease.
			var tween:KSTween = KSTween.newWithTweenTarget(tweenTarget, "1s", 0, Linear.ease);

			// animate the ball backwards with a bounce tween
			var tween2:KSTween = tween.cloneReversed();
			tween2.duration = "4s";
			tween2.easingFunction = Bounce.easeOut;
			tween2.addTrigger(tween);

			// animate the ball with an oscillator
			var tween3:KSTween = KSTween.newWithTweenTarget(tweenTarget, "10m", "1s", Oscillate.sine);
			tween3.easingMod1 = 0.3;
			tween3.addTrigger(tween2);

			// start the animations
			tween.start();
		}

	}
}

Pretty cool huh? We’re creating a new TimelineController and setting the boundaries of the animation then passing it to a new KSTween object. Each of the three tweens use different parameters and are triggered by the end of the one before it.

You can download the entire thing and play around with it.

There are only two ways to create a weak reference in AS3. The first is with the IEventDispatcher.addEventListener() method which allows you to create a weak link between the dispatcher and the listener. To quote the AS3 Bible:

ActionScript 3.0 introduces the concept of weak and strong memory references. Normally, an object will be garbage collected if there are no references to the object. That is, when no objects are using a variable, it gets thrown out. Weak references allow you to reference an object but the object will still be eligible for garbage collection unless another object holds a strong reference to the object. By setting the [addEventListener() method's] useWeakReference flag to true, you will create a weak link between the event broadcaster and the event listener. That way, if an dispatcher is deleted while there are still listeners attached, the weak reference will allow it to be garbage collected. This helps to prevent memory leaks.

The other way is with the objects used as keys in a Dictionary object.

ActionScript, unlike many other languages, does not have a way to explicitly remove an object from memory. Instead it waits until all references to an object are removed and then auto-deletes it. Therefore, an object will continue to stay in memory if all strong references aren’t removed.

Below is an example of how strong-references hold an object in memory. If you’d like to try this out, copy the below text into a file called StrongReferencesExample.as

package {
	import flash.display.Sprite;

	public class StrongReferencesExample extends Sprite {
		public function StrongReferencesExample() {
			// create a new object called dog. Add it to the first leash object
			// and make leash2 a copy of leash 1.
			var leash1:Object = new Dog();
			var leash2:Object = leash1;

			// tracing both leashes will show that they hold a reference to the Dog
			trace(leash1); // [object Dog]
			trace(leash2); // [object Dog]

			// deleting the dog from the first leash will not remove it from the second leash
			// even though we originally set leash2 equal to leash1
			leash1 = null;
			trace(leash1); // null
			trace(leash2); // [object Dog]

			// The object (dog) will not be free until all of the references to it (leashes) are broken.
			leash2 = null;
			trace(leash1); // null
			trace(leash2); // null
		}
	}
}
// Define a simple Dog class within the same file.
class Dog {}

Richard Lord over at Big Room Games has an interesting article on hacking AS3 to allow you to create weak-references to objects. The hack is pretty decent but lacks a few things I’d like to see like strong typing at compile-time or a more refined ‘memory manager’ type functionality. However, I tried implementing both of these and came up empty handed. If you can think of a way to make this strong-typed, I’ll give you a candy bar.

Using the WeakReference hack could be useful if you want to make sure that an object will not stay in memory if you forget to delete all references to it. However, keeping track of your objects and practicing good memory management is a much better solution and hacks like this one should be saved for special cases where tracking use of an object becomes difficult or impractical.

Thanks to Alex for the link!

An Introduction to Using Patterns in Web Design [37 Signals]

Anyway, I worked on this site for about the last six months of my tenure at Schematic. It’s all AS3, with no Flex. I took the designs and features that had been built up over the last year, during which the company had aborted several attempts to build the vastly ambitious site, and assembled a schedule, tasks, a feasible set of functionality, a general approach, a process to follow, and an architecture, and then set to work. I was joined in my development by two great developers, Michael Avila and Jeff Yamada, who saw the site through to the end, and who made it possible for me to take time to write the AS3 bible while working on the site. But before I get into thanking everyone…

There’s some fun stuff going on inside and outside of the site. First off, it’s completely CMS driven. There’s something like 30 templates we built, using quite a few elements. In the CMS, you just pick out a template, fill it up with your images, text, backgrounds, video, animations, feeds, and links. Then you can take that page and stack it up with other pages, or drag it anywhere on the grid. Call me a hypocrite, but I think the number one best feature of the site is that there’s a fully functional, fully accessible HTML site behind it with almost 100% content parity. The HTML site works great on phones, it looks fantastic thanks to genius Patrick Phegley and it’s super spiderable. Now, when spiders pick up links to these deep HTML pages, there’s javascript magic by Richard Hererra that works with SWFAddress that will bump your HTML path into an anchor path, bring you back to the main page with the flash embed, and pass along that path back into the Flash, allowing you to pass links back and forth between the HTML site and the Flash site seamlessly. Of course, it also has bookmarking, deep-linking, and back/forward functionality.

So each template has an HTML representation and a Flash one. The Flash templates are built out in Flash, using elements with a visible stage presence, so without modifying code, nondevelopers can rearrange, resize, shift, and restructure existing templates, or create new ones. There were some tricks I developed to deal with templates rooted in DisplayObjects, particularly utilities converting runtime instances into class factories — so you can drop in one element, preview it visually in the authoring environment, and instead of populating it directly, use it as a template to fill out as many of those elements as required. Another nice utility that I couldn’t have done without was getChildByType(), which reduced my dependence on instance names in the template sprites, along with the DisplayListIterator Michael built.

Another utility I created along the way that proved invaluable was an implementation of asynchronous tokens, which gave us the ability to admit the realities of asynchronicity in the type system itself (a function returns AsynchronousTokens when it’s asynchronous, and the returned token acts as a Schrodinger’s cat until the operation completes), and the ability to cut through tons of dependencies that would have otherwise crippled us. With composite asynchronous tokens, we could group sets of asynchronous tasks in a single task, waiting on arbitrarily complex tasks without any care for what was occurring, only for its result. This opened the door to a lot of efficient, lazy loading and kept my architecture loose.

In addition to this, a set of small semaphore implementations I wrote helped keep states from complicating things. Instead of an enabled boolean accessor, often-used items would have a public semaphore, which could broadcast when it becomes available or unavailable, and be checked out. One implementation gave you a token when you checked it out, allowing you to pass the baton between unrelated tasks, calling release() on the lock token itself rather than trying to find where it came from. Another implementation tied the semaphore to an asynchronous token: the semaphore remains locked as long as the asynchronous process is active. This is really invaluable for navigations and animations that shouldn’t be interrupted.

We have a lot of instances in the site of a holy trinity of classes: flippers, transitions, and layouts. Flippers are a nice and simple abstraction of any kind of selectable set. Often they have both a flipper and a flippee, such as the media players, where the flipper is the row of photo icons, and the flipee (ok, FlippableCollection) is a view stack of images. Layouts allow you to flow together elements and control their display, and transitions, you can guess what they do. These seem a bit flex-ish but I approached them in an extremely low-dependency, lightweight fashion. Thus, we build up complex functionality by slowly seeping in features up the inheritance chain, pulling in interfaces that define the additional functionality. So for example, we have a PageStack, which is just a view stack, then a TransitioningPageStack, which uses an ITransition between showing pages, then we have a PageFlippableCollection, which is a TransitioningPageStack that implements IFlippableCollection (bringing in the idea of pages as flipper fodder). You can see these PageFlippableCollections in the pages of job descriptions and the pages of case studies. Also, you can see them in the news and accolades sections, but here instead of the pages being powered by a text field paginator, they’re powered by a column layout. Both of these just spit out IIterators of pages for the PageStacks to consume.

We use a lot more fun tricks that I would like to cover in more detail later. Mostly we do a lot of juggling between bitmap caches and display lists. Display lists take up CPU and memory, bitmapdata takes up a lot of memory, and the thumbnails of the pages loaded in externally take up little CPU and little memory, so while downloading a bunch of those thumbnails takes a bit of time, we have big fat broadband connections now, and it helps be able to run the site, while I play a juggling game, showing you real pages, dynamically generated snapshots, and compressed thumbnails of the pages as you use the site.

Speaking of those, the thumbnails of the site are generated by the site itself, using an AIR app! The app is kicked off by the CMS when a page has been changed. It calls up the current site (so that the thumbnails are always generated by the latest code, with the latest changes), and puts it in a special mode, eschewing the normal operation of the site and instead rendering a single page in its initial state. The AIR app then gets a signal, takes over, takes a bitmapdata snapshot, and writes it out to disk. Viola, picture-perfect thumbnails every time! I sound like Martha Stewart.

The site also uses a bit of the dynamic text wrapping and object serialization techniques I posted about earlier.

All in all, this sucker was huge. The hugest thing I’ve ever attempted. Something like 17,000 lines of original code by me, MA and JY (ok, counting my copious whitespace and occasionally thorough commenting). I knew it was gonna be huge so my basic design principle throughout was decoupling. I relied on interfaces to pull together common ideas, usually sketching out my design in interfaces before writing any concrete classes. Because there’s so much shared functionality mixed up between things that aren’t totally alike I made lots of small extends to implement up more interfaces, so I ended up with quite a few classes, but also the ability to start extending from points that didn’t have irrelevant functionality stuck with them.

The designs and required functionality, of course, also changed throughout the project, and since it was our own website, I never wanted to push against these. Decoupling, of course, helped us here too. I tried to keep things in broad strokes and fill them in with details in the ways that people could see early on, and we were showing stuff at builds even at the first week. Of course, we could have done a lot of things better, but I feel like this project was pretty successful (I mean hey, we didn’t get cancelled!) and an immense learning experience.

My thanks go out to everyone who had a hand in this site, especially Isaac Golino, Jeff and Michael, Lisa Smith, the countless people who have lent a hand or worked on previous iterations, and the people who were brave enough to clear up our schedules to work on this thing at their own expense. Hopefully the team will plug some of the remaining bugs and people will take good care of the site, keeping it fresh with content and taking advantage of its extensibility.

New work by Robert Hodgin

Robert Hodgin has consistently made me stare agog at his graphics, and his latest round of processing work seems like a whole new level to me. At this point, his creations are full and fluid enough to act as the complete music video for a piece. See them in full on his blog or quickly on Vimeo.

MOTHERBOARD

I didn’t know it before, but Big Spaceship, pretty much the coolest guys there are, have an unfiltered blog at MOTHERBOARD, where they post unused graphics, odds and ends, personal projects, office photos, and the like. Those kids have some insane talent.

videogramo.ws

Cyberphunk snow crash bitmaps. Awesome.

• 
  Double Wire

  a Spiderman-like game where you have to guide an apparently drunken figure using two wires that attach to the ceiling.

• 
  Slug Slayer

  draw lines to direct the flow of salt. Melt as many slugs as possible. The simple AI is pretty impressive – I found myself setting up traps for the slugs.

• 
  Sand, sand, sand

  Paint a blank canvas with a palette of particle elements to create a functioning ecosystem – then destroy it with fire and zombies and build it again. This is really more of a toy than a game.

• 
  Stick Remover

  Remove one stick at a time without letting the structure collapse.

• 
  Egg Way

  Guide the egg into the skillet. Lulz!

• 
  Snow Cat

  Cats on sleds! Race your cat down the slope gaining points for landing sick maneuvers. As I look at this list, I can’t believe this one is last cause it’s still really fun.

Here are a few great Flash games that have held my interest for more than a few minutes. Most links came from Game|Life (thanks Chris).

• Winterbells – Very simple but well build game. Kind of a variant on the kick-up type games.
• Flash Element TD – A Flash game based on a mod of Warcraft III? It’s a simple but addictive strategy game.
• Four Second Firestorm – A WarioWare clone created by several different development teams. Very fun but I don’t know who still wants listen to that Eurotrash Club music.