Flex/Flash/Actionscript

Followup about Flex Panel bug

I want to start off with a quick recap of the current status of the bug I wrote about a few days ago. The Flex 3 Panel bug that resulted in the content of a Panel overlapping the title bar of the Panel has been fixed. The fix will be in the final Flex 3 release. The bug report that shows this status is here: Issue 11279, which is now marked as a resolved bug. I want to point out that I was told (with proof) that Adobe recently started re-investigating this bug on their own about a week before I posted my rant (although that was never exlained in the bug database).

I also want to take a second to address what was seen as me being an asshole with what Matt Chotin called my “strongly worded criticism.” 🙂 I also received another email from a Flex team member with a similar sentiment letting me know that I may have been a bit harsh and that I need to remember that the engineers working on the framework are good guys trying to do the best job they can for us (the customers). I’ve met Matt personally a few times, and I deeply respect him and all the Adobe engineers working on Flex. I didn’t mean my little rant to come off as a personal attack on anyone, although I realize that since I was targeting a very specific bug that that means it falls under the responsibility of a few individuals. My harshness was a result of frustration and a misunderstanding of Adobe’s perspective, there was never meant to be any direct blame placed on individual engineers. And so with that, here’s my olive branch:

921-i_love_you_teddy_bear.jpgDear Flex team, I love you all. Your work is greatly appreciated. You make it possible for me and many other people to do work that we love. You’ve delivered a fantastic product and the overall intelligence of the team shows through in the great code base of the Flex SDK. Keep doing your jobs. Even though I may criticize, I mean it with love and respect.

OK, everyone feeling all warm and fuzzy inside? Cool, let’s all get back to work.

Matt Chotin addresses what to do if you run into similar issues like this Panel bug, where you don’t feel the Flex team addressed the issue adequately. He mentions that you will be able to vote on closed bugs in the future, so once that is in place you can still vote on a bug even if it has been marked as NAB, and the Flex team will be able to see which ones have the most community involvement. Until then your options seem to be leaving comments on the closed bug (which in this case meant 4 or 5 independent bug reports of the same issue) and emailing the Flex team, which I think means email Matt, since I can imagine that they don’t want all the engineers dealing with trivial requests from the community all day long.

That said, I’m not sure if I had dealt with the bug differently (ie simply posted a comment and emailed Matt) that it would have gotten fixed so immediately. While I understand that internally Adobe was re-investigating this bug, my hunch is that without the public bitching there would not have been a fix committed for the final Flex 3 release (feel free to correct me if I’m wrong). A single comment on a bug report and an email to Matt likely would have gotten it on the radar (although it already was), but I’m guessing we wouldn’t have seen such immediate action. So perhaps I should have phrased my previous post in a better way, and simply called attention to the bug to try to get others to comment on it so they would reopen. But I think there is certainly a place for publicly posting issues like this, since it’s an effective way to rally the troops and clearly articulate the issue (what was I going to do, write a 2,000 word comment in the bug database?). So in the future I’ll try to be a tiny bit more diplomatic with how I write posts like that.

So thank you Adobe for the quick action in response to this issue.

Standard
Flex/Flash/Actionscript

Calling bullshit on a “resolved” Flex bug

When Flex 3 was first released in beta you may have noticed a bug having to do with the Panel component when you set borderStyle to anything other than “default” (which funny enough, isn’t even a code-hinted option in Flex Builder). The issue was that the Flex 3 SDK laid out the Panel contents on top of the title bar, so the content ended up overlaid on the title and it would generally look like total crap. Basically if you had a Flex application that used the solid (or inset or outset) borderStyle on Panel to style your application, suddenly when you upgraded to Flex 3 your app looked really bad. Since Alert and TitleWindow extend Panel this affects those components too. You may have seen things in your app that looked like this:

firefoxscreensnapz026.jpg

Yeah, that sucks.

So I figured this was one of those bugs that would get reported quickly (it did) and fixed quickly (it did not and will not). There are 4 duplicate reports of this issue in Adobe’s bug tracking system, the first one was reported June 13, 2007. Here are the 4 issue reports:

