Yahoo! Flash (R) Blog

Have We Got a Job For You

Why, yes, we do have a job for you. Glad you asked.

See that lonely, empty workplace in the photo? Yeah, that one, complete with a comfy chair, 24″ monitor and unlimited free coffee that gives Starbucks a run for its money? Well, it’s located in the aptly-named Sunnyvale, CA and it would like nothing more than to be filled by an incredibly talented, ambitious, and slightly crazy Flash/Flex engineer.

That’s right, Yahoo!’s Flash Platform team is on the prowl to find the best Flash and Flex developer the world has ever seen (alright, I am calling poetic license and hyperbole on this one, but it’s pretty close to truth). We are looking for someone who can be casually described as ‘omniscient’, who often has pleasant dreams about Flash and Flex, and who is equally comfortable presenting his or her work to a hundred colleagues or ten executives.

Some people are quite happy being code monkeys (there’s even a song written about them), but that’s not who we are looking for. “Nice” words like ‘drone’, ‘cog’ and ‘borg’ need not apply: we are in search of a teammate, a fierce and argumentative thinker and doer, someone who takes on projects before they are offered and really owns them. In other words, we are looking for you.

And since it’s you we are looking for, now is a very good time to go read the official job posting and apply for the position!

And hurry up, our hundreds of millions of users are waiting.

* The workplace depicted above is for illustration purposes only. Should you get this job, your workplace will be even better, because it won’t have pictures of people you don’t know, and it’ll be decorated by you and you alone.

Find conversations: bloglines | technorati

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

Connect the Dots: Astra Line Charts

Our recent Astra 1.2 update included a few new styles on the LineChart component. They allow you to customize how the lines are drawn between markers on the LineChart, and I thought I’d throw together a couple quick examples to demonstrate how they work and what sort of interesting things you can do with them.

Working with Discontinuous Data

With previous versions of the line charts, if you had a data provider with null or otherwise invalid points, the line ended before the invalid point and restarted at the next valid point. In 1.2 a new style was added called connectDiscontinuousPoints. When this style is set to true (the default is false, matching the old behavior), a dashed line is drawn to “connect” the points surrounding invalid data. This is best illustrated in the example below:

The following source code customizes the chart above. The chart in this example is created by simply dragging it on stage in Flash CS3.

import com.yahoo.astra.fl.charts.series.LineSeries;

var line:LineSeries = new LineSeries();
//notice that the data provider has several null values
line.dataProvider = [14, 8, null, null, 18, 6, null, 12, 24];
//we want a continuous line, so we'll connect discontinuous points with a dashed line
line.setStyle("connectDiscontinuousPoints", true);

//pass the LineSeries to the chart
chart.dataProvider = [line];

//the labels on the x-axis
chart.categoryNames = [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008];

Notice that the LineSeries dataProvider property contains several null values. In all cases, the dashed “discontinuous” line starts at the last valid point and continues to the next valid point.

Another style, discontinuousDashLength allows us to customize the appearance of the dashed line between discontinuous points by setting the length of each dash, in pixels. This value is easy to set:

line.setStyle("discontinuousDashLength", 10);

To view the complete example FLA, please download discontinuousdata.zip.

Use a Line Chart to create a Scatter Chart

A scatter chart uses two variables to display points on a graph. One variable determines the position on the horizontal axis and the other determines the position on the vertical axis. Both axes typically represent numeric values. The LineChart component in Astra 1.2 isn’t much different. In a LineChart, each point is connected by a line, but points are not connected on a scatter chart. Additionally, the default horizontal axis on a LineChart is a CategoryAxis, but we need numeric values. By making a couple simple alterations, we can turn a standard LineChart component into a scatter chart very easily:

The following source code is used to alter the LineChart above to make it more like a scatter chart. Again, I simply dragged a LineChart component on stage rather than instantiating it in ActionScript.

import com.yahoo.astra.fl.charts.*;
import com.yahoo.astra.fl.charts.series.*;
import flash.geom.Point;

