Yahoo! Flash(R) Blog

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!

Building Flash Desktop Apps with Yahoo Widgets!

You may already know that you can develop cool desktop applications with the Yahoo Widgets SDK. With the 4.5 release of the SDK, these applications can now be built in Flash. To help you get started, I wrote an article (complete with examples) that demonstrates how you can leverage some of our Flash tools to rapidly develop Flash Desktop Applications with Yahoo! Widgets.

This article explains how you can use the Yahoo! Widget engine to turn your Flash program into a desktop application. Additionally, you will see examples built with The Badge Kit and the ASTRA Component Library. After reading, you should be fully prepared to build your own Widgets. Go give it a read and start building Flash Widgets today.

Find conversations: bloglines | technorati

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

ASTRA 1.1.2 Maintenance Release

We know you’re working with and enjoying the Flash components that we released in ASTRA 1.1 back in January. Over on the ydn_flash mailing list, we’ve been answering questions about the components and listening carefully for feature requests and bug reports. Currently, we’re waist deep in development for ASTRA 1.2, and we’re about to begin adding polish before the big release in a month or two. Until then, we want to ensure that you’re working with some of our latest battle-hardened code. Please drop by the Yahoo! Flash Developer Center to pick up ASTRA 1.1.2.

As with the previous maintenance release, there are no new components to introduce in ASTRA 1.1.2. Instead, take a look at the list of bug fixes straight from the release notes:

Charts

• Bug fix: Chart components change the original data passed to dataProvider
• Bug fix: Larger dataprovider with auto-detected category names causes error
• Bug fix: Hiding axis labels causes runtime error
• Bug fix: If TimeAxis has no data, it can’t calculate bounds

Tree

• Bug fixes in LeafNode and TreeCellRenderer.

All users are encouraged to upgrade. You can download the package for the ASTRA Flash components on the Yahoo! Flash Developer Center right now!

Find conversations: bloglines | technorati

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

AS3 Maps Update

A couple days ago, we pushed out an updated version of the AS3 Maps API. Here’s what Zach Graves, the lead developer of the component, has to say about it:

Nearly a month has passed since we launched the ActionScript 3 Maps API and since then we’ve received a ton of great feedback on the component, along with some awesome applications utilizing the API. Now we are rolling out an update with some important bug fixes and updates:

• New: YahooMap constructor syntax.
• New: Polyline overlay now has a geodesic flag.

• Update: Overlay.invalidate method renamed to Overlay.destroy
• Update: Improved event flow for mouse events on the map.

• Bug fix: Dynamic map insertion issue fixed.
• Bug fix: Marker maxZoom & minZoom properties fixed.
• Bug fix: Event.MOUSE_LEAVE event stops panning.
• Bug fix: aerial copyright duplication fixed.
• Bug fix: Fixed issue with the latlon property of YahooMap mouse events being incorrect in Flex apps.
• Bug fix: Updated LocalSearch dphone & phone properties.
• Bug fix: LocalSearch categories/rating filters arguments fixed.
• Bug fix: setZoomRange and getZoomRange methods returned incorrect values.
• Bug fix: TrafficSearch failure event incorrectly dispatched when there are zero incidents.

With this update, we’ve also added a few new examples to our developer center, including a demonstration of how to draw geodesic polylines, create custom markers and overlays, and a sample weather map application.

Also, if you missed the news last week, we have also updated our map tile data with over 12,000 new neighborhoods in 300 cities. With this new data, our expanding international coverage and some slick AS3 Maps—you’re guaranteed a great mapping experience in your applications. So head over to the Yahoo! Flash Developer Center and pick up the update.

We have more fun stuff coming, including a Flash component (for now, see Josh Tynjala’s post on how to use the current component in Flash). Stay tuned for more updates!

Thanks, Zach!

Find conversations: bloglines | technorati

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

Announcing ASTRA 1.1.1

Last month, we released version 1.1 of the Yahoo! ASTRA libraries for Flash and Flex. Since then, we’ve received a ton of great feedback that has led to some important bug fixes and improvements. No critical bugs were encountered, but we’ve committed a reasonable number of changes to make a maintenance release worthwhile. Please drop by the Yahoo! Flash Developer Center to pick up ASTRA 1.1.1.

