AS3 / Flash: Introducing the AssetLoader Class

In Actionscript 3, there are many different ways to load external assets from the Internet. Unfortunately, this can become cumbersome to find different ways to load each one in it’s own individual way. With this difficulty in mind, I have created the AssetLoader class.

Description

The asset loader class let’s you use the same method to load sound, video, pictures, swf’s, XML and CSS. The goal for this project is to make loading external assets as simple and clean as possible and give the user all the control they could every possibly need. And even better yet, this class is licensed with the M.I.T. license, so you can do whatever you want with it! Sweet isn’t it.

The only official download link:

Latest Release

AssetLoader_v1.2.zip

Archive

AssetLoader_v1.zip

Documentation (v1.0)

UPDATE: Preliminary Documentation: http://www.ayanray.com/assetloader/

Update Log

[March 10 2009] Uploaded latest revision that has support for stopping loaders, fixed memory leaks, and fixed a major bug that in some cases caused the same file to be loaded twice.

[July 25 2008] Uploaded documentation for v1.0


How Does It Work?

The AssetLoader uses a very simple concept. Items you want to load from the internet have extensions, and with these extensions, the AssetLoader can determine how to load the object. So, when you use the AssetLoader, you only need to pass the URL for loading to begin. Of course, simply loading an object is not enough. You must pass callbacks to listen to such events such as loading complete, progress events, and error messages. So what happens if you are trying to load an xml file that has a php extension? Well you can also explicity tell the AssetLoader what type of asset it is. So you could technically tell AssetLoader to load an image as a text file, and it will try to do it (and probably fail). Finally, the last key functionality of the AssetLoader is that it acts as a queue. It will load as many or as few as you want at any given time, and then when that download is complete, it will move to the next one in the queue. Set it to 1, and it will load one at a time until all the urls you passed to it are complete. Awesomeness.


What File types are Currently Supported?

Currently, XML, JPG, and Raw Text is supported. I have plans to add support for MP3, WAV, FLV, and other loaders, but because of school and work, I simply don’t have the time to make the final version. You can however EASILY add your own supported types and custom support by creating a new handler in the handlers folder in com.ayanray.loaders using the convention [FileExtension]Loader.as. AssetLoader will also automatically recognize your handler once you have added it there. Please, please contact me if you make your own handler because it is helpful for EVERYONE and that is why I am doing this, to help you.


What Callbacks are Supported?

Currently, the following callbacks are supported generally: onError (general use for almost anything that will stop it from loading your file), onComplete, onInit, onUpdate (File Download Progress), onTimeout, and onStart. This is not an exhaustive list, but is the most basic one. Each extension might have certain other properties that you can pass to the AssetLoader. For example, when loading an external SWF, you can assign an Application Domain. This is specific to the SWF loader in AssetLoader only and is not used in the XML. See the Documentation for more specific loaders.


Examples

For all examples, make sure you include the package ;) . com.ayanray.loaders.*

Example 1: Loading 1 Asset

