Yahoo! Flash (R) Blog

Astra Stimulus Package

We’re filing late this year but we were determined to get this thing in before midnight. We thought about asking for an extension, but decided the paperwork was too complicated. So here we go, crossing our fingers…

Astra 1.4 is now ready for direct deposit into your Flash or Flex applications.

New this season is a component called Form which will help with those gathering and validating data in Flash. Also notable to mention is that most of Astra is now accessible. We’ve added a section to each component on developer.yahoo.com/flash speaking directly to those trying to get components to work with screen readers. There are also, as always, some nice bug fixes and new features. The full list follows:

Flash

• New Form component and form data manager utility
• Carousel:
  • enhanced keyboard navigation
  • added accessibility
  • fixed bug: null reference error when setting multiple data providers
• Charts:
  • allow for negative values in stacked bar and column charts.
  • fixed bug in stacked bar and column charts in which markers were sized incorrectly for multiple series.
  • fixed bug in TimeAxis in which majorUnit was not being calculated correctly.
  • fixed bug in TimeAxis in which minorUnit was not being calculated.
  • fixed bug in which hideOverlappingLabels style did not work on the y-axis
  • refactored origin axes, TimeAxis and NumericAxis, to allow for factoring in the label size when calculating a majorUnit.
  • added option to CategoryAxis to allow for a more systematic dropping of labels when there is not enough space for all categories on the axis.
  • fixed bug in which null values break line series.
  • fixed bug in NumericAxis in which external data was not being casted as a Number.
  • allow option for rotating text when fonts are not embedded.
  • fixed bug in which Cartesian Charts, were not being updated when the length of the dataSource was different.
  • added enhanced styling of series by allowing the specification of fill, border and line color and alpha styles.
  • added option of styling a highlighted zero gridline when the zero is beyond the origin of a NumericAxis.
• Menu:
  • enhanced keyboard navigation
  • fixed bug in labelField property
  • added support for non-XML data providers
  • added beta accessibility implementation
  • fixed bug where focusing out would not close menus
• MenuBar:
  • enhanced keyboard navigation
  • added beta accessibility implementation
  • added support for non-XML data providers
  • added labelField property
  • added support for disabled menu bar items
• Tree:
  • Fixed out-of-bounds index error that appeared under certain conditions.
  • improved keyboard navigation
  • added events for opening and closing of nodes
  • added accessibility implementation
  • added TreeEvent
• AlertManager:
  • fixed issue with keyboard focus on disabled controls
  • made some properties publicly accessible
  • added beta accessibility implementation
• AudioPlayback:
  • enhanced keyboard navigation – added keyboard support for volume control
  • made some properties publicly accessible
  • added accessibility implementations for subcontrols (volume, current track)

Flex

• AutoCompleteManager:
  • Added ability to retrieve specific popup instances and control them
  • Enhanced algorithm for target resizing and moving
• IPv4AddressInput, TimeInput, TimeStepper, DropdownColorPicker:
  • Added accessibility implementation

Utils

• Improved performance of layout for very large containers

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Creating Accessible Components in Flash and Flex (Part 2)

In this article, I’ll go over the steps needed to enable accessibility for a custom component. While it takes a bit of getting used to, I think you’ll find that enabling accessibility for your components is not only beneficial to the many users who would like to interact with your component, but helps you to fine-tune and further enhance your components in general. To enable use with screen readers, follow these three (simple?) steps:

1. Determine object role
2. Create the Accessibility Implementation class for component
3. Add accessibility tie-ins to component class
   a) Create a placeholder for the static createAccessibilityImplementation() method
   b) Override initializeAccessibility() method
   c) (Flex only) Add AccessibilityClass metadata

Continue reading Creating Accessible Components in Flash and Flex (Part 2)…

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Flash 10 Experiments: The Warholizer (Loading and Processing Local Images)

One of the new features in Flash Player 10 is the ability to read local files. We’ve been looking at this feature for some of our upcoming components, and built a small example that demonstrates how to load, display, and process local images.  This example, dubbed “The Warholizer”, allows you to open any image file on your machine, and without uploading it to the server, extract the image’s bitmap data, and run it through some color filters, achieving an effect not unlike the one in some of Andy Warhol’s work. Try it out by dropping in a photo of your own for those 15 minutes of fame (though make sure the image is not too large: Flash has an upper limit on the size of bitmaps):

The code for the example is below the fold.

