Using callbacks and triggers in SimpleTween


This tutorial is an extension of tutorial 1, please refer to it if you have any problems following this tutorial.
In this tutorial you will be able to:

  1. Create a callback object to handle tween events
  2. Learn about the different events, trigger and to pause

You can see it in action here.

You can get all the files from

All the parameters discussed below get passed into the SimpleTween as the last object, the options object."slidingBeer"), time, { left:500 }, { callback: cbHandler, trigger: { left:200, callback: triggerHandler }, pause:true });

Let’s Code!

Before you can handle any events it’s important to create an object that will handle the events. In the code it’s:

var cbHandler = {};

You then need to add event handlers on the object. Below are all the events you can listen to, with pointers to the handling methods.

cbHandler.onComplete = handleTweenComplete;
cbHandler.onStart = handleTweenStart;
cbHandler.onStop = handleTweenStop;
cbHandler.onPause = handleTweenPause;
cbHandler.onResume = handleTweenResume;


The events that are dispatched are:

  • onComplete
  • onStart
  • onStop
  • onPause
  • onResume

When you recieve an event, you’ll get an argument as an object with the event type (evt) and the tween (tween).
You could then use this data for further tweens or any other operations you need to do.

The syntax for a callback is:

{ callback: cbHandler }


Triggers are a little different. They have two required parameters:

  1. value – The value you want to trigger on
  2. callback – The method to call when the trigger is activated

The syntax for a trigger is similar to a callback:

trigger: { left:200, callback: triggerHandler }


If the pause attribute isn’t passed the tween will start as soon as it’s instanciated. To prevent this behaviour, we can set the pause flag.


When you want to start the tween, you MUST call the start() method on the tween.

That’s it!

Check out the demos on GitHub for more complex examples.

Posted in JS projects, Javascript, tutorials | Leave a comment

Creating the simplest of SimpleTweens

To begin my tutorials of the SimpleAnimation library I thought I’d start off with SimpleTween. It’s the workhorse of the bunch, for now ;)

You can view the result here:

You can download the files here,
but it’s STRONGLY recommended to download them from github as they’ll be the latest version:

It’s job is to move an element. Simple enough. So here’s how we do it:

  1. Create the basic template for SimpleTween
  2. Learn the basic styles for the tweened element
  3. Code a SimpleTween with the least syntax

Let’s Code!

First thing that’s needed to tween is an HTML file with all the assets required to tween an element.
In the index.html you’ll notice a couple of key areas I’ve added comments to. They are:

  • Styles in the head
  • Included scripts
  • Javascript syntax to instanciate a SimpleTween


The most important part for the style of the element is that it MUST be positioned either absolutely or relatively.

If it’s not positioned, it won’t work. period.

In the index.html you’ll notice the following code:

img { position: absolute; top:20px; left:20px; }

This simply positions the image absolutely and adds 20px of padding.


The scripts that are REQUIRED are the SimpleSynchro and SimpleTween.

The SimpleSynchro is used to create a global timer all SimpleScripts march to. If you accidentally leave in a page, don’t worry, it doesn’t initialize until a tween or timeline is added to the page.

Here’s the code that required:

<script type="text/javascript" src="libs/SimpleSynchro.js"></script>
<script type="text/javascript" src="libs/SimpleTween.js"></script>

Make sure the paths are set for your directory structure.


Here’s the most basic syntax you’ll need to get up and running:"slidingBeer"), 2, { left:500 });

Here’s the breakdown of what’s happening.

  1. Get the element we want to tween: document.getElementById(“slidingBeer”)
  2. How long do we want to take to move it: 2
  3. How far do we want to move it: { left:500 }

That’s it!

Check out the demos on GitHub for more complex examples.

Posted in JS projects, Javascript, tutorials | Leave a comment

Introducing the SimpleAnimation library

Over the past couple of weeks I’ve been working on a Javascript library that uses similar syntax to the TweenLite library. Being a Flash Dev, I figured it may help me and other developers to transition to the world of Javascript animations. I’ve come across many little caveats in JS that aren’t in Actionscript and have been working to address them all in the library to make it “Just work”.

A note on the demos: they will work in all modern browsers (Chrome, FF7+, Safari, IE9+). I’m working on making it compatible with IE7+, specifically the alpha filter.

