I’ve updated my 3 year old portfolio to a temporary wordpress portfolio so that I can showcase my latest work and find it easier to update than the current one. The old site can still be accessed via http://www.qwertydesign.net/v1/ and the new site can be accessed here.

The theme is a free WordPress theme from FROGSTHEMES.COM.

Related Posts

Since most of my visitors are from USA, I’ve switched hosts to BlueHost.com. Hopefully, this site loads faster for you guys now!

No related posts.

This is a website that’s done by Driv - my Art Director at Kinetic, and “flashed” by Craig – my Flash mentor.

Congrats to them both for winning the FWA site of the day award!

Enjoy the beautifully crafted and executed site at http://www.saltfilms.com.sg

No related posts.

XML2Object (AS2)

Documentation / Download

Developed by sephiroth, one of the Flash gurus in the Flash community, XML2Object does what it’s name says. It converts an XML to an Object. Easily, I might add.

Pros:

• Allows you to access XML elements just like an object.

Example:
Transform the passed XML source into an XML readable Object.

import it.sephiroth.XML2Object;
var dataObj:XML = new XML ();
//
dataObj.ignoreWhite = true;
var sXML:String = "path/to/xml_file.xml";
function handleLoad (success:Boolean) {
	if (success) {
		_root.xmlObj = new XML2Object ().parseXML (dataObj);
	}
}
//
dataObj.onLoad = handleLoad;
//Load the data
dataObj.load (sXML);

Cons:

• It doesn’t detect a single item as an array. This is a problem if, for example, you load a gallery, and there’s only 1 item in the gallery. Your code will be built to entertain more than 1 item but it will not recognise a single item as an array.

?

Bitmap Exporter (AS2/3)

Documentation | Download

There are alot of classes that utilises the ByteArray to export whatever that is in Flash to an image, but for AS2, this is pretty much the only available one. (Do let me know if there’s a better one.)
As mentioned earlier, the Bitmap Exporter allows you to export a movieclip from Flash with predefined width, height and quality settings.

Pros:

• Probably the only class that allows you to do this with AS2.

Cons:

• Utilises the server heavily.
• The exporting takes some time.

Transform Manager (AS2)

Documentation | Download

Ever wanted to create an application just like Photoshop? Well, maybe not exactly like Photoshop, but at least to allow your users to create their own customise their very own [insert brand object here].
The Transform Manager by Grant Skinner does the job perfectly. For me, the class makes rotating, scaling, moving and deleting objects very intuitive. However, usability experts might argue that users who are not used to Photoshop or any other image editing tools might find it a problem. Nevertheless, this is an awesome tool to have, and building on top of the class is possible as gskinner has graciously released the classes with the source code.
Like TweenMax, Grant’s documentation is awesome and is impossible to not understand.
Note: The link I posted above is to an older version that is free, the current and newer version costs $299. An AS3 version is also available but you will need to join the Club Greensock to get it.
?

Sephiroth Color Picker Component (AS2)

Documentation/ Download : http://www.sephiroth.it/file_detail.php?id=147

This is a UI Component that was never added by Flash. Thanks to Sephiroth though, you now get a lightweight, Color Picker Component for free.

There are dozens of classes released by the great Flash community all the time, and it will be impossible to list them all in this one article, what I’ve listed here are the ones I find myself reusing or has benefited me greatly.
You’ll also realise that I have not added any Tweening engines to this article as I believe they deserve to have a list on their own. Also, the classes listed here are mainly AS2. I will be sharing a similar list for AS3 soon.
Please feel free to add in more classes or components that you believe should be in this list.

Related Posts

Introduction

But Flash has never seem to have forgotten its roots as an animation tool. The interactive experiences that you’ve seen agencies create are always animated.

Yet, I’ve realised that with the freely available TweenMax and other Tweening engines, more and more new users of Flash have taken them for granted, and no longer knows the basics of animation.
Thus, I humbly present to you what I learnt from my teacher, the basics of animation.

What is easing
Easing, simply put, is the acceleration or deceleration of objects In the real physical world, friction and gravity are present which prevents matter from moving freely.

Don’t get what I mean? Take a look at the 2 Flash animations below.

Which one did you prefer? The ball in the 2nd animation has been applied some easing to simulate acceleration and deceleration. While it might not be true acceleration/deceleration, you can see the huge difference easing gives simple sliding animations.

The simple addition of easing effects greatly affects the look of an animation.

Before we go on further, take a look at how the ball in Animation 2 slowly picks up speed. This is acceleration in the real world. As the ball slows to a stop, deceleration is happening. But in Flash the terms are changed to easing instead.

Hence, in short, Easing In is acceleration, and Easing Out is deceleration.

Now take a look at the 2 graphs below. Take some time to absorb it as they are the most basic graphs you will ever see. The x axis represents time, and the y axis represents the value.

You can see that graph A’s value increases slowly and gradually increases.
In graph B, the opposite happens, the value increases sharply, and gradually slows down.

