Yahoo! Flash (R) Blog

Here’s Looking at You, FlashForward

Last week, Yahoo! Flash Platform team attended the FlashForward 2008 conference in San Francisco. We had a wonderful time at the great variety of sessions and presentations, and had a few things of our own to show and tell.

In particular, we were at the FlashForward Job Fair, talking about all the great opportunities Yahoo! has for Flash and Flex developers. You can find a full list of the open positions at careers.yahoo.com.

We also dropped in on the end-of-conference Jam-Slam session, where we decided to go whimsical and throw some things at the audience. Well, not so much “things” of a “heavy steel ball” variety, but rather ideas, little snippets of Flash apps we thought would be incredibly cool to see built.  You’d be surprised how many good ideas one can fit into the two minutes of allotted time.

Although the presentation at the conference itself was without slides, I added some slides to it and re-recorded it for your entertainment. Here’s what we had to say:

The services and APIs mentioned in this little pep talk were: Yahoo! Pipes, Yahoo! Live, Yahoo! Maps AS3 API, Yahoo! Weather, Yahoo! Answers and Yahoo! Music. And of course, the links at the end of the talk lead you to our developer center and a sign-up page for the wonderful Open Hack Day (we’ll blog about it separately).

Find conversations: bloglines | technorati

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

All Your Base Are Belong To Us

 You’be probably heard of the many available SWF embed parameters, such as allowNetworking, wmode, allowScriptAccess, and of course height and width. But there a few less well-known ones that may be incredibly useful.

One of these optional attributes you can specify when embedding a SWF is named base. Adobe’s LiveDocs give the following description of the attribute:

base – Specifies the base directory or URL used to resolve relative path statements in ActionScript.

This is important when dealing with relative paths (URLs) in Flash. By default, the base URL of a SWF is its parent HTML page. This means if your SWF is loaded from another domain and has assets such as images or XML files, you’re in trouble.

Say, for instance, that yahoo.com loads a SWF ad from ads.com/car.swf. That SWF, in turn, tries to load “images/convertible.jpg”, using a relative path to an images directory that resides on ads.com. Given the default settings, this will not work, unless “yahoo.com/images/convertible.jpg” exists. To get around this, developers have often used absolute paths, such as “http://ads.com/images/convertible.jpg”. The base parameter solves this problem, allowing you to continue to use relative paths.

To allow relative paths, all you need to do is “reset” the base directory. You can even use base="." to mean “make all paths relative to the swf itself.”

Here’s an example of a full embed statement:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″
width=”500″
height=”300″
codebase=”http://active.macromedia.com/flash7/cabs/swflash.cab#version=9,0,2,8″>
<param name=”base” value=”.”></param>
<param name=”movie” value=”someSWF.swf”></param>
<param name=”play” value=”true”></param>
<embed base=”.” src=”someSWF.swf”
width=”500″ height=”300″ play=”true”
pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”>
</embed></object>

If you are fond of the popular SWFObject JavaScript library for embedding Flash content, here’s how to use the base parameter with it:

var swfobj = new SWFObject(value, “someSWF”, 500, 300, “9.0.28″, “#FFFFFF”);
swfobj.addParam(”base“, “.“);
swfobj.write(”swfDiv”);

Note that if you have a SWF that loads another SWF within itself, the base path of the loaded SWF will always be the loading SWF.

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!

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!