DesignFission

The Basics of Animation: Easing

Posted on Friday, April 2nd, 2010 at 2:13 am.

Written by Edwin

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.

[kml_flashembed publishmethod="static" fversion="9.0.0" movie="http://www.designfission.com/blog/post-img/0401/ballanimations.swf" width="400" height="200" targetclass="flashmovie"]

[/kml_flashembed]

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.

Book Review: Write To Sell – Andy Maslen

Posted on Sunday, March 28th, 2010 at 1:53 pm.

Written by Edwin

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.

Web Designer’s Bookmarks

Posted on Sunday, March 28th, 2010 at 4:59 am.

Written by Edwin

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:

SWX Twitter API For Dummies

Posted on Monday, March 22nd, 2010 at 6:26 pm.

Written by Edwin

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:
[kml_flashembed publishmethod="static" fversion="8.0.0" movie="http://www.designfission.com/swxtutorial/twitter.swf" width="400" height="380" targetclass="flashmovie"]

[/kml_flashembed]

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:

Flash, Arduino, Influxis and SmartFox

Posted on Sunday, March 21st, 2010 at 4:52 am.

Written by Edwin

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:

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!

Master Volume Control in AS3.0

Posted on Friday, February 12th, 2010 at 4:55 pm.

Written by Edwin

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:

Garbage Collector in AS3

Posted on Sunday, January 31st, 2010 at 6:35 pm.

Written by Edwin

The Garbage Collector in AS3 is smart, but it’s driving me crazy.

Being new to AS3, I didn’t realise that removing a child from the display list does not kill all it’s listeners, sounds, and some other stuff I don’t know.

When it affected me, I stopped for a moment and thought why is it built this way. It is true that sometimes, after removing a child from the display list, you do want the listener to stay.

Yet, I don’t see why they didn’t create another function that lets user kill all listeners in a particular child before removing it.

Anyway, after being stuck at this problem for a few agonizing hours, I realised all I need to do, is actually create a if statement inside any listener I want to kill as well, that if it’s parent is already null, i.e. to say it is already removed, then it should kill itself!

A simple solution. Hopefully no new bugs turn up after implementing this as a solution. Keeping my fingers crossed.

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

14 Days of jQuery

Posted on Wednesday, January 13th, 2010 at 4:43 pm.

Written by Edwin

This is exciting news indeed. jQuery has launched a website – “14 Days of jQuery” to coincide with their launch of the latest build of the arguably best javascript framework.

http://jquery14.com/

New FFD Issue

Posted on Saturday, January 9th, 2010 at 7:40 am.

Written by Edwin

Check out the latest issue of the FFD Magazine:

Must have SG iPhone Apps

Posted on Thursday, January 7th, 2010 at 10:43 pm.

Written by Edwin

Pardon me for posting a design and flash unrelated post.

I’ve just got my iPhone recently, and have been looking around for free apps to install.

Being a Singaporean, the first thing I wanted to do was sift out, from the thousands of US-centric apps, apps that were tuned for the local community.

So here’s the post, and feel free to post in the comments if you know of an app I don’t!

SG Buses
SG Buses is a bus guide for Singapore iPhone/iPod Touch users. SG Buses contains information on:

- bus routes
- schedules of first and last buses
- bus stop numbers (for use with IRIS)

With SG Buses, you can browse or search for information of a particular bus, or search for all the buses available at a particular bus stop or road.
SG Malls
*** WE HAVE ION ORCHARD & ORCHARD CENTRAL ***

Ever got lost in a mall? Wondering where that Food court, Levis store or MacDonalds was? We have certainly have and that is why we created SG Malls.

SG Malls is an iPhone application that helps you navigate in increasingly large and horribly layout malls.

It includes
· Over 100 Malls in Singapore

· Location Sensing of which mall you are in

· A store directory that is searchable by name or catergory of the store

· A map of the mall so you can easily find your way to a store
SG Sales
Bring your Shopping Sales information with you everywhere you go! With SG Sales, you can easily find sales in Singapore.

From all the price-saving deals offered during the Great Singapore Sale to the myriad of sales from season to season, we bring to you all that you need to know across brands and in different malls.

A great companion to your wallet, this mobile app will help stretch your money’s worth each time you shop.
SG Wireless
SG Wireless automatically logs on to hotspots such as Wireless@SG. The app will remember your hotspot provider, username and password. Each time you start SG Wireless, the app will immediately logs on to the connected hotspot! One click is all you need to get connected!

Once you are logged in successfully, you may exit SG Wireless and enjoy using the Wi-Fi.

Similar to AutoWiFi, Easy Wi-Fi, WiFi, devicescape.
Straits Times
About The Straits Times

The Straits Times is one of the region’s oldest English-language daily newspapers. It is the flagship publication of the publicly-listed Singapore Press Holdings group.

First published on July 15, 1845, The Straits Times is the most widely read newspaper in Singapore. The Sunday Times, which is produced by the same team of journalists, has a circulation of nearly 400,000 and a readership of 1.23 million.
iToday
iTODAY is the mobile version of Singapore’s most widely read compact newspaper, TODAY. Launched in November 2000, TODAY has a readership of 698,000 readers. The newspaper has established a reputation for sharply angled news reports and thought-provoking analyses and commentaries, living up to its slogan “We set you thinking”.

With iTODAY, mobile phone users will be able to read TODAY’s news, features and commentaries on the go, anytime, anywhere.
Locacity SG
“Locacity SG” is an application that allows you to find nearby points of interest (POI), such as ATM machines, 7-Eleven stores, petrol stations etc. It’s super intuitive and simple to use. All your settings are saved automatically and search is always 1 touch away.

Do note this is the Singapore edition and includes the following points of interest:

1. 400+ 7-Eleven stores
2. 500+ AXS stations
3. 600+ DBS/POSB ATM machines
4. 20+ Hospitals…
HungryGoWhere
Hungry and not sure where to feed the urge? Already the #1 Food resource on the web, HungryGoWhere is bringing calorie saving information to you by going mobile. Search for different types of restaurants than read reviews from diners like yourself so you’ll know what to try before you order.

The HungryGoWhere iPhone app has been brought to you by GTW Holdings in collaboration with the great guys at Xsago Pte Ltd.

Features

* detailed information of over 6,000 Singapore F&B establishments (more cities to follow)
* location based searching of Nearby F&B establishments
over 20,000 reviews from real diners
* Bookmark integration with your HungryGoWhere account so you always have the contact information of your favourite restaurants
* Maps, Photos, Directions and much more …

Enjoy your iPhone people!

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