Archive for November, 2007

Quake for Flash (C/C++ to AS3)

Tuesday, November 27th, 2007

Scott Peterson has created a tool for porting C/C++ code to AS3. What the shit. That rocks. This demo was shown at the 2007 Adobe MAX conference, in the sneak peeks section, so keep in mind it may never see the light of day. But how cool is this? Adobe better jump on this.

AS3 Button Class

Sunday, November 25th, 2007

This class has been updated and a new post has been made, click here for that post.

Also known as “Developing a Pure AS3 GUI – Part 2 (buttons)”

Buttons are extremely important in a GUI. Buttons don’t have to be fancy to be useful, they just have to execute some function when clicked. Although, seeing as this is a button class for AS3 and AS3 is the language of Flash and Flash is by it’s namesake, “flashy,” this class is somewhat “fancy” beyond the utility of a simple button. Don’t be discouraged if you’re looking for an easy implementation, by no means is this class complicated, it just goes further than binding a Sprite to a function using a CLICK event listener…

My button class requires three images to function: an “up” image [the default resting image], an “over” image [the image shown on mouse over] and a “down” image [the image shown when clicked upon]. After creating the three images and placing them in some directory next to your .fla you can instantiate the button by giving it an array consisting of three image paths that lead to your images. Additional parameters are a function to be performed on click and whether or not the button is a toggle button.

Usage

var myButton:button = new button(new Array("image1.png", "image2.png", "image3.png"), onClick, false);
     addChild(myButton);

function onClick():void
{
     trace("button has been clicked");
}

And that’s it. If you’d like the button to run in toggle mode just pass true as the third parameter.

Source
button Class Source Code

Multiple Bitmap Loader in AS3

Sunday, November 25th, 2007

To aid in my projects I have written a simple bitmapData loading class entitled aquireResources. This class takes an array of image paths as strings and proceeds to load them one by one. A “complete” event is dispatched when loading is completed and the bitmapData of each loading instance are saved in an array in the order they were given. Calling the aquireResources.array() method returns the array of bitmapData. If you’ve already downloaded Thibault Imbert (bytearray.org)’s GIFPlayer and GIFDecoder classes you can uncomment the included properties and methods in my class and enable the aquireResources class to load multiple instances of animated GIFs into AS3 as arrays of bitmapData. In this case aquireResources.array() returns a two-dimensional array containing one array of bitmapData per animated GIF passed to it.

Usage

import com.efnx.utils.aquireResources;

var rsrc:aquireResources = new aquireResources();
     rsrc.addEventListener("complete", onComplete, false, 0, true);

var array:Array = new Array("imagePath1/image1.png", "imagePath2/image2.gif", "imagePath3/image3.jpeg");
var bitmapDataArray:Array;
function onComplete(event:Event):void
{
     bitmapDataArray = rsrc.array();
}

rsrc.aquireImages(array);

For loading animated GIFs

import com.efnx.utils.aquireResources;

var rsrc:aquireResources = new aquireResources();
     rsrc.addEventListener("complete", onComplete, false, 0, true);

var array:Array = new Array("imagePath1/image1.gif", "imagePath2/image2.gif", "imagePath3/image3.gif");

var animatedArray:Array;
function onComplete(event:Event):void
{
     animatedArray = rsrc.array();
}

rsrc.aquireGIFs(array);

Source
aquireResources Source

Simple Tiling Sprite Class in AS3

Monday, November 19th, 2007

Also known as “Developing a Pure AS3 GUI – Part 1.5 (tile)
Jump to Source
After writing last night’s class, scalingBars, I decided to make it a little easier on myself to tile bitmaps across the screen. I wrote a simple class that when given either a BitmapData object or a path to an image file (as a String), class will tile the image x pixels in width and y pixels in height. This is great for backgrounds or window bars or box sides, etc. Here’s the usage:

var bar:tile = new tile("pathToImageOrBitmapDataObject", 100, 150);
     addChild(bar);

The previous code will grab an image from “pathToImage” [either relative or absolute, but remember security!] and then tile it 100 pixels wide by 150 pixels tall. Simple. Now let’s say you wanted to resize it:

bar.resize(20, 40);

That code will re-tile the image to 20 pixels by 40 pixels. Next on my list of upgrades is to allow reloading of different images. Shouldn’t be too hard.
Example

Source
tile Class Source Code