You can download the library and examples at

Here’s the first, just using SimpleSynchro. It’s adapted from Lee Brimelow’s “GotoAndLearn” blog on Flash’s 3D carousel.
3D Carousel
You can see in in action at:

In this demo you can control “live” some of the variables. It’s a very simple script that rotates all the image on stage based on mouse movement. Play around with it, view the page source and download it from GitHub if you like it.

The next demo is using SimpleTween. This particular demo won’t work in FF yet, due to the tweening of individual background x and y properties. This demo tween’s each tile, chooses a random tile and then expands the tile and moves the background.

Animated tiles

You can see it in action at:

Again, you can view the source to see how it works.

I’m planning some tutorials on using the Library in the very near future. Hope you’re interested in this and I’m looking for people to contribute.

Posted in JS projects, Javascript | Leave a comment

Jeep 360 + Colorizer

One of first major JS projects was to convert the old 2010 flash 360 view of the Jeep into JavaScript.

After several proof of concepts I came up with the one that’s on any vehicle landing pages. You can see it in action at:

How it was done:
First I had to create a controller, this was done with a script, item_selector.js, that takes a swatch (spritesheet) with all the colors, and automatically moves it to the correct position based on it’s id. For example: “r0_c4″ would move the swatch to 4th column in the first row.

<li id="r0_c4" class="swatch" style="background-position: -84px 0px">
      <a name="&amp;lid=bright_white&amp;lpos=colorizer_tile" href="javascript:;" id="bright_white">Bright White</a>

After that was done, all I had to do was listen for click events and grab the anchor id. That id corresponds to the color of the vehicle.

Next was to create the 360 view. This was done by:

  • Creating a js loader to load all the images into memory
  • Swap out the source of the image
  • As you move your mouse, the source changes

It all sounds fairly simple, but it wasn’t! It had to be fast and versatile and we had to have a way to reference images by name (or in our case id). I needed help with all the math and had lots of help from my co-worker Jasper Palfree who helped integrate my PoC into the Frameswitcher script. I’ll release these scripts as Open Source in the near future!

Posted in JS projects, Javascript | Leave a comment

It’s been awhile

It’s been awhile since I’ve added a post! I’ve been extremely busy doing many things at work. The biggest news is that I’ve been working primarily on javascript, so I’ve logged a lot of miles learning javascript (as you’ll see).
Here’s just some of the items I’ve been working on. Posts to follow!

  • Jeep Comparison
  • Jeep 360 and Colorizer
  • SimpleAnimation Library

I’ll post the projects individually so you can see all the work that went into them.

Posted in AS3, HTML5, JS projects, Javascript, New projects | Leave a comment

Simple single line initialization of objects

One thing I really miss about AS2 was the simple single line initialization of new MovieClips. It was great to set the x, y, width and height properties when the MovieClip was added.

So what I have done in new Classes I create is add a little helper method that allows me to add all the properties on initialization.

The snippet is as follows:

