Author Archives: Doug

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
Uncategorized

My Favorite Blog of 2007

Was not a Flex blog at all. It was John Nack’s blog. John Nack is a Photoshop dude at Adobe. He posts frequently on tons of design topics. Sometimes he blogs about Flash experiments, sometimes typography, photography, etc etc. I’ve come across some of the most inspirational stuff by reading his blog. John posts a lot about cool data visualization stuff, which is incredibly applicable to the Flex/Flash world. His typical post includes a half dozen or so links to cool shit. I’ve never been disappointed by clicking through any of the links he posts.

John Nack's Blog

I read a ton of Flex/Flash blogs. If you write about Flex and you’re on MXNA, I read your blog. But sometimes you have to get out of the Flex bubble to get your ideas. Sometimes we get too insulated, and forget that there’s a world outside of Flex. On one level or another we’re all designers and artists when it comes to making applications. Sometimes the most influential ideas come from photographs or typeface experiments and not ActionScript code samples.

In this same vein I should really start reading some of the Microsoft blogs out there. At the moment almost all the blogs I read regularly are in the Adobe sphere of influence. But that means I miss the cool shit from the other camp. Unfortunately I just don’t have the background software knowledge to make most of the MS posts interesting. If someone wanted to put together a monthly collection of MS-related blog posts that apply to RIA design or that would be interesting to Flex devs, I’d read 🙂

Anyway, thank you John for consistently posting cool shit.

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
Uncategorized

I’m a full-time employee with Universal Mind

Universal MindI have recently decided to make the move from an independent subcontractor to a full-time employee with Universal Mind. This is a big decision for me, one that I’ve been debating for a while now. I’ll try to explain my thinking a little. My official job title will be Principal Software Engineer, pretty pimp huh?

Building the team
We’re building a badass team to dominate the Flex world. Honestly, we’re bringing together the best developers, no question about it. One reason I decided to come on full time is so I can have more influence over that team. One of the best parts of my job is getting to work with some of the smartest guys I know. Guys who teach me new stuff every day on a project. The full time move gives me more pull to attract developers I want to work with. It shows I’m committed to what we’re doing and that there’s a reason to come work with us rather than some other Flex company. Now I really get to build this team. I have a say in who we hire. The biggest draw for me is the chance to work with rockstar developers, and at one point I thought maybe the best option was to branch out independently and get a kick-ass group of guys together to do our own thing. Then I started to realize that we already have a pretty badass team at UM, and in the last month we’ve brought on some ridiculous talent. So if I want to work with the best guys, we seem to be pulling them into UM already, so I might as well take that and run with it.

LaunchPADThe product and intellectual challenges
We’re going to be raising the bar for mapping applications. If you think the ability to plot points (oooh, different colors even!) on a Google map is the definition of awesome mapping technology then we’re going to blow you away. I’ve been working as a subcontractor for the past 8 months and a lot of my time has been spent on a project dubbed LaunchPAD. We’re taking mapping to a whole new level. I made a video a month ago showing off some of the stuff I’ve been working on. That’s just scratching the surface. You ain’t seen nothing yet.

One of my biggest concerns about taking a full time job is that the day to day work will get stale. The consulting world offers a unique opportunity to work for short periods on varied projects. Some people like this, some people don’t. I found that it was a great fit for me mentally. I got to go into a random company, learn about the cool stuff they’re doing, and help them out. Then a few weeks later I got to go to a completely new project in a completely different field and solve different problems. If you ever get bored with a project you only have to deal with it for a few weeks or months, then you get to leave the poor suckers who work full time on the project to deal with it for the rest of their lives while you go off and do something fun (I’m not actually speaking from experience here, I loved all my projects, but I always viewed this aspect as a big plus for consulting).

The full-time move with UM is a bit more than a simple shift in employment status. It also represents a shift from being a normal consultant (ie jumping project to project) to focusing primarily on the mapping stuff we’re doing. When I was first considering this my immediate concern was that I would get bored working on the same project for more than a few months. Now, after digging in deeper in the online mapping/GIS space I’ve become confident that there’s enough breadth within this area to hold my interest and keep me challenged. Figuring out how to leverage mapping for a police department is quite different than for a farming company, or a public health organization. There are a lot of fundamental technical challenges (like how to draw client-side heatmaps, or how to visualize millions of data points) that are common to many of the scenarios, but each implementation brings unique things you can’t anticipate. And the fact that my software is going to be used in a police department just makes me feel badass.

And I won’t be spending 100% of my time on the same project. I forget the proposed split, but it’s understood that I’ll have a certain number of weeks allocated to consulting for clients (gotta help UM pay the bills somehow…). So I’ll get to focus on mapping, but still jump on fun consulting projects throughout the year.

The lifestyle and commitment issues
The move to full time won’t actually have much of an effect on the lifestyle I’ve grown to love while being a subcontractor. I’ll still be working from home in San Francisco. I’ll still have flexibility in setting my daily schedule. One big difference is that I’m now expected to work a certain amount throughout the year. I have allocated vacation time, which is good because I get paid for doing nothing, but bad because I’m expected to not take much more than the time I get. As a subcontractor I could decide to take time off between projects for as long as I wanted. Sure, I wouldn’t get paid for these breaks, but I had the flexibility to take a few weeks off and travel, or just chill out.

One of the biggest mental hurdles for me was the shift in thinking about time. The time scale for a decision like this is in years, as opposed to weeks or months when I was a subcontractor. Before, I would go from one project to another, but often wouldn’t know what I would be doing next after my current project was over. I might have some time off, I might jump straight onto another project. There was a certain unknown aspect to that lifestyle that appealed to me. I don’t have kids, I don’t have a mortgage. I don’t need to know that I have work lined up for the next few years. I don’t like planning. For most things in my life I don’t plan beyond a month or two. I just bought my plane tickets to Europe for Christmas last week. I knew I was going for months. I just don’t like planning. I won’t try to psychoanalyze myself here (my girlfriend is a psychologist, so that’s her department), but I’ll just say that the shift in time scale was a difficult mental challenge for me.

So what does this mean?

  • It means Universal Mind is badass. We got some of the best Flex talent in the world, no question (and I’m not being an egotistical ass, I’m referring to everyone else working with UM). I won’t even tell you how ridiculous the Flex job market is right now. If you know Flex you can get a bazillion jobs anywhere. If you’re the best you can come work with us.
  • It means Flex mapping is going to explode. We’re going to make some crazy shit.
  • It means you can call me a sell-out for taking a full time job, but you have to do so to my face, not like a wuss in the comments.
  • It means the emails about new jobs or consulting gigs can stop coming in now… thanks. I’m spoken for.
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
Art

Artistic influence in web design

So I was in the SF Museum of Modern Art this afternoon and I was browsing the exhibit of work by Joseph Cornell. I was looking at a piece and suddenly realized that this looked just like the awesome website of Red Interactive.

A screenshot of the Red Interactive website:
firefoxscreensnapz022.jpg

The Joseph Cornell piece:
firefoxscreensnapz023.jpg
(Check out this particular piece or more of Cornell’s work.)

So I don’t know if the website was influenced by the artwork of Cornell or not, but it certainly has that look. And I think this is awesome. I want to be clear that I am not in any way suggesting that this is a bad thing. I’m not trying to call anyone out, I’m trying to applaud the creative use of artistic techniques. I think it’s fantastic to take influences from the art world and incorporate them into the web world. If it’s just a coincidence I think that’s awesome too.

How big of a dork am I that when I’m walking around an art museum I see websites?

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