They’re all the same thing, and they each have example screenshots or SWF files that show how bad the resulting bug looks.

The bugs have all been marked as Not a Bug. And this is the explanation for this resolution:

After some back and forth discussion, Glenn and I have decided that Panel will no longer support any borderStyle besides “default”. The reason is that in order to support the other borderStyles, we would have to put in the hacks that were in Panel back in. This would make it more difficult to skin Panel using graphical skins.

Panel will support other borderStyles when using the backwards compatibility flag. In addition, it will be possible to use a combination of explicit heights/widths and absolute positioning to replicate most of the old behavior for alternate borderStyles.

PanelSkin’s implementation of alternate borderStyles will be mostly working, but won’t layout the header and control bar in the correct locations, nor will it size the Panel to be large enough. We need to document these issues.

In the release notes there will be a line that reads:

Release Note: Panel only officially supports the “default” borderStyle. If you use an unsupported borderStyle, use padding values or absolute positioning to place your content in the correct place.

I call bullshit. This is not an acceptable resolution.

Why bullshit? Let me count the ways.

  1. You should never be able to make a Panel that has the content overlaid on top of the title bar. That is fundamentally against the definition of what a Panel is. A Panel has a title bar ABOVE the content area. ALWAYS. If the content area overlaps on top of the title bar then something is wrong. If the answer is that Panel will not layout the contents correctly unless the borderStyle is default, then you should not be able to set it to anything other than default (which is not a good resolution either, but at least it wouldn’t produce such crappy looking Panels).
  2. This worked very well before, was there ever a single person who complained that the Panel didn’t lay out its contents correctly? It did exactly what it was supposed to do, which is to lay out the content below the title bar.
  3. The default Panel skin gets old quickly, and we want to change up the look of the Panel. Used to be that you could just set borderStyle to solid and make some nice looking Panels that didn’t have that same opaque content area with semi-transparent border look. Now those decent looking Panels you styled in your old app are harder to make.
  4. I don’t buy the argument that “The reason is that in order to support the other borderStyles, we would have to put in the hacks that were in Panel back in. This would make it more difficult to skin Panel using graphical skins.” I guess the issue is with graphical skins as opposed to programmatic skins. PanelSkin returns border metrics that are used to layout the Panel’s contents (ie place them below the title bar by checking the headerHeight of the Panel). That code seems kinda hacky to me already, it means that the layout of the children in Panel is determined by a programmatic skin. But if PanelSkin is returning the border metrics used in Panel to layout the children then it could easily do so for the other border styles too. This would at least solve the problem when using the default PanelSkin (which must be the bulk of what people do). Maybe I don’t understand the issue with graphical skins, but let’s say you’re using some graphical skin to skin Panel, when would you ever want your Panel to have the content area overlap the title bar? Never. I just don’t get it.
  5. The “solution” for people that want to use the “unsupported” border styles is to set the paddingTop style to be the same or greater than your headerHeight, which will force the content to be placed below the header. But wtf kind of solution is that? We have headerHeight for a reason, and that reason is so the content gets placed below headerHeight pixels from the top. This just sounds like an answer of “well, you can hack your way around it, so that’s good enough.”

So basically I’m just bitching, because this bug will likely just stay “resolved” and be released in Flex 3 when it ships with a little release note to warn people to not do what they will invariably try to do. I don’t know if there is a formal thing I should do to try to get someone at Adobe to reconsider, the bug was filed 4 times and all are marked resolved. I assume if I submit a new one it will be marked as a duplicate and resolved. Sigh.

Oh, and Flex for Dummies will have a sentence similar to this:

WARNING: If you set a Panel’s borderStyle style to anything other than default then you must also set the paddingTop style to at least be as many pixels high as your title bar. The default implementation of Panel with borderStyle set to anything other than default sucks.

Standard
Flex/Flash/Actionscript

Why doesn’t Panel extend LayoutContainer?

