r3dux.org

LOLz!

Found at: http://techbuket.net/, where they have stacks more funny tech/geek pics…

Oh, and: jQuery

By default, you can’t. But there’s a way around it so you can by creating a custom event class! In this case, I’m going to deal with extending the Timer class to create a custom timer class with additional properties that we can use to pass data to functions.

The Problem

To demonstrate the problem, consider the following simple timer code:

var greetTimer:Timer = new Timer(3000, 1);
greetTimer.addEventListener(TimerEvent.TIMER, greet);
greetTimer.start();
 
function greet(e:TimerEvent):void
{
	trace("Hello!");
}

This will work just fine – it’ll call the greet function once to output “Hello!” three seconds after the timer was started. But what if I wanted to say “Hello, SOME_NAME_STRING”, like “Hello, Bob!”, well you might think you could just do something like this:

var name:String = "Bob"
 
var greetTimer:Timer = new Timer(3000);
greetTimer.addEventListener(TimerEvent.TIMER, greet(name));
greetTimer.start();
 
function greet(e:TimerEvent, theName:String):void
{
	trace("Hello, " + theName + "!");
}

But you CAN’T! ActionScript 3 doesn’t allow you to pass parameters other than the TIMER event (i.e. the timer going off) to functions which are bound to a timer. And even changing the order of the parameters, or using a line such as the one below simply won’t work:

greetTimer.addEventListener(TimerEvent.TIMER, greet, name);

The Solution

Now, there are things you can do like use intermediate functions which might call a second function, or using anonymous in-line functions (there’s a good forum thread on it here if you want to investigate that route) – but there’s a better way of doing it: We can just create our own custom Timer class!

For this simple text example we could use something like this:

Custom Timer Class (String version) Code:

package
{
	// Import required libraries
	import flash.utils.Timer;
 
	public class cTimer extends Timer
	{
		// Create a property for our cTimer class which can be used to store a String
		public var firstName:String
 
		// Constructor function
		public function cTimer(theDelay:Number, theRepeatCount:int, theFirstName:String):void
		{
			// Create a normal timer using the Timer class' constructor
			super(theDelay, theRepeatCount);
 
			// Set our firstName property to what was passed to our cTimer constructor
			this.firstName = theFirstName;
 
		} // End of constructor
 
	} // End of class
 
} // End of package

And then we could use our custom timer like this:

Flash File Code:

// Import our custom timer class for use
import cTimer;
 
var greetTimer:Timer = new cTimer(3000, 1, "Bob");
greetTimer.addEventListener(TimerEvent.TIMER, greet);
greetTimer.start();
 
function greet(e:TimerEvent):void
{
	trace("Hello, " + e.currentTarget.firstName + "!");
}

This will print out “Hello, Bob!” just fine using our the additional property in our customer timer class!

Now that’s all well and good, but most people want to modify some manner of DisplayObject (Sprite, MovieClip etc.) when the timer fires, so for that we can just modify our custom timer class to expect a DisplayObject like this:

Custom Timer Class (DisplayObject version) Code:

package
{
	// Import required libraries
	import flash.utils.Timer;
	import flash.display.DisplayObject;
 
	public class cTimer extends Timer
	{
		// Create a property for our cTimer class which can be used to store a DisplayObject
		public var timerTarget:DisplayObject;
 
		// Constructor function
		public function cTimer(theDelay:Number, theRepeatCount:int, theTimerTarget:DisplayObject):void
		{
			// Create a normal timer using the Timer class' constructor
			super(theDelay, theRepeatCount);
 
			// Set our timerTarget to what was passed to our cTimer constructor
			this.timerTarget = theTimerTarget;
 
		} // End of constructor
 
	} // End of class
 
} // End of package

Flash File Code:

// Import our custom timer class for use
import cTimer;
 
// Create a simple circle centered on the stage and fully transparent
var circle_mc:Circle = new Circle();
circle_mc.x = 275;
circle_mc.y = 200;
circle_mc.alpha = 0;
addChild(circle_mc);
 