Take your time to analyse which one is Easing In and which one is Easing Out. If you still do not understand what is going on at this point in time, I suggest that you slowly read through the article again before moving on.

Types of Easing
If you think that’s all there is to easing, think again. Instead of redoing an entire page of examples of various easing effects, I’m going to link you to this great page where I often visit even now, just to see if the feel of the easing fits what I want to use for my website/application.

Click here to visit Zeh Fernando’s great AS2 Tweening Engine, MC Tween.

Know who is Robert Penner?
Chances are if you’ve used Flash to animate something before, you owe this great guy a drink. But who is he?

Robert Penner was the first guy to come up with a set of easing equations for Flash and he does what not many people at the time did, he shared it with the world.

What has he got to do with animation in Flash?
Simply put, Penner’s equations are what makes easing possible, his equations are the core and groundwork of many Tweening Engines. Without his genius, there are probably a lot fewer boring Flash sites.

Conclusion
I hope you have a better idea of easing now after reading this article. In the next article, look forward to learn how to utilise the great Tweening engines, and I will also include some of my personal tips for website animations.

Related Posts

Who should read this book?

Although the cover states that it’s the ultimate guide to great copywriting, don’t be misled into thinking that you need to be a copywriter to relate to what the book has to say.

I picked up this book initially not because I want to be a copywriter – but because I believe that for me to work with one, I have to have a basic idea of what a copywriter does. However, while reading the book, I realised that the techniques and tips in the book not only apply to copywriting – it applies for writing in general.

About the book

Written by Andy Maslen, a copywriter with years of experience, the book is short, precise, and gets the message across in a simple and effective manner. I’ve always loved books by copywriters simply because they try to practise what they preach!

From the back of the book, read this book and you’ll learn:

• The confidence and the skills to write better copy faster.
• New ways to gain readers’ attention, respect and trust.
• Hints and tips on turning selling skills into copywriting skills.
• Simple techniques to improve the readability of your copy.
• The impact of design and layout on copywriting.
• The meaning of good written English – the rules you must follow, the rules you can safely ignore.

The book isn’t that expensive – just US$13.40 at BookDepository.com.

Conclusion

Write to Sell isn’t just for selling. It makes you write better, whether you’re writing an article for your blog, or even just writing an email to your fellow colleague.

About BookDepository:
BookDepository offers free worldwide shipping to most countries and the prices of the books are usually even cheaper than Amazon. The turnaround for the books are usually within a week, and the customer service has been excellent.

If you plan to buy the book, please do so by clicking on the link below. Doing so, will give me a small percentage of the profits, and even though it won’t be much, it’s a good way to show your appreciation.

Related Posts

Here’s a list of sites that all Web Designers should have in their bookmarks.

Do let me know if you have a site that is better, and should be listed here.

Smashing Magazine
Noupe
Hong Kiat
10Steps
Design Reviver
WebDesignerDepot
Queness
Script & Style
DevSnippets
WebDeveloperJuice
David Walsh’s Blog
The TUTS network (as I call it)
Web Designer Wall
A List Apart
Abduzeedo – Contributed by Math.Basset

I was thinking of taking a screenshot of each website to make up this post, but I figured if I do get down to doing it, this blog post will never see the light of day, so here it is. In the no frills version.

Once again, if you know of a site that deserver to be in this list, and in all web designers’ bookmarks, leave a comment!

If this post helped you in any way, help me in return by clicking on the ad below:

Related Posts

I’ve always had a problem understanding documentation for APIs, hence when I do get something, I have this urge to share so that anyone who has the same problem can do what I am trying to do.

In my opinion, the best documentation ever written is by gskinner for TweenMax, and I think few would argue with me about that.

Having said that, the documentation written by aral for the SWX Twitter API is actually not too bad as well. But being completely new to both the Twitter API and the SWX Twitter API, one might be lost upon landing on the API page.

Now that my ramblings are done, on with the tutorial.

First, download the SWX Code from here. As of the time of writing, go ahead and download the v2 which is still in BETA as it works just fine.

This tutorial will show you how easy it is to update your Twitter status using the SWX Twitter API.

Here’s a look at what we will be creating:

Code:

stop();
loader.serviceClass = "Twitter";
loader.method = "getPublicUpdates";
loader.debug = true;
loader.loadMovie("http://swxformat.org/php/swx.php","GET");

import org.swxformat.*;
var swx:SWX = new SWX();
swx.gateway = "http://swxformat.org/php/swx.php";
swx.encoding = "POST";
swx.timeout = 10;
swx.debug = true;
swx.faultHandler = Delegate.create(this, faultHandler);
swx.progressHandler = Delegate.create(this, progressHandler);
swx.timeoutHandler = Delegate.create(this, timeoutHandler);