As I’m doing some writing for the Flex for Dummies book I was digging into the source code for Panel and the other containers. I was writing about how Panel allows you to set the layout property to either absolute, vertical, or horizontal, just like LayoutContainer (or Application, which extends LayoutContainer). My initial thought was that Panel probably just extends LayoutContainer and that’s where we get the layout property from. But then digging in I saw that both LayoutContainer and Panel independently implement the layout property (in basically a cut and paste exact same way). Unless I’m missing something there’s no reason why Panel shouldn’t just extend LayoutContainer. (BTW, for a recent writeup of the LayoutContainer class see Ben Clinkinbeard’s post here).

If you look at the setter for the layout property it’s almost identical in both Panel and LayoutContainer. And take a look in measure() and updateDisplayList() and you’ll see the same calls to layoutObject.measure() and layoutObject.updateDisplayList().

So I dunno, just thought it was interesting. Really I’m just procrastinating while I’m supposed to be writing. 😛 OK, back to work…

Standard
Flex/Flash/Actionscript

We’re not waiting for Flex 4

Ely Greenfield presented some cool ideas about the future of the Flex framework during his presentation at MAX in Chicago last year. The core idea is that they’re considering drastic changes to really apply an MVC approach to the full component set, which would mean the core components themselves would be viewless controls, allowing you to easily apply custom skins and have complete control over the look of each component. I wrote up more about Ely’s session here. The future of these changes is still unknown, I think we’re all hoping that stuff becomes the Flex 4 framework whenever that gets released.

But the Flex community isn’t waiting. There are a number of people working on similar concepts outside of Adobe. A recent post by P.J. Onori triggered this blog post. I’ve noticed a few others working on very similar ideas, so I just wanted to point this out, and make a note that it’s worth keeping tabs on these guys/projects because there’s going to be some seriously cool shit that’s going to be possible.

  • P.J. Onori released a set of layout managers. These layout managers are very lightweight, are not tied the Flex framework, and in fact aren’t really even tied to the display of the components. They handle different algorithms for laying out objects, ie in a grid, in a circle, etc etc.
  • Stephen Downs (aka Tink) is working on some layout algorithms for use within a ViewStack. The basic idea is very similar, create a set of layout algorithms that determine how the children get placed, but make those algorithms independent of the actual visual component. Tink’s stuff hasn’t been released just yet, but keep an eye out for it soon.
  • Ben Stucki is working on an ambitious project he’s calling OpenFlux to create a complete framework for containers, layout algorithms, and component creation techniques. At a minimal level this will allow you to do similar stuff like P.J. Onori’s layout algorithms. But then Ben is going to be combining his stuff with 3D and we’re going to have flexible 3D containers with complex custom layouts (ie you could build CoverFlow using these base classes in a matter of minutes). Ben is calling the OpenFlux + 3D stuff PlexiGlass. In case you saw the session list for 360 Flex in Atlanta and wondered what the hell Ben’s topic meant 🙂 His session is definitely going to be one to watch at the conference.
  • Degrafa has just been released, which allows you to write complex graphics tags using MXML. A core piece of Ely’s presentation relied on the new mx:Graphics tags that are going to be in Flex 4. The Degrafa team has basically done the same thing, but you can use it now instead of waiting for the next Flex release. What this means is that if you have a set of core components without specific visual designs, you can easily create skins using Degrafa in MXML. This idea of MXML skinning and skin-less base components is crucial to what Thermo is going to allow you to do.

So we’re not quite there yet, but we’re getting close. What I’m seeing is that gradually we’re moving toward a highly-customizable, display-agnostic full component set for Flex, coupled with some advanced display options (using both 2D via Degrafa and 3D via PlexiGlass). What would that let you do? You could define a base data-driven list. Then you could choose to render that list as custom 2D graphics using Degrafa, or you could choose to render it as 3D components using PlexiGlass. The underlying component is the same base list component that has a list of data, selectedIndex, etc. But you could swap the rendering at runtime, letting you toggle between 2D and 3D views, or fluidly switch between different 3D layout algorithms, etc.

Some of the stuff I mentioned is released now, some is coming in the next few months. But keep an eye on these projects, they signal a shift in the Flex framework. I suspect that shift will officially come from within Adobe eventually with a future release of the Flex SDK, but it will come from within the community sooner. It’s gonna be fun 🙂