protected function initProps($props):void
    for (var prop:* in $props) {
        try { this[prop] = $props[prop]; }
        catch(e:ReferenceError)  { trace(prop + " is a property that doesn't exist"); }

In the constructor add $props:Object = null as an argument and call the initProps method if he object exists, like this.

public function Box($props:Object = null)
       // constructor

       if($props) initProps($props);

Or alternatively, you can create a utility method that will work on ANY object.

public static function initProps($obj:*, $props:Object):*
			for (var prop:* in $props) {
				try { $obj[prop] = $props[prop]; }
				catch(e:ReferenceError)  { trace(prop + " is a property that doesn't exist on "+$obj); }

			return $obj;

How it works

What happens in the initProps method, is we loop through the $props object, apply the property name to the object and then add the value. Simple.

If the property doesn’t exist on this object, it will trace out a the line “(the unknown property) is a property that doesn’t exist”.

Now when you want to create a new Box object you can initialize it with all the properties in one line.

var box:Box = new Box({ x: 20, y: 40, width: 200, height: 200 });

Hope this helps you as much as it’s helped me.

Posted in AS3, Flash | Leave a comment

The ever-changing faces of Flash

Flash has evolved over the past several years from strictly being an animation tool, to Actionscript 1, 2 and now 3. But what will it morph to in the upcoming years? Based on what I’ve been reading and following on Adobe labs, this is my interpretation of what Flash is becoming.

In the next release of Flash player there are 2 major changes. StageVideo and Molehill. What are these changes? You ask.

StageVideo is essentially a new way to render video on the web using the computers GPU (Graphics Processing Unit), not the CPU. This means very little processing power to render video, while still having the ability to layer Flash assets on top.  For a full description of StageVideo  you can visit Abobe labs (

MoleHill is a new 3D rendering API, using the GPU and not the CPU. (Sound similar to the StageVideo right?). For a full description of MoleHill, visit

So what does this mean? Simple, Flash is making a shift to where its strength has been in the past, Games and Video. Abobe is making a fundamental shift away from Animation tools and moving into a more gaming and enterprise realm. This includes the enterprise cloud gaming model (a la WoW). The significance of using the GPU over CPU is the ability to deliver the same content to mobile devices, that’s why Adobe has placed such a huge focus on using the GPU for rendering.

This isn’t a bad thing for developers. It will now allow smaller development companies to create better online gaming experiences, but I think it’s the being of the end for Flash based websites, and Flash Developers focused on website development. (Although I think that’s a LONG way off).

Posted in Flash | Leave a comment

Transitioning to HTML5′s canvas

If you’re like me and interested in where HTML5 is going, especially where canvas is involved, Grant Skinner has released an awesome new library,

Essentially it makes the transition from AS3 to using HTML5′s canvas that much easier. From the website:

“The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier…. The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers.”

Hopefully I’ll get a chance to work with it in the near future!

Posted in HTML5 | Leave a comment

Avoid losing customers during critical web promotions

Today a friend Tweeted about a new promotion for This site’s business model seems very similar to TeamSave or Groupon. A business puts on a promotion and if x number of people buy it, it’s a go.

There deal today… an iPad for $10! Yes that’s a pretty sweet deal.

They’re promoting it on Twitter, on there website and other promotional avenues. Problem is, the promotion seems too popular for the web server. I constantly get “Service unavailable” messages.

It’s always good with a promotion goes well, but if you can’t handle the traffic, it can go bad VERY quickly. Obviously, the promotion is to get site recognition and drive traffic to the site. This in turn will attract customers to buy and businesses to use the site. But what kind of message does this send to potential customers and businesses?

I think it could end up to be a turning point for a company that amounts to the “beginning of the end”. Here’s my breakdown: A lot of money spent on the iPads. Money spent on promotion it via multiple channels. Money spent on “emergency” bandwidth and server resources to cope with the demand. All this could be avoided.

Possible solutions:
Here’s some possible fixes to avoid the issue, and cope if it’s unavoidable.

  • Have a lot of additional band width and resources. Use the cloud (Amazon S3 etc) if necessary.
  • Test the system for a load about 3 times as expected and see how it behaves. See how quick new resources can be brought online.
  • Make sure you can error messages that inform visitors what’s happening

I think it’s great FabFind got such a great response to a promotion. It’s disappointing that it seems they didn’t completely test or think think of worst case scenarios.


They have updated their error message to:

“$10 iPads … whoah. We were expecting crazy, but not this crazy. Due to the unprecedented level of traffic, George is taking a few mintues out to build a few more servers before we start putting the iPads up for sale. We’ll be announcing on Twitter and Facebook when they’re ready.
Yes, we really are going to sell $10 iPads today.
Thanks for all the interest! We’re stunned.
Stay Fab,
Your Friendly FabFinders”

Posted in Web Standards | Leave a comment

Improving Flash SEO through progressive improvements and jQuery

I’ve recently finished a book on SEO, titled Building Findable Websites by AArron Walter. A lot has changed since I learned about SEO techniques. One section really got me thinking though, named Findable Flash. Ever since I’ve programmed in AS, SEO has never been a big priority for me. I was pretty much fine with the fact Flash was non-indexable by search engines (or very difficult for search engines to index), and that the power of Flash would make up for it (at least that’s what I thought). But recently I’ve seen a shift in thinking among clients. They almost all demand SEO friendly sites. That’s why this section really got me thinking.

Below is an experiment, based on that section in which, we layer Flash on top javascript, css, and the html (the database is an optional component, but that’s not really what this is about). This technique is called “Progressive Enhancement”. It’s nothing new, but the way it’s been presented to me I thought I could improve the way it would work.

NOTE: It’s not necessarily the approach I would take if I were developing a new site, but I like the concept. See the CONCLUSION at the bottom of the page for what I would do for a new site!


Essentially what happens is we start with an html(data layer) page, add the css (view layer) to make the design look good to make a fully functional beautiful website that doesn’t require any javascript. This is the base. It conforms to web standards and people can view it without Flash or javascript.

Now for people who have javascript and Flash, we add a new layer. This layer is the WOW layer, it makes the website pop. How it works is to take all the html code and put it inside the Flash using jQuery and FlashVars.

What I’ve done to try is improve how the data gets into flash as FlashVars. In the html file, we add a class named ‘data’. From there, we call jQuery to get all the data classes and create a key/value object to pass into Flash. It’s important to note that this is just a simple proof-of-concept. It’s far from a polished piece and there are limitations to it.

Enough talk, let’s look at the code

What you need:

All the files you’ll need are here.

You can see a simple demo for the finished piece here.
And see what it looks like with Flash and javascript here.

How to do it:

So the first part should be easy. You either have an existing site or create a new one.
Let’s start walking through the code. What you need to do is to add the ‘data’ class to each element you want to pass into the swf. So below are some excerpts from the sample code where I’ve added the ‘data’ class to some links and the ‘sidebar’ div.

<div id="nav">
         <li class="nav-item data" id="link1"><a href="index.php">Link 1</a></li>
         <li class="nav-item data" id="link2"><a href="contact.php">Link 2</a></li>

<div id="sidebar" class="data left">
     <p>In this sidebar this could be html or links</p>

That’s it on the html side. Let’s look at the Javascript.
The guts of what’s going on is in the ‘add_param’ method.

// Creates key / value pairs
 function add_param(index, el, att) {
	 // set the parameter key by checking the id of the element
	 // if the element doesn't have an id, we use the index
	var param_key = ($(el).attr(att) != "") ? $(el).attr(att) : index;

	// set the parameter value by checking if this element is a link or not
	// if it's a link save the link if not save the html from the element
	var param_value  = ($(el).has('a').length == 0) ? jQuery.trim($(el).html()) : $(el).children().attr('href');

	// add the key and value to the param object
	params[param_key] = param_value;

First we get the key by checking if the element we add has an id. If it does, that’s the key, if not, we use the array index from the jQuery ‘each’ method. Next we check if the html contains an link, we need the url not all the markup. Finally, we add the key/value pair to the object.

After we’re finished adding all the elements to object we use swfobject to replace all the content in the page.

// finally replace the content in the div with the swf and pass it all our
// key/value pairs in the object
swfobject.embedSWF("view.swf", "replacedContent", "550", "400", "9.0.0","expressInstall.swf", params);

Now let’s take a look at the Actionscript. It’s actually very basic. The main method is populate_data. It’s the method that creates an associative array of the key/value’s that are passed in via the FlashVars.

// populates all the data into an associative array
private function populateData(params:Object):void {
	for (var key:String in params) {
		_keyArr[key] = params[key];

And then there’s the getDataFromDiv method to retrieve the values.

// gets the value from the key and returns
// No Data if the key is null
public function getDataFromDiv(name:String):String {
	return (_keyArr[name] != null) ? _keyArr[name] : "No Data";

The rest of the file is just visual and animation stuff.

Another thing I read in the book was regarding page load and load order. Aarron mentioned that the browser loads javascripts and stylesheets 2 at a time. So theoretically, if this script existed at least 2 calls before the stylesheet, we could remove the stylesheet and prevent it from ever loading, thereby reducing the page load. By doing something like this:



I like the concept but I’m not convinced of it’s practicality. It might be useful for an existing site. Especially if you needed all the copy and didn’t want to copy and paste an entire site! If I were to build a site from scratch, I’d check for javascript first then load either the html or flash version site. I’d use a database to hold all the data, to populate both the html and flash. In Flash, I’d use AMF to get all the data.

Posted in Labs | Tagged , , , | Leave a comment