function updateTwitter() {

	var callParameters:Object = {
		serviceClass:"Twitter",
		method:"update",
		args:[message_txt.text, username_txt.text, password_txt.text], 

		result: [this, resultHandler],
		progress: [this, progressHandler],
		timeout: [this, timeoutHandler],
		fault: [this, faultHandler],
		debug: true
	}
	swx.call(callParameters);
	isLoading(true);
}

function resultHandler(event:Object) {
	isLoading(false);
	status.text = event.result;
}

function progressHandler(event:Object) {
	trace("progressHandler: " + event.bytesLoaded + " of " + event.bytesTotal);
}
function timeoutHandler(event:Object) {
	isLoading(false);
	status.text = "Call timeout. Please try again.";
}
function faultHandler(event:Object) {
	isLoading(false);
	status.text = "Call fault. Please try again.";
}

update_btn.onRelease = function() {
	updateTwitter();
};

Source Files (AS2.0 | CS3 Format)

I’m not going to explain the code unless someone requests for it as it’s really quite simple and straightforward. The other reason is due to a lack of time. I figured if I don’t share this now, I might not want to do it in the future, so hey, at least you have the code.

Once again, hope this helps someone out there.

Note: For other Flash Developers like me out there, if you need to integrate Facebook as well using AS2.0, take a look at http://www.echoesofburmajones.com/2009/09/18/20/facebook_connect_in_flash_actionscript_2.htm for an excellent tutorial (w/source files)!

If this post helped you in any way, help me in return by clicking on the ad below:

Related Posts

The reason why I’ve not been updating much recently: http://bit.ly/tcbfc2 (the campaign has finished! thanks for all the support!)

The microsite was a campaign for the Singapore launch of the highly anticipated sequel: Battlefield Bad Company 2, an FPS developed by DICE and published by EA games.

As BF2 features destructable environments – and tanks. We came up with the idea of letting players do exactly that – in real life. What users were able to do was that they could connect to a real model tank in the physical world and battle 3 other players in a prebuilt environment.

A camera was mounted on each of the tank so that the connected player can “see through” the turret of the tank. Players control the tank with the keyboard and then engage other players in battle with other tanks on a diorama that was installed at a cineplex in Singapore.

To be able to control the tank, my tech lead stripped bare the insides of the RC tank that we got from our supplier, VSTank, and put in his own customised and improvised version of the Arduino + XBee shield + Xbee components. Customised batteries were ordered and modded to power the Arduino which then passes the commands received through the XBee to the tank motors.

Each tank has a defined server which is actually a Netbook. To enable the sending of Serial data via the USB COM ports, serproxy was used along with the excellent SmartFoxServer. As there was no stable wifi-connection in the cineplex, the netbooks were connected using M1′s Mobile Broadband service (a 3G HSDPA network).

Due to the slow speeds of the mobile broadband, we had to sacrifice some video quality to achieve minimum control lag for the players who are connecting to the tanks from all over the world. The other problem we had was the streaming of the video feeds. As Singapore does not have any web hosting companies that offer Flash Media Servers, we turned to Influxis. This was perhaps the smoothest part of the entire project. The Influxis support was amazingly helpful, and the free tools and control panel that comes with every account was easy to use and set up. I am thinking of writing a tutorial for broadcasting a live feed to the world using Influxis soon!

As we were looking at a few alternatives at the time, the other service I tried was UStream, a free web streaming service that does exactly what I wanted. The problem though was that there was almost a 4 second delay between the feed I was broadcasting and the one that I was receiving. This was impossible to use for our game as we needed almost zero lag to let players control the tank efficiently. After signing up for the cheapest available plan (US$6/month) to do a test, we decided to go with Influxis as the 4 second delay was brought down to 0.5 seconds!

Next, a queue system was built so that only 4 players were able to connect to each one of the tanks.

The entire project was completed within 2 weeks and it generated thousands of hits from all over the world. I’m pretty sure that what we did was an industry first. It was tough but the process was fun and I learnt alot along the way.

Some pictures of the diorama, tanks, and Arduino:

The Arduino

Prototyping

Tank Version 1.0

The XBee Shield

The insides of the tank

Mounted XBees for minimum interference

All 4 Tanks ready to roll!

That’s all for now. I’m just sharing what I learnt during this project with everyone. Hope everyone had fun reading it and watching the videos!

Related Posts

Applied to a single button. Frame 1 shows that sound is on, and frame 2 shows that it’s off.

sound_mc.buttonMode = true
sound_mc.addEventListener(MouseEvent.CLICK,toggleSound)

function toggleSound(e:MouseEvent){
	var tempMC:MovieClip = e.currentTarget as MovieClip
	var sTransform:SoundTransform = new SoundTransform(1,0);
	if(tempMC.currentFrame == 1){
		tempMC.gotoAndStop(2)
		sTransform.volume = 0;
	}else if(tempMC.currentFrame == 2){
		tempMC.gotoAndStop(1)
		sTransform.volume = 1;
	}
	SoundMixer.soundTransform = sTransform;
}

If this post helped you in any way, help me in return by clicking on the ad below:

Related Posts