kreativeKING - Interactive Developer

Hey Flashers, I know its been a long time since the last tip. Time has not been on my side recently, but I’m getting some more free time and I’ll be posting regularly again. Be on the look out, I have some new websites and articles coming out. You can see the latest website to date, Galley Smith Blog. But aside from all of that, down to the tip.

I’m currently working on a 3D Flash site and I decided to use Flash 10 3D instead of Papervision3D. I felt it would be overkill to use Papervision for this project since we couldn’t get our animated 3d models into Papervision successfully. As everyone knows or some who don’t, FP10 ‘s z sorting is non-existent. I needed to have floating panels zoom up to show maximized version of the panel. The problem is that, scaling them up, if it is not at the top of the DisplayList, it would show the other panels in front of it still.

I needed to make a function that would always keep my selected panel above the rest. The kreativeSort function was born. Its still in its infancy, but I see potential in it. I will work on it more throughout the project at keep everyone up to date with the progress. Here is the commented function for everyone to use if you happen to have the same issue.

Update

I’ve been steered in a better direction and found of an alternative and faster way of doing this over at Actionscript.org from lordofduct. Check out the updated function at the bottom.

/**
 * Puts selected DisplayObject on top of other DisplayObects in its container
 *
 * @param parent Container DisplayObject that holds our children.
 * @param panel Child we want to be displayed on top of the rest
 *
 * @author Clemente Gomez - kreativeKING
 */
private function kreativeSort(parent:DisplayObjectContainer, panel:DisplayObject) : void
{
	var i : int = 0;
	var length : Number = parent.numChildren;

	//Position the child is located at.
	var pos:int;

	for (i ; i < length ; i++)
	{
		// When child matches the level we are at in the container, recored the level in variable "pos".
		if(parent.getChildAt(i) == panel)
		{
			pos = i;
			break;
		}
	}
	// Removes child out of container.
	parent.removeChildAt(pos);

	//Adds the child back on top of the rest.
	parent.addChildAt(panel, parent.numChildren);

}

Updated Function

function kreativeSort( parent:DisplayObjectContainer, panel:DisplayObject ):void
{
    if (parent.contains( panel )) parent.addChild( panel );
}

I know last week I said we will be learning about a custom class, but I think I’ll hold that one for next week. This week we are going to check out a quick and useful tip that I didn’t even know about until a couple of days ago for selecting XML and XMLList nodes. This won’t be as in depth as the last, but I still think its a great quick tip.

We will be testing on this XML file.

Maria
Jason


Jason


Chris
Jack
Maria

I recently found out this cool way to select XML nodes. You can actually test attributes to filter out which ones you want. Check out the example for a better idea of what I mean.

var l:URLLoader = new URLLoader();
l.addEventlistener(Event.COMPLETE, xmlLoaded);
l.load(new URLRequest("ourXML.xml"));

function xmlLoaded(e:Event):void
{
    var myXML:XML = XML(l.data);
    trace(myXML.family.(@lastName == "Travis").member); // Outputs Maria , John
}

Using this method you can easily filter out a selection of nodes based on an evaluation. I find this a better way to the alternative of using array indices to select a particular tree. This is a pretty quick tip that I thought would be helpful. Next week, we are back to the in depth tips like usual. Again, if you like the post, subscribe to the RSS Feed.

Welcome back everyone for the 3rd installment of the Cool Flash Tip of the Week Series. This week we are going to take a look at a new class introduced with Flash Player 10. Say hello to the Vector Class.

The Vector class is very similar to the Array class which we all know and love. The difference is that a Vector only holds one data type. An Array can holds several different kinds of values. A Vector is an Array of the same type. Check out the psuedo code underneath to get a better understanding of what I mean.

//Array
[ String, Number,  ,int, Sprite ];

//Vector
[ String, String, null, String, String ];

If you paid close attention to that last snippet, you notice that the Array has an empty index, which is just fine. But when it comes to a Vector, there can not be any empty indices. If you must have an empty spot, make sure to set the value to null. Leaving it empty will throw an Error. A Vector is a dense data typed Array. Moving right along, to create a Vector is quite different than creating any other instance in Actionscript 3. Check out the example below.

//Syntax
Vector.

//Correct
var myVector:Vector. = new Vector.();

//Throws Error
var myVector:Vector. = new Vector.();

As you can see, the type of the Vector can only be instantiated to that class. Even though Sprite is a subclass of DisplayObject. So make sure to avoid this and you should have a smooth time. There is however a way we can still make this work. This would be using the Vector() function. This will allow you to turn an Array or Vector into another base class.

//Copy a Sprite Vector to a DisplayObject Vector
var myVector:Vector. = new Vector.();
myVector[0] = new Sprite();
var myVector2:Vector. = Vector.(myVector);

//Copy an Array to a Vector
var myArray:Array = [new Sprite(), new Sprite()];
var myVector2:Vector. = Vector.(myArray);

//Make sure your Array are all the same Type or you will get an Error
var myArray:Array = [new Sprite(), new Sprite(), new String()];
var myVector2:Vector. = Vector.(myArray); //Throws Error because String is not a DisplayObject

//They can all be DisplayObjects though
var myArray:Array = [new Sprite(), new Sprite(), new MovieClip()];
var myVector2:Vector. = Vector.(myArray); // Accepts this array since Sprite and MovieClips are both DisplayObjects

So based on our examples, directly assigning a SubClass Vector to a SuperClass Vector will throw an Error. You must copy the Array or Vector into the the Super Class Vector. The Vector constructor takes 2 optional parameters. The first parameter is the length and the second is the fixed parameter. If you set the fixed parameter to true, trying to create something in an index past that will throw an Error. This result is the same when using a method that changes the length of the Vector such as pop(), push(), etc.