Developing a Pure AS3 GUI – Part One (Scaling Bars)

Monday, November 19th, 2007

This class has been deprecated and phased out as of 12.7.2007

Writing your own GUI can be a daunting task, most people might find it easier to learn MXML and use Flex Builder or Flash Components than to waste their time writing GUI code and Photoshopping images. I on the other hand hate proprietary frameworks [like MXML] and really like the clean approach of creating classes of GUI elements that build on each other to make an interface. This post is the first in a series of posts designed to step through MY method of GUI design.

Example
Source

I start the process at windows. Windows hold all the content of a graphical operating system, the mother of all interfaces, so why not start there? Well, windows are super complicated, so first we’ll start by writing the components of a window. We’ll need a window bar that holds the close, minimize and optimize buttons and scales to a given size. This means we’ll need bars [vertical and horizontal] that tile. Don’t let the name Scaling Bars trick you, these bars aren’t really scaling, they’re tiling the bitmaps given to them in the constructor. Here’s the beginning code where we set up all our variables.

package com.efnx.GUI
{
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //  scalingBar is an object that given three images will scale to a certain size, tiling the middle image //
    //  and placing the end images on either side (overall width will be the given size) //////////////////////
    //////////////////////////////////////////////////////////////////////////////////////
   
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // usage: bar:scalingBar = new scalingBar(new Array("toporleftImage.xxx","middleImage.xxx","bottomorrightImage.xxx"), [tileDir:String: either "horizontal" or "vertical");  //
    //        addChild(bar);          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //        bar.resize(someSize);  //
    //////////////////////////////////
   
    import com.efnx.utils.loadedSprite;
    import com.efnx.utils.aquireResources;
   
    import flash.display.BitmapData;
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.geom.Rectangle;
    import flash.geom.Point;
   
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    public class scalingBar extends Sprite
    {
        private var tileDirection:String;
        private var tileSize:int;
        private var minimumSize:int;
        private var side1:loadedSprite;
        private var middle:loadedSprite;
        private var side2:loadedSprite;
        private var loaded:int = 0;
        private var testing:Boolean;
       
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Okay. We’ve imported some classes that I’ve written myself that I haven’t talked about before, don’t worry, I’ve included them in the source and will post about them later. The vars are all pretty self-explanatory. The loadedSprites are a class of Sprite I’ve developed to make importing graphics a little easier on me. Given a path to an image it simply retrieves the image and sticks it inside a Sprite [itself]. On to the constructor:

public function scalingBar(imagePathArray:Array, tileDir:String = "horizontal", _testing:Boolean = false):void
        {
            testing = _testing;
            tileDirection = tileDir;
           
            if(tileDirection != "horizontal" && tileDirection != "vertical")
            {
                throw new Error("scalingBar::init: invalid tiling direction, scalingBar only accepts either \"horizontal\" or \"vertical\".");
                return;
            }
           
            side1 = new loadedSprite(imagePathArray[0], loadCycleComplete, testing); //remove testing parameter
            middle = new loadedSprite(imagePathArray[1], loadCycleComplete, testing); //to keep from tracing
            side2 = new loadedSprite(imagePathArray[2], loadCycleComplete, testing); //verbose info
           
            side1.name = imagePathArray[0];
            middle.name = imagePathArray[1];
            side2.name = imagePathArray[2];
           
            addChild(side1);
            addChild(middle);
            addChild(side2);
        }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

When instantiating the scalingBar class, create an array consisting of paths to the three images to be used for the bar, the left [or top], the middle, and the right [or bottom]. If left to the defaults your bar will tile and size horizontally. You can pass “vertical” as the second parameter to set the bar up to tile horizontally. Next we have the functions that take care of placement and size checks after the images are loaded. loadedSprite operates whatever function was passed to it as the second parameter in its instantiation, so no external event listeners are needed. We passed loadCycleComplete to the loadedSprites so that function will be called each time one is done loading:

        private function loadCycleComplete():void
        {
            loaded++;
            if(testing)trace("scalingBar::loadCycleComplete: has loaded " + loaded + "/3 resources. ");
            if(loaded == 3)
            {  
                if(tileDirection == "horizontal")
                {
                    tileSize = middle.width;
                }else
                {
                    tileSize = middle.height;
                }
                if(testing)trace("scalingBar::loadCycleComplete: finished loading.");
                placeParts();
                updateSize();
            }
        }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        private function updateSize():void
        {
            if(tileDirection == "horizontal")
            {
                minimumSize = side1.width + side2.width + tileSize;
                if(testing)trace("scalingBar::updateSize: side1.width, side2.width, tileSize:" + side1.width, side2.width, tileSize);
            }else
            {
                minimumSize = side1.height + side2.height+ tileSize;
                if(testing)trace("scalingBar::updateSize: side1.height, side2.height, tileSize:" + side1.height, side2.height, tileSize);
            }
        }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        private function placeParts():void
        {
            if(tileDirection == "horizontal")
            {
                middle.x = side1.width;
                side2.x = middle.x + middle.width;
            }else
            {
                middle.y = side1.height;
                side2.y = middle.y + middle.height;
            }
        }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Almost done! The last part is the resize function, which takes an integer size and scales the entire bar either horizontally or vertically, depending on what you have specified. This is the real meat of the class. The resize function moves the bottom [or left] image to the border of the given size, then tiles the middle image over however many times needed until it reaches the bottom [or left] image:

public function resize(size:int):void
        {
           
            if(size >= minimumSize)
            {
                if(testing)trace("scalingBar::resize: valid resize value.");
                var bmd:BitmapData = middle.bitmapData.clone();
                var i:int = 0;
           
                if(tileDirection == "horizontal")
                {
                    side2.x = size - side2.width;
                    if(testing)trace("scalingBar::resize(): side1,side2 width and minimumSize:" + side1.width, side2.height, minimumSize);
                    middle.bitmap.bitmapData = new BitmapData(size - side1.width - side2.width, bmd.height, true, 0x00000000);
                    if(testing)trace("window::resize(): windowbarmiddle.bitmap.bitmapData: " + middle.bitmap.bitmapData.width, middle.bitmap.bitmapData.height);
                   
                    for(i = 0; i*bmd.width<middle.bitmap.bitmapData.width; i++)
                    {
                        middle.bitmap.bitmapData.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(i*bmd.width, 0));
                        if(testing)trace("window::resize(): copying pixels to middle.x=" + i*bmd.width);
                    }
                }else if(tileDirection == "vertical")
                {
                    side2.y = size - side2.height;
                    if(testing)trace("scalingBar::resize(): bmd dimensions:" + bmd.width, bmd.height);
                    middle.bitmap.bitmapData = new BitmapData(bmd.width, size - side1.height - side2.height, true, 0x00000000);
                    if(testing)trace("window::resize(): windowbarmiddle.bitmap.bitmapData w,h: " + middle.bitmap.bitmapData.width, middle.bitmap.bitmapData.height);
                   
                    for(i = 0; i*bmd.height<middle.bitmap.bitmapData.height; i++)
                    {
                        middle.bitmap.bitmapData.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(0, i*bmd.height));
                        if(testing)trace("window::resize(): copying pixels to middle.y = " + i*bmd.height);
                    }
                }
            }else
            {
                if(testing)trace("scalingBar::resize: invalid resize value of " + size + ", resizing at " + minimumSize);
                resize(minimumSize);
            }
        }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    }//end class
}//end package

Example
And there we go! Here is an example of the implementation:

Source
scalingBar source

My Characters and where they are

Thursday, November 15th, 2007

First I’ll start out with my legal characters by server:

    Stonemaul

  • Sahasrahla – Human Warlock
  • Cloakan – Night Elf Priest
  • Some twinks I can’t remember
  • Kirin ‘Tor

  • Terjeopeth – Night Elf Rogue
  • Dragonmaw

  • Pedrothelion – Undead Priest

Now private servers by realmlist:

    74.86.124.42 [dominion wow]

      Blizz Realm

    • Terjeopeth – Night Elf Rogue
    • Sahasrahla – Human Warlock
    • Berzum – Draenai Paladin
      Funrealm

    • Terjeopeth – Night Elf Rogue
    • Sahasrahla – Human Warlock

    logon.wowscape.net [www.wowscape.net]

      WoWlegion <- you can usually find me here if I'm playing

    • Spyre – Blood Elf Priest
      WoWcrack

    • Mogwai – Tauren Druid

I’ll update this with new characters as often as possible. List your servers and toons in the comments, word.


Follow me on GitHub
Follow me on Google+
Follow me on Twitter