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:

Efflex - Designer effects for Flex

Efflex is a set of designer effects for Adobe Flex created by Stephen Downs (aka "Tink"). Stephen presented Efflex at the recent Flash on the Beach conference and has a background in building applications for the Flash platform.

Example:

• View example in a new window
• View source code

Resources:

• http://www.insideria.com/2008/10/efflex-designer-effects-for-fl.html
• http://code.google.com/p/efflex/
• http://www.efflex.org/

IMAGE：

URLKit - Advanced Flex Deep Linking Library

UrlKit supports Adobe Flex applications that need to expose URLs and window titles in the browser to represent their state. These URLs can be bookmarked, accessed via the Back button, etc. Such states typically represents some notion of location within the app, but in general can be mapped to any aspect of the application.
Specifically, UrlKit provides:

• a Javascript library for deep linking in Flex 2 (in Flex 3, this is provided by the platform)

• a library of declarative rule objects that describes the lexical elements of the application's URL and bidirectionally binds them to variables

• a sample application

Joe Berkovitz developed UrlKit in collaboration with Todd Rein of Adobe. To find out why, read the Rationale.

The example:
Click change state button, and look at your browser back button. NOTE: IE 6 user, please View example in a new window

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

Resources:

• http://www.insideria.com/2008/09/advanced-flex-deep-linking-wit-1.html http://code.google.com/p/urlkit/

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:

Tweener - create tweenings and other transitions

Tweener (caurina.transitions.Tweener) is a class used for creating tweenings and other transitions via actionscript code. The general idea is that dynamic animation and transitions (created by code) is easier to maintain and control, and more stable than timeline animation (since you can control it by time rather than by frames). Tweener is the spiritual successor to MC Tween. It follows Actionscript’s more strict OOP rules, and is released and maintained for both AS2 and AS3. Aimed both for designers and advanced developers, it still keeps the “one-line” design mentality used on MC Tween, but with a different, more fluid syntax (by way of an static class) that allows a wider control of how transitions are performed. Such characteristics weren’t possible on MC Tween due to the way the available parameters (and its order) were fixed by its syntax. Tweener downloads and documentation are hosted at Google Code.

Example from MC Tween:
Resources:

• Tweener at Google Code
• MC Tweener

Screenshot

Organization Chart - OrgChart

Excellent open source components that be used:
FlexLib - http://flexlib.googlecode.com
TipBubble - http://www.connectstudios.com/?section=6
This is an conceptual component, Use it in production is unwise decision, but you could make some customize to fit your requirements.

• View example in a new window

Resources:

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:

Flex Calendar Component

This project strives to provided flex components for crating calendar components. (Timeline, day, week, month and agenda view)

• View example in a new window
• View source code

Resources:

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

Relative Posts:

• Interactive Calendar - From quietlyscheming.com

IMAGE:

RIA Benchmark

James Ward:

The goal of this application is to demonstrate various methods of loading data in RIAs and see how those methods impact performance, bandwidth, and client memory usage. These benchmarks aim to be honest and unbiased. Thus they are open source and anyone can submit patches to have new tests added or to have the existing tests improved. Yet, these tests should always fairly represent real world uses of these technologies.

• View example in a new window
• View source code

Resources:

• http://www.jamesward.com/census/
• http://sourceforge.net/projects/flexapps

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

Amazing Effect - WebCam (Need a web camera)

Click Play... following.

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

Resources:

• http://www.neave.com/webcam/
• http://code.google.com/p/neave

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

YAHOO! Astra - AutoCompleteManager Advanced Example

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

• Getting Started
• Using AutoCompleteManager

• View example in a new window
• View source code

Resources:

• http://developer.yahoo.com/flash/astra-flex/

AS3 Library and LibraryManager for Assets and Other AS3 Utilities

Tink:

The classes enabled you to create multiple libraries of embedded (retaining and giving access to code) or loaded SWF’s. You can create instance of Library wherever you want, but you can also create them through the LibraryManager giving you a single class to gain access to all your Library instances. Here’s a quick example creating 2 Library instances using the LibraryManager. Each Library contains 2 SWF’s, each containing a BitmapData and MovieClip which are created using the Library. One Library instance embeds the SWF’s the other loads them. Not shown in the example, but you can also have a mix of loaded and embedded SWF’s in the same Library, and they contain fonts as well as custom classes.

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

Resources:

• http://www.tink.ws/blog/library-librarymanager/

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

FlexReport