[cc lang="actionscript"]new AssetLoader( http://www.ayanray.com/myimage.jpg,{onComplete: handleImageLoadComplete} );[/cc]

Example 2: Loading more than 1 Assets

[cc lang="actionscript"]var obj = {};
obj["http://www.ayanray.com/myimage.jpg"] = {onComplete: handleImageLoadComplete};
obj["http://www.ayanray.com/gallerylist.xml"] = {onComplete: handleXMLLoadComplete};
new AssetLoader( obj );[/cc]

Example 3: Queue Loader

[cc lang="actionscript"]AssetLoaderSettings.MAXLOAD = 1;
var obj:Object = {};
obj["http://www.ayanray.com/myimage.jpg"] = {onComplete: handleImageLoadComplete};
obj["http://www.ayanray.com/gallerylist.xml"] = {onComplete: handleXMLLoadComplete};
new AssetLoader( obj );[/cc]

Example 4: Loading XML with PHP extension

[cc lang="actionscript"]new AssetLoader( http://www.ayanray.com/xmlgenerator.php,{onComplete: handleImageLoadComplete, filetype: AssetLoaderTypes.XML } );[/cc]

Example 5: Stopping the AssetLoader

[cc lang="actionscript"]AssetLoader.stopQueued();[/cc]


Questions, Concerns, or Comments?

Please leave a comment if you find this is helpful! Feedback is always appreciated.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Flash | Tagged , | 23 Comments

Taipei, Taiwan… what a vacation!

About a month ago, I took off on a mini holiday to Taipei, Taiwan. Considering September to December is the best time of the year to go, I’d just like to say things went according to plan. I will definitely be back there soon…

Perhaps the coolest thing in Taiwan is Taipei 101. Okay, it is just the world’s tallest building with brilliant art direction and very creative architecture. Taipei 101 also had the world’s fastest elevator, traveling at 60 km/hr straight up for a total duration of approximately 37 seconds. Anyway, here are some action shots.

Taipei, Taiwain
Taipei 101

Since it has been a long time, give me some time to come up with a discussion of their food, shopping, and tourism scene ;) . Until then, enjoy this gallery:

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Taiwan | Leave a comment

AS2: Subservient Chicken Tutorial

Last year, I created the source code to make Burger King’s Subservient Chicken for one of my class projects. It was a lot of fun and I am finally releasing the code on my blog. It was pretty easy, just take a look at the code.

Description of the Project

Super Fred AS2 creates a Burger King Subservient Chicken-style interface to control the actions of a video character on screen. It allows keyword String matches in AS2 and loading and queing of video files of the matched video that meets a certain video keyword criteria.


Step 1: Introduction

Okay, once again, I have lied. This is not really a tutorial. The code however is very well commented and I hope you can follow along very easily. I made this about 1.5 years ago so please don’t spam me if you can find a better way of doing it. I was newb then and I am n00b now =). But it doesn’t mean you can’t take the code ;) and make it better.

Also note, that due to recent advances in AS3, I would highly recommend going with that route rather than using my older AS2 version. This demo is merely to show you how crappy I was 1.5 years ago lol… just kidding. Speaking from an AS3 point of view, you can use the same concepts applied within this package to create the same effect. It is still a good example for newcomers to Flash and I hope you find this useful if not entertaining.

In case you haven’t seen the subservient chicken website, go here and check it out first to know what you will be making: http://www.subservientchicken.com/

Download the Package Here:

as2-subservient-fred.zip

Here is the completed project that earned me an A+:

http://www.ayanray.com/img/blog/2007/11/subservientfred.swf


Step 2: Taking the Videos

Taking and editing the videos is the hardest but most fun task for this project. You and a couple friends can get a video camera and tripod (from somewhere) and set it up in a nice open room. After that, go wild and make sure your character is always in the same spot at the beginning and the end by marking an X with tape where he/she will stand. The sky is the limit on this one and as you can see from Burger King’s Subservient Chicken, they really went wild.


Step 3: Using the AS2 File

Using the AS2 File is a piece of cake. All you need to do is setup the 2 arrays at frame 1 of subservientfred.fla. I think it’s self explanatory. Anyways, that’s it. Enjoy!


Links

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Flash | Tagged | 6 Comments

Mount Fuji without the Typhoons

Last weekend, I got another chance to go back to Mount Fuji. To recap, last time I went, there was a typhoon that rained out all the roller coasters and blocked Mount Fuji from all angles. This time was different…

Fuji-Q Highland is one of the most popular amusement parks in the world. It has supposedly holds 2 records in the roller coaster category: 1) Highest roller coaster (Mount Fuji Ride), and 2) most number of inversions in a single ride at 14 rotations. Both of these rides we had to wait 2 hours for but let me just say they were well worth it. Here is a shot of the inversion ride. It was simply amazing. I think the Japanese must love their roller coasters.

Photo 034: The Guiness World Record for the most number of inversions in a single ride (@ 14 inversions)
Photo 034: The Guiness World Record for the most number of inversions in a single ride (@ 14 inversions)

Perhaps the biggest reason I went back was just to see Mount Fuji. Unfortunately, the previous time, we were clueless to the whereabouts of Mount Fuji. This time, we truly could not have missed it. Check out the gallery for more pictures.