// Create a custom timer which does everything a timer does, but also stores a DisplayObject
var circleFadeInTimer:cTimer = new cTimer(2000, 1, circle_mc);
circleFadeInTimer.addEventListener(TimerEvent.TIMER, fadeIn);
circleFadeInTimer.start();
 
// Function to make the circle visible
function fadeIn(e:TimerEvent):void
{
	// Using our timerTarget property of our custom timer class (cTimer) modify the DisplayObject
	e.currentTarget.timerTarget.alpha = 1;	
}

Note: The above code assumes you’ve created a symbol with the class name “Circle” – to do so just draw a circle on the stage, stab F8 to convert it to a symbol, and check the Export for ActionScript checkbox and enter Circle as the class name before hitting the [OK] button.

Just like our String example, adding the additional property to our custom timer class allows us to bind the timer to a specific object which we can then manipulate from the function called when the timer fires! So in this case, two seconds after the timer starts our fadeIn function will be called and our circle instance will have its alpha property set to 1 (so it’s fully opaque – hence visible!).

Wrap Up

I came up against this problem whilst helping out some of my ActionScript students who are first-time coders, so wanted to code more Procedurally than Object-Oriented. When you use OOP there are better ways of going about things, but this is still a useful trick to know when you’re dealing with Event Listeners and Timers. I hope it helps out anyone who’s been banging their head against this problem! Cheers!

I’ve been pootlin’ about with Flash a little behind the scenes of late, just making the occasional graphical trinket, and it struck me that I hadn’t made a starfield yet in ActionScript – so I knocked together a quick and dirty one in about 20 minutes…

The “star” itself is just a really small, white circle – so small that it turns into a single-pixel block with filtering on it – you can change out the symbol to anything you like, or just draw actual points if you wanted to – I’m happy enough that the guts of it work and will leave it alone and re-use the code when I want the effect sometime…

Source code after the jump if that’s your thing…

Read the rest of this entry »

I learnt AS3 in a hurry – I had a couple of weeks to get my head around it and get things working – no nicities – just get it working so you can teach it… And what I missed by scrabbling through the ActionScript 3.0 Bible was the propagating nature of the event model. And it’s awesome! You layer things on other things and the event propagates down the tree until it hits the last branch..

In the example below I just create three boxes bound to a Box class, and when adding them to the screen I don’t add them all to the stage – I just add the first one to the stage, add the second one to the first one, and add the last one to the middle one, and just look at MOUSE_OVER and MOUSE_OUT events. Because they’re MovieClips added to MovieClips etc, the event travels down the tree and hits each branch using the current status to work on. Move your mouse over the boxes below to see what I mean:

That’s going to come in really useful… I can just feel it.

Source Code:

Box class:

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	public class Box extends MovieClip
	{
 
		public function Box():void
		{
			this.addEventListener(MouseEvent.MOUSE_OVER, isOver);
			this.addEventListener(MouseEvent.MOUSE_OUT, isOut);
		}
 
		private function isOver(evt:MouseEvent):void
		{
			this.alpha = 0.5;
		}
 
		private function isOut(evt:MouseEvent):void
		{
			this.alpha = 1;
		}
	}
}

var topBox:Box = new Box;
topBox.x = 150;
topBox.y = 150;
addChild(topBox);
 
var middleBox:Box = new Box;
middleBox.x = 100; // Remember this is -RELATIVE- to the MovieClip this MovieClip is being embedded in....
middleBox.y = 100;
topBox.addChild(middleBox);
 
var bottomBox:Box = new Box;
bottomBox.x = 100;
bottomBox.y = 100;
middleBox.addChild(bottomBox);

We’re making good progress here in Week 4 of CUFDIG302A – Author Interactive Sequences, so we’re looking at more Symbols and Instances, and how we can use Timers to call functions at specified intervals.

If you’ve not gone through any of the previous weeks slides and you’re new to coding, then take a step back to and take it order – it’ll really help.

I’ve been a bit busy of late and been finding it hard to get the time and inclination to get the slides together in the different format soon after they’re done. Comments, suggestions, thanks etc. are always welcome and give me incentive to keep on keepin’ on…

As usual, the download link to the slides along with some legal gubbins regarding their use is after the break, so jump on in and assert your control!

Read the rest of this entry »