Printing is a major feature in RIA, one Flash never seemed to cover well. Flash’s printing capabilities are at the very least rudimentary mainly because Flash was always target at designers. And Flex inherited that flaw. Adobe seems to have forgotten that the needs in web design are quite different from those at organizations. Organizations still need paper! There are many issues concerning printing in Flex: 1. Report layout: in order to print a page in Flex you need to create a container and add it to a FlexPrintJob. Not a big issue when working with static content. But when creating dynamic reports where you don’t know how many pages you’ll have this process can quickly become a nightmare. 2. Multi-page content: The only component specifically designed for printing is PrintDataGrid. There’s no support for text or images. 3. Print preview: as I said before organizations need printing. But a thing they don’t need is wasting paper. There’s no way to make a print-preview with PrintJob. And no one likes printing 100 pages of a table, just to realize they are printing the wrong data. FlexReport is a client-side report generation component. It allows you to easily generate, preview and print reports based in mxml/as3 templates.

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

Resources:

• http://www.kemelyon.com/bts/2008/01/14/flexreport/

Persistent/Interactive Tooltip

Brendan Meutzner wrote:

came across a requirement at work a few weeks back which involved an "interactive" tooltip... We needed to provide a summary of information in the tooltip, but then provide a link button to a more detailed document. I came up with the following example by creating some functionality around the DataGrid mouse movements to display a "tooltip" (in reality a Menu instance) at the mouse position. Rather than digging into the framework to try and extend the ToolTip class to make it "stick" when moused over, I realized we've got popup menu functionality like that already. Slap a custom menu item renderer in there, skin it, and you've got a mousable, interactive tooltip instance. I could have gone the extra mile and created a custom DataGrid instance using this new functionality, but I'm lazy so I'm just going to post the instance I implemented and let you figure out how to implement it for yourself :-) The idea being that it could be just as easily implemented on any List based control, and even with a bit of work any component in the Flex framework. Just modify the renderer to fit the content you need!

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

Resources:

• http://www.meutzner.com/blog/index.cfm/2008/2/20/A-PersistentInteractive-Tooltip-in-Flex

BarCode

Create BarCodes to AIM specs for Code 39, Code 93, Code 128 B & C (limited) and Interleave 2 of 5!

• View example in a new window

Resources:

• http://flex2.bsi-scs.com

Flash Text Editor

FlashTextEditor(FTE) is set of Adobe Flash components. It allows runtime content editing of any flash text field, supports Cascading Style Sheets(CSS) and server file browsing / uploading (AS2 version only).

• View example in a new window(recommend)
• Download source code
• View source code

Resources:

• http://www.flashtexteditor.com/

Flex Filter Explorer

• View example in a new window

Relative Posts:

AdvancedSkins - From degrafa.com

Degrafa is a project dedicated to the development of a Declarative Graphics Framework for Flex. Here is an example of AdvancedSkins. You will see different effect when click each button.(Tips: Hold on the mouse on third button.)

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

Resources:

• degrafa.com

Relative Posts:

• Coolest Flex: Capacity Indicator - From degrafa.com

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/

flexmdi - Multiple Document Interface

flexmdi is a robust, extensible Multiple Document Interface framework for Adobe Flex.

NOTE:flexmdi is now part of flexlib and can be found in the flexlib.mdi package ALL FUTURE DEVELOPMENT WILL HAPPEN IN THE FLEXLIB REPOSITORY http://code.google.com/p/flexlib/

• View example in a new window
• Download source code
• Google Code - Flex MDI

Box2DFlashAS3 - Excellent ActionScript 3 Physics Engine

Box2DFlashAS3 is an open source port of Erin Catto’s powerful c++ physics library Box2D.

• View example in a new window

Resources:

• http://sourceforge.net/projects/box2dflash

Flex Chart Range Selector

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

Resources:

• http://www.stretchmedia.ca/blog/index.cfm/2007/3/9/Flex-Chart-Range-Selector--Google-Financeish

Interactive Calendar - From quietlyscheming.com

I am superised that haven't see it for a long time.

This is a proof of concept demo for an interactive Flex Calendar component I’ve been putting together in my spare time. I expect to have the code up for download in a couple of days, but in the meantime, here’s a sample app you can use to try it out:

• View example in a new window
• Download source code

Resources:

• http://www.quietlyscheming.com/blog/components/interactive-calendar/

GAE SWF Project - Flash and Flex on Google App Engine

Flash and Flex on Google App Engine The GAE SWF Project is a resource of Flash and Flex-related knowledge specifically aimed at getting you up and running quickly with Google App Engine, a wonderful platform for building and deploying massively-scalable Flash and Flex applications. An equally-important goal is to raise awareness and stimulate discussion in the Flash and Flex communities of web standards and best practices. These include deep linking; better SWF embedding techniques that facilitate the implementation of progressive enhancement; loosely-coupled, well-encapsulated application architecture that separates presentation and business logic; and the use of various high-quality open source libraries and tools. Finally, it is the author's personal opinion that practicality and simplicity are two of Flash's most important assets and, as such, the examples will strive to favor pragmatism over academic purity, simplicity over complexity, and convention over configuration. The GAE SWF Framework, the underpinnings of which you can see in the initial proof of concept Flash 9 client, uses various excellent open source components that are documented in the source code and linked to from the Links list.