Standard
Flex/Flash/Actionscript

FlexLib bugfixes for the New Year

As part of my non-existent New Year’s resolutions, I’ve gone through and made a series of bugfixes to FlexLib and released an updated version .2.2. You can download the distribution zip file here or checkout the project from SVN.

What was fixed
Here are the list of issues that I fixed. If you find out that something I think I fixed is still broken then let me know.

Component Issue
SuperTabNavigator Add ItemCloseEvent to SuperTabNavigator
FlowBox FlowLayout does not respect includeInLayout Usability
ScrollableMenu ScrollableMenu should be more extensible
ScrollableMenu ScrollableMenu bugs: icons and variableRowHeight
HAccordion HAccordion icon rotation issue
ScrollableArrowMenu ScrollableArrowMenu RTE TypeError 322
SuperTabNavigator SuperTabNavigator PopupMenu doesn’t support localization
SuperTabNavigator SuperTabNavigator truncates labels with … Unnecessarily
Base64Image Base64Image throwing error when using url as source
FlowBox Vertical size of FlowBox is measured for vertical layout instead of the flow layout used
DragScrollingCanvas DragScrollingCanvas array of children to allow scrolling/mouse interaction
EnhancedButtonSkin Add EnhancedButtonSkin support for downSkin and selectedDownSkin
SuperTabNavigator SuperTabNavigator unneccesarrily places tabbar at 0,0
CanvasButton CanvasButton not working with Flex 3 beta 3

How you can help

  1. There are still open issues that have not been fixed. If you take a look at the list and know how to fix something listed there, submit a patch by emailing it to the FlexLib discussion group and we’ll add it in.
  2. Report more bugs using the issue tracking system. It’s MUCH easier to keep track of bugs people have found if they log them in the issue tracking system. I tried to go back over emails to the flexlib discussion group where people reported bugs, and I got some of them, but I likely missed some there. If you previously emailed the list (or me directly) with bug reports but did not log it in the issue tracking system then it might have gotten lost. If it’s logged in the system then even if it takes me a while to get to it, at least I have all the issues in one nice list to review. I also fixed a few small bugs that were emailed to the list without filing them as issues, and now I forget what they were, so if you sent me an email with a bug you might want to check the latest release to make sure it’s still an issue (and then file a report).
  3. There are two issues I can’t reproduce or need more clarification on. Check out these two reports and see if you can reproduce either one. If so, write up a more detailed description of the problem and maybe I can figure it out.

Thank you
Thanks to everyone who has reported bugs, keep it up. Special thanks go to Hob Spillane, Kevin Fauth and Andrew Westberg, who all submitted patches to fix a few of these issues (if I forgot anyone who submitted accepted patches I apologize, you can send me an email to bitch at me if you want).

What’s Next for FlexLib
So near the end of last year FlexLib was fairly stagnant, there were no updates since September sometime. We’re all super busy, and I simply didn’t have the time to devote to bugfixes, etc. I’m hoping to stay on top of my shit a bit more this year (which I estimate will last for a solid few weeks). We’ve got to figure out the best way to allow new contributions without compromising the quality of the components. I’m aware that there have been submissions that have taken a long time to get in, or are still sitting in moderation limbo. I don’t have a good answer as to the best way to open up a bit more while keeping quality high enough, if anyone who is wiser than I am has suggestions on ways to run open source projects like this then feel free to contact me with your advice.

I also know that the Scheduling Framework in FlexLib is a big area of concern for a lot of people. There are 7 bug reports in the issue tracking system related to the Scheduling Framework. Unfortunately I’ve never used the Scheduling Framework and so have a) no insight into the code and b) no motivation for fixing code I’ve never used. The original creators of the Scheduling Framework are busy as hell like all of us. I think some ideal scenario is that some badass coder comes along who has extensive experience with the Scheduling Framework and wants to be the champion and take care of the code. If that’s you, then shoot me an email and let me know.

