In my previous project i needed to find a easy solution for displaying icons in the alert message box.
So i extended the regular class and added the icons.

Check out the example code and screenshots:

Normal alert

Error alert

Information Alert

Warning Alert

AlertBox.mxml

<?xml version = "1.0" encoding = "utf-8"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"
                layout = "vertical"
                backgroundColor = "#FFFFFF">
    <mx:Script>
        <![CDATA[
            import com.winnemconsulting.uicomponents.alert.ExtendedAlert;
            import mx.controls.Alert;

            /** Event handler function imports the Alert control, which uses a static method to show
               a pop-up window with the title, message, and requested buttons.
             **/
            private function Alerted():void
            {
                Alert.show("You have been alerted !!", "Alert Box", Alert.OK);
            }

            private function IconAlert(type:String):void
            {
                switch (type)
                {
                    case ExtendedAlert.ICON_ERROR32:
                        ExtendedAlert.showExtended("This is the error icon", "Alert with icon", Alert.OK, null, null, ExtendedAlert.ICON_ERROR32);
                        break;
                    case ExtendedAlert.ICON_INFORMATION32:
                        ExtendedAlert.showExtended("This is the information icon", "Alert with icon", Alert.OK, null, null, ExtendedAlert.ICON_INFORMATION32);
                        break;
                    case ExtendedAlert.ICON_WARNING32:
                        ExtendedAlert.showExtended("This is the warning icon", "Alert with icon", Alert.OK, null, null, ExtendedAlert.ICON_WARNING32);
                        break;
                }
            }
        ]]>

    </mx:Script>

    <mx:Panel title = "Alert Panel">

        <mx:Button label = "Regular Alert"
                   width = "100%"
                   click = "Alerted();"/>
        <mx:Button label = "Extended Alert error"
                   width = "100%"
                   click = "IconAlert(ExtendedAlert.ICON_ERROR32);"/>
        <mx:Button label = "Extended Alert information"
                   width = "100%"
                   click = "IconAlert(ExtendedAlert.ICON_INFORMATION32);"/>
        <mx:Button label = "Extended Alert warning"
                   width = "100%"
                   click = "IconAlert(ExtendedAlert.ICON_WARNING32);"/>
    </mx:Panel>

</mx:Application>

ExtendedAlert.as

/**
 * Contributed by:
 * Geirr Winnem
 * Created: 10/21/2009
 * Website: www.winnem.com/winnem-consulting
 * Licence: All rights reserved 2009-, Winnem Consulting
 *
 **/
