My account
Shopping cart
Knowledge base

Using event listeners tutorial

1. You have to complete the “Create a simple Color Picker” tutorial before continuing with this one.

2. Open Macromedia Flash, create a new file (File/New/Flash Document) and look for the Color Picker component in the Components window (Ctrl+F7 on Windows; Command+F7 on Mac) on the V3 Components - Jumpeye.

3. Make sure that you have a layer for your Action Script code (named actions). Also name your color picker on stage (myColorPicker)

4. On this layer we’ll add some event listeners along with some trace statements to return us the confirmation that the listeners worked :

var listener:Object = new Object();

listener.onOpen = function(evtObj:Object):Void {
     trace(evtObj.mode+" mode opened");

listener.onClose = function(evtObj:Object):Void {
     if (evtObj.isSwitching) {
          if (evtObj.mode == "easy") trace("easy closed because we are switching to pro");
          else trace("pro closed because we are switching to easy");
     else {
          trace(evtObj.mode+" mode closed");

listener.onSwitch = function(evtObj:Object):Void {
     trace("switching from "+evtObj.oldMode+" to "+evtObj.newMode);

listener.onColorSelected = function(evtObj:Object):Void  {
     var colorValue:Number =  evtObj.newColor;

myColorPicker.addEventListener("onOpen", listener);
myColorPicker.addEventListener("onClose", listener);
myColorPicker.addEventListener("onSwitch", listener);
myColorPicker.addEventListener("onColorSelected", listener);

5. Test your movie (Ctrl+Enter) and follow this scenario to see if your listeners work :
    a. click the dropdown arrow from your color picker to open the easy palette mode
    b. click the switch to pro mode button
    c. click the switch button again to go back to easy mode
    d. pick a color

6. If your code is correctly written and you followed so far, your Output window should look like this :

Download the source files for this tutorial