Flex/Flash/Actionscript

My thoughts on Flex 3 features – Part 2

flex_condom.gif
This post addresses the code enhancement features Ted blogged about today. Now we’re getting into some stuff that’s worthwhile.

Compilation
This is huge to me, it’s one of those things that made me hate Flex Builder 2. It fixes a problem that has led me to curse at my computer. So I’m really happy incremental code compilation is coming, but this is something that should have always been in the product (man, I’m harsh today, huh?). Recently I’ve been working on a pretty large Flex app. We’ve got about 8 different MXML apps in the project, each representing a different prototype of the same general application with slight variations. As your app grows, and especially if you have multiple MXML applications, it takes longer and longer to do a build. Yesterday I was in a time crunch to get some updates for this app rolled out. But every time I needed to do a new build Flex Builder would take what seemed like an eternity (I don’t know, maybe not eternity, but it seemed really long). And Eclipse’s memory usage skyrocketed up to well over a gig of RAM. I only made changes in a few classes, and I only wanted to test one of the MXML apps out of the 8 that were in the project. But every build had to recompile each MXML app (yeah, I know you can remove MXML apps from the project’s preferences, but that’s a hassle to always do). So anyway, this will definitely save me time. And when you’re billing by the hour, a minute or two saved each time you build your app adds up to a lot of dollars.

Language Intelligence
I can’t comment on this because I have no idea what implications this has for writing code. He mentions the features this enables (refactoring, code outline, etc), so I’ll cover those features on their own.

Refactoring
This is good, and a lot of people seem to think this is the most important thing in this release (judging by blog reactions and the oohs and aahs when it’s demoed in public). I mean, this is cool, it saves you time when you need to refactor. But I’ve done some pretty intense refactoring and I gotta say that refactoring’s not on my top five list of things I want to see in Flex 3. It’s great that it’s there, and I’m happy to take advantage of it, but I don’t see this as one of the top features in this release. I might totally be the exception here.

Class Outline
I don’t care. I’ve never used the application Outline view, I don’t think I’ll ever use the Class Outline view. It shows all the imports in a class? So? They’re all at the top of the class anyway. It shows all the function and variables? I don’t care, I can control-click on anything I see in a class and jump to where it’s declared, that’s more useful to me.

Code Search
This I find useful. I have often found myself doing a search within a class for every reference to a specific variable or function. I’d almost like to see this code search panel automatically open every time I control-click on a variable or function name. This doesn’t solve a huge pain for me, but I’m sure I’ll use it.

Profiler
THIS IS HUGE. This is without a doubt the single best feature out of this set. Maybe of the entire Flex 3 release (obviously I have to wait to hear what else is included). HUGE. People say they want refactoring… fuck refactoring, I want the profiler. There have been countless times in my Flex development that I’ve wanted this. Every Flex app I’ve ever made could have benefited from having this profiler. This will allow Flex apps to get much bigger and much more complex. We’ll get much more graphic-intensive but still usable apps because of this. When you build a large Flex app you quickly start hitting performance issues. AS3 is damn fast for small stuff, but using the Flex Framework and very complex layouts means the player is doing a ton of layout calculations for any screen movement. Then when you add in component creation and you start creating references to components that you think are being disposed of, but turns out they’re not and the GC doesn’t free those components… it all goes to hell. Very large, complex Flex apps running for days almost always get slower and start eating up more RAM. Making your app GC friendly is difficult when you start building big apps. The profiler will be an essential tool for any developer working on a Flex app of any large size.

Module Support
That’s cool, whatever. I’m still tired from my excitement over the profiler, so these next features aren’t going to really get much love from me.

Multiple SDK Support
I don’t really see this as being very important. I guess the idea is that you can have developers with different SDK versions working on the same Flex app? But really? I don’t see that happening. One thing I do see that’s useful is when a new hotfix or update comes out, this will let you take an existing Flex app and testdrive it with the new update to see if there are any issues. If there are you can easily switch back to using the old version until you figure out how to migrate. That’s useful I guess.

Summary
PROFILER PROFILER PROFILER. This is worth getting the upgrade for. The only other thing in this feature set that I really want is the incremental compilation, but that will just make me dislike Flex Builder less. The Profiler will actually make me drool.

Tomorrow Ted’s going to write about the new components in the SDK. I want new components! But I think this is going to be less than exciting. We’re going to see an enhanced DataGrid, and probably other enhancements to the list-based controls. I hate the DataGrid. I understand why it’s really important to Adobe and why a lot of enterprise business apps need a powerful DataGrid control. But it’s so damn boring. Seriously people, come up with a more exciting way to show your data, don’t just drop cells into a grid. I know you love excel, but we’re working with a platform that can display data in all sorts of cool ways. Enough with the DataGrid.