var myVector2:Vector. = new Vector.(3, true);
trace(myVector2) //outputs null,null,null

var myVector2:Vector. = new Vector.(3, true);
myVector2[3] = new Sprite(); // Throws Error because fixed is set to true and we tried to place something in an index that exceeds the length.

Now with all these restrictions, this makes Vector a lot faster than using Arrays and is recommended when dealing with an Array which holds all the same DataType. Vectors are approximately 40% faster according to Mike Chambers to Arrays. When dealing with a large Array that is the same type, use a Vector. Also note that Vectors are only available in Flash Player 10, so that is bit of a downfall for the moment, but will be the new standard once the Flash Player 10 penetration numbers get higher.

Hopefully this little look into Vectors will get you to make the switch if you are publishing to the 10th version of the Flash Player. Next week, be prepared, we Are going to take a look into a Custom Class. If you enjoyed this post, tweet it, share it, bookmark it and subscribe. Stay tuned for next week.

More Info

I’ve gotten a lot of positive feedback on the Cool Flash Tip of the Week series. So as long as people find them useful, I’ll keep them coming. Make sure to subscribe to be on top of all tips and add me on twitter. Now with all the formalities out the way, lets get a move on to the tip of the week. This week’s tip is about Events!!

I’m sure you are wondering, what kind of tips can you not know already. Events are a big topic in Actionscript 3.0. Almost everything is based on event listeners and is event driven. During my time coding, I found a couple of handy shortcuts that made my day easier. Let’s say you have a  simple event handler that adds a MovieClip to the stage when a link is clicked. For simplicity’s sake , lets pretend we have a MovieClip in the library named “myMC”, and a button on the stage called “myLink”.

myLink.addEventListener(MouseEvent.CLICK, addClip);

function addClip(e:MouseEvent):void
{
    stage.addChild(myClip);
}

This would be the typical way we would do it. This is absolutely correct, but what if we wanted in a different function to add the clip as well. Some one would probably try to execute that this way.

myLink.addEventListener(MouseEvent.CLICK, addClip);
otherFunction();

function addClip(e:MouseEvent):void
{
    stage.addChild(myClip);
}

function otherFunction():void
{
    stage.addChild(myClip);
}

Although this is correct, the ideal way to program is to reuse code as much as possible so that when its time to update you caan change the code in one spot and it will update throughout the program. Not to mention it cleans up the code considerably. A better alternative to this would be to call addClip(). But WAIT!!, this is an event handler, if I call this I get an Argument Error. This is true, but we can setup the event handler to be an event listener and also be called without needing an event. Here is how we acheive that.

myLink.addEventListener(MouseEvent.CLICK, addClip);
addClip();

function addClip(e:MouseEvent = null):void
{
    stage.addChild(myClip);
}

//------------------OR--------------------
myLink.addEventListener(MouseEvent.CLICK, addClip);
addClip(null);

function addClip(e:MouseEvent):void
{
    stage.addChild(myClip);
}

That was pretty simple now was it. I use this all the time in my code to shorten things up and clean my code. I do prefer to the first method than the second alternative. I rather not have to keep passing null than just setting the default to null instead. Keep in mind, that this will only work if you do not need the actual event in your functions logic. If you do, then you need to an event. Well that’s all for this week’s tip. I hope you found it useful in any sense. Next week will be a big week, so stay tuned and subscribe to the feed.

I’m going to start a series that will occur every week. A cool flash tip or something I think not many people know about. Be on the lookout every week for a new tip. This week’s CFT is ……drumroll…….” The Tertiary Operator “.

I spend alot of time traversing flash posts looking at other peoples code and I often see a large if else block to change a simple variable. Using the Tertiary Operator we can simplify this into one line of code. Shorter code is always better in my opinion. Plus can save you a couple bytes in your code.

Here is an example of what I see.

var myBool:Boolean = false;
var myVar:Number = 12;

if(myBool == true)
{
    myVar = 15;
}
else if(myBool == false && myVar == 10)
{
    myVar = 40;
}
else
{
      myVar = 0;
}

Now this is all well and dandy, but it is a waste of space and can be simplified by a lot. One, when testing a Boolean there is no need to test to true or false. Instead if you want to test if something is true, you can just place the variable in the if parenthesis. This will automatically test to true. To test if a variable is false, use !. Here is an example.

var myBool:Boolean = false;
var myVar:Number = 12;

if(myBool )
{
    myVar = 15;
}
else if(!myBool && myVar == 10)
{
    myVar = 40;
}
else
{
      myVar = 0;
}

This already shortens up our code a bit. But we can take this a step further using the Tertiary Operator. The syntax for this is pretty simple once you know what it means.

//Tertiary Syntax

(Test) ? True : False;

Basically, If the test is true, the code after the ? executes. If the test is false the code after the : executes.

• ? = if


• : = else

You can also string together Tertiary statements to make and if else if else etc. Here’s how we write the same code from above over using the Tertiary Operator.

var myBool:Boolean = false;
var myVar:Number = 12;

myVar = (myBool ) ? 15 : (!myBool && myVar == 10)  ? 40 : 0;

WOW, look how much space we saved, and it i still readable. I implore everyone to start using this and save space =D. Be aware that it is advised no to string Tertiary statements past “If..Else”. If you liked this idea of CFT ( Cool Flash Tip ), then leave a comment, subscribe to the feed or / and follow me on twitter. It would be great to get some feedback on if this is helpful or not and maybe some tips you would like to see featured here.

Happy Flashing