Tim Walling

Determining Location with Loki in Flex

2009-05-04T00:00:00-07:00

Following up on my post on how to use the Loki API from within a Flash app, I'm posting an example with source for doing the same thing within a Flex app.

What's noteworthy about this example? For starters I tried to avoid the need for any Javascript (other than embedding) in the HTML page. The LokiAdapter class I've written injects all needed Javascript dynamically. I'm working towards a 1.0 release of this adapter and have put the initial source code up on a Github project. The other big change is the move to AS3. My initial example was an FLA which used AS2. I usually avoid using AS2 but thought it might be helpful to have an example which used it. So it's there if you need it but I probably won't be building on that example any longer. I should also point out that I've only gotten this working with Firefox. I still have to work out all of the browser issues.

I'll post something when I get the 1.0 SWC files uploaded on the Google code site. I'll be including one for Flash and one for Flex. To run the example application you'll need your own Loki key and developer key from Google to use the Google maps API for Flash.

Demo:
http://www.timwalling.com/loki_flex/loki.html

Source:
http://github.com/twalling/lokiadapter

Using Loki From Flash

2009-04-06T00:00:00-07:00

Recently a friend of mine asked if it was possible to use the Loki Javascript API from within Flash. Loki is a location aware plugin which once installed allows a user to find their location using available WiFi signals. I created an example which uses the javascript API to show you you're location on a flash based Yahoo! map. The source code is available in a zip and you can view the working example here. I'll probably play around with this a bit more so that the javascript gets inserted dynamically from Flash and I'd also like to have some Flex examples.

Demo:
http://www.timwalling.com/loki/loki.html

Source:
http://www.timwalling.com/downloads/loki_flash_example.zip

Compiling Flash CS3 compatible SWC's with Flex

2007-10-22T00:00:00-07:00

Recently I wanted to find out how to compile SWC libraries which could be used in Flash CS3 since I knew it was possible to go the other way using the Flex Component Kit for Flash CS3. As of Flex 2.01, support was added so that Flash and Flex authored SWC's were compatible (previously I believe the SWC format differed between them). The focus of the update however was on getting Flash authored components into Flex and only in passing was the reversed case mentioned as being supported.

I figured the best starting point would be a normal Flex library project in Flex Builder. After adding a class and compiling a SWC, I dropped it into the Components folder under Flash CS3 to see if it would show up. This folder is usually found here:

C:\Documents and Settings\{username}\Local Settings\Application Data\
Adobe\Flash CS3\en\Configuration\Components\

This is the folder where MXP's typically put component SWC's so that they show up in the Components panel in the Flash IDE. Anyway, after dropping the SWC in and refreshing the Components palette I didn't see anything new. So I was back to drawing board.

After re-reading the quick start guide regarding the deployment of custom Flex components I thought I'd try the recommendation given regarding the creation of a manifest.xml file. I had never done this before because it's mentioned as an "optional" step and we've never done this for any of our libraries at work. Usually if my library project compiles a SWC, I'm happy. From the article:

Manifest files map a component namespace to class names. They define the package names that the components used before being compiled into a SWC file. They are not required when compiling SWC files, but they can help keep your source files organized.

Well it turns out that this was the missing piece. I created a manifest.xml file which listed my component and then updated the compiler settings to point at this file.

Flex compiler settings

manifest.xml

Notice the key part where a namespace is specified as well as the path to the manifest.

After dropping the newly built SWC into Flash's Components folder, the new component showed up and I was able to drop it into my library!

This brings me to the point that I imagine one may be wondering, why would you even want to do this? Well in my case I was working on creating a MovieClip based component that was aware of some interfaces we use in our framework. This is similar in spirit to the UIMovieClip class that is included with the Flex Component Kit. I could probably create this component using Flash, then point the FLA to the library where our interfaces might live, but I wanted to see if I could do it from within Flex Builder. I think there are a few other reasons someone might want to do this:

