Making Components Work Together

Andrew Trice:

In this example, we'll create a Flex application that uses the Google Maps API for Flash, which communicates with the Google Street View API to create a seamless experience.

The Google Street View components are available directly in the Google Maps javascript API, however they are not directly available through the Flash API. Even though they aren't available directly in the Flash API, that doesn't mean that you can't use them together. Through ExternalInterface, you can still make those the two work together seamlessly.

Take a look at this example. Any time you click on the Flash-based map, the street view below it will update to show the location that you clicked on. Go ahead and try it out... If you click on an area that doesn't support street view, then you'll get a message stating that the panorama is not available.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.insideria.com/2008/12/making-separate-components-wor.html
• http://code.google.com/apis/maps/documentation/flash/
• http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay
• http://code.google.com/apis/maps/

IMAGE:

Making Things More Interactive

Andrew Trice

Notice that there are two things going on here... 1. Animate the opacity to semi-transparent 2. Animate the distance of the drop shadow Applying these two effects creates an illusion of depth within the application. It appears as though the object that you click on is lifted off of the plane of the application, and is dropped back onto the application when you release it. I hope this gives you a few ideas to help you make your own applications more interactive.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.insideria.com/2008/02/making-things-more-interactive.html

IMAGE:

FlexMonkey - Flex UI test

Busy, busy, busy work... black September for me.

FlexMonkey is a unit testing framework for Flex apps that provides for automating the testing of Flex UI functionality. FlexMonkey can record and play back Flex UI interactions, and generates ActionScript-based testing scripts that can easily be included within a continuous integration process. It uses the Flex Automation API and was created by adapting Adobe's sample application, AutoQuick.
See the Getting Started Guide for a quick overview of installing, recording, and running tests with FlexMonkey.
FlexMonkey has been donated to the Flex community by Gorilla Logic, who developed FlexMonkey because of their belief that only a monkey would develop code without being able to automate their unit testing.

Try Demo!

• View example in a new window

Resources:

• http://code.google.com/p/flexmonkey/

IMAGE:

Actionscript 3 Layout Organizers Examples and Source Code

www.somerandomdude.net Said:

A while back, I posted a basic example of layout organizers and layout organizers applied to video. I kept talking about how cool I considered this idea to be, yet I had yet to truly explain the idea and (more importantly) the source code for people to download. I wanted to make sure the code was at a good spot before releasing it; I believe that is now the case. You will find examples, the basic gist on how it works and some possible reasons why layout organizers may just make your life easier.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.somerandomdude.net/blog/flash/actionscript-3-layout-organizers-source-code/

IMAGE:

Customize DataGrid - (2)

Thanks Alex!

Thinking About Item Renderers(Strong recommended)

BackgroundColor Changes When Data Changes

• View example in a new window
• Download source code

Text Color and Styles in Item Renderers

• View example in a new window
• Download source code

Split Columns/Grouped Columns

• View example in a new window
• Download source code

Custom Header Renderers (ComboBox)

• View example in a new window
• Download source code

This ad just for leave blank. Take your eyes a rest.

Customize DataGrid - (1)

Thanks Alex!

Flex 3 DataGrid Footers

• View example in a new window
• Download source code

DataGrid Double-Click To Edit

• View example in a new window
• Download source code

Custom ArrayCollections, Adding New Items to DataGrid

• View example in a new window
• Download source code

Custom ILists, CheckBoxDataGrid, Merged Arrays

• View example in a new window
• Download source code

3D Charts Using PaperVision3D - By Andrew Trice

Andrew Trice wrote:

This example shows a really basic rotating 3D chart. There are two important things that it shows.

1) A three dimensional scatter plot.

2) A three dimensional line chart

The data points between the scatter plot and line chart are exactly the same. The combined effect is a 3D scatter plot with lines connecting each data point.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html

Degrafa - Buttong loader (ProgressBar like)

Try it by click "Sign In" button.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.degrafa.com/

Relative Posts:

• AdvancedSkins - From degrafa.com
• Capacity Indicator - From degrafa.com

Google Earth with Flex (IE + Firefox on Windows only)

Andrew Trice wrote:

You can type in a location, and it will go there. You can also toggle the nav controls, and the grid overlay. This example requires the Google Earth plugin, and only works in browsers that are supported by Google Earth (IE + Firefox on Windows only).

• View example in a new window
• Download source code
• View source code

Resources:

• http://cynergysystems.com/blogs/page/andrewtrice?entry=google_eath_flex_source_code

Geocode with Papervision3D and Adobe Flex Sample

Mark Walters wrote:

Representing exact geographic locations on the earth, or geocoding, has become a popular topic lately. All the mapping service providers, such as Google, MapQuest, and Yahoo!, geocode addresses on their respective maps so you can easily see a specific location and get directions between multiple locations. With each of these services now providing public APIs, anyone can create mashups showcasing data of all types (such as photos, videos, and RSS feeds) on maps to link the data visually to a geographic location. Allowing people to so easily associate data geographically has opened up new realms of information visualization on the web. RSS feeds not only provide news from around the world, but they can also display exactly where the news is coming from. Family and friends can follow along with you on your vacation as you post pictures and tag them with each city you visit. Geocoding opens up all kinds of possibilities. Plotting the points in 2D on the maps provided by the different service providers is the most common way to view the information. But you can also view geodata on a globe of the earth in 3D via Adobe Flash by using the open-source 3D library Papervision3D. Papervision3D is an open-source, real-time 3D engine for Flash. Using this library, you can get up to speed quickly and easily with a fully interactive 3D environment.

For more details please check out Learn how to geocode with Papervision3D and Adobe Flex

• View example in a new window
• Download source code

Resources:

• http://www.adobe.com/newsletters/edge/june2008/articles/article2/index.html?trackingid=DEKYF

Relative Posts:

• Google Maps API for Flash - Photo Flip Map exmaple
• Yahoo! Maps for ActionScript 3.0 - WeatherMap example

Google Maps API for Flash - Photo Flip Map exmaple

This API lets Flex developers embed Google Maps in Flash applications. Similar to the JavaScript version, this ActionScript API provides a number of utilities for manipulating and adding content to maps through a variety of services, enabling you to embed robust, interactive maps applications on your website.

• View example in a new window
• Download source code
• View source code

Resources:

• http://code.google.com/apis/maps/documentation/flash/

Relative Posts:

• Yahoo! Maps for ActionScript 3.0 - WeatherMap example

Yahoo! Maps for ActionScript 3.0 - WeatherMap example

The new Yahoo! Maps API is now entirely built in ActionScript 3.0. The Maps API now gives you an incredibly powerful map engine and the ability to create custom components, overlays and markers while consuming different webservices provided by Yahoo!, or your own. The YahooMap component is distributed as a SWC, to get started you need to include it into your build path using Flex Builder. The Maps API contains a core set of widgets, markers, overlays and web services to enable you to interact with the map in every way.

• View example in a new window
• Download source code
• View source code

Resources:

• http://developer.yahoo.com/flash/maps/

Relative Posts:

• Google Maps API for Flash - Photo Flip Map exmaple

Capacity Indicator - From degrafa.com

>Degrafa is a project dedicated to the development of a Declarative Graphics Framework for Flex.

Following is a Data Visualization Sample - Capacity Indicator:

• View example in a new window
• Download source code
• View source code

Resources:

• http://degrafa.com/