Yahoo! Flash (R) Blog

Yes, Virginia, There is Compression in Flash

I’m in the process of developing a new hybrid component–a component which utilizes the Flash Player but via a JavaScript API–for YUI. This new component will take advantage of Flash’s native SharedObject functionality to store local data in a larger amount than is typically allowed by a cookie. By default this storage is up to 100kb. However, I found a way to store nearly half a megabyte in this space.

No, I didn’t have to request the user to allow 512kb of storage on their machine. And there was no magic or hackery involved. That’s because the space I took up on the hard drive was less than 100kb. I just took advantage of a little known feature in the Flash Player, allowing compression of data.
This feature is quietly tucked away inside of the ByteArray class–ByteArray.compress() and ByteArray.decompress().

Taking what was a half meg of JSON data over-the-wire and putting it into a SharedObject (which stores in binary) resulted in a huge savings already, about 60%. But compressing that data before storage resulted in a total of 80% savings.

I’ve still got some performance testing to do, as for all compression one must sacrifice processor cycles for storage space. But I feel pretty confident this will remain in the release version. So, either take this idea and run with it, or wait a bit for the next YUI release.

By the way, I also recently posted an article on the YUI Blog entitled Flash SOL: Persistent Data with Local SharedObjects. Thought I’d share it with you all, if you didn’t see it.

Find conversations: bloglines | technorati

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

The Knack to Rotating Device Fonts in Flash 10

In Flash Player 10, Adobe developers added a great new feature: the ability to rotate dynamic text generated using device fonts already present on the user’s machine, not the fonts embedded in the SWF. However, using this feature is a bit tricky, and we’ll describe two possible methods here.

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.

Continue reading The Knack to Rotating Device Fonts in Flash 10…

Find conversations: bloglines | technorati

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

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!

Rocking it at SXSWi

The Flash Platform team is representing at South by Southwest in Austin. No, we’re not playing in a band this year, though I do hear Tripp is a hell of a guitar player. We’re focused on SXSWi, where all the cool kids congregate to showcase cutting edge technology in the interactive realm. More Rock Band® than rock band.

I just finished speaking about accessibility in Flash and Flex applications. More accurately, I went over the steps to make components accessible, something the readers of this blog have heard me talk about at length. I demoed the usage of a screen reader, which, I was warned, was a dangerous endeavor. It went over pretty well, though, and I was able to show the difference between the the different bits of information you can send to a screen reader. Settling on the Astra Tree component, I added different properties to its accessibility implementation–such as Name, Value, State, and events–and discussed how each was important to make the component fully accessible.

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!

ASTRA Holiday Edition

It’s that time of year again. A time when spirits are high, and an unmistakable sense of well-being enters your heart. A time when a peaceful stillness fills the air, and carols can be heard, sung merrily in the distance.

That’s right, it’s time for an ASTRA bug release! Oh, for joy!

The Flash Platform team worked overtime on this one. Heck, we could even be seen on Thanksgiving, hacking code in between bites of Grandma’s pumpkin pie. We did everything we could to fix things that needed fixing, and add things that needed adding. And so, without further ado, we present to you, ASTRA 1.3.1.

Fixes and feature enhancements:

AlertManager
o   Added support for styling.

AudioPlayback:
o   Bug fix: scrubber would not work properly while large file downloads.

AutoComplete:
o   Bug fix: Fixed bug with ASTRA layout containers.
o   Made itemToLabel function public.

Menu:
o   Added support for styling.
o   Added accessibility placeholders.
o   Bug fix: Fixed bug with MenuEvent not sending out appropriate menu property.

MenuBar:
o   Added support for styling.
o   Bug fix: Fixed bug in which LivePreview was not showing properly in CS4 when component was dragged to stage.

Tree:
o   Bug fix: Fixed index overrun bug.
o   Bug fix: Fixed shifting selected item when opening and closing.

So grab a glass of eggnog and sit by the fire, and pick up the new ASTRA.

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!

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!