Continue reading Flash 10 Experiments: The Warholizer (Loading and Processing Local Images)…

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Creating Accessible Components in Flash and Flex

It’s been in the works for a while, but I finally had the chance to focus on making ASTRA components more accessible. Accessibility is not something many developers look at, but it’s slowly gaining ground. For many developers, even figuring out how to enable the built-in accessibility of Flash components is a job. But when you create custom components, implementing accessibility is another job entirely. Accessibility doesn’t come for free.

To begin my assessment of ASTRA components, I first had to learn to use a screen reader. I installed a trial of JAWS for Windows, which is the de facto screen reader technology, especially in regards to Flash. It’s important to note that although I develop on a Mac, I have to use Windows for accessibility testing. This is because Flash accessibility is based on Microsoft’s Active Accessibility standards, and only work on Windows machines. It can be argued that real accessibility is quite limited on the Mac, so this is more of an OS X limitation than a limitation of Flash. I also installed the Flex scripts add-ons, which are touted to provide more fine-grained info for the screen reader when using accessible Flex components.

Using  a screen reader, I quickly discovered, is a more involved process than it might seem. Your natural tendencies and habits have to be thrown out the window. For example, opening a browser window with an embedded swf, my first inclination was to use the mouse to navigate to a text input control and start typing. That didn’t work as planned. For one, a typical user of a screen reader is not going to be grabbing the mouse first thing, but using keyboard navigation to interact with an application, so I’d already cheated. Along with this, because of the way JAWS works, navigating to an input field won’t necessarily allow you to begin editing text–you must enter into “forms mode” in order to even start typing.

Once I got the basics of using JAWS down, I started to test our components. My original assumption was that the components would “mostly work” because many of them are based on lower-level components which have accessibility implementations built.

I was “mostly wrong.” A component is not the sum of its parts, in regards to a screen reader. For a component to be successfully understood by the user, it needs its own accessibility implementation built from scratch.

In the next article I’ll discuss what steps I took to create those implementations.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

3D with Flash 10: Simple Way First

As you are probably well-aware, Flash Player 10 was recently released. In this milestone release, Adobe once again introduced a number of great new features, making the player ever so powerful and useful in a wide range of projects. As we are actively exploring the new player for the many upcoming components and libraries in the ASTRA toolkit, we thought it would help to dedicate a few blog posts to the features we found most interesting.

To start off, we’ll take a look at the feature we like to call “the new dimension.” For the first 9 versions, the native rendering in Flash was limited to the Cartesian coordinates. During that time, many ways to “fake” 3-dimensionality were invented and publicized, from the simple “skewing” methods to entire bitmap-based 3D rendering libraries, like Papervision and Alternativa. Now, in the 10th version of Flash, a fair amount of 3D rendering capabilities have finally become native.

To check out this new feature, take a look at a simple application (Note that you need to install Flash Player 10 to see it):

Note: The proper version of Flash Player is not installed or JavaScript is not enabled. Unable to display SWF content.

Notice that instead of the old-time z-plane rotation (DisplayObject.rotation), we can now rotate a display object in all three planes (DisplayObject.rotationX, DisplayObject.rotationY, and DisplayObject.rotationZ), with perspective distortion thrown in for free. Also, in addition to the x and y coordinates, we can modify the z coordinate, which is visually equivalent to “scaling” the display object, but doesn’t actually change the scale values.

The beauty of this new feature is that it preserves the relation among coordinate systems of nested display objects. What does that mean? Well, let’s say you had a few display objects that you wanted to place in a stack, and then observe that stack as a 3D object — well, long story short, you can do just that.  Any changes to the 3D coordinates of the parent display object propagate down to the child, and so we can take the example above, and kick it up a notch:

Note: The proper version of Flash Player is not installed or JavaScript is not enabled. Unable to display SWF content.

Now we’re cooking with gas! With just a few lines of code (included below the cut), we put together a simple and elegant way to look at a stack of images.

These newly added features for creating 3D interfaces will greatly facilitate building rich interactive applications, but they are not quite perfect. As Justin Everett-Church once explained, using these properties is akin to creating “postcards in space” — it’s still a far cry from creating true 3D objects and environments, because modifying the three dimensions of rotation and position of planar objects doesn’t deal with more complex issues like back-face and occlusion culling, drawing primitive elements in 3D, etc. We’ll look at new features that go further in enabling more complex 3D work in the next post.

The MXML code for the examples above is below the cut.