Photo 043: Mount Fuji, taken from Fuji-Q Highland's Skating Park
Photo 043: Mount Fuji, taken from Fuji-Q Highland's Skating Park

After going on the two large roller coasters and some of the smaller rides, we headed back onto the bus back to Shinjuku. At Shinjuku, we went to a marvelous Spanish restaurant that has been in Shinjuku for 30 years. I really loved their paella

Photo 083: Spanish Paella that was absolutely delicious
Photo 083: Spanish Paella that was absolutely delicious

Anyways, sit back, relax, and take a look at the photos. They are very relaxing I think.

Check out the photos here

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Japan | Leave a comment

Japan: Tokyo Motor Show 2007

A couple of weeks ago, I went with my girlfriend to the Tokyo Motor Show. I am amazed at how much depth this show had and I am glad I had a chance to go. Take a look at the photos for yourself and watch your jaw drop.

Well, for about 4 years now, I have been pretty interested in cars. I have been to most of the limited motor shows in Ottawa and a couple in Toronto, but nothing I’ve seen can compare to the Tokyo Motor Show. Just to see the concept cars and all the incredible presentations and installations, well, in a word, was just wow.

I was most impressed with the Mazda Taiki. This beautiful car was designed in Japan and was inspired from Japanese art and culture. The word “Taiki” means “Atmosphere” in japanese. The design team’s goal was to create a concept that “visually expresses the flow of air”. This beautiful concept was inspired by the image of a pair of flowing “Hagoromo”. “Hagoromo” are the “flowing robes in Japanesee legend that enable a celestial maidan to fly”. These excerpts are from the Mazda Tokyo Motor Show hand-outs that were available at the Mazda Taiki stand.

Photo 071: Mazda Taiki Concept
Photo 071: Mazda Taiki Concept

Most of the reason why I went to the Tokyo Motor Show was because I wanted to see the new Nissan GT-R, that is scheduled to release next year. This hyped sequel to the incredibly popular Nissan Skyline of the 90′s is perhaps the most sought after car for next year.  At $80 000 for a supercar that can rival Porsche Carrera GT’s lap time at Nurburgring, that is an incredible deal and I look forward to see these driving around … Canada? Okay, probably not, but hopefully I will see at least a couple. (Source: EGM CarTech ). Luckily, I did get to see the Nissan GT-R as close as spectator-possible at the Tokyo Motor Show, mainly by pushing and shoving. Here is the best shot I could take:

Photo 047: Nissan GT-R
Photo 047: Nissan GT-R

Anyway, enjoy the gallery here:

View the Gallery!

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Japan | Leave a comment

Japan: Japanese Version of Punk’d

There is a television show on primetime Japan that is very similar to the American “Punk’d” TV Show. It generally follows the same theme of fooling celebrities, but it has a very interesting twist to it that makes it much more funnier!

The show starts out with a selected number of male comedians that will get punk’d. These comedians are generally picked from either the most popular ones at the time or just a random selection from the thousands of comedians that are on primetime TV in Japan. The real interesting point about this show that makes it much more entertaining than the American Punk’d is that they fool these comedians with beautiful Japanese models. How you may ask? Well they pick a beautiful model, they set the comedian up with the model at an event like a photo shoot, give them a chance to talk, and get the model to pretend to be interested and ask them for their number. This is insanely cruel but really funny to see what the comedians are like in real life.

So now you know the basic story of what happens in the show. Let’s go with how the show is set up. When the model and the comedian exchange cellphone numbers, the model’s cellphone is given to the show. The show MCs then pretend to be the girl and everyone can see the comedian’s messages. Another group of beautiful models at the show judge whether or not the comedian is crazy and whether or not the girl should go on a date with them. If the date proceeds, they make a fake date scenario to do something to the comedian.

In case the date occurs, the scene is all set-up in advance with cameras everywhere the comedian and the girl will go. One of the simple story lines that I saw took place when the girl and the comedian would meet infront of her house. She would forget something and run back to her house. While going back, she would accidentally slip and fall and pretend to be hurt. The comedian would come to help her and then fall into a giant pit. A famous comedian (lately) started doing this dancing skit, and when he got punk’d on this show, a hundred guys came out of nowhere and surrounded the pit and started dancing. That was a good laugh.

