Author Archives: Doug

Flex/Flash/Actionscript

Save a snapshot image of a Flex app without a server

Someone asked a question on flexcoders about taking a snapshot of a Flex chart and saving it to the clipboard. Well, that’s actually pretty hard, but this example shows how to load a snapshot image of any Flex component that the user can choose to copy or save. It opens a popup window with the image embedded. You’ve still got to right click on the image and either “Copy Image” or “Save Image As…”. But no server is required, it’s all done on the client with a magic little javascript trick.

It uses the data: URI schema supported by Firefox and other non-crappy browsers (no, IE does not support the data: URI syntax). So this works in Firefox, but does not work in IE. Whatever, fuck em.

I saw this method first demonstrated by Mansour Raad at 360Flex. It’s pretty clever. There are some limitations though:

  • Doesn’t work in IE (after writing Flex apps so much I forgot how much browser differences suck… I hate browsers)
  • There’s a limit on how much data you can embed in a data: URI, I don’t know what this is, it might be 1,024 bytes. So this might not work with really big images.

The sample app shows a little chart that plots the framerate of the Flex app. When you click on one of the snapshot buttons it will open a popup window with an image of the chart at that time. From there you can right click and save or copy or whatever. This also makes use of Abdul Qabiz’s javascript injection technique, which allows me to write and execute JavaScript code from within my Flex app. And I’m using the PNGEncoder class in as3corelib.

View the source here.

This movie requires Flash Player 9.

Standard
Flex/Flash/Actionscript

Flex 3 better come with a free BJ

Sexy Flexy Seriously now, Ted Patrick claims the beta release of Flex 3 will be “the beta of the single best release of Flex yet” and will include “‘game changing’ platform capabilities.” And I guess Ryan Stewart has embraced his new Adobe status and is pimping the upcoming release as well.

Now, don’t get me wrong, I’m excited and all, but it seems like the PR machines are working a little too hard here. I can’t read a blog entry anymore without it being about either:

  • how Flex 3 is going to do my dishes and get me a beer from the fridge
  • the ground-breaking ColdFusion beta that I can’t live without
  • why Silverlight sucks and how MS wants to buy the world
  • Google and Adobe making sweet love with Google Gears

I’ll hold my judgment on Moxie until I hear what Flex 3 will actually contain, but it better be some seriously good shit or I’m going to be disappointed. Like, my world better be rocked… and rocked hard. If I don’t have to change my underwear after I read about Flex 3 then it’s a major letdown.

Standard
Flex/Flash/Actionscript

New Component: CanvasButton added to FlexLib

I just made a quick new component and added it to FlexLib. It’s a Button component, but it allows you to add any child UI components to the button via MXML. So if you find the single icon and label format of the button to be a bit too restrictive, you can use this component to layout your button however you want. This is in response to a recent question asked on flexcoders.

So for example, in the sample below the top button is created like this:

View the source
View the documentation

Note: this has been added to the SVN repository for FlexLib but is not yet in the distribution zip. The distribution zip will get updated once we have a bigger changeset (oh, and it’s coming…)

This movie requires Flash Player 9.

Standard
Flex/Flash/Actionscript

My first Flickr Flex app

I can’t believe I’ve gone this long without going through the rite of passage that is the Flickr api Flex app. Well, here it is. I’ve created a new component that extends ViewStack that does the “photo shuffling” effect when you change photos here. I’ll be releasing the source code eventually (at least for the custom ViewStack component), maybe I’ll develop it a bit more and add it to FlexLib.

Things to note:

  • It only loads the first 15 images for whatever you search for, if you keep clicking it will just cycle through them again
  • The thumbnail is loaded first while the larger version of the image is loaded
  • I had to use a PHP proxy to be able to get the images to show up in the reflection and to use bitmap smoothing on them
  • The main component is a ViewStack, I just overrode the setter for selectedIndex. That entire extended ViewStack component is under 100 lines of code.
  • A search for “monkey drinking beer” comes up with a series of pretty amazing photos.

View the app here (or click the screenshot below).

flickapp.jpg

Standard
Flex/Flash/Actionscript

Animated Gif Loader Flex component updated

UPDATE: The AnimatedGifLoader component is no longer for sale.

There are some open-source alternatives to load animated gifs in Flash/Flex projects. Please see the following links:
http://www.bytearray.org/?p=95
http://labs.flexcoders.nl/2007/08/30/another-bytearray-fxc-mixfxcloader/

I’ve released an update to the AnimatedGifLoader Flex component that lets you load animated gifs in Flex. This update adds much more complete support for animated gif files. If you had any trouble with using this component with an animated gif, download the newest version and try it out. Everyone who has already purchased this component has already received this update (if not please email me).

I’ve updated the API a bit, released the ASDoc documentation, and put together a small Apollo application that will let you test the component to see if it will work with the animated gifs you want to load.

And for your old school viewing pleasure, some animated gifs loaded into a Flex app:

This movie requires Flash Player 9.

Standard
Flex/Flash/Actionscript

Major FlexLib updates – 4 new components + bugfixes