package com.winnemconsulting.uicomponents.alert
{
    import mx.resources.ResourceManager;
    import flash.display.Sprite;

    import mx.controls.Alert;

    /**
     * Extended the regular alert with predefined icons.
     * @author Geirr Winnem
     * @see mx.controls.Alert
     */
    public class ExtendedAlert extends Alert
    {

        [Embed(source="16X16/error.png")]
        public static const iconError16:Class;

        [Embed(source="32X32/error.png")]
        public static const iconError32:Class;

        [Embed(source="48X48/error.png")]
        public static const iconError48:Class;

        [Embed(source="16X16/information.png")]
        public static const iconInformation16:Class;

        [Embed(source="32X32/information.png")]
        public static const iconInformation32:Class;

        [Embed(source="48X48/information.png")]
        public static const iconInformation48:Class;

        [Embed(source="16X16/warning.png")]
        public static const iconWarning16:Class;

        [Embed(source="32X32/warning.png")]
        public static const iconWarning32:Class;

        [Embed(source="48X48/warning.png")]
        public static const iconWarning48:Class;

        /**
         * Error icon,size 16X16
         */
        public static const ICON_ERROR16:String = "errorIcon16X16";

        /**
         * Error icon,size 32X32
         */
        public static const ICON_ERROR32:String = "errorIcon32X32";

        /**
         * Error icon,size 48X48
         */
        public static const ICON_ERROR48:String = "errorIcon48X48";

        /**
         * Warning icon,size 16X16
         */
        public static const ICON_WARNING16:String = "warningIcon16X16";

        /**
         * Warning icon,size 32X32
         */
        public static const ICON_WARNING32:String = "warningIcon32X32";

        /**
         * Warning icon,size 48X48
         */
        public static const ICON_WARNING48:String = "warningIcon48X48";

        /**
         * Information icon,size 16X16
         */
        public static const ICON_INFORMATION16:String = "informationIcon16X16";

        /**
         * Information icon,size 32X32
         */
        public static const ICON_INFORMATION32:String = "informationIcon32X32";

        /**
         * Information icon,size 48X48
         */
        public static const ICON_INFORMATION48:String = "informationIcon48X48";

        /**
         * Constructor.
         */
        public function ExtendedAlert()
        {
            super();
        }

        /**
         * Extension of the original Show method.
         * @param text 			Text to display
         * @param title			Title for Alert
         * @param flags			Button flags.
         * @param parent		Parent object of control.
         * @param clickListener	Specifies listener function for click events from Alert buttons.
         * @param iconType		Specifies which icon type and size to display in alert.
         * @param defaultButton	Specifies the default button in alert.
         * @return Alert.
         * @see http://livedocs.adobe.com/flex/3/html/help.html?content=controls_19.html
         */
        public static function showExtended(text:String, title:String = null, flags:uint = mx.controls.Alert.OK, parent:Sprite = null, clickListener:Function = null, iconType:String = ICON_INFORMATION48, defaultButton:uint = mx.controls.Alert.OK):Alert
        {
            var iconDisplay:Class;

            switch (iconType)
            {
                case ICON_ERROR16:
                {
                    iconDisplay = iconError16;
                    break;
                }
                case ICON_ERROR32:
                {
                    iconDisplay = iconError32;
                    break;
                }
                case ICON_ERROR48:
                {
                    iconDisplay = iconError48;
                    break;
                }
                case ICON_WARNING16:
                {
                    iconDisplay = iconWarning16;
                    break;
                }
                case ICON_WARNING32:
                {
                    iconDisplay = iconWarning32;
                    break;
                }
                case ICON_WARNING48:
                {
                    iconDisplay = iconWarning48;
                    break;
                }
                case ICON_INFORMATION16:
                {
                    iconDisplay = iconInformation16;
                    break;
                }
                case ICON_INFORMATION32:
                {
                    iconDisplay = iconInformation32;
                    break;
                }
                case ICON_INFORMATION48:
                {
                    iconDisplay = iconInformation48;
                    break;
                }
            }
            return show(text, title, flags, parent, clickListener, iconDisplay, defaultButton);
        }
    }
}

32X32 Icons

I must say that at the moment I know almost nothing about 3d, and I’m starting with the beginner tutorials. So far I’ve seen three flash 3d engines:

Away3D – a powerful, widely-used and good looking 3d engine, free to use.
http://away3d.com

Papervision3D – a clean, fast, popular 3d flash engine.
http://blog.papervision3d.org/

Alternativa3D – probably the most powerful 3d engine in flash, created by russian programmers, which is still in development. However, it won’t be free.
http://alternativaplatform.com/ru/alternativa3d/

That’s it for now.

Have a nice day everyone!

During researching for the OSGI framework convertion from java to actionscript i found one article that saved my day.
The article originates from the Farata blogs Farata Blog
For those of you who dont know who these guy’s are i recommend that you check out their opensource projects at sourceforge.
One of the plugins i like the most is Log4Fx which is a logging tool.
It really saves my day everytime i debug applications developed with the pureMvc framework.
And its really easy to use since its a plugin for eclipse. Also it has built in shortkeys for creating boiler plate code and inserting it into the code window,
so the actual coding you need todo is minimal.

I stumpled over the source code to a opensource project at adobe which looks like it is a project where they plan todo a eclipse plugin for flex PMD.
I hope they will finnish it and release it soon, because the tool is excellent but i really hate running it and then uploading the result to the violation viewer.
I could have done this automatically using ant , maven together with CI software like hudson, but since im working in a small company its abit overhead to
setup a CI system.

