Yahoo! Flash(R) Blog

Yahoo! Maps Example: Collaboration Using Blaze DS

Adobe’s Christophe Coenraets recently wrote an article for Adobe Developer Connection titled Yahoo! Maps collaboration using Flex and BlazeDS. It features an example Flex application built around the Yahoo! Maps API for ActionScript 3. Using Blaze DS, the application keeps the map view synchronized between multiple clients. Users can even draw on the map and chat in a collaborative environment.

Very cool! Great example, Christophe.

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!

Yahoo! and Flex: Feel Good In Your Own Skin

Have you ever used Flex and felt that the default Flex component skin was a little too utilitarian, lacking just a bit in the visual appeal and shiny disposition departments? Well, allow us to fix that problem for you. Two of our Flash and UI gurus, Joe Magnani and Jeff Bennett of the Media Innovation Group, have just developed a beautiful new skin for all of the default Flex components. The skin (which can be seen here) matches the look and style of UI components used throughout Yahoo! and balances the outward glossiness with some serious usability chops. Naturally, we are making it available to all of you under the very liberal BSD license — which does mean that you can use it, modify it, and distribute it to your heart’s content.

Check out Jeff’s intro to developing your own skins for Flex components, and then grab the Yahoo! Flex Skin and use it in a Flex app! And when you do, drop us a note — we love to hear from you!

Find conversations: bloglines | technorati

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

Learning Flex at Yahoo!

As you are probably aware, we have a web version of Yahoo! Messenger that was built with Adobe Flex. A little Flex magic also powers Yahoo! Maps. With these highly-visible projects using Flex, it’s not surprising that many Yahoo! developers frequently contact the Flash Platform team to soak up our Flex knowledge and learn more about this technology. To help foster the internal Flex community here, and to ensure that our developers have the right tools and skills, I teach a Flex class that covers material from the very basics of MXML all the way into some more advanced areas like custom component development. Typically, these sessions involve a lot of live coding with open Q&A between myself and the class as we explore Flex and its many features.

The session starts with a high-level look at the most obvious question, “What is Flex?” I discuss the Flex ecosystem, including ActionScript 3, the core Flex framework classes, and the tools like Flex Builder and the compilers in the free Flex SDK. With a foundation established, I move a bit more low-level as I introduce MXML. To avoid the inevitable questions later, I immediately explain the relationship between MXML and ActionScript. We take a look at some MXML code for a simple Button component, and then I show the ActionScript equivalent.

To start with MXML and Flex Builder, I begin by showing the Design View, adding components and manipulating properties in both code and visually. I try to cover the basics of properties, styles, and events, along with using a <mx:Script/> block to add functions and communicate between MXML and ActionScript. Next, we take a look at different layout modes, constraints, and positioning. Containers are an obvious subject to cover after layout, and I explain concepts like deferred instantiation and creation policies.

Before a short break, I typically give the class a look at how Flex projects are built and run. We see the Flex Builder debugger in action, and take note of the different debug and release SWFs. I explain the directory structure, including the bin and html-template directories, and I show how to customize the output. Finally, now that the class has gained a broader understanding of MXML, I show them the -keep compiler argument, and we dive into the generated code to see the MXML-to-ActionScript relationship in more detail.

After the break, when I’ve had a moment to grab something to drink, I start talking about loading external data. We use HTTPService to load simple text files and then we graduate to XML data. At the same time, I introduce binding and show how to use the lastResult versus using the service’s ResultEvent.RESULT with ActionScript. We play with XMLLists in the List component before I change the focus a bit to loading graphical assets like images, and we look at various ways to embed data in a Flex project.

We’re up to speed on most of the basics at this point. Getting into more intermediate material, I show how to use States and Transitions in MXML. The most obvious example to demonstrate states is a search form. We add a button to toggle advanced options, and I show how to add more items to the form with a new State. To make it a bit more interesting, I add a couple Transitions to resize the form as the new items are added or removed.

Using the same example for the next topic, I show how to make the search form into a simple MXML component. We take a look at XML namespaces and how they relate to ActionScript packages. I explain how the mx namespace works (because it isn’t declared with a package), and I mention how this relates to SWC files and Flex Library projects. This quick example is finished by placing two of our custom SearchForm components into the main application.

Finally, if I have time left, I give a short introduction to building ActionScript components for Flex. For this section, I have a set of slides, since there generally isn’t enough time for live coding anymore. Often, this material can be a bit advanced for some of the beginners, so the slides offer something to look at again later when they’re ready. The first look at components is the lifecycle from constructor to garbage collection. I spend time on each of several high-level steps. There’s a big focus on the invalidation and validation model, and I try to introduce the complex measurement system with a look at how a component and its parent communicate to determine the component’s size.

Slides from Flex Components Introduction

Ideally, I’d like to teach a separate class on Flex component development, since I have a lot more material that I can cover. Some live coding would make much of the component lifecycle a bit clearer, I think, and building a full component with styles, events, and other details requires a decent chunk of time. Additionally, I have more slides that explain how Lists and other components that use item renderers can be built, and that’s certainly a more advanced topic that would fit best in a component-focused class.

By the end of the class, the attendees are overflowing with new Flex knowledge, and all of them leave with a happy, “Thank you!” A few may have some more advanced questions if they’ve already begun some work with Flex. As I mentioned, I try to make my Custom Flex Components Slides available to the attendees for download afterwards. I know many folks like to look over slides at a later time to reacquaint themselves with the material. Feel free to download them yourself if you’d like a closer look at the information I present.

Find conversations: bloglines | technorati

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

Yahoo! Pipes + Flash: Smokin’ Good

You’ve probably heard the buzz about Yahoo! Pipes, a powerful and easy tool for mashing up data from across the Internet. But did you know that Pipes is one of Yahoo!’s Flash-friendly properties? Our buddies at Pipes have generously deployed an open crossdomain policy file, giving all Flash and Flex developers access to the raw Pipes output. Just like with Flickr (see Allen’s post), there are no security worries, no roadblocks, and no limits to what you can do with the Pipes data. Pipes can even be your proxy for grabbing data from places that aren’t themselves accessible using Flash (although some sources may prevent Pipes from accessing their data—you’ll want to make sure a particular data source works with Pipes before using it.)

If you haven’t tried Pipes, definitely check it out. It has an intuitive visual interface that allows you to import and manipulate data from across the web, with zero coding skills necessary! Want to mash up all your favorite RSS feeds into a single super-feed? How about checking Flickr images against recent news articles? Whatever you create, you can export to your preferred format, ready to view in a reader or, as shown below, in your own interface built with Flash or Flex.

Once you create a pipe or try one of the many already available, you are just a couple of steps away from using that data in Flash. In the example below, we are using a simple pipe that aggregates some news feeds. First, let’s run the pipe and choose More Options > Get as RSS.

Notice that the URL you get is of the form http://pipes.yahoo.com/pipes/pipe.run?somepipe&_render=rss. That’s almost the URL you’ll use to retrieve the XML data, but not quite. For security purposes, most of Yahoo! APIs use *.yahooapis.com as the API entrypoint. So once you replace pipes.yahoo.com with pipes.yahooapis.com in that URL, you’re in business (note that there’s no crossdomain on pipes.yahoo.com, but there is one on pipes.yahooapis.com—that’s what’s working the magic.) Now, if your pipe has any parameters you need to include, just build out the URL as needed and send it along.

Here’s a really simple example in Flex that uses the pipe described above.

Please install Flash 9 to see this example.

Check out the source here.

Find conversations: bloglines | technorati

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