Rotating device fonts is quite useful in many applications (as labels on a Chart, for example), and not embedding the fonts is essential to keeping the SWFs small and taking advantage of the internationalization already built into the user’s system. In previous versions of the Flash player, rotating dynamic text was only possible if the Sprite containing a dynamic TextField was first copied into a Bitmap object, and then rotated. This somewhat “hacky” approach produced results, albeit not very visually pleasing ones.

In the new Flash player, the new feature is not as simple as modifying the TextField.rotation property — if you set rotation of a TextField to anything other than 0, your text will disappear, just as in previous versions of the player. Instead, there are two new methods of producing rotated text — let’s look at both of them, and then discuss their advantages and disadvantages:

The first method, used in the top row in the example above, simply modifies the rotationZ property of the TextField. This property, newly introduced in player 10, is generally used to rotate display objects in 3D space; however, rotation in Z-plane is mathematically equivalent to the regular, flat rotation. In some sense, it behaves similarly to the “old” method of rotating dynamic text: it first caches text as a bitmap, and only then rotates it. You can ascertain its bitmap nature by simply zooming in on the SWF: you’ll see the obvious pixelation around the edges of the text.
Depending on the end user’s platform (Windows, OS X or Linux), this method may actually produce better-looking results for small to medium font sizes. It’s also quite simple to use — there is only one property to modify.

The second method (used for the bottom row) is using new native AS3 class, called TextBlock. Part of the new flash.text.engine package, TextBlock allows you to generate a special kind of DisplayObject, called TextLine, which can be subjected to all standard DisplayObject transformations.

This method is a bit more involved, because TextLines cannot be instantiated on their own — you have to use the factory within TextBlock to generate them. This method also behaves somewhat differently on different platforms. I have given it a cursory test on OS X and Windows XP, and it appears that on OS X, all but the smallest TextLines are anti-aliased properly. On Windows, however, some of the medium-size lines come out looking very jagged, whereas the smallest and largest font sizes are properly anti-aliased. Of course, another thing to note with this method is that it preserves font glyphs as vector objects: if you zoom in on the SWF, you’ll see that they remain sharp and anti-aliased.

There’s a lot more investigating to do with these two methods, but I hope this will be a good start for you. The code for the example is below.

package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.engine.*;
 
public class TextTest extends Sprite {
 
public function TextTest () {
 
for (var i:int = 0; i <= 20; i++) {
	var txt:TextField = new TextField();
	txt.selectable = false;
	txt.width = 300;
	txt.height = 100;
	txt.text = "Hello world!";
	txt.setTextFormat(new TextFormat("Georgia", 2 + 2*i));
 
	txt.x = 6*(i*(i+1)/2);
	txt.y = 30;
	txt.rotationZ = 20;
	addChild(txt);
}
 
for (var j:int=0; j<=20; j++) {
	trace(j);
	var myString:String = "Hello world!";
	var myFormat:ElementFormat = new ElementFormat();
 
	var myFontDesc:FontDescription = new FontDescription("Georgia");
	myFormat.fontSize = 2 + 2*j;
	myFormat.fontDescription = myFontDesc; 
 
	var textElement:TextElement = new TextElement(myString, myFormat);
	var textBlock:TextBlock = new TextBlock();
	textBlock.content = textElement; 
 
	var myTextLine:TextLine = textBlock.createTextLine(null, 300); 
 
	myTextLine.x = 6*(j*(j+1)/2);
	myTextLine.y = 150;
	myTextLine.rotation = 20;
 
	addChild(myTextLine);
}
 
  }
 }
}

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

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

Determine object role

In order for the JAWS screen reader to inform the user about a particular component, it needs to know a few things about the component. Most importantly, it needs to know what the type of the component is. It does this using a predefined set of types, called Object Roles in MSAA terminology. These object roles are simply numerical values, standing for control types such as push buttons and list boxes. I like to define them as constants in my accessibility implementations, to make them more identifiable. So the first step is determining the type, which also allows you to see if you need to extend a current accessibility implementation, or start from scratch. The second step is to actually create the implementation (*whew*).

Create the Accessibility Implementation class

To create an accessibility implementation, you need to extend from a base implementation class. For Flash components this will extend fl.accessibility.AccImpl or the component’s superclass’s implementation. For Flex components this will extend mx.accessibility.AccImpl or the component’s superclass’s implementation. For instance, with Astra Carousel, I extended fl.accessibilitySelectableListAccImpl, the implementation used for SelectableList; for Astra Charts, I created an implementation from scratch, extending fl.accessibility.AccImpl.