I would love to see new UI components, but I don’t think we’re getting anything new (I’m hoping I’m wrong tomorrow). He also hints at SQL support within AS3, but don’t we already have an open-source project to do that? I think the framework updates are what I was most excited about when I first thought about Flex 3, only to find out that we aren’t getting a new set of components, just a few upgrades to the boring components. But we’ll see tomorrow.

My amped-up excitement for the profiler has worn off now, but seriously, the Profiler is cool. Like in terms of adding up to a BJ in my mind? Flex 3 is getting closer.

Standard
Flex/Flash/Actionscript

My thoughts on Flex 3 features – Part 1

flex_condom.gif
Seeing how I bashed on what I saw as over-hyped PR about the upcoming Flex 3 beta, I figured I would post my thoughts on the new features that Ted Patrick has been showing. Someone asked me to write about whether any of the new Flex 3 features “add up to a BJ in my mind.” Hence the graphic on the right. I’ll try to make that judgment once I hear more about Flex 3. For now, this post corresponds with the first post Ted did on his blog about the Developer/Designer enhancements in Flex 3.

Skin Importing
This is nice, it looks like if you create a single SWF and if you name your assets correctly they’ll get automagically correlated with the Flex components they’re supposed to skin (ie AccordionHeader_disabledSkin gets mapped to the disabledSkin style of the AccordionHeader selector). I assume this is simply a matter of parsing the symbol names in your swf, and not a more magical integration with Flash CS3, but I don’t know. So yeah, this is kinda cool, saves you some time. I’m not too excited but that might just be because I haven’t done an awful lot of custom skinning.

Design View Zoom/Pan
I don’t care. I rarely use design view, and when I do the object snapping always seems to work well enough for me to align stuff correctly. But again, I’m almost never in design view except to check out CSS styling and very basic layouts.

Design Mode support for ItemRenderers
This is pretty hot if you use design view. I question how well this will work with complex custom item renderers. I have a hard enough time trying to get my custom components to draw themselves in design view at all, so I have some serious doubts about whether this will work with complex ItemRenderer components. But I’m sure it will be helpful for simple inline ItemRenderers. Again, I rarely use Design View, so I’m not super excited about this, but I can see why people would be (especially considering the number of ItemRenderer questions that get posted to flexcoders). Some of the most common problems people have deal with data binding in ItemRenderers. If this gives you visual feedback about whether you’ve wired up your data binding correctly in your ItemRenderer then I think it will be useful to a lot of people.

Advanced Constraints
I don’t even know what this means. I’m really looking forward to new components in the SDK, but these don’t get me too excited (that might just because I don’t understand what they really are).

CS3 Suite integration
This is big… if it works. I’ve seen the demo of Fireworks CS3 to Flex skinning and that’s pretty cool. I have no idea what the Photoshop or Illustrator integration means. Not to be overly pessimistic but I have a feeling the answer is that the integration isn’t going to work well enough to live up to the hype. That goes for the non-Fireworks products. The Fireworks skinning integration looks like it might actually work well enough to use on a daily basis. I’ve never been a Fireworks user, but this might be enough to get me to convert.

CSS Outline
I don’t care. I’ve never used the outline view for AS3 classes, I don’t think I’m going to use the outline view for CSS. It’s not like looking at a CSS file is difficult, it presents the information in an almost identical way as the CSS outline view.

CSS Design View
Fuck yeah. This is good. This is something I’ve wanted for a long time. So far I’ve taken two approaches to writing CSS styles for a Flex app.

  • Option 1: make changes in a CSS file, save, switch over to my MXML app, switch into Design View (because I only go into Design View for CSS checking), click the Refresh button, find the component I was just styling, check it, then go back to the CSS file and make some minor adjustments.
  • Option 2: open up the Flex Style Explorer app and do all my styling there. Then copy/paste the relevant CSS blocks into my CSS file. I remember one day the style explorer site was down for a bit and I didn’t know what to do. I think I got drunk instead of doing Flex work.

Now that all can go away. Thank God. My biggest concern is about whether this will work with custom components. I really want to be able to use CSS Design View for custom styles defined in custom components. Please.

Flex 3 SDK Skinning/Style Enhancements
Nothing here really gets me excited. We get some changes in the programmatic skinning of ProgressBar, DataGrid, and Panel. Maybe I’ve just never tried hard to skin these components and run into any problems.

Summary
For me, CSS Design View is the standout of this group. This will certainly save me time. Nothing else really jumps out at me. The Fireworks skinning integration has the potential to make skinning a Flex app a hell of a lot easier, but just in terms of my personal interest I don’t really care too much.

These features are nice, but this stuff alone probably wouldn’t get me to pay any money for the upgrade. Maybe that’s because I don’t do an awful lot of work with designers who don’t code. Or maybe it’s because a lot of the work I do is more in the custom component realm than the overall app development realm. Or maybe I just don’t like pretty things.

Standard
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