Yahoo! Flash (R) Blog

Where in the World Is Yahoo! Flash Platform? (Answer: Adobe Max 2008)

Well, we sneak around the world, from Kiev to Carolina, but next week, the big Adobe Max Developer Conference is coming to San Francisco, and we wanted to let you know that that’s where we’ll be! Yahoo! is a gold sponsor of the conference, and we’ll have a booth where someone will always be on hand to valiantly answer your questions and distribute schwag. We will also have two sessions in the “Develop” track. Here are the session blurbs:

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!

Find conversations: bloglines | technorati

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

3D with Flash 10 (part 2)

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

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!