Stephen Rushing

Since the ability to post to firebug’s console has been available, I’ve loved taking advantage of it. I created this debug function in order to trace errors to the Flash console with trace(myMsg), and to the Firebug console with ExternalInterface.call(”console.log”, myMsg). Here are the parameters localTrace accepts and their defaults:
localTrace(localTrace(traceMsg, debugMode=1, debugLvl=1, jsAlert=false);

• traceMsg is the message you want to send to the console.
• debugMode is the debug status of the referencing object.
• debugLvl is the priority of the error message.
• jsAlert tells the function whether or not to show the message as a javascript alert.
  (useful if your browser does not have a console)

traceMsg is the only required parameter, meaning you can use this function by just calling localTrace(”test message”).

Example Usage

In the referencing timeline actions or class, add an import line for the function.

import com.esiteful.debug.localTrace;

Create a variable called debugMode and set it to something between 1-5 (you can use however many numbers you’d like, but I generally don’t use more than 5).

var debugMode:int = 3;

Now make a call to localTrace(). I usually have a trace at the top of each of my functions so I know when they’re fired, but I obviously don’t always want these to show, so I give them a debug level or 2 (or higher, depending on their repetitivity).

I give error message that are caught in a try/catch a priority of 1. So, here’s a sample of debugging a simple function.

import com.esiteful.localTrace;
var debugMode=3;
function awesomeLogic(logicString){
try{
localTrace("[awesomeLogic("+logicString+")]“, debugMode, 2);
//put your logic here
}catch(err:Error){
localTrace(”Error at awesomeLogic\n”+err, debugMode, 1);
}
}

I couldn’t get the above quotes to show up correctly for the life of me…guess it’s about time to look for a good code container for these examples…

If this function is part of a class, I would change the messages include that (e.g. “className.awesomeLogic”).

There you have it! Of course, all suggestions on debugging are welcome.

Download com.esiteful.debug.localTrace.

To use this class you’ll need the “com” folder in the same folder as your .fla, and the createScrollerPane() function.

• Download the example: com.esiteful.display.ScrollerPane


import com.esiteful.display.ScrollerPane;
function createScrollerPane(paneTarget){
stage.frameRate = 31; // for smoother scrolling
var myScrollerPane:ScrollerPane=new ScrollerPane();
myScrollerPane.target=paneTarget;
myScrollerPane.maskArea=new Rectangle(0, 0, 300, 200);
myScrollerPane.scrollSpeed=4;
myScrollerPane.scrollSpeedMax=80;
myScrollerPane.btnScrollUp=btn_up;
myScrollerPane.btnScrollDown=btn_down;
myScrollerPane.btnScrollLeft=btn_left;
myScrollerPane.btnScrollRight=btn_right;
myScrollerPane.start();
}


Pass the instance name of the object you want to scroll to createScrollerPane(). For example:

createScrollerPane(mc_slide_content);

I’m not sure if it needs to be modified to work with constantly changing the scroll target. It may act funky, or get really slow.

Remember that context is important too, so if you’re adding all of this code to the actions frame on the root timeline, your function call will look more like this:

createScrollerPane(mc_accordian.mc_slide1.mc_slide_content);

I will keep this post updated as the ScrollerPane class changes.

Sometimes my handler function traces the event target as one of the child objects of the actual button, making the button lose focus and triggering the MOUSE_OUT event. I was using the following code:

movieOnStage.buttonMode = true;
movieOnStage.useHandCursor = true;
movieOnStage.addEventListener(MouseEvent.MOUSE_OVER, btnHandler);
movieOnStage.addEventListener(MouseEvent.MOUSE_OUT, btnHandler);
movieOnStage.addEventListener(MouseEvent.CLICK, btnHandler);
function btnHandler(evt:MouseEvent):void{
trace("btnHandler("+ evt +") triggered by "+evt.target.name);
if(evt.type==MouseEvent.MOUSE_OVER){
}else if(evt.type==MouseEvent.MOUSE_OUT){
}else if(evt.type==MouseEvent.CLICK){
}
}
Using object.mouseEnabled property on some of the offending sub clips looked like the first solution, but I really don’t want to specify that on every sub clip. Talk about static.

So, I noticed the MouseEvent had ROLL_OVER and ROLL_OUT events. Using those got rid of the focus issues I was having, but I didn’t know what the difference was.

Most AS3 button examples I see are using the MOUSE_OVER and MOUSE_OUT events, so maybe this will save someone some time when they run into the same issues.

For those interested, I did a little searching on the reason for this. From the docs:

“The purpose of the rollOver event is to simplify the coding of rollout behaviors for display object containers with children. When the mouse leaves the area of a display object or the area of any of its children to go to an object that is not one of its children, the display object dispatches the rollOver event. This is different behavior than that of the mouseOver event, which is dispatched each time the mouse enters the area of any child object of the display object container, even if the mouse was already over another child object of the display object container.”

More info on the MouseEvent:

• flash.events.MouseEvent

I often have issues getting dynamic text to show up at all when I want to animate it in some way. If the text field is created statically, you just have to embed the font in the properties dialog. Here’s how to do it with text fields created dynamically…

1. Add the desired font to your library and export it as a class. I’ll use Arial for this example.
   1. Right click on the library item and choose “Linkage”.
   2. Make sure Export for ActionScript and Export in first frame are checked.
   3. The Base class field should be “flash.text.Font”.
   4. The Class field should be the name of your font (”Arial”). Not sure how this works with spaces, but I would not use them just to be safe.
2. Create your TextFormat.
   1. var myFormat = new TextFormat();
   2. myFormat.font = new Arial().fontName; //use the font class name
   3. myFormat.color = 0xA2BCD5;
   4. myFormat.size = 12;
3. Create your TextField.
   1. var myTF:TextField = new TextField();
   2. myTF.selectable = false;
   3. myTF.embedFonts = true;
   4. myTF.defaultTextFormat = showOnHomeFormat;
   5. myTF.setTextFormat(showOnHomeFormat);
   6. myTF.text = “Here is my text!”;
4. Create a sprite container for the text field.
   Note: This is only necessary for animating the text or making it a button.
   1. var mySprite:Sprite = new Sprite();
   2. mySprite.addChild(myTF);
5. Add the sprite to the stage.
   1. root.addChild(mySprite);

For a more complete list of TextFormat/TextField properties and methods, visit the following links:

• flash.text.TextField
• flash.text.TextFormat