Author Archives: Doug

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
Uncategorized

didn’t have to install anything my ass

I just had a funny IM conversation with my friend who works at Googs, I sent him the link for the Flash globe from Poly9 that I just saw on MXNA. The description reads “Poly9 FreeEarth is a cross-browser, cross-platform 3D globe which does not require any download.” Turns out it wasn’t quite so easy 🙂

Doug McCune: http://freeearth.poly9.com/ eventually we’ll get google earth in flash

Google Employee: i don’t see anything when i go to the page

DM: ha. really? like nothing at all?

GE: doesn’t look like it’s ready for primetime. no earth

DM: well, so much for that then

GE: do you see anything?

DM: yeah, a spinning 3d earth

GE: using firefox? do you need flash 9?

DM: probably. it’s definitely flash player, probably 9

GE: hold on. geez, didn’t have to install anything my ass

DM: haha

GE: don’t have priveleges. hold on. god dammit

DM: haha, it’s not that cool, not worth the effort

GE: oh, i’m sure it’s not. i just want to show you how big a pain in the ass it is. i’ll tell you when i get it…

DM: I’m timing you. I’ll send the report to adobe

Google Employee disconnected

I assume this was a restart. He didn’t come back on IM though, so god knows. So while us Flash/Flex guys keep bragging about 80-90% flash player 9 penetration, we gotta still remember that we can’t claim that anything we make “does not require any download”.

Standard
Flex/Flash/Actionscript

There are 287,661 lines of code in the Flex 2 Framework SDK

I did a few calculations on the Flex SDK source code. By my count there are 788 files (.as or .mxml) for a total of 287,661 lines of code. Out of that, 87,216 lines are comments (about 30%).

The top 5 biggest classes are: UIComponent (8,407 lines), ListBase (7,414 lines), Container (5,056 lines), DataGrid (4,885 lines), and AxisRenderer (3,441 lines).

Why the hell did I figure this out? Well, I was preparing for my presentation about extending the Flex framework with custom components for tomorrow’s silvafug meeting, and I got curious just how much code there really was in the Flex Framework. If you’ve ever dug into the source code for the framework you know that there’s a lot there, dig deep enough and you’ll find some monster classes that must have taken a bazillion man-hours to write.

The totals above include every .as and .mxml file that is published in the SDK source. There are some classes that are intrinsic classes in the Flash Player, which were not written in Actionscript, and these are obviously not included in the count. Also not included are the Apollo component source files (in case you’re curious that’s another 9,100 lines of code).

I’ve put together an Apollo app that will scan the Flex SDK source directory and tell you these stats, along with breakdowns by class, so you can see wonderfully interesting things like how many private functions each class includes, or how many lines of whitespace are in each file. I’ll be releasing the Apollo app shortly that you can run on your own code. God knows why you’d want to. I guess this is what happens when I get curious, I make useless pieces of software. Woot woot.

Here’s a little screenshot of the Apollo app in action:
apolloapp2.jpg

Standard