Archive for the ‘Site-seeing’ Category

Flash Game Review – Auditorium

Monday, January 26th, 2009

Auditorium is an elegantly simple puzzle game made in Flash that I found through a post on Daryl Teo’s Blog. The player must direct a stream of particles towards fixed collectors to complete a harmonious melody by manipulating movable icons that represent physical forces. The gameplay is quite simple to pick up at first but the puzzles soon become quite challenging. Every level of polish has been applied to the game from visual effects, like the fade between each level, to the pleasing audio clips generated by the particle collectors. The highly sophisticated elements of particle physics, sound, and design blend together to create a deceptively minimalist experience. Perhaps best of all, multiple solutions are possible for many of the puzzles leading to more exploratory gameplay.

Play Auditorium

Tweening timeline animations with KitchenSync

Tuesday, July 8th, 2008

One of the new features in KitchenSync 1.5 is the ability to tween animations on a MovieClip’s timeline… and I’m not just talking about gotoAndPlay(), I’m talking about controlling the starting and stopping points, speed, and easing functions of an animation on the timeline with code. It does this by incrementally controlling the current frame number of the MovieClip using a KSTween and a special ITweenTarget (a class used to control the values of an object) called TimelineController.

Take this FLA animation.

MovieClip animation

As you can see, there is a simple animation using a guide layer and labels on the key frames.

The following SWF uses KitchenSync to control the same ball animation. As you can see, the duration and easing functions of the animation can be controlled. You can even animate backwards!

See it in action.

The source that controls this is here.

?View Code ACTIONSCRIPT3
package {
	import flash.display.MovieClip;
 
	import org.as3lib.kitchensync.KitchenSync;
	import org.as3lib.kitchensync.action.*;
	import org.as3lib.kitchensync.action.tweentarget.*;
	import org.as3lib.kitchensync.easing.Bounce;
	import org.as3lib.kitchensync.easing.Cubic;
	import org.as3lib.kitchensync.easing.Linear;
	import org.as3lib.kitchensync.easing.Oscillate;
 
	/**
	*	Demos the TimelineController which controls the animation of a MovieClip's timeline.
	*/
	public class FlashIntegrationTest extends MovieClip
	{
		protected var test1:MovieClip;
 
		public function FlashIntegrationTest()
		{
			super();
			// initialize kitchensync.
			KitchenSync.initialize(this, "1.5");
 
			// add a movieclip from the library
			test1 = MovieClip(new AnimationTest1());
			addChild(test1);
 
			// define the start and end frame with strings or ints or FrameLabel's
			var startLabel:* = "start";
			var endLabel:* = "end";
 
			// set up the TimelineController tween target.
			var tweenTarget:TimelineController = new TimelineController(test1, startLabel, endLabel);
			// Animate the ball with a linear ease.
			var tween:KSTween = KSTween.newWithTweenTarget(tweenTarget, "1s", 0, Linear.ease);
 
			// animate the ball backwards with a bounce tween
			var tween2:KSTween = tween.cloneReversed();
			tween2.duration = "4s";
			tween2.easingFunction = Bounce.easeOut;
			tween2.addTrigger(tween);
 
			// animate the ball with an oscillator
			var tween3:KSTween = KSTween.newWithTweenTarget(tweenTarget, "10m", "1s", Oscillate.sine);
			tween3.easingMod1 = 0.3;
			tween3.addTrigger(tween2);
 
			// start the animations
			tween.start();
		}
 
	}
}

Pretty cool huh? We’re creating a new TimelineController and setting the boundaries of the animation then passing it to a new KSTween object. Each of the three tweens use different parameters and are triggered by the end of the one before it.

You can download the entire thing and play around with it.