SWFObject, ExternalInterface and Internet Explorer

I was working on something earlier today, and became so frustrated with it that I just got up and went home early for the day.  I was very pleased with the work I had completed to this point, and as soon as I launched the dreaded Internet Explorer browser to 'test compatibility' ... I immediately threw my arms up in the arm and spouted out a handful of expletives.

I created a very simple Video player in Adobe Flex 2.0, and exposed all of its functionality through ExternalInterface so that a javascript framework I am working on could communicate with it -- allowing for 'media controllers' (play, stop, pause, forward, backward, rewind, progress, etc) could be rendered to the page using HTML and CSS.  I had the following general code in my Adobe Flex application:

I dropped a reference to my compiled SWF onto the page using the latest SWFObject 2.0, recently released on Google Code. I even back-ported it to the last 1.5 release on blog.deconcept.com, when it failed initially ... assuming, of course, that the 2.0 release was still 'buggy'.  I stood corrected.

I did some research, and found a few posts related to the issue, one that I found more or less 'ensuring' was Mihai Bazon's.  He basically stated that to accomplish the ExternalInterface integration to my page, I'd have to load my SWF's with the initial page ... well, this is sort of a 'oops, would have been nice to know this AHEAD OF TIME' thing, as it makes quite a few changes to the framework a requirement.  Especially since Flash Video's are going to be one of the driving forces to the end result.

So, with that ... Mihai suggests that you can load the SWF's dynamically still, if you load them into an IFRAME.  This seems like a logical solution, but I had another alternative idea ... which is to use Flash's LocalConnection system to 'relay' the events, and simply loading a small lightweight 'listening server' on the page at 'page load' which can be passed the 'destination' and the 'method' with 'arguments'.  Now, to pull this off, all dynamically loaded SWF's on the page would have to implement the same basic startup process ... Which would go something like:

Pass a static param into the 'listener server', this represents it's "LocalConnection Name" that it will listen on

Pass the same param into all the dynamically loaded SWF's that will 'attach' to the 'listener server'

Once the dynamically loaded SWF is done, in it's "creationComplete" it can simply connect to the 'listener server' and ask to be an event handler.

When you have javascript on the page that needs to execute some ActionScript in a dynamically loaded SWF, the Javascript can tell the 'listener server' and then the 'listener server' can basically 'relay' the information to the handler.

Now, I've only thought about this for a few minutes ... and I haven't tried to put it into practice, not sure if I can 'late bind' "external interface callbacks" with the "early-load" SWF ... or if all the "addCallback" methods have to be executed as part of the "creationComplete" process or not.  Knowing what I know so far of ActionScript and Flash, I'm thinking it's just some sort of a goofy limitation either with the Flash Player 9 Plugin ... or with the way Internet Explorer allows plugins access to the page's JavaScript run-time.

Either way, I'll probably be trying to put one of the two idea's into practice, as it will be a required feature set for the framework I'm building.

I'll write more about the final solution, and possibly some example code for those who may be struggling with the same issue.

ActionScript Function Object - Know Who Called You!

I was working on what I thought would be a fairly simple solution, reusable code ... which wound up biting me in the ass shortly after implementing it. I forgot to take into consideration that Alert.show() is non-blocking and so my reusable code that was turned into a function ... failed to operate as I hoped it would. I came up with a really bad work-around which required the end user to perform the same action twice, now, last I checked ... the definition of insanity was doing the same thing multiple times, expecting different results each time ... so, I decided my 'insane solution' needed some work.

I looked around, thought it through and realized that ActionScript 3 (maybe even 2?) has a 'Function' object, which can basically store an instance of a function (most likely just a pointed to it, not a duplicate copy).

So, I had the following code:

Well, this code worked fine ... but, as you can see ... the user had to initiate the action of calling "doSomething" or "doAnotherThing" twice ... once to make isValid true and once again to execute the 'do some more' code block. This was unacceptable. So I made the following changes:

And viola, problem solved ... 'canMove' would display an Alert and prompt the user, and the Alert's callback could re-execute the code for them ... perfect!

Memory ala Adobe Flex

