Flash Platform Development

Tile-Based Game Development in Flex

bmorrise — Sat, 14 Nov 2009 16:10:15 +0000

I’ve started work on a tile-base gaming engine in Flex. The hope is to post tutorials based on my work, but until then you can check out the current demo here: http://game.morrise.com and the source for the project is freely downloadable from here: http://code.google.com/p/gameengineas3/.

Posted in ActionScript 3, Flex, Game

Flex Bulletin Board

bmorrise — Thu, 05 Nov 2009 17:02:01 +0000

Some time ago I started work on a Bulletin Board application that I built using Flash technology. It’s probably been over a year since I did anything major with it. Last week, while I was moving files from one server to another I realized that there were several places linking to that Bulletin Board and the links would be dead. While I was at work I got on opportunity to prototype some functionality that was very similar to the work I had done on the Flash version on the Bulletin Board, but this time I got to build it in Flex. Once I discovered that my prototyping could be done in the context of the Bulletin Board I decided to whip up an application that is essentially a duplicate of what I’d already created visually, but behind the scenes I’ve made some vast improvements. The previous version was saving all the data about the Bulletin Board in a database and was being recalled using PHP. I’ve not change the functionality so that the Bulletin Board definition is stored in an XML document. I’ve also made the Bulletin Board flexible enough to allow notes that contain something other than text. I’m now able to add notes that are image based, as well as videos. The demo that I have up now is not enabled for text or video, but maybe someday I’ll put that in.

Also, for those interested, you can download the source for this project here.

Posted in ActionScript 3, Flex, Projects

Calling Flex Methods From JavaScript

bmorrise — Fri, 23 Oct 2009 21:16:01 +0000

If you want to call methods inside of your Flex application from javascript all you have to do is a couple of simple steps. First you have to add the external interface to you flex application:

Then, from JavaScript you need to access the movie and then call the method that was created as an external interface. You can even pass in parameters:

function getMovie(movieName)
{
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    } else {
        return document[movieName];
    }
}

function doCall() {
	getMovie("[Your Movie Name Here]").doCall("Hello World!");
}

Posted in ActionScript 3, Flex

Setting TextInput Focus on Load

bmorrise — Thu, 22 Oct 2009 22:05:49 +0000

For those who have tried, you’ve probably noticed that your Flex applications can set focus on TextInput elements when it loads. The reason behind this is that the Flash player doesn’t get focus unless you click on it or tell it to get focus from JavaScript. There is a solution that seems to work well with most browsers for getting focus on the Flash player:

function getFlashMovieObject(movieName) {
    if (window.document[movieName]) {
        return window.document[movieName];
    }

    if (navigator.appName.indexOf("Microsoft Internet")==-1) {
        if (document.embeds && document.embeds[movieName]) {
            return document.embeds[movieName];
        }
    } else {
        return document.getElementById(movieName);
    }
}

function setBrowserFocus() {
    getFlashMovieObject('${application}').focus();
}

You must also add the onload attribute to the body so it will call the setBrowserFocus method like this:

Once you’ve done this all you have to do is create a handler that will set the focus on a TextInput like so:

Posted in ActionScript 3, Flex

Custom Flex Preloader

bmorrise — Thu, 22 Oct 2009 21:50:53 +0000

Flex has a built in preloader that isn’t very stylish, so it stands to reason that you might want to create your own. The process for this isn’t very well documented, but it’s not very difficult if you know what you’re doing.

To get your custom preloader to work you have to add the preloader attribute to the Application tag. I’ve also put the preloader in the same directory as the Application mxml, but you could put it in any directory as long as you give the preloader attribute the full package path.

Your custom loader class must extend the DownloadProgressBar class. I’ve drawn the progress bar programmatically, but you are free to try what you want.