developer prefers to work in Flex Builder (better code completion, familiar environment, etc
SWC creation could be part of an automated build process via ANT
easily create a SWC based on other Flex libraries

I think the last point might not apply because I'm pretty sure if you put Flex authored (2.01) SWC's in the classpath for an FLA, it will be able to see them. I still think it's nicer to use Flex Builder for this though.

There's one caveat I should point out. I've only been able to create base classes or utility classes so far using this method. If you want to create a view component, let's say a new video player component, there's a trick that dates back a few versions of Flash where one has to put something in the first frame of the component MovieClip before exporting it as a SWC from within Flash. This still seems to be the case and if you try to create a component using the method above, add the SWC to the Components folder, then drag it onto the stage, nothing will show up. You will have added the component to the FLA's library though and this is useful for getting classes into the FLA. Maybe there's a way around this and I just haven't explored enough.

Another thing to note. I've been told (courtesy of Peter Watson from Adobe) that if you're using Flex 3, then you need to add the following compiler option in order to create a SWC that works with this method I've outlined above.

compute-digest=false

Apparently this prevents the compiler from creating a newer format SWC which is compatible with the new RSL caching mechanism. I had noticed that the SWC's I created in Flex Builder 3 weren't working in Flash CS3, so this should help fix that (haven't tried it yet).

I know some more screenshots or a video would be useful in explaining this so feel free post comments and ask questions. I wanted to post something as soon as I could because I've seen this topic brought up a few times in the comments on other blogs. This use case of creating SWC's which are used in Flash doesn't seem to be highlighted anywhere in the documentation and I think it could be useful for certain projects.

Get your map on! - First release of FlexMap

2007-03-05T00:00:00-08:00

I packaged up the first release of FlexMap over the weekend. The source code is being hosted by Google Code but I'll maintain a page for the project here as well. As soon as Yahoo! releases an updated maps API, this will obviously become defunct, but I wanted to follow through with it anyway. It was an interesting challenge to create a Flex 2 component which exposed much of the same API as the Flex 1.5 version, while doing all of the communication via LocalConnection to a Flash 8 SWF.

I plan on adding some more features so I've dubbed this the 0.4 release (I'm guessing I'm about 40% done). Hopefully this is useful for anyone looking to quickly get started with the maps API in Flex 2.

Project home and documentation:
http://www.timwalling.com/flexmap/

Source code:
http://code.google.com/p/flexmap/

My sample application has been updated and the source code is available along with the component source. Some more things might need to be documented, especially my MapEvent addition but hopefully it's apparent in the sample app.

FlexMap Example

FlexMap replaced with Yahoo! Maps AS3 Communication Kit

2007-03-05T00:00:00-08:00

I knew I ran the risk of releasing something that would be replaced soon enough. I think less than 24 hours might be a record though.

The Yahoo! team released a set of AS3 API Libraries and they addressed the need for a map solution with the Yahoo! Maps AS3 Communication Kit. One of my blog commentors pointed out that these AS3 libraries would be released today and I responded by my willingness to bet that they wouldn't release an updated map component for Flex 2. Technically I think we both were right. The communication kit that was released follows the same basic approach of loading a Flash 8 SWF which contains the Yahoo! Flash map component, only it uses a nice ExternalInterface service, not to mention the API is much more complete than what I had whipped up so far.

The great thing about the libraries is that, at least for the moment, they're distributed as source code. Personally I always like to get the source and its nice to see the trend of releasing source code continue with big companies like Yahoo!

FlexMap, it was fun while it lasted. Am I bummed? No! I'm happy that Yahoo! has released a sweet AS3 library and addressed the need for a Flex 2 map API. Yahoo! continues to provide the Flash community with tools to make interesting web applications.

I'm still happy I followed through with it for a few reasons:

You never know when the official solution for something will actually come out. You can either suck it up and just write it or just keep delaying until it finally comes out.
It was an interesting problem to address. I like hacking, so coming up with a solution that worked was rewarding.
I followed through with something, which isn't something I'm always good at when it comes to personal projects (ie. projects that don't pay the rent).
I setup a project site on code.google.com (which is a really great service) and actually "released" something which in my mind means packaging something up with some basic documentation and release notes. Usually I just slap my code up as is and say have fun.

I have some other ideas for things that I'd like to work on but maybe this time I'll try to stick to something that's a little more unique and has less risk of being defunct after a few hours.

Yahoo! Maps Flex 2 Component - Preview

2007-03-02T00:00:00-08:00

I've been working on a Flex 2 component which exposes the Yahoo! Maps API similar to the official Flex 1.5 version. There seems to be a lot of interest in getting an official, updated version of the maps API and in the meantime several people have blogged about ways of communicating to a Flash 8 SWF which contains the Yahoo! Maps Flash component.

I played around with this a while back going with the ExternalInterface approach. I've since dumped that approach in favor of using LocalConnection. I've encapsulated all the communication into a Flex 2 component which you can just drop into your Flex application. I'm going to be finishing up a few things on it this weekend after which I'll release the component, along with source. I'm posting a preview of it now to see how much interest there is in the project. The first release of the component will only expose the most common API elements and then I'll plan out a roadmap for adding more of the Flex 1.5 API.

You can view the demo here:
http://timwalling.com/sandbox/flexmap/preview/

The code for the demo:

<view:yahoomap id="map" width="500" height="400" source="flash/map.swf" 
    mapviewtype="{com.timwalling.maps.MapViews.MAP}" zoomlevel="6" 
    latitude="37.77159" longitude="-122.451714" mapinitialize="onInit(event)" />

Since all of the communication is taken care of by the component, you should be able to use the component just like the Flex 1.5 version using all of the standard map events and map methods.

Update:
I'm open to project name ideas. For obvious reasons, I won't be keeping the component name "YahooMap".

More Flex charts for Jack Bauer

2007-01-25T00:00:00-08:00

I've added two more charts to analyze Jack's kill stats.

http://timwalling.com/bauerkills/

Jack Bauer's kills per hour

2007-01-23T00:00:00-08:00

Yes, I'm obsessed with Jack Bauer. The site bauercount.com keeps track of every kill he makes on 24 so I decided to chart all of his kills against the hour of the show in which he made the kill.

Which time of day is Jack's deadliest? When is it safe to be around Jack Bauer? See for yourself:

http://timwalling.com/bauerkills/

Flex 2 Yahoo Maps updated

2006-12-12T00:00:00-08:00

I've updated my Yahoo Maps application to use the latest version of FlashInterface. Robert re-worked the API a bit so it's even easier to use and requires less coding. I'll try to post the source tonight. See my earlier post for more details on what this Flex 2 / Flash 8 Yahoo Maps application is all about.

One downfall to this approach of using Yahoo Maps in a Flex 2 app is the fact that you have to code a Flash 8 SWF which exposes all of the functionality of the Yahoo Maps component. Now that Robert has released SWFAdapter, I'd like to see if it's possible to use the same SWF that the Yahoo Javascript-Flash API uses. After a little digging around in the javascript I noticed that a SWF is loaded and then talked to via a javascript API. By looking through all of the code I'm guessing one could use SWFAdapter to make all of the same calls on that SWF. I'm not sure if this goes against anything in the Yahoo Maps terms of use so I'll have to read that over some more before I release anything for distribution.

Flex 2 Yahoo Maps

2006-11-27T00:00:00-08:00

I've been meaning to experiment with this for some time and was reminded of it with the recent release of FlashInterface. Currently there's no Flex 2 component for Yahoo Maps and since Flash 9 content can't talk directly to Flash 8 content I wondered how one might use the Yahoo Maps Flash component in a Flex 2 application I always knew LocalConnection was a possibility but hadn't thought about using ExternalInterface until I came across the solution I mentioned above. I figured this would be a great chance to try out FlashInterface and complete my proof of concept all in one shot.

I'll post the source code soon as I plan on making more updates to this. I might also use it as a chance to play with UrlKit some more and knock out another task I've been meaning to get done. There might be a few issues with this example right now, I've noticed that the mouse handling seems to be a bit funky when one tries to click on the map marker. I think the Flex application is intercepting the click before the Flash component is so I'll have to fix that.

Launch Flex 2 Yahoo Maps

Speaking at Web Builder 2.0

2006-11-21T00:00:00-08:00

I'll be speaking at the Web Builder 2.0 conference coming up December 4-6.

I'll be covering the topic of how Flash developers can best utilize their skill set within a Flex project. I've come across many Flash developers (myself included at one time) who immediately see Flex as a replacement for much of what they do. When I finally jumped into Flex development I quickly realized it fit very well with how I liked to author Flash applications. My goal with this talk is to give Flash developers an understanding of what Flex offers as well as where they could get involved on a project.

This will be my first speaking engagement so I'm pretty excited about it and it also happens to be my first trip to Vegas so overall it should be a great experience. I'm making sure I go out a few days early of course to get some poker playing out of the way. :)

Deep linking in Flex

2006-11-16T00:00:00-08:00

My co-worker, Joe Berkovitz, co-authored (with Todd Rein of Adobe) and released a nifty little Flex library called UrlKit about 2 months ago. I feel like the project didn't get as much attention as it deserved and thought some action was warranted :).

Deep linking within a Flash application of any kind has always been a challenge on projects for me personally. Mainly because the requirement was throw in after most of the application was already built. One of the great things about UrlKit is that not only does it offer an easy to use framework but I think it would also be very easy to add to an existing Flex application.

I encourage people to try out the sample application. I'm going to post some sample code in the coming weeks, going over some simple examples. There's very little code to implement and it basically consists of setting up some rule sets where parts of the URL in the browser are dispatched to the various parts of the flex application that care. Based on the values of the URL you can decide to do whatever you want. Bind it to the state of a view component, pre-populate input fields, etc.

UrlKit:
http://joeberkovitz.com/blog/urlkit

Flex2 Regular Expression tester

2006-06-13T00:00:00-07:00

One of my co-workers just posted a regular expression tester/viewer he wrote in Flex 2. Hopefully this will help in my seemingly futile attempts to write/understand regular expressions... Anyway, it's worth a look.

http://life.neophi.com/danielr/2006/06/regular_expressions.html

Compiling Flex2 from FlashDevelop

2006-04-20T00:00:00-07:00

I mentioned in my last post that I've played around with Flex 2 and FlashDevelop. I wanted to briefly follow up on that by sharing what I added to my toolbar in FlashDevelop. There are a few posts on the FD forums which go over how to add your own toolbar or menu options which is super easy since they're driven off of some xml files.

Assuming you already know what Ant is and you have it installed, you can easily create a build.xml file which will send off your mxml or actionscript to the Flex compiler, magically producing a finished Flex app. I wanted to add a shortcut to my toolbar in FD so that I didn't have to keep an extra window open to run ant so I add the following to my ToolBar.xml file in FD:

<button label="ANT" click="RunProcessCaptured" image="23" 
    tag="C:\windows\system32\cmd.exe;/k ant" />

Add it wherever you like, I just added it right next to the command prompt button which I basically just copied. All I added was the /k ant which tells the command prompt to run the command "ant" when it launches.

Update: I changed the above code snippet to reflect some input from Philippe. Now the output from the command prompt window is directed to the output panel in FD. You might have to change your path to cmd.exe, but most likely not.

Regarding the build file, I just copied the one Sam made and modified it for my own use.If you want to copy mine to get started, here it is:

build.xml

The property name "source" refers the name of the mxml or as file you want to send to the compiler and "ext" is the extension, since you can send either an as file or an mxml.

Flash Lite / FlashCast alternative???

2006-03-15T00:00:00-08:00

Everypoint is a company I've been aware of for a little while now and I've been waiting until they released more information on their site before blogging about them. They have some very interesting technology which allows companies to deploy real-time mobile content to a wide range of java enabled phones. In addition they've developed their own vector rendering engine which from some of the screenshots and demos, looks to offer some great looking graphics.

Yahoo looks to be one of the first customers using this technology with an upcoming World Cup soccer application called Matchcast. There's also a demo of an application using the technology here.

I think many people are still trying to write off J2ME and companies like Everypoint are interesting in that they are providing viable solutions for real time mobile content delivery. I think it also requires us to revisit some Flash Lite vs J2ME comparisons.

What's this mean for FlashLite and FlashCast? Hopefully companies like Everypoint push Adobe harder to make the best product they can. I'm all for having choices and alternatives when it comes to making a decision on the best technology to use. I'm by no means biased towards using Flash Lite over J2ME just because of my Flash background and experience. Personally I want to use the best technology for the job and if one allows me to offer my application now to existing java enabled phones vs later to upcoming, Flash Lite enabled phones, my decision is going to be strongly influenced by the now option.

Flash / IE memory error?

2006-03-10T00:00:00-08:00

Has anyone come across this error in testing their Flash applications?

The instruction at "0x01203e8d" referenced memory at "0x01203e8d". 
The memory could not be "read".

It's been a frustrating bug to address. The actual memory address changes from time to time. I'm only able to reproduce this on a few machines at the office and it only occurs after the browser has been exited. I've been able to reduce the frequency of the error by re-working some sound objects that had "onComplete" handlers, but I'm still seeing this after I've played an FLV in the application. It seems like something that the application has done, doesn't mesh well with IE shutting down, cleaning out the activex objects, etc, who knows.

I originally thought it was tied to some bad sounds or bad FLV's, but I've tried the same media files in other swf's and haven't been able to reproduce the error. I also have gotten the error when I didn't play any FLV's at all, but was using an "onComplete" event like I said above.

It's been a fun Friday, commenting out code, ripping parts of the app out in an effort to locate what strange combination of events is causing this...

Curious if anyone has had any recent experience with something similar. I've googled of course, but only found some older references to similar issues. Figured a ~~plea~~ post for help might be worthwhile.

AS2 Sorting Algorithms

2006-02-27T00:00:00-08:00

I've come across various sorting algorithms a few times and have wanted to see how they perform in Flash. Recently I came across this list of algorithms and thought I'd finally play around with them.

The above sorting functions were written in java so I converted them to actionscript and created a test swf below. Create a test array by entering a number, say 1000 for example, then run a sort on the array. The array that's generated consists of random numbers between 1 - 250 and the sorting algorithms sort the array from lowest to highest. Note, I didn't include the Quick Sort algorithm because its too recursive and Flash complains. It's not as quick as some of the other algorithms anyway so no big loss. I also had to grab the Shell Sort from Wikipedia since the one I found above goes into an endless while loop. Typo in the example or just a bad conversion on my part? I'm not sure.

[![Get Adobe Flash player](http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif)](http://adobe.com/go/getflashplayer)

Overall the Insertion Sort seems to be the most efficient. I've included the source code for the sorting algorithms here:

Sorting.zip

I'm going to play around with these some more and make some modifications to the class so that you can pass in more complex arrays and specify which property you'd like to sort by, add ascending vs descending, etc.

Update: The following code example was posted by Felix, it just didn't make it in the comment form.

function gnomeSort(ar:Array):Void {
    var i:Number = 0;
    var n:Number = ar.length;
    var tmp;

    while (i < n) {
        if (i == 0 || ar[i-1] <= ar[i]) {
            i++;
        } else {
            tmp = ar[i];
            ar[i] = ar[i-1];
            ar[--i] = tmp;
        }
    }
}

Flash Lite Tween Utility Updated

2005-10-14T00:00:00-07:00

I made a small modification to the flash lite (flash 4) based tweening movieclip I posted a while back. I wanted a quick way of checking to see if the object being tweened was tweening or not, simply put tween_mc.tweening = "true" or "false". When the animation is running its "true", when its done its "false".

updated Flash4Tween.zip

Flash Lite Carousel Navigation Example

2005-10-14T00:00:00-07:00

I finally got around to putting together this navigation example. I was using it in a project and had to redo the design, take out project specific code, protect the innocent, etc.

Click anywhere inside the swf below and use the left and right arrow keys to navigate screens.

[![Get Adobe Flash player](http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif)](http://adobe.com/go/getflashplayer)

Here's a zip with the swf and fla:
CarouselNav.zip

It also shows a little of my approach I tried out as far as how to best organize and structure a flash lite application. Each screen is in a self contained movieclip, on the root level you set a variable saying how many screens there are and the rest is taken care of. You can lay out your screens anywhere you want on the stage area in the IDE which makes it easy to find things. Open the fla and have a look around.

I'm going to post a more advanced example of this same file where key events are automatically sent into whatever the active screen/movieclip is. This allows each screen to easily define what should be done with an up and down action, left and right, etc. Kind of a primative flash 4 event broadcaster. I also had it setup so that each screen had an "init" keyframe with code that would be run each time it was tweened into view.

Scripted Tweening for Flash Lite 1.1 (aka Flash 4)

2005-07-13T00:00:00-07:00

Developing for Flash Lite 1.1 can be a little frustrating at times and lots of us are used handling most of our animations via actionscript now. I tried thinking about how I could best encapsulate some similar functionality for Flash 4 and came up with this today. I honestly don't remember what I used to do back in the day but this works and I don't think it will be too difficult to integrate into your projects if you'd like to play with it.

[![Get Adobe Flash player](http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif)](http://adobe.com/go/getflashplayer)

Here's a download to a zip containing this swf and the fla. Just drop the tween movieclip into your movie and try it out.

Flash4Tween.zip

I released it with a very open Creative Commons license. Basically you can do what you want with it. I learned more about the various licenses available at FlashForward and wanted to try out Creative Commons one. Very easy to use!

Here are the comments from the fla:
Flash 4 Scripted Tween(cc)
2005 Tim Walling.
Some rights reserved.http://creativecommons.org/licenses/by-sa/2.5/

One approach to encapsulating some tween functionality. Basically it consists of a movieclip that is in a resting state. Once some variables are set such as the target movieclip, x and y value, tween ratio, etc you tell the movieclip to play. The movieclip then goes into a loop. It takes the current position and the target position, divides the difference by the tweenRatio, then moves the movieclip to the new point. When the difference becomes small (less than zero) the tween is ended and the movieclip is moved to the final point.

Usage:

Drop the tween clip into the same timeline as the object you'd like to tween
Setup the proper variables for the tween clip and play.
Play around with the tweenRatio.

Example:

tween_mc.targetClip = "box_mc";
tween_mc.tweenRatio = 2;
tween_mc.targetX = 340;
tween_mc.targetY = 140;
tellTarget("tween_mc") { gotoAndPlay("tween") };

Please post other methods you might be using or if there are any suggestions, questions regarding this one.