Being a maintenance release, there are no new components to introduce in ASTRA 1.1.1. Instead, take a look at the list of bug fixes and enhancements straight from the release notes:

AlertManager (Flash)

• Bug fix: Alert dialog lost focus if the user selected the text and then hit the tab key.

Charts (Flash)

• Improved animation and invalidation of markers.
• Bug fix: Setting axis maximum less than the value of an origin-based marker (column, bar) hides the marker.
• Bug fix: With large data sets, line charts are displayed offset from the left, which hides some data on the right
• Bug fix: Axis displays improperly when all items have the same value.
• Bug fix: Infinite loop when calculating minimum and maximum values in some cases.
• Bug fix: PieChart displays the wrong category when values are primitive and equal.

MenuBar (Flash)

• Bug fix: Selected menubar button lost focus if it was toggled very quickly with keyboard shortcuts.
• Bug fix: Skin conflicts between Menu and MenuBar.

TabBar (Flash)

• Bug fix: Styles like textFormat are not passed through to tabs.
• Bug fix: focusIndex setter tries to access buttons before they are created.

AutoCompleteManager (Flex)

• New events
• Added API for adjusting minimum disk space requirements
• Bug fix: caret bug when changing selection of completion dropdown
• Bug fix: itemToLabel bug on certain types of entries
• Bug fix: loopSelection quirkiness

All users are encouraged to upgrade. Packages for the ASTRA Flash components and the ASTRA Flex components are available for download immediately on the Yahoo! Flash Developer Center.

Find conversations: bloglines | technorati

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

AS3 Maps: Flick-able and Spinnable

The Yahoo! AS3 Maps API is barely a day old (well, alright, maybe some lucky folks got their hands on it a little earlier), and we are already seeing some seriously cool apps. An example of what can be done with this new API has been created by Jonathan New and Benjamin Halstead, our fellow Yahoos. They built a cool flick-able and rotable map interface which won the most fun hack award for our internal Q2/07 Hack Day. You can check out their application here. Give it spin—literally! Toss the map around and shift drag to rotate it around the center.

If you are reading this blog, you are probably a Flex or ActionScript developer, which means only one thing: Yahoo! AS3 Maps is a must have! We have prepared screencasts, examples and a complete documentation to get you started. Give it a test drive now. We look forward to your feedback.

(Special thanks to Ben and Jon for building an awesome map demo, and to Jeremy Johnstone for the photo)

Find conversations: bloglines | technorati

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

ActionScript 3 Maps API: Y3K Compliant

Good news, everyone! Although we are still not quite ready to unveil the “what-if machine” or teach the toaster to feel love (or stop putting Futurama references everywhere), today we are bringing you something just as cool and way more relevant. That’s right, folks: it’s the ActionScript 3 Maps API. Eagerly awaited and now available for immediate download on Yahoo! Flash Developer Center, the Maps API is an incredibly powerful map engine with multiple embeddable tools that make it truly universal. From local searches to custom markers, the API covers it all, and does that in a native AS3 component that’s less than 30 kilobytes in size (that’s smaller than about 4 map tiles.) You can use it in the Flex Builder, or with the standalone mxmlc compiler (which is nice and free) — a Flash version will follow shortly.

So don’t spend another minute without it: head on over to the Flash Developer Center and grab a copy (though make sure to read the license agreement before you do). We’ve prepared some screencasts, detailed documentation and a bunch of great examples to get you started. A whole world of rich map-enabled applications is waiting: and though it may not be the 31st century just yet, with Yahoo!’s AS3 Maps, you’ll definitely be ahead of your time.

Find conversations: bloglines | technorati

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

ASTRA Galore: New Flash and Flex Components

To paraphrase Mr. Rogers, “It’s a wonderful day in the Flash neighborhood!”. There’s nothing make-believe about this day, though, so allow us to don our cardigans and fill you in. Our ASTRA library of components has just been updated with three new Flash components and seven (yeah, we are serious about this) new Flex components, as well as some important updates to the existing ones. Here’s the lowdown:

