AS3: Apple’s Leopard Time Traveller Tutorial

Okay I lied, this isn’t really a tutorial. This is just everything you will hopefully ever need to create this beautiful, simple user interface from my favorite designers down in Cupertino. In this “tutorial”, you will learn about how to create assets, initialize the time traveller class, and customize the effect for your own website. Could it be any easier than this? 

What you will make:
 [FLASH]/img/blog/2007/10/timetravel_example[/FLASH]

First, you will need to download the package below. It contains a working example file with all classes required to create this beauty. Also, you might want to check out the actual TimeTraveller class located in package com.ayanray.ui. It contains detailed documentation for your learning as well as for general use.

LeopardTimeTravel_20071024.zip [80KB]

Now that you have the files, give it a quick look-over. It is extensively commented and should be descriptive enough to allow you to make your own unique example or site built off of it.

Step 1: Create Assets

 In the example, I create mock assets and store them in an array. You don’t have to copy the example code for this but you do need to have the assets created and on the display list (on the stage). Also, I advise you to store the assets in an array and keep track of them. After creating the assets, pass them over to the Time Traveller for management.

 // Create Assets (you should use your objects)            for(var i=0; i<15; i++) {                var window = new Window(); // creates window from library items                window.name = "window"+i;                window.visible = false;                this.addChild(window); // adds to the display list                assets[i] = window; // adds to assets array           }

Step 2: Initialization

Next step is to pass the time traveller the assets that you would like it to control for the time traveller user interface. 

Method 1: Time Traveller does not immediately start

 timeTraveller = new TimeTraveller(assets);

Method 2: Time Traveller immediately starts 

timeTraveller = new TimeTraveller(assets, true, this.stage.stageWidth, this.stage.stageHeight, settings);

Step 3: Starting the Time Traveller

If you followed Method 1 from Step 2: Initialization, you will need to start the time traveller manually. You can do this by calling the following code:

timeTraveller.init(this.stage.stageWidth, this.stage.stageHeight, settings); 

Step 4: Playing with the Settings

I created that nice little demo above just for this purpose! Play around with the settings until you find an animation style you like. Link up the numbers in your own file for your own unique Time Traveller. The actionscript files are all commented extensively so please look at those for more details if you have more requirements. 

Other Examples

Using the test example above, your own positioning system, and your own graphics, you can make each time traveller truly unique. Here are some examples of where I’ve used this interface.

1. Wilson Japan: Technologies
2. Wilson Japan: Catalogs 
3. Wilson Japan: Feelit Catalogs
4. Suunto Japan: Catalogs 
5. Precor Japan: Product Images (click the button underneath the price) 

That’s it! Post up your examples too and show us some great uses of the time traveller! Also, bug reports and comments are appreciated =).

Brought to you by myself and the good people at ComQuest Inc., where I first learnt how to do this in Actionscript 2. 

Related posts:

1. AS2: Subservient Chicken Tutorial Last year, I created the source code to make Burger...
2. AS3 / Flash: Introducing the AssetLoader Class In Actionscript 3, there are many different ways to load...