FlexLib and Flex 3
One of the bug reports had to do with Flex 3 compatibility. The latest release will compile with the Flex 3 SDK. I have tested many of the components and for the most part things seem to work fine (I had to make a few minor tweaks here and there). That said, some of the FlexLib components have some copy/pasted code from the Flex 2 SDK, and I have not upgraded these to the Flex 3 versions (they still work, but do not benefit from potential bugfixes in the Flex 3 SDK). For the most part I think you can use FlexLib in Flex 3 projects without any problems. But I don’t want to require the Flex 3 SDK just yet, especially since Flex 3 is still in beta. Sometime after the official release of Flex 3 we’ll figure out the best way to move forward. New components that require Flex 3 will likely be created. At some point we may have to freeze the Flex 2 version and continue moving forward and require Flex 3. But for now you can use the current version with Flex 2 or 3.

Standard
Flex/Flash/Actionscript

360|Flex Badge to make Lil John Proud

So Tom and John, the guys putting on the 360|Flex conference in Atlanta in February, asked me to make a logo/badge for the conference. The conference is in Atlanta, so they wanted me to do some kind of design like a peach. But if the peach doesn’t satisfy your inner bling bling pimp, here’s a real ATL badge.

360Flex ATL

Cha-ching! I’m getting this on a t-shirt and I’m getting a bedazzler and putting rhinestones all over it. It’s gonna be hot.

If you want to use this badge on your blog or wherever, you can download a zip file here that contains the badge in various sizes. Here’s a version at 150px wide that might be good for a blog sidebar.

Standard
Flex/Flash/Actionscript

Flex CoverFlow performance improvement, Flex Carousel Component, and Vertical CoverFlow

UPDATE: Feb 26, 2008
I have updated the CoverFlow library a bit and added support for adding children without explicitly setting the width and height of the children (ie using the normal Flex auto-sizing validation stuff). Grab the latest source code here.

I’ve made some much needed performance improvements to the Flex CoverFlow component I released a few days ago. I’ve also taken the concept of 3D Flex containers a little further and added a 3D Carousel container and a vertical version of CoverFlow. Source code here.

Check out the performance now and stop whining (oh, and notice that this blog post has 3 of these embedded 3D components):

This movie requires Flash Player 9.

Performance improvements
When I first released the component I took the shotgun approach to rendering, which meant I rendered the entire scene every frame and all the materials were animated. This is the lazy approach that ensures that the 3D scene always looks right, but it also kills performance. So you poor people out there with computers from the 1980s complained that the component made your browser shoot up to 110% cpu and all that. Instead of telling you to get faster computers I decided to make a few small modifications to speed things up.

First, instead of rendering every frame we’re now rendering only while the animation is happening. This is a sweet improvement that Brock Brinkerhoff suggested in an email he sent me (thanks Brock!). Basically in our enter frame handler we check if Tweener is currently tweening the selected child. If so, we make PaperVision 3D render the scene. If not we just ignore and don’t waste CPU power. This means that once the movement has stopped (ie the selected child comes to rest in the center), the component no longer uses much CPU at all.

The second improvement was to not use animated materials. I added a new material that I called FlexMaterial (and the associated reflected version, ReflectionFlexMaterial). This material is non animated, but listens for FlexEvent.UPDATE_COMPLETE events fired from the child (and all of the child’s children if it has any). Whenever an updateComplete event fires the material re-renders. This ensures that our material is always up-to-date. One note about this: if you have animations in your child components that do not dispatch updateComplete events you’ll have to manually dispatch updateComplete over and over. This is pretty easy, basically what I did for a child that I wanted animated was add the following code in MXML:
enterFrame="event.currentTarget.dispatchEvent(new FlexEvent(FlexEvent.UPDATE_COMPLETE))"
and that ensures that the child will always be updated.

Oh, and while I was at it I made a modification to get around the z-ordering issue. This was a problem when you selected one of the planes that was not directly next to the selected one. When the selected plane moved back into place it would move through the other planes on its way. Now we push the selected plane straight back at a faster rate than it moves sideways, seems to have pretty much fixed the issue (at least good enough for my eyes).