Screendump of output

Example bat file i use to generate output

java -Xmx256m -jar c:\flex-pmd\flex-pmd-command-line-1.0.RC3.jar -s ./src/ -o ./pmd/ -r C:\flex-pmd\pmd.xml
pause

Links:

• Flex PMD homepage
• Code repository
• Ruleset creator
• Finding worst practices in your code
• Adobe forum about FlexPMD
• FlexPMD with ANT

About Advanced Flash Tactics

Advanced Flash Tactics or AFTs are techniques that come from deep within the Flash Art Of War, the oldest Flash military treatise in the world.
Each AFT is designed to be quickly digested, usually only taking a few minutes to get up and running, and contains valuable information you can directly apply to your next Flash campaign.
Read more about: Dynamically Creating Classes From XML.

Wow!  What a great release – Adobe Flash Player 10.1 / Adobe Flash CS5:

http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html

SOME NEW FLASH 10.1 FEATURES:

1. Multitouch (Goose)
2. Compute Spectrum on the Microphone (Woodpecker)
3. Accelerometer (Penguin)

FOR GOOSE MULTITOUCH:

The x, y position of each cursor in multitouch will be available in Flash as well as depth if provided.  This can be fed into Goose to make use of the Goose events like:

PRESS, PRESS_DOWN, PRESS_UP, PRESS_MOVE
TOUCH, TOUCH_DOWN, TOUCH_UP, TOUCH_MOVE

and Methods like

startFollow(), stopFollow()
startScale(), stopScale()

To get ready for Multitouch, you can use the Goose Emulator on a regular PC to get multitouch data without the need for a multitouch device.  The emulator will feed your Goose code for processing.  Then when you are ready to move to a multitouch platform, just feed the real data into the same Goose code for processing!

Download Goose Multitouch for Flash

As an alternate to the emulator but still using Goose processing, try the Dodo blob detection ActionScript classes.

All the best!

I was looking for a way to detect when the user is closing the web browser before placing an order or cancel one for a ecomerce site im developing.
After some research i found a library called jsinterface on google code.

It was easy and straight forward to implement the solution i needed , and below is a code example on how todo it:

            import aw.external.JSInterface;
            import aw.external.jsinterface.JSFunction;
            import aw.external.jsinterface.JSDynamic;

            static public const NOT_SAVED_ALERT:String = '\\\\n Data is not saved.\\\\nPlease save before closing window.';

            /**
             * Called on applicationComplete event.
             * @param event Event
             * @private
             */
            private function onApplicationComplete(event:Event = null):void
            {
                if (this.parameters.username != null && this.parameters.username != "")
                {
                    Alert.show(this.parameters.username);
                }
            }

            /**
             * Initializing JSInterface.
             * @param event Event
             * @private
             */
            private function preinitializeHandler(event:Event = null):void
            {
                //Adding functionality to catch when user redirect to new webpage or closes browser window.
                JSInterface.initialize(this.systemManager.stage);
                if (JSInterface.navigator.appName.toLowerCase().indexOf('fox') > 0)
                {
                    // For FireFox
                    JSInterface.window.onbeforeunload = this.isDataSaved;
                }
                else
                {
                    // For Internet Explorer, FireFox, Safari or other
                    JSInterface.window.onbeforeunload = JSFunction.create("var text; if(!window.isFlexDataSaved){text='" + NOT_SAVED_ALERT + "';}; return text;");
                }
                JSInterface.window.isFlexDataSaved = true;
            }

            /**
             * Checking if we can close/redirect browser without notifying end user.
             * @param event JSDynamic
             */
            protected function isDataSaved(event:JSDynamic = null):String
            {
                if (JSInterface.window.isFlexDataSaved)
                    return "";
                if (event)
                {
                    event.returnValue = NOT_SAVED_ALERT;
                }
                return NOT_SAVED_ALERT;
            }

