Make a Custom Event in Flash with AS3

I’ve been working on a Flash project that required a SWF loaded into my main movie to broadcast a custom event back to a listener in the main movie. I kept getting an error trying to make this custom event but luckily I found a nice blog post at FlashCoder.net, Creating and Dispatching Custom Events in AS3. I credit Sean McSharry with helping me get this working. The code I’m sharing below is very close to what he’s posted on his blog. (Thanks for the help, man!)

My custom even was just different enough I wanted to share my files. I don’t work in Flex. I use the Flash Application, aka the Flash IDE, to build my projects, so my example files work with the Flash IDE.

There are 3 authoring files I’ve posted. Download them all here: customEvent.zip.

  • MyCustomEvent.as
  • eventdispatcher.fla
  • testing_ext_load_w_custom_event.fla

Let’s look at what’s in MyCustomEvent.as first. My notes on what’s going on are in the comments in the code. Basically MyCustomEvent.as lets you say trigger an event whenever you want to. I was building a site that needed to load the primary navigation at point in the sequence of events.

(Update: Since I originally published this, I've added the last function in this first bit of code. The clone() function helps... somehow. I think what's it actually doing is making your custom event be returned, aka a return type of MyCustomEvent, instead of the super class, an Event. This change is not reflected in the files you download so be sure to update those if you're using them.)

package {
 import flash.events.*;
 
 public class MyCustomEvent extends Event {
 
  // define variables
  public static const CONTROL_TYPE:String = "headControl";
  public var command:String;
 
  // call constructor function
  public function MyCustomEvent(command:String) {
   // call the Base Class with super(CONTROL_TYPE); to initialize Event 
   super(CONTROL_TYPE);
   // take the 'command' that we receive when the MyCustomEvent is called and define 'command' within the event so it can be read later, like in line 24 in testing_ext_load_w_custom_event.fla
   this.command = command;
   trace("MyCustomEvent constructor fired in MyCustomEvent.as");
  }
  public override function clone():Event {
   return new MyCustomEvent(command);
  }
 }
}

In eventdispatch.fla, we create the SWF that will be loaded into the main movie. This is the SWF file that is calling out the custom events.

import flash.events.EventDispatcher;
import flash.events.Event;
import MyCustomEvent;

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void {
 var total:Number = this.stage.loaderInfo.bytesTotal;
 var loaded:Number = this.stage.loaderInfo.bytesLoaded;
 
 // before calling the event, be sure you've loaded everything.
 if (total == loaded) {
  callMyCustomEvent("I'm at the first frame.");
  play();
  this.removeEventListener(Event.ENTER_FRAME, loading);
 }
}

function callMyCustomEvent(sayWhat:String):void {
 dispatchEvent(new MyCustomEvent(sayWhat));
}

In the file you can download, I’ve also got additional code on a second frame that calls a second custom event there.

Finally, we need to make the main Flash file that will load in the SWF we just made above. I’ve called this file testing_ext_load_w_custom_event.fla.

import flash.display.Loader;
import flash.net.URLRequest;
import MyCustomEvent;

// the URL of the SWF we want to load
var urlReq:URLRequest = new URLRequest("eventdispatcher.swf");

// set up the Loader that will pull in external SWF which calls out our custom events when we've told it to
var ldr:Loader = new Loader;
ldr.load(urlReq);

// using an event listener, we listen for the COMPLETE event, which is built into Flash, and then call the function 'loaded'
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);

// define the 'loaded' function
function loaded(event:Event):void {
 // add the external SWF to the stage so we can see it
 stage.addChild(ldr);
 //
 event.target.content.addEventListener(MyCustomEvent.CONTROL_TYPE, eventHandler);
}

function eventHandler(evt:MyCustomEvent):void{
 trace("eventHandler fires: "+ evt.command);
}

And that’s how you make a custom event.

There are no comments to this post.

Commenting is not available in this channel entry.

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.