Among all the punk’d comedians, my favorite would have to be the handsome comedian who actually got the girl to fall for him. It seemt like a perfect date and you could tell that she liked him because of her body language. Unfortunately, she was playing a role on the show, and it was time to get punk’d! They went back to her apartment (fake apartment), and she showed him her modelling outfits. She asked him to try one on and she would get into something nice too. Well he tried something on and it was a cheerleading outfit! He even danced too hahaha. Anyway, the skit ended with the “ex-boyfriend”, which was supposed to be a yakuza-type, jealous boyfriend, coming and asking to get back together with her. She told the comedian to go hide out on the balcony while she talks with the ex-boyfriend. Well, the ex-boyfriend came in and found him and she said that if the yakuza guy doesn’t hurt the comedian, she would get back together with him. Anyway, it was quite entertaining because at one point the comedian was hiding on the balcony, wearing rabbit ears and a cheerleading outfit, trying to hide from the yakuza. He was really scared, that’s for sure.

Anyway, here is a clip from the show. It is not the same episode I saw but it is still pretty funny. I hope you enjoy it!

http://www.veoh.com/videos/v301485bGEsrHDe

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Japan | Leave a comment

Flash: Creating 1 FLV Video from many FLVs

Creating a single FLV from many FLV’s can be either very complicated or very simple. I wanted to choose the easiest way possible. I went onto a number of forums and a number of sites and just couldn’t find the right solution… until now.

On TxPress’s blog, I found a helpful app that joins multiple FLV videos into one video. The problem with this one (as well as the initial solution that I will present) is that the meta data is not updated for the new video. There are some pay programs that will do this for you automatically, but then again they aren’t open source and thus cost $$bling$$.

Anyway, I have come up with this nice little package that does the trick for you. It will merge as many videos as you want and provide a solution to update the meta data. Please download the following package and follow the “readme.txt” instructions to get it working. Have fun!

Download: FLVExtractPackage.zip


Further Notes

In this package, I have included ASM’s great little FLVExtract Application.  ASM is a developer here in Japan and I do not know him personally. I just came across his software in my search for a application that can combine FLV videos together. Check out his site, he has a lot of useful apps. They are all in Japanese though. Click Here to visit ASM’S website

The second part of this package is from Ingo Oppermann, a bright programmer who created an FLV Injector by the name of YAMDI (stands for “Yet another meta data injector”). Of course FLV Injector already exists (and in version 2), but this one has a better license (distributable) and can process larger FLV’S much quicker than FLV Injector. Check out Yamdi’s website here: Click Here to visit Yamdi’s website.

Anyway’s, I hope you find this package useful! Here is a video that I combined by using my FLVExtractPackage after using Media Pirate to download YouTube videos. I hope you like Seinfeld. Please let it load for a bit to view it ;)

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Flash | Tagged | Leave a comment

Japan: My First Trip to the Hospital

A couple Fridays ago, I took my first trip to a Japanese hospital. Don’t worry, it was just a routine visit to the hospital to get a medical examination. However, I did see a few interesting things that I will describe in further detail.

Hospitals in Japan are generally kept in very good condition. The hospital that I went to had a ground floor emergency room and where I was required to go was the 2nd/3rd floor checkup facilities. There were at least 20 other people there that were getting check-ups so I am guessing that hospital is a hotspot for insurance companies to send the employees to.

Unfortunately I did not take any photos, so I will do my best to describe the location. The waiting room was huge! And I mean huge as in they had a giant TV with the World Series on. They also had at least 80 seats with 2 massage chairs. I wish Canadian hospitals had massage chairs in the waiting rooms! The waiting rooms downstairs at the emergency floor also had giant plasma TVs.Damn.

Well like you know, the reason why I went to the hospital was to get a routine physical examination. This health check wasn’t too hard. The only hard part about it was that they spoke Japanese only. That’s why I went with my company friend who spoke both English and Japanese. During the examination, you basically proceed from room to room until you reach level 5, errr room 5. Then after that you pay your fees and go home.

