Flash AS3 Tutorial: Callbacks or passing multiple parameters to event listeners

Comments 4 Standard

So one of the things I’ve found in developing my MMO is that there are numerous times when I need to pass back more information than just the event data when I’m using event listeners. One scenario that I run into a lot is when I want to use the same event handler on multiple objects or movie clips but some variations in event target changes how the event handler should respond making it  impossible to use a single event handler on multiple objects.

Callback Functions

So just like in Javascript you can create a callback function in AS3 which will put additional variables into scope for the event handler. This is an example of how you can pass width, height and color parameters  to an event handler using a callback function:

//the objects you want to use an event listeners on
var myObject1:Object = new MyObjectType();
var myObject2:Object = new MyObjectType();

var myColor:uint = 0xFF0000; //red
var myHeight:int = 100;
var myWidth:int = 100;

//it doesn't matter what type of event you put on this but your callback's event handler must
//take the same event parameter type. So for instance if you send MouseEvent.CLICK then your
//event handler nested inside your callback must use a MouseEvent parameter
myObject1.addEventListener(MouseEvent.CLICK, onObjectClickedHandler(myColor, myHeight, myWidth));
myObject2.addEventListener(MouseEvent.CLICK, onObjectClickedHandler(myColor, myHeight, myWidth));

//this is the callback function that takes multiple parameters and puts our
//parameters into scope for the event handler function
function onObjectClickedHandler(color:uint, height:int, width:int):Function { 

  //now let's change the color for some fun
  //the next time you click on an object with this event listener it will change to blue
  myColor = 0x0000FF; //blue

  //this is the nested event handler. Color, height and width variables are now in scope
  return function(e:MouseEvent):void {
     e.target.width = width;
     e.target.height = height;
     var myNewColor = new ColorTransform();
     myNewColor.color = color;
     e.target.transform.colorTransform = myNewColor;
   }
}

ERROR FIX: json_encode returns null even if there is a value being passed to it

Comments 7 Standard

Loosing Data With json_encode?

So this took me several days of pulling out my hair so I’m hoping to save you some hair loss. I had a query pulling data from a MySQL database and then I was encoding the data and sending it back as a json_encode to an ajax file. The strangest thing was happening to my query — it would load a set number of records and then it just stopped, my json_encode would always return a null value even if there was data being passed to it.

Here’s The Solution

Apparently json_encode will only work properly if the data being passed to it is encoded as UTF-8. One of the posts I was pulling back had a Microsoft curly apostrophe in it (darn you user-entered data!).  So the quick solution is to use the utf8_encode() function around your data before you pass it to json_encode. Otherwise it’s time to go through all of your data and make sure it’s encoded UTF-8 first!

jQuery Tutorial: Blinking Elements – continously or a specific number of times

Comments 3 Standard

This tutorial will show you how to create a blinking effect on any page element: divs, ordered list items, inputs, buttons, you name it.

1. Create A Stylesheet

First create a stylesheet called blink.css and define a blink class that will give your element a “blinking” effect. For this tutorial I’ve chosen a pink color with white text.

.blink {
     color: #FFF !important;
     background: #FC79CE; !important;
}

2. Write the jQuery

Now let’s create a javascript file called jquery.blink.js. Inside this file we’re going to do the following:

$(document).ready(function() {

    //call the blink function on the element you want to blink
    blink("#myDiv", 4, 500); //blink a div with the ID of myDiv
    blink("input[type='submit']", 3, 1000); //blink a submit button
    blink("ol > li:first", -1, 100); //blink the first element in an ordered list (infinite times)
    blink(".myClass", 25, 5000); //blink anything that has a myClass on it
});

/**
* Purpose: blink a page element
* Preconditions: the element you want to apply the blink to, 
    the number of times to blink the element (or -1 for infinite times),
    the speed of the blink
**/
function blink(elem, times, speed)
{
    if (times > 0 || times < 0) { 
      if ($(elem).hasClass("blink"))
         $(elem).removeClass("blink");
      else
         $(elem).addClass("blink");
     }

     clearTimeout(function() { blink(elem, times, speed); });

     if (times > 0 || times < 0) {
       setTimeout(function() { blink(elem, times, speed); }, speed);
       times-= .5;
     }
}

3. Putting It Together

Now we create our html page, include our javascript and css file and watch our jQuery work it’s magic.

<link rel="stylesheet" href="blink.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.blink.js" /></script>
    <form method="post">
        <p>Blink 25 times in 5 second intervals: <input type="text" name="username" /></p>
        <p>I will do the same: <textarea></textarea></p>
        <p><span>Me too!</span></p>
        <input type="submit" name="submit" value="I blink 3 times in 2 second intervals" />
    </form>

    <div id="myDiv">
        this is my blinking div! I blink 4 times in half second intervals
    </div>

    <ol>
        <li>This is my infinite blinking list item</li>
        <li>I don't blink</li>
        <li>Me either</li>
        <li>Nope, not met</li>
    <ol>

4. Demo and Download Code

Try the JSFiddle Demo | Download the Working Code