New Flash components:

• AlertManager — a user interface component that creates alert windows and manages their queue.
• AudioPlayback — a set of controls for audio playback.
• MenuBar — a component that renders hierarchical data as a row of buttons with nested menus (using the Menu component)

On the Flex front, we have:

• AutoCompleteManager is a component that manages a set of input controls, popping up suggestions when a user types into one of the fields. Instead of replacing TextInput fields with a specific AutoComplete control, you can simply point the manager to one or more TextInputs, and you’ll get a slick pop-up or auto-fill interaction.
• Color Pickers:
  • ColorPlaneAndSliderPicker is a user interface component that allows the user to pick a color value. It combines a one-dimensional color slider with a two-dimensional color plane.
  • ColorSliderPicker is a user interface component for Flex that allows the user to pick a color value. It combines a set of sliders where each slider represents a component of a colorspace. For example, a ColorSliderPicker displaying an RGB color includes a red slider, a green slider, and a blue slider.
  • DropDownColorPicker is a user interface component for Flex that allows the user to pick a color value. Similar to the standard Flex ColorPicker control, the DropDownColorPicker also gives the developer the ability to completely change the dropdown control to give the user a variety of color views.
• IPv4AddressInput is a user interface component for Flex that allows the user to input an Internet Protocol version 4 address. This control includes a field for each separate byte and full keyboard navigation.
• TimeInput is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats.
• TimeStepper is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats. Up and down buttons allow the user to increase or decrease the currently selected field.

Among updates to the existing components:

• The Tree component has been updated with new functionality that makes it much easier to change node icons and control branch nodes (see examples).
• The Charts component now has animation, some adjustments to the PieChart live preview, and several bug fixes.

Head right over to the 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 of this goodness in the ydn-flash group. King Friday is waiting!

Find conversations: bloglines | technorati

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

Hello, My Name Is Badge Kit

Have we seemed a bit quiet lately? Not without reason of course–we’ve been busy working on a great new piece of software for you folks. Have you heard of badges? They’re those little widgets all the cool kids have on their sites, used to display stuff in a compact and fun way. Yahoo! offers a number of badges you can easily grab and place on your site such as OMG and Answers…but what if those just aren’t good enough? Well, then it’s time to make your own!

That’s why we’ve been working to create the Badge Kit, the quick and easy tool for creating badges and widgets for deployment on the web and beyond. We want to make it easier to create badges. You don’t have to be an AJAX or Flash wizard to create a badge with our kit, all you need to do is write some simple XML. The result is a lightweight Flash badge that can be customized and placed on your site with minimal effort. That means you get all the benefits of a sleek, flashy interface without all the hard work.

With the Badge Kit, you instantly have access to the Flash CS3 components, you can integrate filters and transitions, and can even use the new ASTRA library. Yep, we mean those ASTRA components such as AutoComplete, Tree, and Charts can be used without a line of scripting. In fact, most any third-party Flash CS3 component can be used in the Badge Kit–all with simple, declarative markup similar to Flex.

Coupled with the newest version of the Yahoo! Widget Engine, you can also turn your badge into a Yahoo! Widget. Using the artist formerly known as Konfabulator, your fancy little badge can become a fun and informative widget on someone’s desktop.

This is a beta release, and we feel confident in sharing it with you all. Heck, we’re proud of it. We think this is a step in the right direction for the new Yahoo!. Being open-source, you get to see the inner workings, and you can even extend and optimize the kit for your own uses. We’ve got big plans for some great features, but why not get started now?

We want you to know that this is the the same kit we’re using here at home, so expect some innovative and fun badges from the various properties at Yahoo! very soon. Note that we’ve already got a plethora of open web service APIs, including Yahoo! Search and Flickr, which you’re free to use to create a badge. We hope you’ll use the Badge Kit to create a unique badge of your own, and share it with the community.

Try out the Badge Kit!

Find conversations: bloglines | technorati

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