On the link below you can find coding conventions for Flex and ActionScript 3.0. Just quick browse through the conventions will give you some idea about what you should and shouldn’t do the next time you are spitting out Flex and AS3 code. Found it by following Flex on Twitter

http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

I’ve been building a few apps recently and have found that a linear response over a range of numbers has been a poor solution. I needed to be able to apply different response curves to user interface components (knobs, sliders, touchpads) as well as on screen display objects, characters, etc.

I needed a good name for the class, but instead came up with the pretty poor moniker ‘RangedNumbers’. I’ll change it when I come up with a better one.

So the idea is, a ‘ranged number’ is instantiated, initialised for the required range then a simple call with a value in that range will result with a percentage that can be applied to the intended recipient accordingly. I realised that an inverted curve would be handy too, so have added that functionality.

I have included exponential and powered curves as well as linear.

So to use the ranged number system:

I have put together two demos to show the RangedNumber class in action:

Firstly using a Slider component. Grab the slider and watch how the markers are represented on all the displayed response curves.

A demonstration of how to implement non-linear response curves

Now here is the same demo but this time using a TouchPad. Click on the touchpad to engage. In this demo horizontal movement controls the standard curves and vertical the inverted.

How to implement non-linear response curves with a touchpad

The source for these demos and the Ranged Number class can be found here: Ranged Number ZIP

One of my favorite FIVe3D examples is this AS3 banner by Bartek Drozdz.

I downloaded the source code graciously provided by the author but when I tried to compile in Flex Builder 3 w/ SDK 3.4, I kept getting errors that told me Flex can’t find classes found in the “fl.motion.*” package. Since that particular package only works in the Flash IDE, I had to make some small adjustments to the FIVe3D banner code to get it to compile as a Flex Builder Actionscript application. Basically, I had to substitute all “fl.motion” package classes with their equivalents from the TweenLite library. For example, when an easing function, such as “import fl.motion.Elastic” was required by line 6 of Screenplay.as, it was quick and easy to change that to “import gs.easing.Elastic,” while making sure the relevant “gs” packages are actually at the location you’re telling the application they’re located.

In Sprite3D.as and Shape3D.as I commented out these lines and most of the banner example’s functionality remained unaffected:

/* ... */
import fl.motion.Color;
/* ... */
var color:Color = new Color();
color.brightness = brightness;
color.alphaMultiplier = alpha;
transform.colorTransform = color;
/* ... */

I’ve been wanting to paint lately, but I feel a twang of guilt each time I get close to the canvas.

The fact that I have downtime is new to me. I’m not used to having this time for creative exploration, and since I don’t know how long it will last, I want to use it wisely. Or it may go on forever.

So, should I be spending this time learning new skills or refining current ones? By these, I mean sitting in front of a screen. This fall, I got a really nasty note from a big client regarding my programming skills for a Flash project. I never promised to have any, but alas I was called “uncommitted” among other things. I was urged to learn Action Script until my mind exploded. That, with my creativity, would get me writing tickets anywhere (stated as a compliment). I never set out to be a coding master, but no one wants just a creative – at least when it comes to bottom level Interactive (i.e., recent grads trying to get the most basic of jobs).

When I was in the Interactive program at PC, we were constantly told to focus on the concept, design, functionality, usability, etc…find the limitations and benefits of technology, but someone else will handle what goes on behind the curtain. Well, right now people want both, and it’s a big game of catch up.  So, when it comes to sitting in front of a canvas or a screen, I hear that angry voice yelling “YOU ARE UNCOMMITTED!” and it’s back to sleepy AS3 tutorials….with my creative energy scratching at the back of my brain, ever so distracting.

For me, a painting is a big commitment. I can spend weeks, months on one. I’ve already spent hours sketching and digitally composing. I want to take a projector and sketch my work on the canvas, for the sake of time, but I feel guilty doing that as well. Am I not missing out on beautiful mistakes that could take me in a new direction? Both art and design are about exploration, and my end is not concrete (the beauty of personal work). Yet technology fuels faster production. which can lead to more time spent on other things – like mastering dreaded AS3.