Room 1-3 involved checking your weight, height, eyes, ears, and blood pressure. The weight and height check was routine but the eye and ear examination was interesting. For the eye examination, they check to see if you are blind by having you read various sizes of a rotated letter “E”. You just need to say if the “E” is rotated up, down, left, or right. After that, they check if you can hear low and high frequency sounds. This was all pretty basic so far. After checking your blood pressure in room 2, you go and talk with a doctor who pretty much told me that from the results in room 1-3, I was healthy.

Japanese Eye Chart
Japanese Eye Chart

At room 4, they do blood work and check your heart. They do a blood drain from the elbow, which in my experience is usually taken from the forearm or bicep. For checking the heart, they check it’s pulse at different parts of your body by using suction cups. I assure you that they check it nowhere interesting =p.

Room 5 is definitely the hardest stage of them all. To check for cancer tumours, they use a medicine called Valium that allows them to see organs quite clearly (I think that’s it’s purpose). I got to see the X-Ray machine live while the doctor was checking my friend’s insides. It was quite interesting to be in the control panel and seeing the X-Ray machine live. The reason why this one was the hardest stage of them all is because they make you take Valium and for it to work to allow the doctor to check your organs, you have to follow detailed instructions given by the doctor. The hardest of these instructions involved rotating on the spot 2 times while you are lying down on your back. Valium makes your stomach full and mouth and neck thicken, so talking and moving seems funny. It was an interesting experience to say the least and at the end of the Valium check they pull out a little robotic arm that punches you in the stomach. What does this check? I still don’t know.

Valium
Valium

After taking the valium, I heard that if you do not drink enough water and did not follow the instructions the doctor gave you, it could solidify in your butt. This would be twice as bad for me because the doctor actually asked me to take 2 times the traditional dose because my stomach was too small. Luckily, they give you pills to make you have diarrhea so I didn’t have to face this potentially terrible ending, but the voyage was pretty stinky.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in Japan | 4 Comments

Japan: Mount Fuji and Typhoons

Last weekend, I finally got a chance to go to Mount Fuji and it’s famous amusement park, Fuji Kyu Highland. Unfortunately, that was also the same time a typhoon hit the area, shutting down almost all rides and making Mount Fuji hidden by clouds. I wasn’t expecting much when I went there but I was pleasantly surprised by the amount of fun you can have in a giant poncho with friends.

Chiaki and I at Fuji Kyu
Chiaki and I at Fuji Kyu

In the morning, the rain and wind wasn’t too bad. It was slightly drizzling and everything seemt rather okay. However, when we got to Mount Fuji, it was chilly and the rain fall had kicked into overdrive. The clouds were everywhere and I kept having to ask, “Where is Mount Fuji?”. It wasn’t looking too good so far.

Although the rain kept most of the major attractions closed (like the roller coaster pointed AT Mount Fuji, which was my compass for the day), we still managed to get into some of the rides. Some of the rides that were still open were the ferris wheel, Zorpis (shooting targets), Gundam Crisis, Biohazard, and some “Scary House”, which was off a childhood cartoon for Japanese people. Let me just tell you that the Japanese love to get scared. Biohazard was a messed up old hospital where there are zombies who pop out of nowhere and chase you. Although it is just a show, they do a great job making the whole atmosphere real and can really freak you out.

Monsters at Amusement park
Monsters at Amusement park

Anyways, after going to the rides, getting our feet soaked, we went over to the Onsen at the hotel. It was simply short of fantastic as it is a great vacation from the ordinary, difficult working style of the Japanese, which I have become so accustomed to. Along the way to the onsen, I found this funny sign below. It pretty much says that coming in 2051, there will be a human powered Geisha roller coaster going at a whopping 12 km per hour. Damn I wish Canadian’s had the same kind of humour.

Coming Attractions
Coming Attractions

And at the end of it all, we took our bus back to Shinjuku and enjoyed some delicious Turkish food. Part of living in Tokyo is getting the advantage of having many times of cuisine. Canada has this benefit as well but perhaps not to such a large scale as Tokyo. Here is a photo of that wonderful course.

Turkish Dinner
Turkish Dinner

View the entire gallery by clicking here!

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in General | Leave a comment

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. 

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
Posted in General | Leave a comment