Accuweather using Flash Lite

The anatomy of a widget

Steve Mummey and Carl Schaad at AccuWeather were commissioned to hook Nokia’s N60 series users up to the forecasts via Flash Lite. Here’s how they did it.

AccuWeather is a US-based international weather forecast provider. Steve Mummey (left, top) is the company’s new media creative genius, playing a key role in AccuWeather’s development through product creation, coding and Flash development. Carl Schaad (left, bottom), AccuWeather’s new media creative director, joined in 1990 as a newspaper production artist. For more, visit www.accuweather.com.

Flash Lite widget

With the in-house title of Flash Lite Widget Development, the project focused on the development of a weather widget to reside on Nokia Series 60 devices. The widget was to be available via the Nokia Download! Service and developed using Adobe Flash Lite.

“AccuWeather and Nokia have enjoyed a rich partnership, and our objective with this project was to create new opportunities for users of the N60 series to connect with the weather via Flash Lite,” says Steve. “Flash Lite’s mobile runtime engine gave us a dynamic and robust environment for displaying and communicating weather data.” Below, Steve outlines the project, before Carl walks you through the build.

Media

• Flash CS3
• Device Central CS3
• Illustrator CS3
• Photoshop CS3
• Dreamweaver CS3
• KuneriLite
• Nokia E61
• Nokia N95
• Apple MacBook Pro 17"
• Dell Latitude D800

The AccuWeather.com weather widget was conceived as a Flash Lite application that would enable users to access a variety of weather information, including warnings about severe weather. Our weather widget was designed to improve on other available weather applications in a number of ways: a focus on severe weather and our warning capabilities; weather data that encompasses a 15-day time frame; and best use of current technology in Adobe Flash Lite to provide an elegant and easy mobile experience.

Early project requirements included the need to build support for multiple languages, design for a specific device resolution that could change from portrait to landscape mode, support multiple worldwide locations, seamlessly incorporate advertising while maintaining a great user experience – and, of course, build a robust weather experience.

Steve defines the vision

Most widgets and applications in this space use a menu system that requires the user to navigate to content through multiple selections. We wanted to develop a content-driven application that would present the user with weather information quickly. Our initial brainstorm looked at the navigation challenge, our content set and language support. The initial prototypes focused on solutions for these challenges: how would users be alerted to severe weather? How would they move from product to product and location to location? And how much of the user interface could be graphical, to minimise translation issues later?

The concept was developed and built with the Nokia N95 keypad in mind. However, it can work on any Nokia Series 60 device that has a 320x240 or 240x320 screen size. To solve navigation challenges, we determined that users would be able to navigate between locations using the keypad. GPS support was built in, and the current location via GPS would always be set to the 9 on the keypad.

To handle slight display differences between handsets, we built an iconic UI that users could move through with the directional keys. We devised a blue and orange colour scheme, where the ‘off’ state would be orange and the ‘on’ state would be blue. In order to incorporate a full range of content, we had several weather content challenges that we had to address. Because this application is global, we were faced with an immediate issue: how would we handle severe weather warnings? In the United States, the government issues official weather warnings that AccuWeather.com can pass along to users via a variety of media, including widgets. But these warnings don’t exist in many other countries. Here AccuWeather. com developed a product to bridge this gap – AccuWeather.com Alerts.

We leveraged worldwide forecasting models to create a variety of alerts that would notify of the possibility of various severe weather events, such as lightning, heavy rain, snow, ice, high winds and dense fog.

Bar graph representation was used to convey the severe weather potential while avoiding potential translation pitfalls. We took a similar approach with our calendar and graph content. Users can easily see trends over a 15-day period and identify potential problem areas. Another challenge was the inclusion of map content. Radar information is difficult to come by outside of North America, but another AccuWeather.com project – the New Media Image Generation System (NMIGS) – was being developed in parallel. This project enabled us to create dynamic highresolution satellite imagery for any place on Earth. With these graphics now available, we built a toggle in the widget to provide radar data if available and otherwise show satellite imagery.”

Carl on bringing function to form

“After an initial process of concepts and approvals, our overall goals were better defined. I built artwork in Illustrator and Adobe Photoshop and provided Steve with graphic assets for the UI as transparent PNG files and JPEG files. Initially, we had to be very conscious of the file size of the application. For example, AccuWeather.com has a weather icon set that defines 40 distinct types of weather, so we have to be conscious of the file size of finished artwork.

While I developed the artwork, Steve worked on the data feed. We decided that the application would retrieve all of the data it needed for all of the locations upon a single request. That’s a big data pull – up to nine locations, with 15 days and 15 hours of forecasts and current conditions. Steve managed to get the data feed down to 12-15kb. By requesting all the information up front, we added some time to the initial connection, but switching between locations would be instantaneous and seamless.

Because one of the requirements of the device was to support both portrait and landscape, we decided to make the content ‘cell’ consistent within both views and manipulate the navigation to better use the space. This solved several issues: there would be a consistent UI experience between orientations, additional assets would not have to be developed, and we could keep memory requirements down for file size and processor speed.

A great advantage for the team was the easy back-and-forth on development and design, with insights from both sides allowing us to create a rich user experience while keeping file size down. Using Illustrator – a vector environment – enabled us to return to various elements and scale and manipulate them easily. The results would then be taken back into Photoshop and incorporated into comps that mimicked the final widget experience before being exported as needed.

Adobe Flash Lite turned out to be a perfect platform for the in-house development of our first mobile application. The authoring tools worked exactly the same way as their fixed web counterparts, which we’d been working with for years so we were able to begin developing with virtually no learning curve. Since initial soft launch, the widget has been very well received by both Nokia and users alike. Our exploration and use of mobile development technologies such as Flash Lite is just beginning, and we continue to innovate to bring weather content to all users wherever and however they want to receive it.

Rate This