The ideal is a balance between the two, where upon I just might find myself stressed about both and tinkering with After Effects projects instead.

Last painting, completed fall ‘06 before I started Portfolio Center. Oil on Canvas, 30×40 (no black bars)

It may not be obvious until you actually make the mistake and spend half a day trying to find the miscalculation in what you thought was an intuitive use of flash’s built in tools. DisplayObjects have the getBounds method, allowing you to quickly retrieve a Rectangle object containing size and location properties pertaining to that object in relation to any other display object, whether on the stage or not. Passing a reference of a clip into its own getBounds method returns a rectangle complete relative to itself, very handy for quickly retrieving an object’s dimensions.

Be careful, however, because using this method of retrieving an object’s dimensions is very relative. When asked for dimensions relative to itself, a DisplayObject will return unscaled values. So if you’ve rescaled a MovieClip on the stage and plan to quickly pass around its size dimensions, you’ll be better off creating your own Rectangle than relying  on getBounds, especially when there’s a possibility that the object is not its original width or height.

Furthermore, it may be dangerous in a dynamic situation to simply getBounds against the object’s parent, and the object’s root property is only valid if the clip is somewhere on the stage. In these situations it may be best to either go through the extra motions of constructing your own rectangle or only use object.getBounds(object) when you’re positive the object is not scaled.

var square:Sprite = new Sprite();
addChild(square);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = stage.stageWidth/2 - square.width/2;
square.y = stage.stageHeight/2 - square.height/2;

var b:Rectangle;
b = square.getBounds(this);
trace(b); // traces (x=225, y=150, w=100, h=100)

b = square.getBounds(square);
trace(b); // traces (x=0, y=0, w=100, h=100)


So do not expect the second trace in this code block to return a rectangle with a width of 200. Being a completely relative call it will return the object’s independent width within its scaled universe. As I mentioned, it makes sense from an oop standpoint, but its easy to hope or expect a scaled return if you’re needing that returned in a situation.

Case 8 was about adding arrays and timers, and so I did. Im using arrays for my enemies, coins, extra lives and im planning on using it for some fake fog simulation for the background elements, havent implemented it yet, but in my head its done : -D I added the timer and some other hud elements to the game, atm its just plain text so I need to make some fancy art for them later. Spent some time cleaning up the code and sorting stuff into different classes. Ran into some problems when I wanted two subclasses to communicate, they refused. So I had to bring in the main class to negotiate and relay the information between them <__< prolly a better way to do it, but atleast it works

I’m surprised how many flash not only have the visual style but also the gameplay of the games of past decades. While I think there’s a good reason for pixelated graphics – namely the relative ease of creating appealing game assets – I’d love to see a more variety in gameplay and presentation.

The technical limitations of the past are gone – is there a reason not to have physics, particles, dynamic lighting, line of sight or shadows, AI driven enemys, complex simulations and other cool stuff in modern games? No, not even when we’re talking about Flash games. The main reason why we’re not seeing more of this stuff is because this technology is not made easily available to developers by the toolkit they’re working with.

A great example for the unused potential is the flash port of the Box2D physics engine that got released in September 2007. Even though it’s a pretty straight forward port that’s not optimized for flash at all a flood of games got released since, featuring completely new gameplay or enriching established genres with physics. The basis of a good game is a good choice of engine, tools and middleware.

A flash game engine on the rise (just my subjecitve impression) is Flixel. The game Fathom that the author of Flixel developed with it caught my attention: It’s not not only extremely polished but also had a surprising story-twist and unique elements like a fish swarm guiding your way, dynamic gameplay-relevant lighting and beautiful particle effects…

And based on how well Flixel is embraced by the community it’s apperently also easy to use unlike PBE a flash game engine I’ve been working with.

I hope I find some time to play with Flixel on my own. I’ve not really got the self-motivation to write a game on my own in my spare time. But maybe I’ll can make some extension for others to use. I got an idea allready…

