ActionScript Success!

In my previous post, I spoke about a small project that I’ve undertaken to learn ActionScript.  I started out doing it in ActionScript 3.0 — predominately because it’s the latest version so it made enough sense to me.

Then I ran in to my issues with AS3.0 as I noted at the very bottom of that same post — how to pass additional information on to the function through the event listener.  My vague understanding is that I would have to extend that class to make that happen.  I’m not quite ready for that — IF that is indeed the way.  Same goes for determining which listener was the sending listener –  just never figured that one out, if it’s even possible.  And most oddly, HOW to swap out the correct images to make the push-button look like a two-position switch.

How I succeeded?  I re-wrote it all in ActionScript 2.0.  The re-write, or “back port” only took me an hour, AND, I was able to do exactly what I wanted to do.  End result…  a better product done much quicker.  I still want and expect to learn AS3.0, but for now, I’ll easily settle for quick and functional.

So…  how what did I do?

We’ll start with the end product first.  In the first image, once the app is launched, the learner will click on a switch to move it to the on position.  Since this is meant as a training aid, I added a “Show/Hide” button which is off when launched and simply toggles the display of the results of the switch.  The second image simply shows the results being displayed.

Image 1: Switch 5 & 7 on, results hidden

Image 2: Switch 5 & 7 on, but results shown

So, what about the code?  How different is it?  Most significant, is how event listeners are implemented.  In AS2.0 it’s MUCH MORE direct and much simpiler.

//  BEGIN CODE
stop();

// setup initial variables
var sw1Val:Number = 1;
var sw2Val:Number = 2;
var sw3Val:Number = 4;
var sw4Val:Number = 8;
var sw5Val:Number = 16;
var sw6Val:Number = 32;
var sw7Val:Number = 64;
var MacAddrVal:Number = 0;

// setup initial switch settings
sw1_btn.icon = "SwitchOff";
sw2_btn.icon = "SwitchOff";
// repeat 5 more times, 1 for each additional switch
address_txt._visible = false;

// begin switch functions
sw1_btn.onRelease = function() {
  switch (sw1_btn.icon) {
    case "SwitchOn" :
      MacAddrVal = MacAddrVal-sw1Val;
      address_txt.text = String(MacAddrVal);
      sw1_btn.icon = "SwitchOff";
      break;
    case "SwitchOff" :
      MacAddrVal = MacAddrVal+sw1Val;
      address_txt.text = String(MacAddrVal);
      sw1_btn.icon = "SwitchOn";
    break;
  }
};

//repeat same function for each switch

result_btn.onRelease = function() {
  switch (result_btn.label) {
    case "Show" :
      address_txt._visible = true;
      result_btn.label = "Hide";
      break;
    case "Hide" :
      address_txt._visible = false;
      result_btn.label = "Show";
      break;
    }
};
// END CODE

The one thing that helped me most was the .icon property that is available in AS2.0 but is not in 3.  To use it I just had to take each image of the switch position and convert the image to a graphic symbol.  Once a symbol, it was just a matter of setting the icon property for the button to the state desired.  That’s really all there was to it.

Below is the switch in action, feel free to tinker with it.  Now it’s on to other little tools on my list and if I can get them done in AS2.0 I’m gonna.