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 Google code 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://code.google.com/p/lokiadapter/

FlashDevelop 3.0.0 Beta 4

Java 1.6 (Java 6)

If you try out FlashDevelop and like using it, don’t forget to support the project by donating!

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.

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:

1. 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.

2. It was an interesting problem to address. I like hacking, so coming up with a solution that worked was rewarding.

3. 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).

4. 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.

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

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:

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”.

http://timwalling.com/bauerkills/

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

http://timwalling.com/bauerkills/

Feel free to contact me with any questions as well. I know I’m leaving the description of “developer position” pretty wide open but I think we really value strong development skills regardless of language. It would be a shame to miss out on a good developer who could quickly pick up the Flex specifics of our work.