This movie requires Flash Player 9.

Vertical CoverFlow
I refactored the code a little bit to allow me to easily change the 3D layout. This let me crank out a vertical version of the CoverFlow component in no time, shown here on the right. This is almost all the same code, just tweaked to lay things out vertically instead of horizontally. I figure this can be used for a sidebar widget. I had to remove the sweet web 2.0 reflections cause I didn’t know where they would go. The cool part about the refactored code is that the base component handles all the core stuff (like creating the 3d scene and planes, etc) and then each extension can simply modify the layout method. Sweet.


Carousel Flex Component
And while I was playing I couldn’t help taking some of Lee Brimelow’s code and making a 3D carousel Flex component. Thanks to Lee for doing the math for me. So here’s a Flex container to do that 3D carousel thingy. One sweet thing is that I took the same approach to preserve full interactivity of the child components. When the selected child is rotated to completely face the user the real child is swapped with the 3D plane and you can fully interact with it just like in a normal Flex app.

This movie requires Flash Player 9.

Take it further
So if you take a look at the source code you’ll see that I’ve created a BasePV3DContainer, which extends ViewStack and creates 3D planes for each child in the container. The idea here is that you can create an extension of this class and implement the layoutChildren() method and make up your own 3D container component. I wouldn’t say the base class I’ve provided is perfect, there’s certainly some code that should get moved around or done differently, but you can figure it out (hell, it’s only 300 some lines of code with comments). If you make any other 3D container Flex components then either post a comment here or drop me an email: doug@dougmccune.com.

Get the source
(Note that this source package include the CoverFlow, Vertical CoverFlow, and Carousel components, as well as an example showing using the CoverFlow component with Flex controls. This does not include the iTunes examples in this post. I’m too lazy to clean that code up well enough to give out.)

Standard
Flex/Flash/Actionscript

CoverFlow Flex Component

UPDATE: Feb 26, 2008
I have updated the CoverFlow library a bit and added support for adding children without explicitly setting the width and height of the children (ie using the normal Flex auto-sizing validation stuff). Grab the latest source code here.

Here’s a Flex component (with source) that does that sweet looking CoverFlow thing (you know, the iTunes/iPhone thing to show cover art). It’s a Flex component, so you can drop it into any Flex app. Just like Lee Brimelow opened the floodgates for a barrage of 3D carousel effects, I hope to see the CoverFlow effect used everywhere. Especially in places where it makes no sense to have this effect whatsoever. Go forth and overuse it and abuse it.

Example
I’ll go ahead and drop an example right away so you don’t have to read the rest of this to get the idea:

  • My iTunes
    So Apple provides RSS feeds of your iTunes purchases if you want. So I dropped my iTunes RSS feed in and this is what I got:
    This movie requires Flash Player 9.

    I’m thinking maybe I’ll put together a widget that you could customize and load in your own RSS feed and maybe change the colors and stuff, then let people embed this on their blogs. I dunno, I’m also kind of over CoverFlow now, so maybe not…

So what is this component?
It’s CoverFlow, duh. It’s a way of viewing stuff and scrolling through a list horizontally. It’s similar to Ely Greenfield’s DisplayShelf component (except this one does it the right way :P), and it’s just like what the guys at Blitz did too (in fact, quite similar since they’re using PV3D and Tweener too). Basically you have a bunch of things (ie cover art images) and you want to show them in this eye-candy extreme way.

How it was done
So this is a Flex component, and it extends ViewStack. There’s an obvious question as to why I made it dependent on the Flex framework and not just straight in AS3 without Flex dependencies. The answer is that it saved me time (and by that I mean I wouldn’t have done it otherwise). By using the ViewStack component as my base I don’t have to deal with all the child management crap. I get all the addChild, removeChild, the use of selectedIndex and selectedChild, and the use of the component in MXML right out of the gate. I’m lazy, so extending ViewStack was the obvious choice.

