Yahoo! Flash (R) Blog

Good Will Hacking

It’s not your fault. It’s not your fault. It’s not your fault! It’s all ours, we swear. We started this thing, called a hack day, so that Yahoos could showcase their creative chops in a 24-hour long battle of code, written in multiple languages and on various platforms. Lots of the little projects showcased at hack days later became full-fledged products, and as time went on, more and more of us started participating. And then the whole thing just grew way too big for our shoes, and the next thing you know – we had to kick the doors off the hinges and open it to the public.

The first Open Hack Day, back in 2006, was a smashing success. Coders from all over the place converged on Yahoo! campus, for a day and a night full of code, music (Beck himself showed up to perform live for them!), pizza, beer, Red Bull, and conversation. Local TV stations had helicopters covering the event (okay, I am exaggerating, but they did send out correspondents), and the projects we saw come out of that Hack Day were simply mind-blowing. Wonderful prizes (a huge flat panel TV, among other things) were duly and deservedly awarded.

This year, we are going for an encore of what will hopefully become a long-standing tradition. And though we’ve seen quite a few Flash hacks in the last Hack Day, we always love to see more. So, if you believe you’ve got what it takes, and can take Friday, September the 12th off, get thee to http://www.hackday.org and apply at once (the event is invitation-only). Among all kinds of prizes, we are setting up a special “Best Flash Hack” prize, and who knows — you may be its lucky recipient! And though, just as last year, we are keeping the name of the artist who will perform for the lucky hackers on Friday night under wraps, let’s just say it’s going to be someone really cool!

To summarize:

What: Yahoo! Open Hack Day.
Where: Yahoo! Sunnyvale Campus.
When: September 12th, 8:00AM — September 13th, whenever, and don’t even think about sleeping that night.
How: By invitation only, apply at http://www.hackday.org

Find conversations: bloglines | technorati

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

Yahoo! Music API: Listen

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

Find conversations: bloglines | technorati

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

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!

360Flex Yahoo! API Session Screencast

This past Sunday, I delivered a hands-on session for the attendees of the 360Flex conference in San Jose, CA. I thought it would only be fair to share this session with the rest of you, so here it is, in its full H.264 glory.

The screencast was actually recorded in 750×420 resolution, so the small player above doesn’t quite do it justice. You can either click the ‘Full screen’ button in the player above, or (progressive) download the file onto your computer from here (MOV H.264, 378 Mb file size).

Later today, I will also post the code written during this session: just watch this post for updates!

Find conversations: bloglines | technorati

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

ASTRA 1.3 Release

Well, boys and girls, the time has come for an update to those lovely ASTRA components. This update fixes a few issues we’ve discovered through your valiant efforts and a whole lot of coffee.

It also introduces a fancy new CS3 component in the mix called Carousel. This is a highly reconfigurable component that lets you page through a small set of data, display it like a flat list (but with animation…), or even use it like a navigation control. Due to its ability to accept multiple types of layouts, the uses are endless.

In this Astra-Flex release:

AutoCompleteManager

• Bug fix: Custom labelFunction replacement
• Bug fix: Fixed error with custom data provider and autoFill set to true

In this Astra-Flash release:

Charts

• Added support for rotating axis labels. See new styles horizontalAxisLabelRotation and verticalAxisLabelRotation. The font used by the axis labels must be embedded for rotation to work.
• Added support for alternating fill colors between grid lines.
• Added support for marker labels on PieSeries. Default is percentage values. May be customized with labelFunction property.
• Added showAreaFill and areaFillAlpha properties to LineSeries. Allows the creation of an “area chart”. The color automatically matches the line, but the alpha may be used to create a contrast.
• Refactored axis code to seperate the axis from the axis renderer. Required minor API changes where some axis properties are now axis renderer styles. Also, all axis-related classes are now in the com.yahoo.astra.fl.charts.axes.* package. May require minor code changes to imports.
• New styles on CartesianChart include verticalAxisStyles, horizontalAxisStyles, verticalAxisGridLinesStyles, and horizontalAxisGridLinesStyles. These are complex Objects that contain all the style data to pass to the axis or grid lines renderers. Since the charts now support custom axis renderers, a way to pass in arbitrary styles not supported by the default renderers was needed.Additionally, new functions setVerticalAxisStyle(), setHorizontalAxisStyle(), setVerticalAxisGridLinesStyle() and setHorizontalAxisGridLinesStyle() allow developer to set individual styles on the axes and grid lines.Note: The old styles exposed on CartesianChart are still available in order to support legacy style code, but they should be considered deprecated. The deprecated styles may be removed in the future. Hypothetical new styles that are added in the future to the default renderers will likely be exposed only through the new complex style objects and the new style setter functions.
• New interfaces IStackingAxis and IStackedSeries provide support for stacking. NumericAxis and TimeAxis now support stacking with supported series as long as stackingEnabled is set to true on the axis.
• New Chart Types: StackedColumnChart and StackedBarChart.
• Bugfix: Series will throw an error if it redraws before massaging an Array of Number values with proper category data.

TabBar

• Added selectedTextFormat style.
• New Example: User Settings with TabBar Navigation.
• New Example: Search Form with Tabs.

Tree

• Bug fix: Enabled dynamic TextField resizing for tree cell labels.
• Bug fix: Corrected indexing issues in LeafNode.as

Why not head over to the Yahoo! Flash Developer Center and grab an updated copy of those Flash components or Flex components?

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!

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!

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!

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!

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!