Generally, you can pair the superclass of your implementation with the component’s superclass. And if one’s not available, start at AccImpl. The main thing to remember is that, for Flash CS3/CS4 components, you need to create the hooks in your implementation that pair it up with its corresponding component. You do this by creating a static variable and a static method:

private static var accessibilityHooked:Boolean=hookAccessibility();
 
private static function hookAccessibility():Boolean
{
     YourComponentClass.createAccessibilityImplementation =
          createAccessibilityImplementation;
     return true;
}

Notice in the hookAccessibility function, that it refers to a static variable of your component’s class. In order for this to work, you’ll need to add that static variable to your component’s class, which we’ll go over later in this article. Remember that the above code is for Flash CS3/CS4 components only–Flex will create the necessary hooks itself through the mxmlc compiler.

Once you’re hooked up, the next task is to actually set the object role you decided on. To do that, you simply set the variable role to that numerical value within the constructor of the implementation class.

Next is the hard part. All implementations will use the following methods to communicate with the screen reader, and you’ll find you need many of them to make your implementation work. However, you may not need to write custom code for all of them, as you may be able to inherit a perfectly usable method from the superclass:

• accLocation(childID:uint):* – specifies the bounding box of a child element.
• accSelect(selFlag:uint, childID:uint):void-altering the selection in the component .
• get_accDefaultAction(childID:uint):String-returns the default action of the component or of one of its child elements.
• get_accFocus():uint-returns the unsigned integer ID of the child element, if any, that has child focus within the component.
• get_accName(childID:uint):String-returns the name for the component or for one of its child elements.
• get_accRole(childID:uint):uint-returns the system role for the component or for one of its child elements.
• get_accSelection():Array-returns an array containing the IDs of all child elements that are selected.
• get_accState(childID:uint):uint-returns the current runtime state of the component or of one of its child elements.
• get_accValue(childID:uint):String-returns the runtime value of the component or of one of its child elements.
• getChildIDArray():Array-returns an array containing the unsigned integer IDs of all child elements in the AccessibilityImplementation.
• eventHandler(event:Event):void-Handles events from the master component. This essentially listens for events, and the developer must create a switch statement to call an Accessibility.sendEvent with the appropriate parameters.
• getName(childID:uint):String-returns the name of the accessible component or the name of one of its child elements.
• getState(childID:uint):uint-returns the state of the accessible component.

It’s important to note that there may be a number of other methods that need to be created for such things as telling the screenreader which child items are focused or what items are selected. Read on for some real-world examples of creating these.

Add accessibility tie-ins to component class

The last step is telling your component class to use this accessibility implementation. Actually, this is a step you can do on your components before you finalize your implementation class, because it doesn’t point to the accessibility class by name. Add these few lines of code to your class:

public static var createAccessibilityImplementation:Function;
 
override protected function initializeAccessibility():void
{
     if (YourComponentClass.createAccessibilityImplementation!=null)
          YourComponentClass.createAccessibilityImplementation(this);
}

This tells UIComponent that there may be an implementation in use, and lets your implementation class mix in with its hookAccessibility() method. If you’re using Flex, it’s a good idea to add AccessibilityClass metadata in your component class. For example, with mx.controls.Button, the following metadata is added, pointing to the implementation class:

[AccessibilityClass(implementation="mx.accessibility.ButtonAccImpl")]

Examples

Talking about what you should do is one thing, but giving you a play-by-play of my own development experience should prove more helpful.

Carousel

To create an accessibility implementation for Carousel, I determined that, because Carousel extends SelectableList, my accessibility implementation would extend SelectableListAccImpl. This saved some of the grunt work, as a few of the necessary methods were already created for me. Even the role did not need to be set, as there is no specific designation for a carousel in MSAA. Carousel is essentially a list, so I was able to keep its role as ROLE_SYSTEM_LIST (0×00000021 for the numerically-inclined). I did have to override the get_accValue method to return the value of the current item in the Carousel. Also, because a Carousel can be horizontal as well as vertical, I had to override get_accState to return the proper state information whether the Carousel was a vertical or horizontal list.

Tree

