Yahoo! Flash (R) Blog

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!

Good Will Hacking

It’s not your fault. It’s not your fault. It’s not your fault! It’s all ours, we swear. We started this thing, called a hack day, so that Yahoos could showcase their creative chops in a 24-hour long battle of code, written in multiple languages and on various platforms. Lots of the little projects showcased at hack days later became full-fledged products, and as time went on, more and more of us started participating. And then the whole thing just grew way too big for our shoes, and the next thing you know – we had to kick the doors off the hinges and open it to the public.

The first Open Hack Day, back in 2006, was a smashing success. Coders from all over the place converged on Yahoo! campus, for a day and a night full of code, music (Beck himself showed up to perform live for them!), pizza, beer, Red Bull, and conversation. Local TV stations had helicopters covering the event (okay, I am exaggerating, but they did send out correspondents), and the projects we saw come out of that Hack Day were simply mind-blowing. Wonderful prizes (a huge flat panel TV, among other things) were duly and deservedly awarded.

This year, we are going for an encore of what will hopefully become a long-standing tradition. And though we’ve seen quite a few Flash hacks in the last Hack Day, we always love to see more. So, if you believe you’ve got what it takes, and can take Friday, September the 12th off, get thee to http://www.hackday.org and apply at once (the event is invitation-only). Among all kinds of prizes, we are setting up a special “Best Flash Hack” prize, and who knows — you may be its lucky recipient! And though, just as last year, we are keeping the name of the artist who will perform for the lucky hackers on Friday night under wraps, let’s just say it’s going to be someone really cool!

To summarize:

What: Yahoo! Open Hack Day.
Where: Yahoo! Sunnyvale Campus.
When: September 12th, 8:00AM — September 13th, whenever, and don’t even think about sleeping that night.
How: By invitation only, apply at http://www.hackday.org

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!

360Flex Yahoo! API Session Screencast

This past Sunday, I delivered a hands-on session for the attendees of the 360Flex conference in San Jose, CA. I thought it would only be fair to share this session with the rest of you, so here it is, in its full H.264 glory.

The screencast was actually recorded in 750×420 resolution, so the small player above doesn’t quite do it justice. You can either click the ‘Full screen’ button in the player above, or (progressive) download the file onto your computer from here (MOV H.264, 378 Mb file size).

Later today, I will also post the code written during this session: just watch this post for updates!

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!

ASTRA 1.3 Release

Well, boys and girls, the time has come for an update to those lovely ASTRA components. This update fixes a few issues we’ve discovered through your valiant efforts and a whole lot of coffee.

It also introduces a fancy new CS3 component in the mix called Carousel. This is a highly reconfigurable component that lets you page through a small set of data, display it like a flat list (but with animation…), or even use it like a navigation control. Due to its ability to accept multiple types of layouts, the uses are endless.

In this Astra-Flex release:

AutoCompleteManager

• Bug fix: Custom labelFunction replacement
• Bug fix: Fixed error with custom data provider and autoFill set to true

In this Astra-Flash release:

Charts

• Added support for rotating axis labels. See new styles horizontalAxisLabelRotation and verticalAxisLabelRotation. The font used by the axis labels must be embedded for rotation to work.
• Added support for alternating fill colors between grid lines.
• Added support for marker labels on PieSeries. Default is percentage values. May be customized with labelFunction property.
• Added showAreaFill and areaFillAlpha properties to LineSeries. Allows the creation of an “area chart”. The color automatically matches the line, but the alpha may be used to create a contrast.
• Refactored axis code to seperate the axis from the axis renderer. Required minor API changes where some axis properties are now axis renderer styles. Also, all axis-related classes are now in the com.yahoo.astra.fl.charts.axes.* package. May require minor code changes to imports.
• New styles on CartesianChart include verticalAxisStyles, horizontalAxisStyles, verticalAxisGridLinesStyles, and horizontalAxisGridLinesStyles. These are complex Objects that contain all the style data to pass to the axis or grid lines renderers. Since the charts now support custom axis renderers, a way to pass in arbitrary styles not supported by the default renderers was needed.Additionally, new functions setVerticalAxisStyle(), setHorizontalAxisStyle(), setVerticalAxisGridLinesStyle() and setHorizontalAxisGridLinesStyle() allow developer to set individual styles on the axes and grid lines.Note: The old styles exposed on CartesianChart are still available in order to support legacy style code, but they should be considered deprecated. The deprecated styles may be removed in the future. Hypothetical new styles that are added in the future to the default renderers will likely be exposed only through the new complex style objects and the new style setter functions.
• New interfaces IStackingAxis and IStackedSeries provide support for stacking. NumericAxis and TimeAxis now support stacking with supported series as long as stackingEnabled is set to true on the axis.
• New Chart Types: StackedColumnChart and StackedBarChart.
• Bugfix: Series will throw an error if it redraws before massaging an Array of Number values with proper category data.

TabBar

• Added selectedTextFormat style.
• New Example: User Settings with TabBar Navigation.
• New Example: Search Form with Tabs.

Tree

• Bug fix: Enabled dynamic TextField resizing for tree cell labels.
• Bug fix: Corrected indexing issues in LeafNode.as

Why not head over to the Yahoo! Flash Developer Center and grab an updated copy of those Flash components or Flex components?

Find conversations: bloglines | technorati

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

All Your Base Are Belong To Us

 You’be probably heard of the many available SWF embed parameters, such as allowNetworking, wmode, allowScriptAccess, and of course height and width. But there a few less well-known ones that may be incredibly useful.

One of these optional attributes you can specify when embedding a SWF is named base. Adobe’s LiveDocs give the following description of the attribute:

base – Specifies the base directory or URL used to resolve relative path statements in ActionScript.

This is important when dealing with relative paths (URLs) in Flash. By default, the base URL of a SWF is its parent HTML page. This means if your SWF is loaded from another domain and has assets such as images or XML files, you’re in trouble.

Say, for instance, that yahoo.com loads a SWF ad from ads.com/car.swf. That SWF, in turn, tries to load “images/convertible.jpg”, using a relative path to an images directory that resides on ads.com. Given the default settings, this will not work, unless “yahoo.com/images/convertible.jpg” exists. To get around this, developers have often used absolute paths, such as “http://ads.com/images/convertible.jpg”. The base parameter solves this problem, allowing you to continue to use relative paths.

To allow relative paths, all you need to do is “reset” the base directory. You can even use base="." to mean “make all paths relative to the swf itself.”

Here’s an example of a full embed statement:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″
width=”500″
height=”300″
codebase=”http://active.macromedia.com/flash7/cabs/swflash.cab#version=9,0,2,8″>
<param name=”base” value=”.”></param>
<param name=”movie” value=”someSWF.swf”></param>
<param name=”play” value=”true”></param>
<embed base=”.” src=”someSWF.swf”
width=”500″ height=”300″ play=”true”
pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”>
</embed></object>

If you are fond of the popular SWFObject JavaScript library for embedding Flash content, here’s how to use the base parameter with it:

var swfobj = new SWFObject(value, “someSWF”, 500, 300, “9.0.28″, “#FFFFFF”);
swfobj.addParam(”base“, “.“);
swfobj.write(”swfDiv”);

Note that if you have a SWF that loads another SWF within itself, the base path of the loaded SWF will always be the loading SWF.

Find conversations: bloglines | technorati

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