var scatter:LineSeries = new LineSeries();
//some simple Point objects will populate the series, but any type will do
scatter.dataProvider = [new Point(10, 23), new Point(24, 46), new Point(82, 19), new Point(44, 45)];
//hide the lines
scatter.setStyle("connectPoints", false);

var scatter2:LineSeries = new LineSeries();
//some simple Point objects will populate the series, but any type will do
scatter2.dataProvider = [new Point(17, 67), new Point(55, 8), new Point(31, 14), new Point(5, 2), new Point(17, 50)];
//hide the lines
scatter2.setStyle("connectPoints", false);

//the horizontal axis should be a NumericAxis instead of the default CategoryAxis
var xAxis:NumericAxis = new NumericAxis();
chart.horizontalAxis = xAxis;

//pass the data to the chart and specify the fields that should be used for each axis
chart.dataProvider = [scatter, scatter2];
chart.horizontalField = "x";
chart.verticalField = "y";

//some simple styles to create the grid
chart.setStyle("showHorizontalAxisGridLines", true);
chart.setStyle("showHorizontalAxisTicks", true);

In the source code above, I create two LineSeries objects. For each series, I set the connectPoints style to false. Each data point within the series is of type flash.geom.Point, but any object will do as long as you specify the correct values on the chart’s horizontalField and verticalField properties.

The horizontalAxis gets replaced by a new NumericAxis object rather than the default CategoryAxis. I also customize the grid lines and ticks on the horizontal axis to match those of the vertical axis to display a grid.

One thing you might notice is that the mouse-over data tip displays the vertical axis value first, but many graphs typically read with the horizontal axis value first. This can be easily corrected by using a dataTipFunction to set custom data tip text.

To view the complete example FLA, please download scatterchart.zip.

Find conversations: bloglines | technorati

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

New and Updated Flash Components and ActionScript 3 Utilities in Yahoo! Astra 1.2

To borrow the favorite word of a certain Time Lord, “Fantastic!” The latest update to the Yahoo! Astra libraries for Flash, Flex and ActionScript is like a shiny new sonic screwdriver for your AS3 toolbox. Several existing components got some important updates, and we have a plethora of new layout containers for Flash CS3 that we hope will excite the RIA-building masses. Additionally, we’ve added the new Astra Utilities library with some excellent non-component extras that should come in handy. Don’t forget, it’s even bigger on the inside.

New Layout Containers added to the Flash Components:

• HBoxPane and VBoxPane are containers that arrange children in a horizontal row or vertical column.
• FlowPane is a container that arranges its children using a left-to-right flow similar to a document.
• TilePane is a container that arranges its children inside a grid of tiled rectangles.
• BorderPane is a container that arranges its children by constraining them to certain positions, such as a top header, bottom footer, left and right sidebars, and a stretching center content area.

New Utilities:

• Animation is a very lightweight tween engine with a simple API. Powers the animations in Charts and other Astra components.
• Layout provides the core infrastructure for adding layout containers to a UI control framework. Not a ready-made component, but an abstract set of classes and interfaces meant to be extended.

Among updates to the existing components and libraries:

• The Charts for Flash CS3 have received a healthy update, including support for legends, many enhancements to LineSeries, and several adjustments to styles that allow more flexibility.
• The MenuBar component fixed a bug with dataProvider resets and can now be explicitly sized rather than only fitting to the text size.
• The TabBar component can also be explicitly resized and there’s a new property that controls focus and selection behavior.
• The Yahoo! Maps Communication Kit for Flex has been removed from the Astra Web APIs package in favor of the official new ActionScript 3.0 API for Yahoo! Maps.
• The Aquarium example on the Flash Developer Center has been updated to use the updated components.

Ride the waves of time on over to the Yahoo! Flash Developer Center to read the documentation, check out the examples, and download the new builds. Don’t forget to tell us what you’ve done with all our components and libraries on the ydn-flash group.

Find conversations: bloglines | technorati

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