Continue reading 3D with Flash 10: Simple Way First…

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Yahoo! Open Strategy (Y!OS) for the Rest of Us

In the last article, I hinted at Yahoo!’s Open Strategy, and mentioned that there were a few tools available for Flash and Flex developers: http://developer.yahoo.com/flash/yos. We’ve polished it up and it’s ready for release. So head on over and start developing!

To read more about Y!OS, check this out.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

With a Little App from my Friends

No doubt you’ve heard a little something about Yahoo!’s new open strategy. If you attended Open Hack Day, you would’ve even been able to use the new Social APIs, which allow you to build powerful social applications on our Yahoo! Applications Platform (YAP).

Not to let down the Flash folks, we’ve created some nice AS3 APIs that let you easily integrate social data and create a Flash or Flex application easily in YAP. There’s even a great Yahoo! theme for Flex applications, to give you a standard look and feel right from the start.

If you’re itching to see what this is all about, it’s currently available as a preview release at http://developer.yahoo.com/flash/yos. While you won’t be able to actually use the services (sorry, coming soon), you can get a head start on learning the system and even begin developing your apps, as the code and documentation are all there for the taking. There’s even lots of source code for example applications, so you can be one step ahead of your friends.[Edit: it's now released!]

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Yahoo! Music API: Listen

The Yahoo! Music API  is up and running. You can browse similar artists, gather more info than you ever wanted to know about a particular artist, get lists such as the most popular artists, and get user recommendations and ratings, to name a few. There’s also an easy-to-integrate Flash video player to let you embed music videos on your site.

The API has a liberal Flash policy file, so Flash and Flex developers can use it in their applications worry-free. Time to hone those E4X skills.

Note: The proper version of Flash Player is not installed or JavaScript is not enabled. Unable to display SWF content.

The above example shows the top 25 artists in a Flex BubbleChart. The y axis shows popularity, with the most popular artists on top. The x axis shows the change since the last time the chart was taken, and the size of the bubbles is determined by the track count of the artist on Yahoo! Music.

Hover your mouse over the bubbles for more info. Click here for the source. (Note that this example also covers custom data functions for using complex XML in Flex charts, if you are so inclined.)

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Here’s Looking at You, FlashForward

Last week, Yahoo! Flash Platform team attended the FlashForward 2008 conference in San Francisco. We had a wonderful time at the great variety of sessions and presentations, and had a few things of our own to show and tell.

In particular, we were at the FlashForward Job Fair, talking about all the great opportunities Yahoo! has for Flash and Flex developers. You can find a full list of the open positions at careers.yahoo.com.

We also dropped in on the end-of-conference Jam-Slam session, where we decided to go whimsical and throw some things at the audience. Well, not so much “things” of a “heavy steel ball” variety, but rather ideas, little snippets of Flash apps we thought would be incredibly cool to see built.  You’d be surprised how many good ideas one can fit into the two minutes of allotted time.

Although the presentation at the conference itself was without slides, I added some slides to it and re-recorded it for your entertainment. Here’s what we had to say:

The services and APIs mentioned in this little pep talk were: Yahoo! Pipes, Yahoo! Live, Yahoo! Maps AS3 API, Yahoo! Weather, Yahoo! Answers and Yahoo! Music. And of course, the links at the end of the talk lead you to our developer center and a sign-up page for the wonderful Open Hack Day (we’ll blog about it separately).

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Greetings from 360 Flex

The Flash Platform team is hanging out at 360 Flex. On Sunday we had a Yahoo! API hands-on workshop showing how to use some of our most popular components such as ActionScript 3 Maps and the Flex AutoCompleteManager. A few lucky folks won a copy of the beginner’s Flex book Learning Flex 3 by yours truly. For those of you who missed the workshop, we’ll be posting a screencast of that session tomorrow, so stay tuned for that.

Along those lines, there’s something new this year for those of you who couldn’t attend (or who’d like to review your favorite sessions). The conference is posting videos of the sessions that you can preview and purchase, and over at Ted Patrick’s blog you can view the sessions for free, and in HD, using the Adobe Media Player.

We’re also hosting an API contest in conjunction with OpenFlux. The winner will receive a game console and other goodies, so show us what you got.

As for me, I just enjoyed a great session on Flex with Rails and RubyAMF by Tony Hillerson, and now I’m attending Josh Tynjala’s Polishing Components for the Masses session. I’d better stop writing and pay attention…I could learn something.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!