I got bored this evening, so I whipped together a quick Memory game in Adobe Flex, more as a means to test some basic things ... like extending built-in controls (Image) and building out dynamic displays (the images don't exist in the MXML) and working with them through the event system (adding/removing them from the effect list). The card 'flip' is actually just a simple image.source = newSource (each Card has a 'front' and 'back' source).

Enjoy: http://projects.zoulcreations.com/games/FlexMemory/

Adobe Flex - Enhanced DateField

Today, I ran into a small issue with the default DateField in Adobe Flex 2.0.1 (which also seemed to be an issue in Flex 3 MS3B2).  The issue was simply that I could not manually enter my date into the text field and was forced to select it from the PopUp DateChooser.  Normally, this wouldn't be a problem ... but when trying to select a date that is several years in the past or future, makes it quite hard. So, I took it upon myself to whip together this little component to use in my project.

It's still fairly new, but is entirely usable. Some things that are missing are validation and date 'string' formats.  Currently, the code requires the date to be entered in 'mm/dd/yyyy' format.  Although, it does accept 'mm/dd/yy' (assuming the first two 'yy' values are that of the current year).

So, here's the code ... feel free to use it as you like.

com.zoulcreations.flex.controls.DateField source:

PLAIN TEXT
XML:




<?xml version="1.0" encoding="utf-8"?>


 


        <![CDATA[


            import mx.managers.PopUpManager;


            import mx.controls.DateChooser;


            import mx.controls.Alert;


 


            [Bindable] public var selectedDate:Date;


            public var showToday:Boolean = false;


 


            [Embed(source="C:/Program Files/Adobe/Flex Builder 3/sdks/2.0.1/frameworks/source/mx/controls/DateChooser.png")]


            [Bindable] private var chooserIcon:Class;


 


            private function onCreation():void


            {


                if(showToday)


                {


                    selectedDate = new Date();


                }


            }


            private function textChanged(event:Event):void


            {


                var dp:Array = ti.text.split('/');


                if(dp.length == 3)


                {


                    try


                    {


                        var m:int = int(dp[0]);


                        var d:int = int(dp[1]);


                        var ys:String = dp[2];


                        var y:int = 1900;


                        if(ys.length == 4)


                        {


                            y = int(ys);


                        }


                        else if(ys.length == 2)


                        {


                            y = int( (new Date()).fullYear.toString().substr(0,2) + ys);


                        }


 


                        var dt:Date = new Date(y,m-1,d);


                        selectedDate = dt;


                    } catch(err:Error) { Alert.show(err.message, "Date Format Error"); }


                }


            }


 


            private function chooserChanged(event:Event):void


            {


                selectedDate = dc.selectedDate;


                //ti.text = formatDate(selectedDate);


 


                hideChooser();


            }


 


            private function formatDate(dt:Date):String


            {


                var m:int = dt.month;


                var d:int = dt.date;


                var y:int = dt.fullYear;


                return (m + 1) + '/' + d + '/' + y;


            }


 


            private var dc:DateChooser = null;


            private function imgClicked(event:Event):void


            {


                img.setFocus();


                if(dc == null) { showChooser(); }


                else { hideChooser(); }


            }


 


            private function showChooser():void


            {


                if(dc == null)


                {


                    dc = new DateChooser();


                    dc.selectedDate = selectedDate;


                    dc.addEventListener("change", chooserChanged);


                    PopUpManager.addPopUp(dc, this, false, null);


                    dc.y = this.y + this.height + 4;


                    dc.x = (this.x + this.width) - dc.width;


                }


            }


 


            private function hideChooser():void


            {


                if(dc != null)


                {


                    PopUpManager.removePopUp(dc);


                    dc = null;


                }


            }


        ]]> 

It’s Math, ala Adobe Flex

For those of you who have seen my simple 'Its Math' application written in Torque Game Builder, here's a remake of it in Adobe Flex. The Adobe Flex version actually contains much more 'logic', but is no where near as 'pretty' looking (not that the TGB version was 'pretty' by any means ... haha).

http://projects.zoulcreations.com/games/ItsMath_Flex/

Space Invaders ala Adobe Flex

Ok, I had a really nice story written up, and then Mambo's Story Editor blew up and refreshed the page for no apparent reason.  So I'll keep this one short and simple.

http://projects.zoulcreations.com/games/FlexInvaders/

Above is a link to a Space Invaders clone written in Adobe Flex.  There are three components that make up this game, the Ship, Shot and Invader classes.  The Ship component is the player ship and has simple 'move left/right' functionality along with 'fire shot'.  The Shot component is the fiery bullet that the Ship shoots when you press the Spacebar.

The Invader class is fairly simple at this point, and contains little to no logic.  The Invaders are currently stale and do not move around the level.  This functionality was not required to accomplish my simple test, which was to see if Flex was a suitable game development environment.  So far, I'm thinking that is definitely has the potential to develop simple Flash video games ... not sure about it's ability to get more complex -- along with Flex's ability to load up SWF's 'on the fly' ... you could intermix Flash and Flex stuff to make the game more complex (visually).

So give it a try, and let me know what you think ...