I’ve just updated FlexLib and added some components from new contributors and fixed some reported bugs in the existing components. The new additions include: Text Highlighter from Tom Lee, Base64 Image from Stacy Young, and Enhanced ButtonSkin from Daniel Wabyick. Darron also added a component this morning, HorizontalAxisDataSelector. And I’ve also fixed some reported issues that people had submitted, specifically issues 1, 6, 9, 13, 24.

So a big welcome to the new contributors, Tom, Stacy, and Daniel.

Regarding the bugfixes, there were fixes for the SuperTabNavigator and Scrollable Menu controls, and enhancements to the Draggable Slider and ConvertibleTreeList. If you’re using any of those components (especially the SuperTabNavigator), I’d strongly recommend getting the new version. And if you have any bugs to report in any FlexLib components, make sure to submit bug reports. We actually read those and make changes.

Check out the new additions by downloading the FlexLib project from the google code project page. The newest distribution release, version .1.8, is available as a zipped package to download.

Here are the links to the docs and examples for the new components

Base64Image Documentation Example
EnhancedButtonSkin Documentation Example
Highlighter Documentation Example
HorizontalAxisDataSelector Documentation Example

If you’ve got components that you want to contribute then send ’em our way. Read the How to Contribute page and send in your code.

Standard
Flex/Flash/Actionscript

Multi-line strings in Actionscript 3

Jesus, this took me a bazillion hours to figure out.

OK, so I wanted to set a String variable in Actionscript. The actual value I wanted was a block of Javascript code (more on why in a second). In PHP we’re allowed to use something called heredoc syntax. So I could write my code like this:

$str = <<

and then my variable would contain the multi-line string with line breaks and all. Sweet, that's what I wanted to do. Turns out AS3 doesn't support heredoc syntax. So that sucks.

I spent the next few hours banging my head on a wall trying to figure out how to cut and paste my long block of code that I wanted to get into a String to work correctly in my AS code. Googling "actionscript heredoc" gave me nothing. Googling "actionscript multi-line string" gave me nothing. The golden nugget was finally realizing that AS3 is basically Javascript 2, so maybe some JS guys had figured this one out. Turns out they did. Here's the JS nugget that led me to my solution.

You can use the same method in Actionscript 3. So your AS code would look like:

private var myString:String = (

It's easier in MXML, in that case all you need to do is something like:

So that's how you simulate the heredoc syntax in AS3.

And a quick note: when I was trying to figure this out I was making a class that injected Javascript code into the HTML wrapper for a component to execute. See Abdul Qabiz's post here for a description of this method and a utility class to help you do this. Basically this let me write a component that used both Actionscript and Javascript and I could keep all my AS code and my JS code within the Actionscript component (as opposed to putting in the HTML wrapper). That's pretty frickin cool.

Standard
Flex/Flash/Actionscript

360Flex session list sneak peak released

360Flex A preview of the session list has been posted on the 360Flex blog. I’m doing a presentation on “custom flex component development.” I think I’ll have to snazz up that title a bit before game day.

Looking over the list, I’m excited for the “User Experiences Using Alternate Navigation and Command Gestures” talk by Tony Hillerson. Tony’s involved in the Artemis project, so I’m guessing that session’s going to include sweet demos of using the Wiimote. I love the title of Matt Chotin‘s talk. I’m sure the Buzzword presentation by David Coletta will be packed. And if you didn’t see Mansour Raad‘s presentation about what ESRI’s doing with Flex mapping components, definitely go check that out, that was one of my favorite sessions from 360Flex in San Jose.

Standard
Uncategorized

Dear Adobe: Where’s my free hosted Flash Media Server?

logo_main_sl.gif Microsoft is giving me 4 gigs of free hosted streaming Silverlight video. You want to keep Flash video on top? Give me a free hosted FLV streaming service please.

And I don’t want to hear, hey, you can go and download the developer edition of Flash Media Server 2, install it on your own root server, and then you can have a whopping 10 concurrent users and you can’t use it in a production environment. Nope, screw that, I’ll take a free FLV streaming service please. And you better one up ’em and make it 10 gigs. You can send me an email when you’ve got it up and running and I’ll sign up. Thanks.

Standard
Flex/Flash/Actionscript

Analyze your ActionScript code with this Apollo app

This is a little Apollo app I whipped up so I could analyze the Flex SDK source code. It analyzes actionscript code and produces some basic stats: number of files, breakdown of lines of code (comments versus whitespace versus real code), and it counts functions and variables. Not really useful for anything in real life, I was just curious how large the Flex SDK was, so I wanted a way to figure that out.

When it first loads it tries to locate the location of the Flex SDK source if it can find it on your computer. You can change that to scan whatever directory you want. Be aware it’s going to recursively loop over every subdirectory, and it you set it to scan your root folder it might hang for a while.

Oh, and a secret note: if you drag the bottom right corner of the app you can resize it.

So some stats just for fun:

Flex SDK: 287,661 lines of code
FlexLib: 17,885 lines of code
This Apollo app: 1,018 lines of code

Download the .air file here to install the Apollo app.

Some screenshots:
apolloapp1.jpg
apolloapp2.jpg
apolloapp3.jpg

Standard