For Tree, I at first decided to create an accessibility implementation from scratch, probably because I was being stubborn. While Tree extends List, the typical ListAccImple class wasn’t going to cut it for Tree, which has a very different interaction model. However, I later realized that had to reimplement getChildIDArray, accLocation, and get_accFocus, which were already present and suitable in SelectableListAccImpl. So I decided in the end to extend that. However, there was a lot left to be written for this implementation. Tree, while it inherits from List, has its own designation in MSAA land. It is called, interestingly enough, an Outline control, designated by the constant ROLE_SYSTEM_OUTLINE. So that was the role I gave it. I reworked the get_accValue method to return the value of the current item as well as their location in the tree structure. So when the item is selected, the screen reader will read something like “Item 4 of 10″. Other things I had to do with Tree:

• get_accState was overridden to provide additional information about tree items being collapsed or open.
• get_accDefaultAction had to show additional actions of a node being collapsed or expanded.
• accDoDefaultAction needed to be reworked in order to open or close the items.
• getName was overridden to add, like get_accValue, info about the current location of the item in the tree structure.

I also found in my development that proper keyboard navigation wasn’t in place. So I added that in. That’s the great part about creating these implementations–it allows you to really test the usability of the component, not to mention helps you to find bugs.

The code for the example is below the fold.

<?xml version="1.0" encoding="utf-8"?>
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();" xmlns:ns1="com.yahoo.astra.mx.controls.*">
 
<mx:Script>
	<![CDATA[
 
import mx.core.Container;
import mx.core.UIComponent;
import flash.net.FileReference;
import flash.display.BitmapData;
 
public var fileRef:FileReference = new FileReference();
 
public function init() : void {
	fileRef.addEventListener(Event.SELECT, handleSelectedImage);
	fileRef.addEventListener(Event.COMPLETE, handleFileLoad);
}
 
public function handleBrowseClick () : void {
	var typeFilter:Array = new Array();
	typeFilter.push(new FileFilter("Images", "*.jpg;*.gif;*.png"));
	fileRef.browse(typeFilter);
}
 
public function handleSelectedImage(evt:Event) : void {
	fileName.text = fileRef.name;
	fileRef.load();
}
 
public function handleFileLoad (evt:Event) : void {
	var fileByteData:ByteArray = new ByteArray();
	fileByteData = fileRef.data as ByteArray;
 
	var loader:Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, extractBitmapData);
	loader.loadBytes(fileByteData);
}
 
public function extractBitmapData (evt:Event) : void {
	var sourceBMP:Bitmap = evt.currentTarget.loader.content as Bitmap;
	var outputBMP:Bitmap = new Bitmap(new BitmapData (sourceBMP.width*2 + 10, sourceBMP.height*2 + 10), "auto", true);
 
	var sourceRect:Rectangle = new Rectangle(0,0,sourceBMP.width, sourceBMP.height);
 
	var blueTransform:ColorTransform = new ColorTransform(1,1,10);
	var yellowTransform:ColorTransform = new ColorTransform(10,10,1);
	var greenTransform:ColorTransform = new ColorTransform(1,10,1);
	var redTransform:ColorTransform = new ColorTransform(10,1,1);
 
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(0,0));
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(0, sourceBMP.height + 10));
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(sourceBMP.width + 10, 0));
	outputBMP.bitmapData.copyPixels(sourceBMP.bitmapData, sourceRect, new Point(sourceBMP.width + 10, sourceBMP.height + 10));
 
	outputBMP.bitmapData.colorTransform(new Rectangle(0,0, sourceBMP.width, sourceBMP.height), blueTransform);
	outputBMP.bitmapData.colorTransform(new Rectangle(sourceBMP.width+10, 0, sourceBMP.width, sourceBMP.height), yellowTransform);
	outputBMP.bitmapData.colorTransform(new Rectangle(0,sourceBMP.height + 10, sourceBMP.width, sourceBMP.height), redTransform);
	outputBMP.bitmapData.colorTransform(new Rectangle(sourceBMP.width+10,sourceBMP.height+10, sourceBMP.width, sourceBMP.height), greenTransform);
 
	var ratio:Number = outputBMP.width / outputBMP.height;
	var sourceRatio:Number = sourceBMP.width / sourceBMP.height;
	sourceBMP.width = 200;
	sourceBMP.height = 200/ratio;
 