• View example in a new window
• Download source code

Resources:

• http://gaeswf.appspot.com

Chart DrillDown Animations - From quietlyscheming.com

quietlyscheming:

Flex/Flash is fantastic at animation. But as Mr. Lee (and you know who I’m talking about, True Believes) taught us, with great power comes great responsibility. Our responsibility as developers is to use that power for good (convey context, change, relationship) and not for evil (heavy handed eye candy, delay, destraction). This sample, for example, uses animation to convey what’s happening in a typical OLAP drill down. A drilldown is when the user navigates from some summary information in to examine specific details. Viewing sales figures by month, for example, a user might ‘drill down’ into December to see specific sales figure for each day of December to see what effect Christmas had. Alright, chances are you probably already know what I’m talking about. So before I just jump to the demo, here are a few notes: * These animations are all packaged up as chart effects that you can use on your own apps. See the sample app for details on how to use them. * I’ve tested them out on PieSeries and ColumnSeries. They should work for the other columnar types (HLOC, Candlestick), and stacked columns. In theory they should easily work on bar series as well, although I haven’t filled in the code to drill-up horizontally. Should be an easy task for the reader though..check out the drill down effect for an example. * Yes, they’re still a bit buggy. Specifically, when drilling down there’s an occasional flash when the old columns fade away. I’ll figure that out at some point. So, without further preamble…

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

Resources:

• http://www.quietlyscheming.com/blog/charts/chart-drilldown-animations/

Dashboard - From Adobe Develper Center

The dashboard, built by ESRIA, is a demo application which displays data using draggable drill down charts, forms, DataGrids, and links in a pod layout. You can modify layouts by dragging and dropping pods to a different location and minimizing, maximizing, and restoring pod windows. Layout changes are saved using a LocalSharedObject. Layout data is loaded from /data/pods.xml with values in pod.xml indicating which data files to load for a particular pod. You will need the datavisualization.swc to run this application.

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

Resources:

• http://www.adobe.com/devnet/flex/samples/dashboard/dashboard.html

Community Widgets - From Adobe Developer Center

• Download source code
• View source code

Resources:

• http://www.adobe.com/devnet/flex/

Flex MXNA RSS Reader - From dougmccune.com

Open in a new window Download Source Code(NOTE: This source code has some errors & warnings within Flex3) View Source Code Relative resource:

• http://code.google.com/p/flexlib
• http://dougmccune.com/blog/2007/03/27/updated-mxna-rss-reader-flex-app-now-with-source/

Relative Posts:

• Coolest Flex: Distortion Effects - From Alex Uhlmann

Adobe Flex3 Style Explorer (Beta)

Adobe Flex3 Style Explorer is an useful tool for write CSS in flex3. You can set an attribute, and see it's effect right now. You can export all of CSS setting to .css file. Open in a new window

Adobe Flex3 Component Explorer

Open in a new window

Test Regular Expressions Online with RegExr

Open in a new window Regular expressions are archaic-looking, extremely specific, and amazingly helpful for finding the right data, files or whatever else you need. RegEx, a free online regular expression tester, lets you hone your expression language and terms down, giving you a box to put testing text in and highlighting the words that match your query. For users of Mac OS X, Linux, or even Windows with Cygwin installed, this web-based workshop (or desktop version) is a great way to get uninhibited but real practice at file-sifting. RegEx's desktop versions require the Adobe AIR platform installed to run.

DragTile (Picasa like) - From quietlyscheming.com

Please view in a new window. Download Source Code Original Link: http://www.quietlyscheming.com/blog/components/animated-dragtile-component/

A useful tool: FlexSpy

View example in a new window View Example Source Code Download Example Source Code Resource:

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

SpellCheck Compoent - From flextendibles.com

Download Source Code Relative resource:

• http://www.buzzword.com

Original Link: http://www.flextendibles.com/

FlexBook - From quietlyscheming.com

View in new Window Download Source Code Original Link: http://www.quietlyscheming.com/blog/components/flexbook/

CoverFlow - From Dougmccune.com

(UPDATE 05/26/2008) Who use or like it? http://searchme.com http://www.flowww.com/ Download Source Code View Source Code Original Link: http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/

Distortion Effects - From Alex Uhlmann

Download Source Code Original Link: http://weblogs.macromedia.com/auhlmann/archives/2007/03/distortion_effe.cfm#more

Nifty Flex Accordion Menu (like on Apple.com) - From dougmccune.com

View source code(In new window) Download source code See source code license/ Relative resource:

• http://www.apple.com/downloads/macosx/
• http://code.google.com/p/flexlib/

Original Link:http://dougmccune.com/blog/2007/09/22/nifty-flex-accordion-menu-like-on-applecom/