package
{
    import flash.display.GradientType;
    import flash.display.InterpolationMethod;
    import flash.display.MovieClip;
    import flash.display.SpreadMethod;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.filters.DropShadowFilter;
    import flash.geom.Matrix;

    import mx.events.FlexEvent;
    import mx.preloaders.DownloadProgressBar;

    public class CustomPreloader extends DownloadProgressBar
    {
        public var progress:Sprite;
        public var progressTotal:Sprite;

        public static var PROGRESS_WIDTH:Number = 274;
        public static var PROGRESS_HEIGHT:Number = 6;

        public function CustomPreloader():void
        {
            super();        

            progressTotal = new Sprite();
            addChild(progressTotal);

            var type:String = GradientType.LINEAR;
            var colors:Array = [0x545454, 0x8A8A8A];
            var alphas:Array = [1, 1];
            var ratios:Array = [0, 255];
            var spreadMethod:String = SpreadMethod.PAD;
            var interp:String = InterpolationMethod.LINEAR_RGB;
            var focalPtRatio:Number = 0;

            var matrix:Matrix = new Matrix();
            var boxWidth:Number = PROGRESS_WIDTH;
            var boxHeight:Number = PROGRESS_HEIGHT;
            var boxRotation:Number = Math.PI/2; // 90˚
            var tx:Number = 0;
            var ty:Number = 0;
            matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

            progressTotal.graphics.beginGradientFill(type,
                                        colors,
                                        alphas,
                                        ratios,
                                        matrix,
                                        spreadMethod,
                                        interp,
                                        focalPtRatio);

            progressTotal.graphics.lineStyle(1, 0x000000);
            progressTotal.graphics.drawRoundRect(0, 0, PROGRESS_WIDTH, PROGRESS_HEIGHT, PROGRESS_HEIGHT);
            progressTotal.graphics.endFill();

            progress = new Sprite();
            addChild(progress);

            var dropShadowFilter:DropShadowFilter = new DropShadowFilter;
            dropShadowFilter.blurX = 10;
            dropShadowFilter.blurY = 10;
            dropShadowFilter.distance = 0;
            dropShadowFilter.color = 0x90d955;
            progress.filters = [dropShadowFilter];
        }

        public function drawProgress(percentage:Number):void
        {
            progress.graphics.clear();

            var type:String = GradientType.LINEAR;
            var colors:Array = [0x99DE62, 0x7AC142];
            var alphas:Array = [1, 1];
            var ratios:Array = [0, 255];
            var spreadMethod:String = SpreadMethod.PAD;
            var interp:String = InterpolationMethod.LINEAR_RGB;
            var focalPtRatio:Number = 0;

            var matrix:Matrix = new Matrix();
            var boxWidth:Number = PROGRESS_WIDTH*percentage;
            var boxHeight:Number = PROGRESS_HEIGHT;
            var boxRotation:Number = Math.PI/2; // 90˚
            var tx:Number = 0;
            var ty:Number = 0;
            matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

            progress.graphics.beginGradientFill(type,
                                        colors,
                                        alphas,
                                        ratios,
                                        matrix,
                                        spreadMethod,
                                        interp,
                                        focalPtRatio);

            progress.graphics.drawRoundRect(0, 0,  PROGRESS_WIDTH*percentage, PROGRESS_HEIGHT, PROGRESS_HEIGHT);
            progress.graphics.endFill();
        }

        public override function set preloader(preloader:Sprite):void
        {
            preloader.addEventListener(ProgressEvent.PROGRESS, onSWFDownloadProgress);
            preloader.addEventListener(Event.COMPLETE, onSWFDownloadComplete);
            preloader.addEventListener(FlexEvent.INIT_PROGRESS,  onFlexInitProgress);
            preloader.addEventListener(FlexEvent.INIT_COMPLETE,  onFlexInitComplete);

            progressTotal.x = stage.stageWidth/2 - PROGRESS_WIDTH/2;
            progressTotal.y = stage.stageHeight/2;

            progress.x = stage.stageWidth/2 - PROGRESS_WIDTH/2;
            progress.y = stage.stageHeight/2;
        }     

        private function onSWFDownloadProgress(event:ProgressEvent):void
        {
            drawProgress(event.bytesLoaded/event.bytesTotal);
        }

        private function onSWFDownloadComplete(event:Event):void
        {
            //onSWFDownloadComplete
        }

        private function onFlexInitProgress(event:FlexEvent):void
        {
            //onFlexInitProgress
        }

        private function onFlexInitComplete(event:FlexEvent):void
        {
            dispatchEvent( new Event(Event.COMPLETE));
        }
    }
}

Posted in Flex

Inverse Mask

bmorrise — Tue, 20 Oct 2009 03:54:50 +0000

Here’s how to do an inverse mask in Flex:

This will punch a 100×100 hole in a shape with a 75% opacity.

Posted in ActionScript 3, Flex

Flex Coding Conventions

bmorrise — Mon, 19 Oct 2009 20:49:57 +0000

While recently looking for a definitive list of coding conventions in Flex I discovered this document on adobe’s website: Flex SDK coding conventions and best practices. This document, while useful, is not complete. There are many things that are not complete in this document, so I decided to add some of the missing pieces.

Component IDs

When creating a new component in mxml use an identifier for the function of the button postfixed with the object type.

Do this:

Not this:

Or this:

Custom PopUps

Where building a component that will be used for a popup, postfix the component definition with PopUp

ex: AddItemPopUp.mxml

Posted in ActionScript 3, Flex

GalleryBuilder Working Demo

bmorrise — Wed, 14 Oct 2009 04:34:49 +0000

I’ve put a working demo of the GalleryBuilder software here: http://bit.ly/3yFUV2. Check it out.

Username: test

Password: test

Posted in ActionScript 3

Cairngorm Project

bmorrise — Fri, 02 Oct 2009 02:24:38 +0000

One of the best ways I’ve found to learn something is by looking at a working example. The Gallery Builder project is built using the Cairngorm Framework. Feel free to download the source and check it out. Once again the url for the project: http://code.google.com/p/gallerybuilder/

Posted in Flash CS3

Click + Drag Multi-Select in Flex TileList

bmorrise — Wed, 30 Sep 2009 19:44:28 +0000

While working on the Flex Gallery Builder project, I’m using a TileList component to display the images for each gallery. As I built this, one piece of functionality that I found to be missing is the ability to click and drag a selection box to select the elements in the TileList. I have therefore come up with a solution; I’ve built a custom component based on the TileList component that includes the ability to click and drag. Since I’m unable to post the code here effectively, Check out the code at http://code.google.com/p/gallerybuilder/ and look for the GalleryList.mxml file.

Edit: Here is a link to the file itself - GalleryList.mxml

Posted in ActionScript 3, Flex