if (outputPanel.width > outputPanel.height) {
	outputBMP.height = outputPanel.height - 100;
	outputBMP.width = outputBMP.height * ratio;
}
else {
	outputBMP.width = outputPanel.width - 50;
	outputBMP.height = outputBMP.width / ratio;
}
 
	var outputContainer:UIComponent = new UIComponent();
	var sourceContainer:UIComponent = new UIComponent();
	var arrowContainer:UIComponent = new UIComponent();
 
	sourceContainer.width = sourceBMP.width;
	sourceContainer.height = sourceBMP.height;
 
	outputContainer.width = outputBMP.width;
	outputContainer.height = outputBMP.height;
 
	arrowContainer.width = 10;
	arrowContainer.height = 40;
 
	sourceContainer.addChild(sourceBMP);
	arrowContainer.addChild(drawArrow());
	outputContainer.addChild(outputBMP);
 
	outputPanel.removeAllChildren();
 
	outputPanel.addChild(sourceContainer);
	outputPanel.addChild(arrowContainer);
	outputPanel.addChild(outputContainer);
}
 
public function drawArrow () : Sprite {
	var targetSprite:Sprite = new Sprite();
	targetSprite.graphics.beginFill(0x000000);
	targetSprite.graphics.lineTo(10,20);
	targetSprite.graphics.lineTo(0,40);
	targetSprite.graphics.lineTo(0,0);
	targetSprite.graphics.endFill();	
return targetSprite;
}
]]>
</mx:Script>
<mx:Button id="browseButton" label="Browse for an image" right="10" top="10" click="handleBrowseClick();"/>
<mx:TextInput id="fileName" right="166" top="10"/>
<mx:Label text="Warholizer" fontWeight="bold" fontSize="17" left="7" top="6"/>
<mx:Panel layout="horizontal" bottom="10" right="10" left="10" top="41" id="outputPanel" clipContent="true" title="Output" horizontalAlign="center" verticalAlign="middle">
</mx:Panel>
</mx:Application>

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.

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.

Example 1:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”329″ height=”427″>

<mx:Label y=”34″ text=”X rotation” horizontalCenter=”0″/>
<mx:Label y=”80″ text=”Y rotation” horizontalCenter=”0″/>
<mx:Label y=”126″ text=”Z rotation” horizontalCenter=”0″/>
<mx:Label y=”167″ text=”Z position” horizontalCenter=”0″/>

<mx:HSlider y=”179″ id=”zPos” value=”0″ minimum=”-50″ maximum=”50″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”46″ id=”rotX” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”92″ id=”rotY” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”138″ id=”rotZ” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>

<mx:Image rotationX=”{rotX.value}” rotationY=”{rotY.value}” rotationZ=”{rotZ.value}” z=”{zPos.value}”
y=”233″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage” scaleContent=”true” autoLoad=”true” horizontalCenter=”0″>
<mx:source>http://farm4.static.flickr.com/3136/2412535804_6fccd7a155.jpg</mx:source>
</mx:Image>

</mx:Application>

Example 2:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”329″ height=”427″>

<mx:Label y=”34″ text=”X rotation” horizontalCenter=”0″/>
<mx:Label y=”80″ text=”Y rotation” horizontalCenter=”0″/>
<mx:Label y=”126″ text=”Z rotation” horizontalCenter=”0″/>
<mx:Label y=”167″ text=”Z position” horizontalCenter=”0″/>

<mx:HSlider y=”179″ id=”zPos” value=”0″ minimum=”-50″ maximum=”50″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”46″ id=”rotX” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”92″ id=”rotY” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>
<mx:HSlider y=”138″ id=”rotZ” value=”0″ minimum=”-90″ maximum=”90″ horizontalCenter=”0″ liveDragging=”true”/>

<mx:Container id=”imageStack” width=”182″ height=”138″ y=”228″ rotationX=”{rotX.value}” rotationY=”{rotY.value}” rotationZ=”{rotZ.value}” z=”{zPos.value}”
horizontalCenter=”0″>
<mx:Image z=”50″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage1″ scaleContent=”true” autoLoad=”true”>
<mx:source>http://farm3.static.flickr.com/2033/2411743383_38aa13de89.jpg</mx:source>
</mx:Image>
<mx:Image z=”0″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage2″ scaleContent=”true” autoLoad=”true”>
<mx:source>http://farm4.static.flickr.com/3282/2411740475_d6a44c913b.jpg</mx:source>
</mx:Image>
<mx:Image z=”-50″ width=”182″ height=”138″ themeColor=”#FFFFFF” id=”myImage3″ scaleContent=”true” autoLoad=”true”>
<mx:source>http://farm4.static.flickr.com/3136/2412535804_6fccd7a155.jpg</mx:source>
</mx:Image>
</mx:Container>

</mx:Application>

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

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