Hybrid Applications: Where JavaScript and Flash Play Together
Monday, November 17th, 5—6 PM, Moscone West 2012

Although JavaScript is frequently the first choice for building RIAs, it is limited by browser capabilities. For that reason, JavaScript is missing some of the most essential features: vector drawing, improved file uploading, local storage, video playback, and so on. In this session, we’ll present a solution to this problem in the form of hybrid components. Hybrid components are applications built with Flash whose functionality is exposed to JavaScript and allows them to be used just like regular JavaScript components. We’ll go over the architecture of hybrids and showcase those developed for Yahoo!’s popular open source YUI library.

Yahoo! ASTRA and YUI: Open Source Front-End Components for Every Occasion
Wednesday, November 19th, 2—3 PM, Moscone West 2012

Yahoo! front-end platform teams have a unique approach to developing software: Although they work for a commercial enterprise, everything they do is free and open source. In this session, Yahoo! representatives will cover the work they’ve been doing for three years, from the award-winning YUI Library (preview YUI 3.0) to the Flash and Flex components in the ASTRA Library to the ActionScript 3 Maps API. The components they build solve real problems and can be leveraged by other companies. We’ll look at the source of a few components to see how they were built and provide insight into component development.

We’ll record screencasts of both of these sessions and post them on this blog, so noone will miss out.

And if you are registered for Adobe Max, then see you soon!

Overview

When I came across Flash 10 two things caught my attention: 3D Effects and PixelBender Filters. This post will explore the former: Flash 10 adds a set of utility functions to do 3D Effects that were previously difficult or costly. I wanted to explore the possibility to export 3D Models from 3D animation packages to Flash 10 directly. Now, there are existing 3D engines like Papervision, Away3D, and Sandy that provide the functionality for rendering 3D objects and scenes. There are also functions for reading in data from 3D formats like 3DMax. However, the purpose of this blog post is an exploration of the new functionality offered in Flash 10 and describe a minimalist approach to how to render a 3D object using some of these new functions.

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

New functions

Vector

Flash 10 introduces the notion of typed arrays - arrays that can only contain values of a certain type - which improves performance and makes your code also more transparent. We can use it to store the vertex data of our 3D object (as well as a similar vector for our indices that define the face set). You can simply create an empty Vector and then push the vertices:

var vertices3D:Vector.<Number> = new Vector.<Number>();
vertices3D.push(x, y, z);

You can also pre-specify the size:

var vertices3D:Vector.<Number> = new Vector.<Number>(30);
vertices3D[0] = x;
vertices3D[1] = y;
vertices3D[2] = z;

or just pass in an array:

var vertices3D:Vector.<Number> = Vector.<Number>([ 0.3, 0.7, 0.1 ]);

Watch out for not using “new” when initializing a Vector with an array.

Perspective Projection

Once we have our vertex data we can set up our rendering pipeline with a perspective projection. Flash 10 offers the class PerspectiveProjection that allows us to set the projection center and the field of view through properties.

var pp:PerspectiveProjection = new PerspectiveProjection();
pp.projectionCenter = new Point(0, 0);
pp.fieldOfView = 45;

Project Vectors

Next, we use the projection matrix and one of the new 3D utility functions to project our vertex data into 2D space. Below we use the typed array vertices2D to hold the resulting data (note that this function also calculates the t-value of the uvtData which can be used for texture mapping).

m:Matrix3D = pp.toMatrix();
Utils3D.projectVectors(m, myMesh.vertices3D, myMesh.vertices2D, myMesh.uvtData);

Draw Triangles

Finally, we can draw our resulting 2D mesh on the screen using the new drawTriangles() function. This function takes our calculated 2D vertex data array, the original index data, and specifies which sides should be rendered through the culling parameter. A parameter of TriangleCulling.POSITIVE results in only positively wound triangles to be drawn.

container.graphics.clear();
container.graphics.beginFill(0xbbbbbb, 1);
container.graphics.lineStyle(0, 0×666666, 1);
container.graphics.drawTriangles(myMesh.vertices2D, myMesh.indices, null, TriangleCulling.POSITIVE);

Adding interactivity

In order to add interactivity - say rotate our object via mouse movements - we can introduce one additional step before we call projectVectors(): We can use the new Matrix3D functions to add translation and rotation parameters.

m2:Matrix3D = new Matrix3D();
m2.identity();
m2.prependTranslation(1, 0, 5);
m2.prependRotation(rotY, Vector3D.Y_AXIS);
m2.prependRotation(rotX, Vector3D.X_AXIS);
m2.transformVectors(myMesh.vertices3D, myMesh.vertices3D2);
Utils3D.projectVectors(m, myMesh.vertices3D2, myMesh.vertices2D, myMesh.uvtData);

Export from 3D Package

Now that we can render 3D objects we like to use polygonal models from a 3D package. There are a set of ASCII formats that can easily be converted to ActionScript arrays (e.g. VRML or obj). In case of the open source animation system Blender there are also scripts that directly export to Actionscript compatible with Sandy, Papervision and Away3D. It is easy to create a similar script to export to a simple AS3 mesh class that holds the data for our vertices3D, our indices of the face set, as well as provides the arrays for vertices2D and uvtData.

See some results of simple 3D objects:

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

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

Attached is the source for the 3d Cube.

… to be continued

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.

(more…)

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

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!]

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

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.)

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).

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!

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.