The component uses two open source libraries: PaperVision 3D and Tweener. Basically when a child is added to the ViewStack the component create a 3D Plane that represents that child. If the reflection is turned on then it creates two 3D Planes for each child, and the reflection Plane is flipped and placed below the first Plane. Yes, this means that showing the reflection doubles the number of polygons PaperVision is rendering. There are other approaches for doing reflection, but this one was easiest for me. Then we use Tweener to lay out the children and tada, we got a nice looking CoverFlow component.

The only sneaky thing that’s done is that we take advantage of the ViewStack control to keep interactivity on the Planes. We do this without using any of the interactive material stuff in PaperVision. Why? Because that stuff makes your app slow as balls. And besides, in this case, the user is only going to interact with a Plane when it is facing directly straight towards the screen. So all we do is wait until the plane is directly facing the user, then we swap in the real child of the ViewStack in its place. This way we get full interactivity, it’s invisible to the user, and we don’t have to slow our app down by using the PV3D interactivity stuff.

Some Other Examples

  • Flex Controls
    This example shows using the component with a variety of standard Flex controls. Since this is an extension of ViewStrack you can use the control just like a ViewStack and have children defined in MXML. To keep this blog post from completely destroying your CPU I’ve chosen to only include the iTunes example in the page. This one and the next one you’ve got to click to go see. This app has “view source” enabled, so if you right click on the app you can get he full source code for the CoverFlow component.
    firefoxscreensnapz017.jpg
    View the Example | View the Source
  • Amazon Browser
    And here’s what you get if you drop in the Amazon API to do searches:
    firefoxscreensnapz016.jpg
    View the Example

Source Code and Some Notes
The source code for the flex controls example in the list above is available here. That gives you the source code for the CoverFlow component. In that source code package I’ve included the PaperVision SWC and the Tweener SWC. I included those to make sure that people could download the code and test it out, but I encourage you to go get the source code of both of those libraries and compile them yourself. It’s good to know how to do that and that way you know you have the latest versions. A note about PaperVision: I used the Phunky branch of the project, but I don’t think I’m using anything that wouldn’t compile against the 1.5 release, but just in case, that’s the deal.

Sweet, I better see this effect all over the place. im in ur coverz, doin’ ur flow.

Standard
Flex/Flash/Actionscript

Flex Changed My Life

Dramatic title, I know, but I’m actually pretty serious here. This is my 100th blog post, and I wanted to take that momentous occasion to reflect on the past 10 months of blogging and try to explain how much positive change I’ve seen in my life as a result of Flex. My brief Flex history: started playing with Flex when 1.5 was out (so what was that, like ’04 or ’05?), started blogging about Flex in Jan 2007, quit my full-time job to become a Flex consultant end of March 2007, now loving life/work and even writing a book.

flex_smiley.png
Quality of life
This is number one. I love working from home. Absolutely, without a doubt love it. My morning commute now consists of waking up and strolling to the best coffee shop on earth (really), and then heading home so I can switch back into my bathrobe and begin the day’s work (I haven’t yet walked to the coffee shop in the bathrobe…). This is amazing. I used to commute from San Francisco to Palo Alto (via the train), which took a little over an hour each way. And I started work at 8 am, so that meant I left my house around 6:50. And at work I was in the basement of a building that had no windows. So during the winter months I would get up when it was dark, spend nearly all of my day inside with no sunlight (except for a brief period for lunch), and then by the time I got home it was dark again. I hated winter. Now needless to say, I have windows. And if I want to start work at 8 am I can wake up at 7:59 (but let’s be honest, 8’s pretty early…). If the time comes when I’m looking for a normal in-the-office type of job, I don’t know if I can handle the commute (I know never say never, but it’s going to be hard).
flex_heart.png
My girlfriend lives in Berkeley, which is a 20 minute or hour drive (depending on traffic). But my old commuting schedule meant that I had to sleep every night in San Francisco in order to catch the train in the morning. Now I have the freedom to work from anywhere. My new favorite schedule is working from Berkeley in the morning, driving across the bay bridge at 10am when there’s no traffic, and working the rest of the day from home. This flexibility is probably what I value the most about my current work situation. I can’t even explain what a great effect this has had on my life. So yes, Flex has helped my love life.