In the last couple of months I’ve programmed a lot of AS3 code. And when there was performance critical code to write it often got frustrating. The problem is not that AS3 compiles into bytecode which is running on a virtual machine. It’s not the lack of hardware acceleration or threading. The problem is a lack of transparency – it’s often impossible to implement the fastest option without trying and comparing different possible options!

When given a task I need to know how long it’s going to take me and how big ther performance hit is before I spend days on the problem. But in Flash you never really know how fast a possible solution is going to turn out to be. And if you implement it and it turns out slow you often can’t be sure if there’s a faster way or if you reached the limits of Flash.

Now, you might think I just suck at coding. So let me give you an example.

I have a source Bitmap object and want to draw it with a PixelBender shader in my target buffer.

var target:BitmapData;
var source:Bitmap;
...
source.blendShader = myShader;
target.draw(target, matrix, colorTransform, BlendMode.SHADER, clipRect);

Welcome to the first pitfall: The clipRect does work but it doesn’t affect the performance. You can set it to a one pixel square and it still evaluates every pixel in the target buffer.

Good to know? Yeah, but it’s not in the docs. Not sure that the people at Adobe even know about it. Anyway, if my dirty rectangle is small enough it’s worth it to copy the relevant pixels into an intermediate buffer apply the shader on it and copy it back. copyPixels comes to mind, right? Yes, that will work. And we all know how fast that is. But besides copyPixels there’s also a getPixels and a getVector method that allows me to extract a rectangular portion of the source. How fast are these? Turns out that copyPixels is the winner, getVector is about 50% slower and getPixels which basically does the same thing is 500% slower then copyPixels. Dooh!

But why do I even mention alternatives to the copyPixels way when it’s fast and everyone that reads blogs knows that it’s fast? Because getVector is a valid alternative. Turns out there’s quite some overhead to setting up and executing a pixelbender Shader. And after some more testing it turn’s out that for my specific simple shader the fastest option to update small rectangles in the target buffer is to just extract that portion using getVector, then iterate over the contents of a target and a source vector, do the calculations in plain Actionscript and copy the result back using setVector.

It’s a matter of luck and stubbornness that the tech demo I’ve been working on was successfully pitched and not canned as “not doable in flash”. Writing bytecode directly can’t be any harder then that.

I am using an AS3 framework at the moment which allows you to create custom Value Objects. A colleague here pointed me in the direction of a UML generator that can take all the pain out of writing VO classes with multiple getters and setters. All you do is generate your uml page with the classes, variables and methods you want, press generate and then BOOM – it spits out all the stub code for you. I found a good blog post about how to set this up on digitaldogbyte.com, link follows:-

http://www.digitaldogbyte.com/?p=3

I had to do a chat client with smiles and I had no idea how this could be done. I’ve searched the web and only found some vague solutions and a few broken sources. Finally I’ve decided to try do it from scratch and the result are quite promising.

I am not saying this is the best solution but it is good for what I need ( may need a lot of optimizations ).

I’ll upload the source code later.

Acredito que esta classe vai ajudar muita gente, achei muito interessante porque é fácil de utilizar, mas só funciona com MovieClip’s, porém para quem pensa em fazer um scrollBar personalizado e maneira prática e rápida é só fazer o >>>Download<<<

Fonte: http://flexcomps.wordpress.com/2008/09/15/as3-scrollbar-component-for-movieclip/

Just read some interesting blogs by Maxim Zaks regarding some unusual AS3 syntax. I have never seen this usage of commenting in XML using E4X or the anonymous functions available in trace statements. Not sure if I’ll ever use it but interesting none the less.

http://maxblog.bomzhi.de/?cat=4

Looking forward to speak at Adobe DevSummit @Chennai 24/Nov & @Hyd 1/Dec on Topic “Integration of Spring with BlazeDS and CairngormUM (Deep Dive)”

The Presentation Document : link &
Presentation

DevSummit