Projects
I’ve worked on some great projects with some great guys while I’ve been contracting. My first gig got me on a conference call with Jesse Warden (handing off a project) and Darron Schall (who I had the pleasure of working with). How sweet is that? Here’s a brief list of the projects I’ve been able to work on (minus some small non-public stuff):

  • LaunchPAD
    This was actually my first (and also my current) Flex project as a contractor with Universal Mind. I’ve been involved with multiple iterations of this prototype application and love where I’ve been able to take it most recently. Watch the demo video if you want to learn more about it. I found out I love mapping applications (or more specifically, the unrealized potential of mapping technology on the web).
  • Ribbit
    I got the chance to help create the Ribbit developer API (through the great guys at ESRIA). I got to know Chuck Freedman, and it’s going to be really fun to watch where Ribbit’s going to go in the next few months.
  • MapMyPix
    Got the chance to build an application for MapQuest (through Universal Mind) that shows off their AS3 API. The project was fast and fun, and hopefully we’ll see another iteration of this app in the future.
  • TileUI and experiments
    While this stuff doesn’t fall under the category of paid-work, I’ll just point out that Flex has let me do some really interesting experimental work that keeps my brain super active and gets me really excited about the technology I get to work with. It’s so easy to get excited about this stuff when there are such sweet demos people are constantly churning out, like all the amazing 3D stuff that’s going on right now. (P.S. TileUI is not dead, and I hope to be able to share more info in the future)

Community and worries about working alone
The Flex community rocks. One of the biggest concerns I had about working from home was the lack of co-workers around to bounce ideas off of. After being involved in the community for the past year or so I’ve now got an IM list of great Flex devs, most of whom I’ve had the pleasure of going out drinking with. If I’ve got technical questions or want to get some brainstorming on an idea, I ping one of my friends. That’s not the same as having an office full of friends, but it works well for me. I got to be friends with some of the great people at Adobe, and Deepa and I are even writing a book together. Frickin cool.
flex_dollars.png
Money
And yeah, the money’s good. I won’t go into detail but I’ll just say I make multiples of what I made before (either I’m overpaid now or I was underpaid before, you can take your pick). If you’re looking forward to your standard 4% raise at your full time job and you can do good Flex work, I’d consider checking out your other options. The job market is at a great place right now for Flex developers, you can probably make a pretty big pay jump.

Looking back
It’s been a crazy 7 months since I left my full-time job (7 months!). It’s weird to think, that timeframe doesn’t sound like that long. But within the last seven months I’ve changed jobs, spoken at conferences, and now I’m writing a book. Back in April I bet my career on Flex (although I didn’t really consider it a career at that point). Looking back on that decision, I have to say it was the perfect decision at the perfect time.

Alright, enough sentimental crap. Next post will be ActionScript code, I promise.

Standard
Flex/Flash/Actionscript

Google sucks at Flex

Am I the only one who’s going to say this? Seems like the Flex blogosphere is drooling over the concept that Google would do something in Flex. But I haven’t heard anyone talk shit about the app. Maybe it’s because it’s 1:30am and I’ve had a few beers, but seriously now, this is what Google comes up with? It’s no wonder the title of the TechCrunch article says “But why is it in Flash?” No kidding, this is an awful Flex site. Comparing the Flex version with the HTML version, I gotta say I like the HTML version more. The HTML site is cleaner and just feels nicer to me (not that I’m a fan of that version either). The Flex version doesn’t add anything you couldn’t just as easily do in plain old HTML. And I happen to think it just simply looks bad. I get a bad taste in my mouth when I look at the app.

ZOMGZ! They have tabs for web, images, and video?! And they show those annoying snap previews for search results?! And getting to the actual page of a search result now takes two clicks instead of one?!?!

OK, I’ll stop badmouthing, I don’t want to hurt anyone’s feelings. But come on guys, just because Google does something doesn’t make it the best thing ever. And I realize that from an Adobe standpoint being able to say “Hey, Google did something with Flex” is pretty big, but please, this isn’t the app you want them to make. I call BS.

firefoxscreensnapz015.jpg

Standard