Flex Samples

Flex Free open Source Projects

2009-07-23T00:36:00.002-07:00

Adobe is active in Open Source projects. The following are a number of our contributions and commitments to open source.

BlazeDS

BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe® Flex™ and Adobe AIR™ applications for more responsive rich Internet application (RIA) experiences. Previously available only as part of Adobe LiveCycle® Data Services ES, Adobe is announcing its plans to contribute the proven BlazeDS technologies to the community under the LGPL v3. BlazeDS gives the rapidly growing Adobe developer community free access to the powerful remoting and messaging technologies developed by Adobe.

Home | Downloads | Source | Documentation

Cairngorm

Cairngorm is the lightweight micro-architecture for rich Internet applications built in Flex or AIR. A collaboration of recognized design patterns, Cairngorm exemplifies and encourages best-practices for RIA development advocated by Adobe Consulting, encourages best-practice leverage of the underlying Flex framework, while making it easier for medium to large teams of software engineers deliver medium to large scale, mission-critical rich Internet applications. Previously available only as Adobe Consulting releases through labs.adobe.com, Cairngorm is now evolving towards a project that will invite community leaders and enterprise adopters to partner with Adobe Consulting in the ongoing development of Cairngorm.

Home | Downloads | Source | Documentation

Extensible Metadata Platform (XMP)

Adobe's Extensible Metadata Platform (XMP) is a labeling technology that allows you to embed data about a file, known as metadata, into the file itself. With XMP, desktop applications and back-end publishing systems gain a common method for capturing, sharing, and leveraging this valuable metadata—opening the door for more efficient job processing, workflow automation, and rights management, among many other possibilities. The XMP SDK is available as open source.

Home | Downloads

Flash Ajax Video Component

The Flash Ajax Video (FAVideo) component is a small, open source Flash component that you can use to provide video playback within an Ajax application. It exposes all of the formatting and video playback controls necessary to build a video player customized entirely using HTML and Javascript.

Home | Downloads

Flex SDK

Adobe® Flex™ is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems. The Adobe® Flex™ SDK is the foundation of Flex, providing the core Flex compilers, component library and debugger. Using only the free SDK and an IDE of your choice, you can build and deploy rich Flex applications.

Home | Downloads | Source | Documentation

FlexUnit

FlexUnit is a unit testing framework for Flex and ActionScript 3.0 applications and libraries. It mimics the functionality of JUnit, a Java unit testing framework, and comes with a graphical test runner.

Home | Downloads | Source

Generic Image Library

Generic Image Library (GIL) is a C++ generic library which allows for writing generic imaging algorithms with performance comparable to hand-writing for a particular image type.

Home | Downloads | Documentation

Open Source Media Framework

Open Source Media Framework enables developers to easily assemble pluggable components to create high-quality, full-featured playback experiences. The open aspect of the framework enables collaborative development for web video monetization, with lower costs and faster turnaround.

Home | Downloads | Source | Documentation

Adobe Media Gallery

The Adobe Media Gallery (AMG) is a Flash web photo and video gallery whose appearance and behavior can be customized via XML files.

Home | Downloads | Source | Documentation

Adobe Source Libraries

The Adobe Source Libraries (ASL) are a collection of C++ libraries building foundation technology to allow the construction of commercial applications by assembling generic algorithms through declarative descriptions. Updates monthly.

Home | Downloads | Source | Documentation

Tamarin

The Tamarin project, which is based on code contributed from Adobe, is designed to implement an open engine for ActionScript. Tamarin will be used by Mozilla within the next generation of SpiderMonkey, the core JavaScript engine embedded in Firefox®, Mozilla's free Web browser, as well as within the ActionScript™ Virtual Machine within Adobe® Flash® Player. Developers interested in working on Tamarin code in the Mozilla CVS repository via the project page located at www.mozilla.org/projects/tamarin/. Contributions to the code will be managed by a governing body of developers from both Adobe and Mozilla.

Home

Text Layout Framework

The Text Layout Framework is an extensible ActionScript library, built on the new text engine in Adobe Flash Player 10 and Adobe AIR 1.5, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flex or Adobe Flash Professional and is included in Flex 4, code named "Gumbo". Developers can use or extend existing components, or use the framework to create their own text components.

Home

Webkit

The WebKit library is used to render HTML and execute JavaScript in Adobe® AIR™. Adobe AIR allows web developers to deploy rich Internet applications on the desktop. Our plan is to contribute our changes back to the WebKit community in the near future. We are currently working on getting the code smoothly integrated into the WebKit source tree. We hope to make our contributions included in the WebKit open source project soon.

Home | Source

Flex SDK open source development

2009-07-23T00:36:00.001-07:00

Here you can find information and resources regarding Flex SDK open source development. It contains information for contributors, developers, committers, and the Flex SDK community in general.

If you cannot find your answers here, then please ask about it on the Developers forum.

Getting Started with Flex 3	Quickly familiarize yourself with Flex 3.
Flex 3 Language Reference - 日本語	View the ASDoc for every API in the Flash Player, AIR, and Flex.
Live Documentation for the Flex SDK - 日本語	Looking for live and abundant documentation? Look no further!
Get source code	Browse the Subversion repository or download a copy of the code.
SDK organization	Learn what's where inside the Flex SDK.
Set up your development environment	Set up your development environment for Windows, Mac or Linux so that you can build and test the SDK.
How to build and test	How to build it - how to test it!
Coding guidelines	Coding guidelines for patches and feature development
Coding conventions - 日本語	Coding conventions and best practices regarding the Flex SDK.
Submitting a patch	If you filed a bug, you may have already coded a fix for it. If you have a fix, then submit a patch!
Play in the sandbox	Want your own hosted branch of the SDK? Create a sandbox!
For committers	If you have commit access, you need to read this.
Targeting Flash Player 10 with Flex SDK 3.x	Want to use flashy Flash Player 10 features in your Flex 3 app? Read me first.
Current Feature Specifications	Documents and specifications for the current major release
Gumbo Features and Migration Guide	Read about converting Flex 3 applications to Flex Gumbo
Gumbo Language Reference	View the ASDoc based on the Gumbo SDK

You must be logged in to comment.

Flex 3 SDK Downloads

2009-07-23T00:33:00.000-07:00

Look here for a description regarding the types of SDKs available.

Look here for an explanation of the different build types found on this page.

Look here for an explanation of how to use a stable or nightly build in Flex Builder.

Please refer to this document if you wish to target the Astro beta.

Latest Milestone Release Builds

Milestone	Build	Build Date	Adobe Flex SDK	Open Source Flex SDK	Adobe Add-ons
3.3	3.3.0.4852	Thu Feb 5, 2009	Download (ZIP, 121MB)	Download (ZIP, 24MB)	Download (ZIP, 63MB)
3.2	3.2.0.3958	Wed Oct 29, 2008	Download (ZIP, 118MB)	Download (ZIP, 24MB)	Download (ZIP, 63MB)
3.1	3.1.0.2710	Fri Aug 15, 2008	Download (ZIP, 82MB)	Download (ZIP, 23MB)	Download (ZIP, 59MB)
3.0	3.0.0.477	Tue Feb 12, 2008	Download (ZIP, 79MB)	Download (ZIP, 23MB)	Download (ZIP, 57MB)

Stable Builds

Build	Build Date	Adobe Flex SDK	Open Source Flex SDK	Adobe Add-ons
3.4.0.6955	Sat May 16, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.3.0.4589	Mon Jan 19, 2009	Download (ZIP, 118MB)	Download (ZIP, 22MB)	Download (ZIP, 63MB)
3.2.0.3794	Thu Oct 23, 2008	Download (ZIP, 117MB)	Download (ZIP, 24MB)	Download (ZIP, 63MB)
3.0.3.2490	Tue Jul 15, 2008	Download (ZIP, 110MB)	Download (ZIP, 23MB)	Download (ZIP, 58MB)
3.0.2.2113	Tue Jun 17, 2008	Download (ZIP, 97MB)	Download (ZIP, 23MB)	Download (ZIP, 58MB)
3.0.1.1732	Fri May 16, 2008	Download (ZIP, 77MB)	Download (ZIP, 22MB)	Download (ZIP, 55MB)
3.0.1.1092	Fri Apr 04, 2008	Download (ZIP, 77MB)	Download (ZIP, 22MB)	Download (ZIP, 55MB)

Nightly Builds

Build	Changes	Build Date	Adobe Flex SDK	Open Source Flex SDK	Adobe Add-ons
3.4.0.8740	view	Thu Jul 23, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.8685	view	Tue Jul 21, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.8624	view	Fri Jul 17, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.8592	view	Thu Jul 16, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.8532	view	Tue Jul 14, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.8510	view	Sat Jul 11, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.8310	view	Sat Jun 27, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.8033	view	Sat Jun 20, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.7966	view	Fri Jun 19, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)
3.4.0.7852	view	Tue Jun 16, 2009	Download (ZIP, 118MB)	Download (ZIP, 25MB)	Download (ZIP, 63MB)

Setting the layout property in Flex 4

2009-07-23T00:29:00.000-07:00

1. To set the layout for the Application in MXML:

...

2. To set the layout for a Group:

...

3. That seemed verbose, so there’s a shortcut to set the layout for a Group; you can use VGroup and HGroup:

Flex bug database documentation

2009-07-23T00:28:00.000-07:00

In a recent meeting, it seemed that some community members were frustrated about not knowing our bug workflow. Some basic information has been available, but it’s a little hard to find. Information has been added, and here are direct links:

The main page: https://bugs.adobe.com/confluence/display/ADOBE/Home

The bug life cycle: https://bugs.adobe.com/confluence/display/ADOBE/Bug+life+cycle

The other way to get this page is to go to http://bugs.adobe.com/flex and then click on the “bug standards/community process” link.

Creating states in a Flex skin

2009-07-23T00:26:00.000-07:00

You may want to change the attributes of a component’s skin depending on the state the component is in. In this case, we’re going to make a skin for the Application class which changes its background depending on the state it’s in:

happy: yellow background
sad: blue background
sophisticated: various shades of grey
bland: white background

1. Copy frameworks/projects/flex4/src/spark/skins/spark/ApplicationSkin.mxml to the directory you’re working in and rename it. I’m calling it SkinWithStates.mxml.

2a. Find the states section and add some states.
2b. Find the backgroundRect and make its fill stateful. Also, add a couple more Rects for the sophisticated state. Note that the subsequent Rects have left/right/top/bottom set to increasing numbers, so they will appear nested. Here is how the skin file should look when it’s done:
    xmlns:s="library://ns.adobe.com/flex/spark"     alpha.disabled="0.5" >                  [HostComponent("spark.components.Application")]     ]]>                                                                                     left="0" right="0"         top="0" bottom="0">                                                color.happy="0xffff00"                           color.sophisticated="0x000000"                           color.bland="0xffffff" />                                left="20" right="20"         top="20" bottom="20">                                                color.happy="0xffff00"                           color.sophisticated="0x444444"                           color.bland="0xffffff" />                           left="40" right="40"         top="40" bottom="40">                                                color.happy="0xffff00"                           color.sophisticated="0x888888"                           color.bland="0xffffff" />                                top="0" bottom="0"     minWidth="0" minHeight="0"/>
3. Override the getCurrentSkinState() method in a subclass of Application. This method should do whatever analysis is needed to figure out what state the skin should be in, and return a string containing that state’s name. Here is an example which just returns the mood, which is the name of a state. Save it as TestApplication.as:
package{     import spark.components.Application;     public class TestApplication extends Application{              public var mood:String;         // Constructor.         public function TestApplication():void{             mood = "bland";         }              // Return the state the skin should be in.         override protected function getCurrentSkinState():String{             return mood;         }        } }
4. Make a main application file which uses the subclass and the skin just created:
    xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:mx="library://ns.adobe.com/flex/halo"     xmlns:s="library://ns.adobe.com/flex/spark"     xmlns:custom="*"     skinClass="SkinWithStates" >     private function doMoodChange(e:Event):void{         this.mood = e.currentTarget.selectedValue;                  // This causes the skin's state to         // be evaluated again.         invalidateSkinState();     } ]]>             itemClick="doMoodChange(event)" />                                                     groupName="group1"                    label="happy" value="happy" />                        groupName="group1"                    label="sad" value="sad" />                        groupName="group1"                    label="sophisticated"                    value="sophisticated" />                        groupName="group1"                    label="bland"                    value="bland"                    selected="true" />

Fetching and building Flex source code with a Mac

2009-07-23T00:25:00.000-07:00

For the Mac users out there, here are some instructions for fetching the latest Flex SDK source code (aka “trunk”). Note that I’m saying LATEST. It might not be stable. Heck, it might not even build.

For a GUI client, I use SmartSVN because it was the first one I stumbled over which:
- Has a free, functional version.
- I figured out how to use quickly.

If you can recommend another, please point me to it. I’ll be happy to give it a try and post instructions.

Of course, the instructions are basically the same on any OS. But it’s always nice to see very specific instructions for the OS one is using.

Instructions using the svn command line client:
1. Get it (http://downloads.open.collab.net/binaries.html) and install it.
2. Run this command:
svn checkout http://opensource.adobe.com/svn/opensource/flex/sdk/trunklocal-directory

Instructions using SmartSVN (6.0.2):
1. Get it (http://www.syntevo.com/smartsvn/index.html), install it, and start it.
2. Project > Check Out.
3. Choose Quick Checkout and fill in:
URL: http://opensource.adobe.com/svn/opensource/flex/sdk/trunk
Local Directory: whatever works for you
4. Click Continue, then Finish.

Building the SDK:
Assuming you have recent releases of Ant (I have 1.7.0) and Java (I have 1.5.0_16-133):
1. Bring up a terminal window.
2. cd to the trunk directory that you fetched above.
3. Run: ant clean main

Note: I don’t have FLEX_HOME, JAVA_HOME, or ANT_HOME defined anywhere, but there is some documentation which claims these are needed. Do what works for you.

References:
Getting source code:http://opensource.adobe.com/wiki/display/flexsdk/Get+Source+Code
Building the SDK:http://opensource.adobe.com/wiki/display/flexsdk/Build+and+Test

Flex Ajax Bridge

2009-06-10T12:29:00.000-07:00

The Flex Ajax Bridge (FABridge) is a small code library that you can insert into an Flex application, a Flex component, or an empty SWF file to expose it to scripting in the browser.
Rather than having to define new, simplified APIs to expose a graph of ActionScript objects to JavaScript, with FABridge you can make your ActionScript classes available to JavaScript without any additional coding. After you insert the library, essentially anything you can do with ActionScript, you can do with JavaScript.
Adobe Flash Player has the native ability, through the External API (the ExternalInterface class), to call JavaScript from ActionScript, and vice versa. But ExternalInterface has some limitations:
The ExternalInterface class requires you, the developer, to write a library of extra code in both ActionScript and JavaScript, to expose the functionality of your Flex application to JavaScript, and vice versa.
The ExternalInterface class also limits what you can pass across the gap - primitive types, arrays, and simple objects are legal, but user-defined classes, with associated properties and methods, are off-limits.
The ExternalInterface class lets you define an interface so your JavaScript can call your ActionScript. FABridge lets you write JavaScript instead of ActionScript.
When to use the Flex Ajax Bridge
The FABridge library is useful in the following situations:
You want to use a rich Flex component in an Ajax application but do not want to write a lot of Flex code. If you wrap the component in a FABridge-enabled stub application, you can script it entirely from JavaScript, including using JavaScript generated remotely by the server.
You have only one or two people on your team who know Flex. The FABridge library lets everyone on your team use the work produced by one or two Flex specialists.
You are building an integrated rich Internet application (RIA) with Flex and Ajax portions.Although you could build the integration yourself using ExternalInterface, you might find it faster to start with the FABridge.
Requirements for using the Ajax Bridge
To use the FABridge library and samples, you must have the following:
Flex Ajax Bridge, which is included in the following directory of the Flex 3 SDK installation:
installation_dir\frameworks\javascript\fabridge
Adobe Flex SDK
Adobe® Flash® Player 9 or Adobe® AIR™
Microsoft Internet Explorer, Mozilla Firefox, or Opera with JavaScript enabled
Any HTTP server to run the samples
To run the samples:
Browse to the files found within the installation_dir\frameworks\javascript\fabridge
Place the src and samples folders side by side on any HTTP server.
Open a web browser to http://yourwebserver/samples/FABridgeSample.html and samples/SimpleSample.html and follow the instructions there. Make sure you access the samples through http:// URLs and not file:// URLs. The Flash Player security sandbox prevents them from working correctly when they are accessed as local files.

Flex Tips and Tricks

2009-06-10T12:22:00.000-07:00

Top Things You Need to Know When Working With Flex
Explore the key features of Flex with code examples and working sample applications. These step-by-step code-based tutorials are written in easy to digest 15 minute chunks. We suggest going through them (at least glancing at them) in order, but you can also pick and choose among the topics if you're already familiar with the concepts:

A. Working with Data
Use data modeling and data binding when working with data.
B. Handling Events
Use event handler functions to handle asynchronous network and UI events.
C. Designing a UI: Using Components and Containers
Use Flex's built-in components and containers to lay out your Flex Application
D. Designing a UI: Displaying Lists of Items
Use the powerful List based components of Flex to display groups of related data items using either the built-in or custom item renderers and item editors.
E. Designing a UI: Creating a multi-page application
Use navigation controls such as ViewStack and TabNavigator to easily add a navigaton system to your applicaton.
F. Extending and Customizing Components
Create your own components from scratch or by extending existing classes in the Flex Class Library using Object Oriented Programming and Code Behind Techniques.
G. Debugging an Application
Learn about Flex Builder's rich debugging capabilities.
Import these projects into Flex Builder
Each of these modules is available on the Download Projects Page as exported ZIP files that you can import into Flex Builder.

What is a rich Internet application?

2009-06-10T12:19:00.000-07:00

In the late nineties, "browsing the web" meant going online to read text and view static images. But that model was limiting. As the number of Internet-connected businesses and individuals increased, so did the demand for richer, more responsive user experiences.
In 2002, Macromedia coined the term rich Internet application (RIA). RIAs combine the flexibility, responsiveness, and ease of use of desktop applications with the broad reach of the web. RIAs provide a dynamic web experience that is rich and engaging, as well as interactive.Many web designers and developers use Adobe Flash or Adobe Flex, which are part of the Adobe Flash Platform, to build RIAs. Flash is an authoring environment for creating rich, interactive content for the web. Flex is a cross-platform development framework for creating RIAs. Content created with Flash and Flex is deployed using Adobe Flash Player. RIAs created in Flex, Flash, and even Ajax can also be taken to the desktop using the Adobe AIR desktop runtime. To learn more about RIAs, explore the resources below.

See RIAs in action

FotoFlexer
Edit your images online with the powerful RIA features in FotoFlexer, built with Adobe Flex.

Nike Air
Experience the feel of the Nike brand in this Adobe Flash site built by Big Spaceship.

Tour de Flex
Explore what you can do with Flex in this Adobe AIR application.

Creating a Simple RIA

2009-06-10T12:17:00.000-07:00

Subtopics:
Learning Points - A summary of information and concepts for building a simple RIA
Code Files - Complete code files for the Flickr RIA
Code Anatomy - An interactive approach to understanding the Flickr RIA code
Tutorial - Step-by-step instructions on building the Flickr RIA
In this module, you will learn how to create a simple rich Internet application (RIA) that retrieves and displays photos from the Flickr API based on user-supplied keywords. To build this application you will use Flex Builder, pre-built Flex components, and the Flex HTTP service.
The following application is an embedded SWF file created by using Flex Builder; it is not a screen shot. Type a search term, like "Adobe," into the text box and click the Submit button to retrieve and display photo data from the Flickr API.
5 Learn more
What is an RIA?
Creating a Simple MP3 Player using ActionScript 3.0 and Flex 2
Rich Internet application
Rich Internet Applications Topic Center
Flex Learning Paths
Flex in a Week
Tour de Flex
NOTE: the images displayed are coming from a public photo feed. The results may be unpredictable and Adobe is not responsible for the contents of the feed itself.

Flex Using Shared Objects

2009-06-10T12:14:00.001-07:00

About shared objects
Shared objects function like browser cookies. You use the SharedObject class to store data on the user's local hard disk and call that data during the same session or in a later session. Applications can access only their own SharedObject data, and only if they are running on the same domain. The data is not sent to the server and is not accessible by other Adobe® Flex® applications running on other domains, but can be made accessible by applications from the same domain.
Shared objects compared with cookies
Cookies and shared objects are very similar. Because most web programmers are familiar with how cookies work, it might be useful to compare cookies and local SharedObjects.
Cookies that adhere to the RFC 2109 standard generally have the following properties:
They can expire, and often do at the end of a session by default.
They can be disabled by the client on a site-specific basis.
There is a limit of 300 cookies total, and 20 cookies maximum per site.
They are usually limited to a size of 4 KB each.
They are sometimes perceived to be a security threat, and as a result, they are sometimes disabled on the client.
They are stored in a location specified by the client browser.
They are transmitted from client to server through HTTP.
In contrast, shared objects have the following properties:
They do not expire by default.
By default, they are limited to a size of 100 KB each.
They can store simple data types (such as String, Array, and Date).
They are stored in a location specified by the application (within the user's home directory).
They are never transmitted between the client and server.
About the SharedObject class
Using the SharedObject class, you can create and delete shared objects, as well as detect the current size of a SharedObject object that you are using. The SharedObject class consists of the following methods.
Method
Description
clear()
Purges all of the data from the SharedObject object, and deletes the SharedObject file from the disk.
flush()
Immediately writes the SharedObject file to a file on the client.
getLocal()
Returns a reference to the client's domain-specific, local SharedObject object. If none exists, this method creates a new shared object on the client.
getSize()
Gets the size of the SharedObject file, in bytes. The default size limit is 100 KB, although it can be larger if the client allows it.
In addition to these methods, SharedObject objects have the following properties:
Property
Description
data
Read-only property that represents the collection of attributes the shared object stores.
onStatus
The shared object's event handler that is invoked for every warning, error, or informational note.
You use the SharedObject class to store small amounts of data on the client computer.
About shared objects
Creating a shared object
Destroying shared objects
SharedObject example

Flex Binding Data

2009-06-10T12:11:00.000-07:00

Data binding lets you pass data between client-side objects in an Adobe® Flex® application. Binding automatically copies the value of a property of a source object to a property of a destination object when the source property changes.
About data binding
Data binding examples
Binding to functions, Objects, and Arrays
Using ActionScript in data binding expressions
Using an E4X expression in a data binding expression
Defining data bindings in ActionScript
Using the Bindable metadata tag
Considerations for using the binding feature

Optimizing Flex Applications

2009-06-10T12:10:00.000-07:00

Improving client-side performance
Tuning software to achieve maximum performance is not an easy task. You must commit to producing efficient implementations and monitor software performance continuously during the software development process.
Employ the following general guidelines when you test applications for performance, such as using the getTimer() method and checking initialization time.
Before you begin actual testing, you should understand some of the influences that client settings can have on performance testing. For more information, see Configuring the client environment.

Flex Video Samples

2009-06-09T14:39:00.001-07:00

In this screen capture video tutorial, Bruce Eckel and James Ward pair up to create an Adobe Flex application using the TurboGears framework (see Figure 1). Follow along as these experts show you how to put it all together.

Watch the video (50:00 minutes)

ABOUT THE AUTHORS

Bruce Eckel is the author of numerous books and articles about computer programming. He gives frequent lectures and seminars for computer programmers, and was a founding member of the ANSI/ISO C++ standard committee. His best known works are Thinking in Java andThinking in C++, aimed at programmers with little object-oriented programming experience. Most reviewers consider these books to be better written and more pedagogic than most introductory texts on Java or C++. He has since made both books available for all to download freely. However, his recent book, Thinking in Java, Fourth Edition, is no longer available in a free, electronic form.

James Ward is a Technical Evangelist for Flex at Adobe and Adobe's JCP representative to JSR 286, 299, and 301. Much like his love for climbing mountains he enjoys programming because it provides endless new discoveries, elegant workarounds, summits and valleys. His adventures in climbing have taken him many places. Likewise, technology has brought him many adventures, including: Pascal and Assembly back in the early '90s; Perl, HTML, and JavaScript in the mid '90s; then Java and many of its frameworks beginning in the late '90s. Today he primarily uses Flex to build beautiful front ends for Java based back ends. Prior to working at Adobe, James built a rich marketing and customer service portal for Pillar Data Systems. James Ward's blog can be found at www.jamesward.org.

Flex video tutorial Samples

2009-06-09T14:37:00.000-07:00

flex actionscript tutorial	flex flash lite	adobe flex video tutorial	flex builder tutorial
adobe air flex tutorial	james ward flex	ted patrick flex

Creating Flex Tooltips Video Examples

2009-06-09T14:33:00.000-07:00

XML Video Playlist

Learn how to create an XML-driven video playlist for FLV files.

Length: 16:15

Video Player Interface

Learn how to use Photoshop to create a slick looking video player interface.

Length: 07:30

Sending Mail with PHP

Learn how to create a contact form in Flash that sends email using PHP.

Length: 24:28

Flash Sound Design

Learn how to use Adobe Audition to create custom sound effects for Flash.

Length: 11:33

Creating Flash Tooltips

Learn how to create interactive tooltips for buttons and other objects inside of Flash.

Length: 20:14

Flex Alert Box example

2009-05-17T00:45:00.001-07:00

Alert box is a dialog box that appears on window with some message and stays rigid until the event associated with it is not done. Alert Box is also referred to as pop-up window.

Among these two words Alert & box, Alert is a class defined inside the mx.controls package. The pop-up window appears when .show() method of Alert class is called. Programmer can write its message inside the method parenthesis, method displays programmers message as string on the opened pop-up window that contains a string title 'Alert'.

alert.mxml

width = '100%' height = '100%'>

import mx.controls.Alert;
import mx.events.CloseEvent;

public function method1():void{
Alert.show('want to play', 'message', 3, this, method2)
}

public function method2(event:CloseEvent):void{
if(event.detail == Alert.YES)
eve.text = "You answer is 'yes' so your player ID is: " + event.detail;
else
eve.text = "You answer is 'No' but still if want to play then your player ID is: "
+ event.detail;
}

Flex Validator example

2009-05-17T00:44:00.000-07:00

Code below shows Flex validator component example. With these components different types of data are get validated with appropriate validators. The provided flex feature is mostly used in validating the user ids, email addresses and passwords.

In the example validator for email and phone numbers are made. When the user writes, data validator checks the syntax and type of data entered and if the data entered is found to be wrong, the corresponding validator generates error message in red text format.
Similarly many different types of validators can be created and that you will be going to learn soon.

validator.mxml

'1.0' encoding = 'ISO-8859-1'?>

Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>



    '{phoneNumber}' 

                     property = 'text'/>

    '{EmailId}' 

                     property = 'text'/>



    'Flex Validator Control'>

    

      'phoneNumber' 

          text = 'Your valid phone number.'/>

      'EmailId' 

          text = 'baadshah@newstrackindia.com'/>

Flex Combo Box example

2009-05-17T00:40:00.000-07:00

In this tutorial page you will be taught to utilize ComboBox control inside your flex file. In the example you will learn to build two ComboBox controls. The Example below shows combo boxes with nicely formatted string data, so here you will be also taught to do the graphical works on flex visual component.

The following code demonstrates the ComboBox control working example. This control shows the drop-down list of data you passed as String inside it.

combo.mxml

flex ant coding example

2009-05-17T00:39:00.000-07:00

Inside the tutorial, demonstration regarding using eclipse as an editor for creating flex and ant projects is given. Also, the coding of flex and apache ant applications and compiling flex application with ant build.xml file is illustrated very nicely inside the tutorial. Along with compiling, you will also know how to execute the output file that has extension .swf with either web browser or adobe flash player, using the ant build.xml file.
Coding flex action script code on eclipse, needs java run time environment, to be installed on the system. And for using ant build tool, apache ant run time environment is required to be installed on the system.

For generating java environment visit to
url : http://www.roseindia.net/java/learn-java-in-a-day/download-and-install-java.shtml

And for establishing apache ant environment on your system visit to
url: http://www.roseindia.net/flex/downloading-installing-flex.shtml.
And for getting flex sdk visit the same above url again.

Now after all this, download eclipse from eclipse official website that has apache ant technology as an inbuilt plugin installed.
For getting the above stuff visit to
url: www.eclipse.org/downloads/download.php?file=/eclipse/downloads/drops/R-3.4.1-200809111700/eclipse-SDK-3.4.1-win32.zip

On the above url page, select any nation or continent mirror of eclipse classic. After clicking on any mirror you will get a window shown below.
On this click on ok button.

Downloading and Installing Flex Builder

2009-05-17T00:33:00.000-07:00

In this tutorial you will learn the complete downloading and installing procedure for adobe flex builder.

Flex Builder is an IDE built on adobe technology that inherent eclipse ide features. Like NetBeans and Eclipse, Flex builder too provides features such as creating projects, software updates, display options etc. .
You can download this tool from adobe official website download page. Flex Builder is not a share ware product like eclipse and netbeans are. For using this tool one should have proper license. But an evaluation copy of this product is downloadable. So those who want use it as free can download its evaluation period based copy from the link below.
The evaluation period for this product is of sixty days, after that it will expire.

url: http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

After going to above url you will be on the download page of flex builder as shown below.

.

Here i will illustrate the installation process for window users only. So on the download page click on the download link after this a Opening FB3_win.exe window comes and asks for saving the setup file as FB3_win.exe. On this window click on Save File button, this file will be downloaded on the location you set in your system for saving the downloaded files. If not set then by default the download path is of your system desktop background.

Introducing Flex

2009-05-17T00:31:00.000-07:00

Flex is a programming language developed on adobe technology to enhance the users capability in building rich internet applications. This latest adobe technology possesses all flash features. Flex is embedded with two languages MXML and Action Script respectively. Among all known scripting languages Action Script is one of them that comes along with Flex SDK(software development kit). MXML is a tag based language while Action Script is a flash language and developers pro to oop's (object oriented programming) will face no problem with this flash language.

Server the compilation of flex source file is adobe's Application server which is a J2EE application.
Flex coding is done with an XML based language known as MXML and like Flash applications, Flex codes too are compiled into a file having SWF format called ShockWave Flash files. These SWF files are executed with stand-alone Adobe's Flash Players, and can also be directly executed in browsers that have Adobe Flash Player Plug-in installed.

For developing Flex applications, Adobe has launched Flex builder that works in Eclipse environment. Flex 3 builder is the latest and can be freely downloaded from Adobe's official website. But building Flex applications on Flex builder in eclipse environment is a cumbersome job to perform, one reason is that using eclipse with flex builder plugin will make it very slow, also lot of time is been taken in compilation. To get rid of this problem there is another way to compile Flex application which works on Apache Ant technology. Apache's this technology is used to make a build.xml file that will be used later to call the flex compiler in deploying the flex application. You will get more to know after going through the tutorials presented below.

Flex languages

Flex coding involves two different languages MXML and ActionScript respectively.

MXML is an extended form of XMLand is a tag based language, and therefore it is called an XML-based markup language. Program files coded with mxml language possess '.mxml' extensions. MXML used along with ActionScript provide tags to devise GUI (graphical user interface) component and is also used to get access to data on servers. MXML facilitates its users with its data binding services. HTML and MXML both provide tags but the difference is that MXML consists of several new tags like TabNavigators and Accordions and many more that also enable users to get any web service connection. A MXML file is converted into a SWF file that runs on a Flash Player or on a browser which has Adobe Flash Player Plug-in installed in it.

ActionScript a flash language is an implementation of ECMAScript and is similar to OOP based JavaScript. In Adobe Flash Player this is the main programming tool. It consists of built-in objects and functions, and allows its users to build their own objects and functions. With this strong tool one can extend its competency in creating RIAs. Its coding is done inside the tag . We create ActionScript files and call them inside the main MXML file with either 'source' attribute of tag or with 'include' statement inside tag by passing the relative path names of ActionScript files in these attributes. Each and every ActionScript file should be saved with '.as' extension.

Flex Showcase

2008-11-30T11:16:00.000-08:00

Flex Applications Showcase
Flex3.info provides inspiration Showcase of Flex Applications and resources to designers and developers working with Flex technologies. The site offers a variety of themes and skins to turn vanilla Flex and AIR applications into custom visual experiences. Visit Showcase

Sumbit your Flex Application Totally Free: Submit an Flex Applications

New Flex Skin from Yahoo!

2008-06-25T12:34:00.000-07:00

Yahoo! has released new flex skin. This is very basic but sleek skin.

You can view flex skin here… or Download from here…
Learn how to build your own skin for flex.

Java Development in Flex Builder.

2008-06-25T12:33:00.000-07:00

Most of flex developer install the flex builder by selecting “Stand-alone IDE” configuration. While developing application using flex + java they have to depend on other editor or IDE. So here there is a way in which you can do the java development form the flex IDE.

There are two types of installation configuration when you install flex.

Stand-alone IDE – This includes a customized version of Eclipse, and its own Java Runtime Environment (JRE). This version will not have java development tools preinstalled so you can’t do the java development. (For java development you need to install JDT (Java Development Tools)… which we will see later in this article.)
Plug-in – This will install flex builder 2 Plug-in on Eclipse (if you are currently using Eclipse 3.1.2 /3.2 on Macintosh OS X.). With this installation you can do development on java and flex simultaneously form one IDE.

For updating Java Development Features in Flex IDE You need to install Java Development Tools (JDT) plug-in.
You can download & install the JDT plug-in from following location
http://easyeclipse.org/site/plugins/eclipse-jdt.html

You can install JDT from Flex Builder.

Following are steps to install JDT form Flex Builder.

1. Open Flex Builder IDE.

2. Navigate to: Help Menu >> Software Updates >> Click on Find and Install.

3. Now Install/Update Dialogue box will open. Select “Search for new features to install” and Click on Next button.

4. Now Install Dialogue box will open. Check “Eclipse.org update site” and click on finish button.

5. Now Update Manager will start searching Site Mirrors to download plug-ins and it will display “Update Site Mirrors” Dialogue box. Select any mirror site and Click on “Ok”

6. Now Update Manager will search for plug-in and open an update dialogue box. This dialogue box will list all plug-in for you current Eclipse version. Select “Eclipse Java Development Tools 3.1.2” and Press Next.

7. Now Accept the License Agreement and Click on next.

8. Select the installation path (By default it will be your Flex builder 2 directory) and Click on Finish.

9. Now JDT will be downloaded and installed. After installation you need to restart flex builder again.

Now you are done with the JDT installation.

To create a java project
1. Navigate to: File Menu >> New>> Click on Other…

2. Now “New” popup window will open and you will see the you have a option to create a java project.

In this way you can create a java project and do java development.

Hope this article will help some flex developers.

Enjoy Flex + Java Development….

Flex 3 for You ********* June 10, 2007

Posted by suketuvyas in : Flex 3 , add a comment

Flex 3 Beta 1 is released and it is available for download in Adobe Labs.

Some Important Links for Flex 3:
DOWNLOAD FLEX BUILDER BETA 1
DOWNLOAD FLEX SDK BETA 1
LABS WIKI FLEX 3
Flex Bug Database
Flex Standards and Community Process

Resolving Flex 3 “Beta Expired” Error…

2008-06-25T12:32:00.000-07:00

Problem:

Today morning I have open my flex builder IDE and created a new project. New project creation was giving strange Error “Beta Expired”. My Flex builder status bar was showing “Flex Builder 3 will expire in 39 Days” this seems to be a strange behavior…

Solution:

I found out that I was using Flex builder Beta 2 and adobe has set some date for Flex beta 2 SDK Expiry. (This means Your Flex SDK has expired not Flex builder… ‘Flex Builder 3 will expire in 39 Days’ as mention above…)

To solve this problem I have downloaded new Flex 3 Beta 3 SDK and added to flex builder and compiling my projects with Beta 3 SDK

Now, it works fine… Hope this helps to some one facing same problem.

Flex Component Class Hierarchy

2008-06-25T12:31:00.000-07:00

This article is all about presenting the visual component hierarchy this is basic thing in flex which shows how different properties, method and evens added to the component at various levels and this give knowledge to the lower level of abstraction.

Flex Visual component are created with the class hierarchy of several ActionScript class to provide more flexibility and add more features at the different level of hierarchy.

Following is a visual representation of class hierarchy of Flex Visual Components:

Object: Object is a Top/Root Level class of AactionScript class hierarchy. | More Info…

EventDispatcher: EventDispatcher class extends object class. EvenDispacher class allows any object on the display list to be an event target. | More Info…

DisplayObject: Display Object class extends object and this is the base class for all objects which can be added in the DisplayList. Display object class allows some properties (x, y, width, height )for components/Objects like MovieClip, Button, TextField etc… | More Info…

InteractiveObject: InteractiveObject extends DisplayObject and it is an abstract base class for all DisplayObject with which user can interact. InteractiveObject provides some common properties like doubleClickEnabled, focusRect, tabIndex etc… and Events like all mouse Events, Keyboard Events. | More Info…

DisplayObjectContainer: DisplayObjectContainer extends InteractiveObject class and it is a base shell for all containers which adds display objects in the container shell. . DisplayObjectContainer provides some common properties like… numChildren, tabChildren etc… and methods like addChild(), removeChilld() method related to the child display object management. .. | More Info…

FlexSprite: FlexSprite is a subclass of the Player’s Sprite class and the superclass of UIComponent. It overrides the toString() method to return a string indicating the location of the object within the hierarchy of DisplayObjects in the application. The Sprite class is a basic display list building block: a display list node that can display graphics and can also contain children. | More Info…
UIComponent: UIComponent extends Sprite and it is a base class for all Interactive and non Interactive component. The UIComponent class is not used as an MXML tag, but is used as a base class for other classes. | More Info…

All Visual Components like VBox, HBox, Canvas, Button etc… extends UIComponent.

Hope this article will help you. Any Comments?

Flex 3 Beta 3 Developers Guide on liveDocs

2008-06-25T12:30:00.002-07:00

have just found out Flex 3 Developers Guide on liveDocs

Flex Developer Guide is best resource to learn flex and prepare for Adobe Certified Flex Developer Exam.

Here is a link…

Adobe Certified Flex Developer Exam Tips & Tricks

2008-06-25T12:30:00.001-07:00

As mentioned in my previous post I am now Adobe Certified Professional.
If you are planning to appear for Flex Certification Exam following information will help you.

Go through Adobe® Flex(tm) 2 DeveloperExam Guide to get the overall idea of exam.
Refer Flex 2 Developer’s Guide This will help you to cover all areas of flex.
Refer Programming ActionScript 3 for High Level reference of ActionScript 3.0

This is just a reference material but you experience will count.

Exam questions are come from four areas mentioned in Developer Exam guide.

Flex Application User Interface (UI) Creation
IF you have played with most of UIcomponent of Flex you can easily answer the questions. But questions will not be straight forward it will be well twisted so it requires good attention while reading question.
Flex System Architecture and Design
You should have really good knowledge of flex component architecture and must know how to created loosely coupled component. You should also know basic UML diagram techniques like Inheritance, Implementing interface etc.
Flex Application Programming Fundamentals
You need to have knowledge of OOPS programming and Core AS3 programming like String, Array etc.
Integrating with Remote Data and Flex Applications
If you have worked extensively with flex but haven’t played much with data integration with flex then this will be very difficult area for you. You have for prepare and practice well to understand RPC services features for flex and have good understanding of LCDS

Reading is fine for certification but after all “Experience Matters”

Flex Theme

2008-06-25T12:28:00.000-07:00

FLSkin

View in Action | Download

Orange Them

View in Action | Download

Vista Blue

View in Action | Download

Flash/Flex applications

2008-06-25T12:24:00.002-07:00

Here I collect some awesome Flash/Flex applications list. take a look

http://flexexamples.com

http://flexsamples.com

http://www.desktoptwo.com
http://www.picnik.com/
http://www.fauxto.com/
http://www.belgacomtv.be/
http://www.harley-davidson.com/pr/gm/customizer/launchCustomizer.as
http://www.scrapblog.com/default.asp
http://dev.frogameleon.com/felxoBooth
http://www.motionbox.com/
http://www.pikeo.com/
http://adb.crowecs.com/flex/activeDashboard/dashBoard
http://www.shirtmagic.com/design
http://www.simonds.com.au/

Ted Patrick opened magic box

2008-06-25T12:24:00.001-07:00

On first day of Flex 3 Details Week Ted Patrick show some awesome feature of Flex 3.0. On that day Ted shown designer/ developer work flow features. I think for RIA this is most important think how developer and designer integrate magic together. Flex 3.0 has below listed new features.- CSS Design View

- Skin Importer
- Design View Zoom/Pan
- Design Mode support for ItemRenderers
- Advanced Constraints
- CS3 Suite integration
- CSS Outline
- Flex 3 SDK Skinning/Style EnhancementsA feature that I liked so much is skin Importer

For more details please visit Ted Patrick blog.

updates on adobe labs

2008-06-25T12:23:00.001-07:00

Whole last week ted patric wondering flex community. And on this Monday morning they open flex 3.0 beta as well as AIR [Apollo]. It is really early lunch then I was expecting.
Cools things to download

Download Flex Sdk Beta 1
Download Flex Builder Beta 1
Labs Wiki Flex 3
Flex Bug Database
Flex Standards And Community Process

download and play

Explicit support for Module base application

2008-06-25T12:21:00.002-07:00

Imagine if your application has 1000 or more pages with high end graphics and animation. You must think about performance. The simple answer is module base application.

Module, It was really great feature of “flex 2.0.1 hot suffix 2.0 SDK” but in flex builder 2.0 was not having explicit support for Module based application. Therefore we have to make separate modules, compiling report.xml, then recompile all the modules ….. ohhhh that was really frustrating process.

But now flex 3.0 has explicit support of module based application. That means flex builder itself will handle all this process. Here I have tried to explain how flex builder 3.0 supports modules.

Create Module more easily

To create new module just right click on your project and select new module. It will ask you name of the module. There is one other combo box with label of optimize size for application. Now this is some thing really good in flex builder 3.0. This feature will generate report.xml file and optimize your application for selected application.

This action will add tryThisOut.mxml module to your project.

Tip

If you are creating 100% liquid module which should fit in to your module loader container, then you have to use percentageWidth and percentageHeight properties of module class. Check below image

Now when you press ctrl +b or press “Build all buttons”, it will generate tryThisOut.swf file in your output folder. Then after you can load this module wherever you require.

Manage modules

Flex 3.0 adds modules to project when you create new one. But if you want to copy and paste module from other project to your current project you have to add manually. To do that just right click on current project on navigator window then after click on property button at the bottom of the pop up menu. You will find module link on open dialog box. There is one button “add” on right side. You can simply add module. You can also edit existing module from the same window.

Debug modules

You have to just allow modules for debugging by clicking on enable debugging modules. That will allow you to debug your modules

Hope this will help you.

mx:Spacer tag can save your valuable time

2008-06-25T12:21:00.001-07:00

have seen many developers who are spending time to just adjust their UI elements and controls. They give hard code values , put invisible containers and so many unreasonable tricks. Flex Frame work already has very smart guy call who will be addressing this issues.

Scenario 1

Scenario 2

Flex New Orange theme online

2008-06-25T12:20:00.002-07:00

Juan updated www.scalenine.com and included my new orange theme check it online.

10 + 2 unbitable reason why flex not “silverlight” in current scenario

2008-06-25T12:20:00.001-07:00

1. Flex is available today and works.

2. Flex 2 is viewable in 85+% of web browsers, Flex 2 SWF files run in Flash Player 9.

3. You can use any HTTP Server and any backend technology (.NET,JAVA,PHP,Ruby,CF, Python) with Flex via XML, SOAP, Sockets, ZLIB, Etc.

read whole article and boost up your self to work in flex

Your RIA should be a RIA

2008-06-25T12:17:00.000-07:00

Any RIA [Rich Internet Application] developer should respect the word “Rich”. A RIA should have richness which can increase an application’s business values. In context of RIA, richness menses greater UI design, innovative navigation, user friendly inputs, optimized downloading, and quality feedback to user. All these elements impart great richness to the application and results into a joyous experience for both, the client and the user.

The paragraph, above, says nothing new. All of us know these facts and that’s why we are in RIA domain. But the thing is, do we really follow this kind of an attitude while developing an application?

Here, let me try to figure out few aspects which can really bring smile on a user’s face.

Spend special time to understand navigational flow

This is very important aspect for RIA - “navigational flow”. Which control shall we use to provide better navigation - Accordion, Tab Bar, Toggle button bar, Link bar or Menu bar. This depends on your application and the layout you have created.
In some cases, you have to think beyond these components. Let’s say you have to create checkout functionality of the shopping cart. This checkout form has seven steps to follow.

Now, which component will you use?
Accordion? Nope that will takes much of UI space.
TabBar ? hmmmmm……………. No that will not give the feel of sequential steps.
ToggleButtonBar ? it has the same problem as TabBar.
Which navigation control should you use. . …………….

Simple answer you have to create your own stepper component which may look like the image below.

The moral of the story is, think beyond the flex frame work to provide innovative navigation. Believe me that makes so much difference in a client’s satisfaction

Respect your UI designers and creative people

Generally the very first step of any application development is a mockup design. At that time you will find your “UI designer” busy with an image editing tool like Photoshop or Fireworks. Once through, he will approach you with some kind of designs, which you think are not feasible to develop using the flex frame work. For example the UI designer may come up with something like following component for providing help, warning or instruction.

At first look, you may simply refuse this idea by saying like, “we can just put tooltip over here. So please design accordingly.”

Rather then saying No to creative idea, you should say, “Hmmm. Let’s do it.”

Keep the targeted user, in mind

One day I was creating a small e-learning application for children of the age group of 10 years. I had created very cute navigation with collapse functionality. I had just put “<<” and “>> ” kind of icons on collapse button with width and height of 10 X 10 pixels. Suddenly our CEO passed from my desk and reviewed that navigation part.

He gave me suggestion to create 30X100 pixel buttons and write “CLOSE” and “OPEN” on the buttons. I said why? It was easy to understand by the means of the icons. He told me, as an IT person I knew this is “collapse menu button”, but a 10 to 15 years child would never know why this button was and what it meant

Signs convey a lot of things, in a very salient mode

Use icons where ever your application requires.

Icons sites

http://www.yellowicon.com/
Learn Flex
http://flexexamples.com
http://iconbase.com/
http://browse.deviantart.com/customization/icons/dock/?order=9&alltime=yes
http://www.famfamfam.com
http://www.stockicons.com
http://www.glyphlab.com

Get inspired from other applications

Before create any application we should spend time to see other, applications, UI designs, how they done this.
Below is the links from where you can get inspired

Learn Flex
http://flexexamples.com
http://browse.deviantart.com/designs/interfaces/?order=9&alltime=yes
http://browse.deviantart.com/designs/web/
?order=9&startts=1182844800&endts=1182931200
http://www.thefwa.com

Migrate from Flex 2 to Flex 3 beta

2008-06-25T12:16:00.002-07:00

flex 2.0 to flex 3.0 beta. i.e DataProvider APIs are no longer on the list classes. For example, you can no longer say myList.getItemAt(index). Instead, say myList.dataProvider.getItemAt(index).

read in more details

Flex 3: Built in data grid animation effects

2008-06-25T12:16:00.001-07:00

There is no scope of animation in Datagrid & List components, in Flex 2.0. As such, we have to run code loop and do manual animations on canvas or that kind of container to achieve the animation effects. However, Flex 3.0 team must have realised this requirement and they packed this feature in the new SDK. Now, we can assign special effects on datagrid and list base components.

Check out in action Example 1 , Example 2 [this examples has downloaded from adobe labs]

Download source file

Flash Player powered google map!! Sound Exiting

2008-06-25T12:15:00.001-07:00

Today I was roaming around google map and seen new feature ‘street view’ of google map. This feature gives you 360 pan views of city streets.

I found Google chose flash player to deliver this feature. Flash Player will rock.

check your self

Best uses of Flash from SEO Prospective

2008-06-25T12:14:00.002-07:00

From years back SEO doesn’t recognize use of flash content in site. May be they are right because googlebot can’t ready each and every visual and text content of the .swf format. And flash is really not medium for SEO, it’s completely visual medium. But still we can use .swf content in SEO friendly web site by taking care of search engine prospective.

Tip for SEO friendly flash content creation

Use dynamic text rather then static text and graphics
Use “deep linking” new feature of flex 3.0
Make two different version of site one should target SEO and another should target usability
Place flash content wherever it require in your html page [i.e youTube, Google Earth and Google finance]

One of the google webmaster publish article “Best uses of Flash” can give better vision to SEO to optimum use of flash.

Adobe simply because of those two invisible weapons, PDF and Flash

2008-06-25T12:14:00.001-07:00

Robert X. Cringely write very good article on FLASH and PDF today’s stand.

Some of the very good statements he has write.

Being the owner of two invisible technologies [PDF and Flash] makes Adobe more powerful than most of us can even imagine.
Adobe absolutely dominates nearly every market for graphical software and is a strong competitor in video, too.
Adobe is moving into developer tools in a big way to support its grab for mindshare in the interactive/rich web application space where much of the excitement lately seems to be.
My money is on Adobe simply because of those two invisible weapons, PDF and Flash.
But invisibility offers no advantage to those who can’t follow through. That’s not Adobe, by which I mean that’s not Flash, which has grown to be so much more than it was ever intended to be.
By itself, Flash has had an amazing evolution.
Java applets were fantastic with major shortcomings (huge Java runtime, poor performance, clunky and ugly interface, etc). Flash fixed all or most of those.
Expect Flash in everything and perhaps even Flash in a chip. Deploying software in hardware is the ultimate DRM.
And Flash does cross-platform so much better than Java ever did.
Flash potentially solves all those problems AND creates new opportunities.

Range Selector Component

2008-06-25T12:13:00.000-07:00

“RangeSelector” component is extend from HSlider Class. It is just customized the view of the HSlider. It give better visually rage selection. Component also dispatch event when user click on any between Range with starting and ending range.

Check in action
Download the code

FLSkin is available on adobe exchange

2008-06-25T12:12:00.000-07:00

made three themes with different color code, Orange, Black and Grey. Those themes are having almost every components graphic skinning. It has art work files, if you want to modify any thing on graphics. Those themes are ready to use in any of flex or AIR projects.

You can download and explorer themes from here.

What I learn about flex/flash integrations ?

2008-06-25T12:08:00.000-07:00

When flex 2.0 lunched, it was questions what will be the roll of flash in RIA? Flex will replace Flash? Adobe limited Flash to just creative people?

Adobe given all the answers by lunching great Flash CS3 and flex Integration tools. Adobe has finally brought Flash again in to RIA game.

Last week so many blog had bloging about flex/flash integrations. It is really very good come back of flash in RIA.
Something cools features of flash/flex integration

Frame label of flash behave as a state property in flex
Flex component resize according to flash components
Ability to make flex containers in flash

Displaying RadioButton controls using the Repeater in Flex (redux)

2008-05-29T08:37:00.000-07:00

xmlns:comps="comps.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

package comps {
import flash.events.Event;

import mx.containers.ApplicationControlBar;
import mx.containers.Canvas;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.controls.Label;
import mx.controls.RadioButton;
import mx.controls.RadioButtonGroup;
import mx.core.Application;
import mx.core.Repeater;
import mx.core.UIComponentDescriptor;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;

public class MyComp extends Canvas {
private var arr:Array;
private var appControlBar:ApplicationControlBar;
private var form:Form;
private var formItem:FormItem;
private var lbl:Label;
private var hBox:HBox;
private var radioGroup:RadioButtonGroup;
private var radioRepeater:Repeater;

public function MyComp() {
super();
init();
}

private function init():void {
var alertCSS:CSSStyleDeclaration;
alertCSS = StyleManager.getStyleDeclaration("Alert");
alertCSS.setStyle("backgroundAlpha", 0.8);
alertCSS.setStyle("backgroundColor", "black");
alertCSS.setStyle("borderAlpha", 0.8);
alertCSS.setStyle("borderColor", "black");

arr = [];
arr.push({label:"Red", data:"red"});
arr.push({label:"Orange", data:"haloOrange"});
arr.push({label:"Yellow", data:"yellow"});
arr.push({label:"Green", data:"haloGreen"});
arr.push({label:"Blue", data:"haloBlue"});

radioGroup = new RadioButtonGroup();

lbl = new Label();

formItem = new FormItem();
formItem.label = "selectedValue:";
formItem.addChild(lbl);

form = new Form();
form.styleName = "plain";
form.addChild(formItem);

appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
Application.application.addChildAt(appControlBar, 0);

hBox = new HBox();
hBox.setStyle("horizontalGap", 60);
addChild(hBox);

var descriptorProps:Object = {};
descriptorProps.type = RadioButton;
descriptorProps.document = this;
descriptorProps.propertiesFactory = radioPropFac;
descriptorProps.events = {change:"radioButton_change"};

var radioDescriptor:UIComponentDescriptor = new UIComponentDescriptor(descriptorProps);

radioRepeater = new Repeater();
radioRepeater.dataProvider = arr;
radioRepeater.childDescriptors = [radioDescriptor];
radioRepeater.initializeRepeater(hBox, true);
}

private function radioPropFac():Object {
var obj:Object = {};
obj.label = radioRepeater.currentItem.label;
obj.group = radioGroup;
return obj;
}

public function radioButton_change(evt:Event):void {
var radio:RadioButton = RadioButton(evt.currentTarget);
var item:Object = radio.getRepeaterItem();
var cssObj:CSSStyleDeclaration;
cssObj = StyleManager.getStyleDeclaration("Alert");
cssObj.setStyle("modalTransparencyColor", item.data);
cssObj.setStyle("themeColor", item.data);
Alert.show(item.label, "getRepeaterItem()");

callLater(updateSelectedValue, [evt]);
}

private function updateSelectedValue(evt:Event):void {
lbl.text = radioGroup.selectedValue.toString();
}
}
}

Displaying CheckBox controls using the Repeater in Flex

2008-05-29T08:33:00.000-07:00

layout="vertical"
verticalAlign="middle"
backgroundColor="white">

import mx.controls.Alert;
import mx.controls.CheckBox;

private function button_click(evt:Event):void {
var selArr:Array = [];
var idx:int;
var len:int = arr.length;
for (idx=0; idx if (checkBox[idx].selected) {
selArr.push(checkBox[idx].label);
}
}

var title:String = selArr.length + " of " + len + " item(s) selected.";
var message:String = selArr.join("n");
Alert.show(message, title);
}

private function doFilter(element:*, index:int, arr:Array):Boolean {
return element.selected;
}

private function checkBox_change(evt:Event):void {
var ch:CheckBox = evt.currentTarget as CheckBox;
Alert.show(ch.getRepeaterItem().data);
}
]]>

label="{checkBoxRepeater.currentItem.label}"
data="{checkBoxRepeater.currentItem.data}"
change="checkBox_change(event);" />

label="Click me"
emphasized="true"
click="button_click(event);" />

Using embedded fonts with the Panel container in Flex

2008-05-29T08:19:00.000-07:00

layout="vertical"
verticalAlign="middle"
backgroundColor="white">

@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
}
Panel {
titleStyleName: panelTitleStyleName;
}
.panelTitleStyleName {
fontFamily: VerdanaEmbedded;
fontWeight: normal;
}

title="Title"
status="status"
width="160"
height="120"
rotation="15">
width="100%" />

Flex Download Source

2008-04-18T12:03:00.003-07:00

Looking for the source used in one of the samples posted on this blog? You can download all of the source, for every sample, In one zip file, here:
QuietlyScheming Samples Source

Flex Tutorial: DisplayShelf Component

2008-04-18T12:03:00.001-07:00

The DisplayShelf component demonstrates using a number of flex and flash concepts to provide a rich, templatable control to display a faux-3d view of a list of items. Its behavior is similar to the CoverFlow visualization added to iTunes in version 7.
The sample is broken into two pieces. The first, the TiltingPane component, takes any content and wraps it in a faux ‘3d’ effect, allowing you to tilt it from side to side. The second, the DisplayShelf component, uses the TiltingPane component to render a list of items along a virtual shelf, with the selected item pulled out for display.
Some of the concepts this sample illustrates:
matrix transformations
graphics API
masking
bitmap manipulation
templating
item renderers
the IList interface
implementing dataProviders
effective animation
This sample was the centerpiece from my MAX 2006 presentation, “Flex under the hood: A tour through the Flex architecture.”
Try a demo here:
DisplayShelf browser sample
Interested in seeing how the 3D effect works? You can see how it gets built, one step at a time, with an interactive walkthrough here:
Interactive 3D Walkthrough
The source, as always, is available under the MIT open source license, so you can do whatever zany thing you crazy kids want with it.
* View the source
* Download the source

Flex RandomWalk component

2008-04-18T12:02:00.001-07:00

Building a custom component is one thing; Making a component extensible and configurable enough to consider it something you would reuse across multiple applications, or potentially sell to customers for use in their applications, requires a little bit of extra thought and support.
Building a one-off component…building something that does exactly what you’re looking for and nothing else…Is generally a matter of implementing the component lifecycle:
Getting your component initialized,
creating sub-components,
implementing your layout and rendering methods to display your data.
adding event handlers to respond to user interaction
dispatching your own custom events and handling them in your application.
optionally implementing a measure routine so your component can size to its own content.
Turning it into multi-use component is a matter of generalization. That is, of the behavior, properties, and values your component uses, deciding which are core to its very identity, and which you can leave up to the component user to define. Flex supports generalization in a number of ways, the most obvious being:
skinning
styling
properties/attributes
templating.
Sometimes you can stop there, and be happy with a nice, full featured, and potentially profitable component. Sometimes you’ll want to go the extra mile, adding the kind of polish that some customers will expect out a first class component in the flex environment. This can mean adding support for features like:
accessibility
automation
binding

Last week with some help from the developers on the SDK team, I put together a sample component that helped to illustrate the difference between the first type of component…a basic get the job done component…and a more full featured generalized version of the same. To celebrate the release of Flex 2, I thought I’d post it here.
The component, which for no good reason we called ‘RandomWalk,’ is a variation on a basic tree-menu structure. It takes XML data as input, and allows you to click down through the nodes in a horizontal layout.
First, take a look at the simple, one-off get the job done version:
Simple RandomWalk prototype
That version got the basic concept in place, but leaves something to be desired. The interaction is pretty basic. The rendering is all hard-coded directly in the component. And the representation of the individual items, which is really irrelevant to the behavior of the component itself, is hard-coded to be a simple Label.
So let’s put in a little more work and take another crack at it:
Improved RandomWalk
That version raises the bar a little bit. This time, we’ve abstracted away the rendering of the border and the highlight. We’ve used CSS to swap in a simple graphical skin for the border (using Flash’s Scale9 functionality), and a more advanced programmatic skin for the highlight that we’ve done some additional styling on via CSS. The individual items are no longer Labels…in fact, the RandomWalk component neither knows, nor cares, how the items are being rendererd. All it’s doing is creating the renderers, handing over the XML nodes, and laying them out on screen. In this version, we were able to drop in a slightly more complex renderer that alters the appearance of the individual items based on whether they’re selected or not.
And because Flex is Flash, and it’s easy to do these kinds of things, let’s take it one step further:
Animated RandomWalk
This time, we’ve got some nice smooth animation kicking in every time we open a node in the tree. We’ve also added some basic keyboard navigation to allow users to step through the component using the arrow keys. Lastly, we’ve integrated it with the History manager so you (the user) can use the back button to step backwards through the open nodes.
Of course, the true test of a nice, reusable component is to actuall build something different with it. I’m not artistic enough to go swapping out different skins (thank god for designers), But I can drop in different data.
Here’s a version of our final Animated RandomWalk component that uses a different item renderer to navigate a hierarchy of icons from the excellent Tango Desktop Project. The individual items even change states to display additional details and provide a link to download the icon if you like it:
RandomWalk Icon Browser
And that’s how you build a generalized reusable component.
Like the component? Interested in seeing how we did it? Grab the source here:
RandomWalk Source Viewer
Download RandomWalk source
These demos of course all require Flash Player 9, and were built using Flex 2

Flex Landscape Zoomer

2008-04-18T12:01:00.002-07:00

Another sample component in my continuing quest to spread the word about how expressive Flex applications can be.
This component was inspired by a number of really nice flash sites I’ve seen over the past number of years that make effective use of zooming to navigate information in a way only flash can do. In the right circumstances, a good zoom is the perfect way to both give the user a 1000 foot view of data and quickly drive them down to explore the details as necessary.
So the Landscape component makes it easy to do just that. By default, it essentially behaves like a Canvas component, laying out its children absolutely, sizing itself to the smallest size that can contain them all. But you can pass it any collection of descendants (children, or children’s children, etc), and it will automatically zoom in to the tightest area possible that contains the ’selected’ descendants.
Simple in theory, but fairly versatile in the effects you can achieve with it. Here are three sample applications that use the Landscape component in very different ways.
LightTable. This is in many ways the most obvious use of the Landscape component. As usual, it’s a photo browsing app based on the Flickr API. Once you start a search, it populates a Landscape with a Tiled set of matching thumbnails. As you page through the thumbnails, the application just focuses the landscape on different batches of the result set. Click on an image, and the application Tells the Landscape to focus in on the single image. Click on the image again to back out.
View the demo
view the source
download the source
WPA. This little toy app allows you to browse a collection of old WPA posters from the Library of Congress. choose a poster from the list on the left to see the poster and additional details about it. The posters are all aranged in a grid inside the Landscape component. Because the posters are all the same size, and the Landscape itself matches them, the animation as the the Landscape focuses from poster to poster turns into a simple Pan through a clipping window.
View the demo
view the source
download the source
Declaration. This one’s my favorite. In this app, I’ve filled the Landscape with a high resolution image of the United States Declaration of Independence. On top of that, I’ve overlaid some Rectangular boxes (hidden at first) absolutely positioned on specific parts of the image. Click on the links on the left, and the Application focused the Landscape onto the corresponding hilight box (and shows it). I’m sad to admit that I actually learned a lot about the Declaration in the process of building this application (a lot which seems particularly apropos to today’s political climate in the US).
View the demo (warning: This one’s a big download because of the high res image in there)
view the source
download the source

Flex IPE Controls

2008-04-18T12:01:00.001-07:00

Ages ago, When Flex 2.0 was just getting started, I wrote a feature tracking application to help manage the possible features we were considering for the release. As the app grew over time, I found myself getting annoyed at having to add the same UI and logic to both the ‘view’ screen and the ‘edit’ screen for a feature every time we added a field to the database.
Months later, when the MAX conference was coming up, I took that pain and suffering and transformed it into a sample ‘flipper’ component I used in a talk showing off some of the new features and performance of Flex 2.
Last week, I was reminded of the flipper component while playing with some ajax-application-of-the-day. I can’t remember what the application was, but in it they had combined the read and edit views of some data into a single view, that dropped into ‘edit’ mode when you clicked on a field. Just like the flipper component did.
So, on a long flight from San Francisco to Boston, I cleaned up the flipper, updated it to Flex 2 Beta 3, and gave it a couple of new friends to play with. Try them out for yourself in a little sample application here:
In Place Editing (IPE) Controls Sandbox
It’s definintely an ongoing work in progress. As you can see in the sandbox, I’ve been experimenting with different ways to activate the IPE controls. If you have comments, feedback, or preferences as to how they should work, please leave a comment and let me know.
A couple of issues you’ll probably run in to:
these controls have exposed a few bugs in the focus manager. They’ve been logged, and hopefully fixed by the time you read this ;)
the interaction of controls that use popups (like the date field) isn’t quite right. Triggering an edit of the IPEDateField should immediately pop up the chooser, rather than requiring a second click.
One could make an argument that the IPE controls, while pretty, have a negative effect on usability. Users have learned the different affordances of editable vs. read-only data, such as embedded beveled (sp?) borders, and taking those away makes things harder for them. I recognize this, but this scenario is no different from any application that presents a ‘browsing’ screen and a button or link to take you to the ‘edit’ screen. The blue/green edit icons that appear next to the controls are placeholders…arguably a real graphic designer could create a real icon that would both look pretty and make it clear that clicking on it edits the data (got some artistic talent? feel like making some icons? send ‘em my way).
The IPE controls essentially act as facades for the properties, styles, events, and methods of the underlying editable control they represent. In theory you should be able to attach validators to them just like the base control, but I haven’t spent any time on it yet.
as with most of the stuff I’ve posted, the flipping effect in the IPE Controls was partially inspired by some of the work our rock star Experience Design team did a while back. Hats off to them.
The source, as always, is available under the MIT open source license, so you can do whatever zany thing you crazy kids want with it.
* View the source
* Download the source

Flex samples Interactive Calendar

2008-04-18T12:00:00.002-07:00

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:
* Flex Calendar Display
Let me answer a few questions you might have…
* What am I looking at?
This is a sample Calendar component I’ve been playing around with.
* Where’s the source?
You can download a zip file with all the source from here. The main Calendar component is fully commented, although at this point none of the supporting files are.
* The Source isn’t working for me!
If there’s a file missing, please let me know by leaving a comment here. If you have general questions about the source, features, etc, you can leave a comment, but I can’t guarantee I’ll have the time to answer.
* Cool! Is this the one Adobe Consulting is building?
Nope. They’re building a scheduling component, and will be much more full featured than this. This one is buggy, and more of a proof of concept I’ve been working on.”But worth checking out for some inspiration. At least to tide you over until they release theirs :).
* I don’t see any data!
Yeah, the server’s a little slow. Just be patient.
* Cool, now I see data. What can I do?”
Here are some things to try:
click the left and right arrows at the top right.
click the month/year/day buttons to change the view.
click on the small calendar to go right to a day.
now shift click on a different day on the small calendar to select a range
try selecting large and small ranges…2 days, 2 weeks, etc.
in the month view, click and drag an event to move it from day to day
in the day view, click and drag an event to change its duration or start time
in month view, you can click on a day (not an event…the day background) to zoom to that day.” +
* Cool. How do I load more data?
click the ‘Add Calendar’ button under the ‘default’ legend on the left.
* What can I load?
There’s two default calendars to choose from. Make sure to pick a color, and enter a name.
* Is that it?
Well, it’s loading ics files, so in theory you could put in any ics url (i.e., a google calendar). But the ics parsing is ” + really rudimentary…just enough to get some data in I could work with…so don’t hold your breath.
* Hey! I found a bug!
I certainly hope so! If you didn’t, you probably weren’t using it at all. Like I said, it’s a proof of concept.
* Cool. Can I use this?
By all means. I’ll be posting the code in a little while.
* I really want this, but it’s too buggy!
I’ve got to get back to actually working on the SDK…so I’m looking for someone (or someones) to take over this code. Are you volunteering?
* Where’s the source?
Weren’t you reading above? You can download a zip file with all the source from here. The main Calendar component is fully commented, although at this point none of the supporting files are.

Flex Flickr Roulette

2008-04-18T12:00:00.001-07:00

Flex Ajax Bridge: Flickr Roulette
While prepping to put the FABridge library up on labs for the community to start using, I put together a slightly more ‘real world’ demo that shows the bridge in action. My goal here is to hit as many buzzwords as I can think of. At last count I had:
Ajax
Flex
Flash
flickr
SOA
Mashup? (kind of a stretch)
rails
prototype
script.aculo.us
Did I miss any there?
caveats
I’ve run the demo on Firefox 1.5 and IE 6 on windows. It should work fine on other typical browsers, but I haven’t tried it out. There’s some CSS problems between Firefox and IE, that I don’t have the patience to figure out. I usually program in Flex so I don’t have to (grin!)
There appears to be an odd interaction going on between the current flex beta and my hosting setup. For some people, the flex application is hanging during initialization. If this happens to you, try refreshing the page. (If you can’t see the flex app when the page loads, that probably means it loaded fine).
Enough caveats, let’s get on to the demo. What I’m going to show is a combination HTML/Ajax/Flex page talking to a Ruby/Rails back end. Since all web-tech demos are now legally required to be flickr API based demos, the page is built around the ability to search flickr for tags and view individual images and details. The idea was to take the functionality of this boring, vanilla, non-ajax-or-flex standard HTML page here:
traditional HTML flickr page
And see how we could spice it up using a combination of ajax and flex, linked via the FABridge.
Now I’d really like to talk through the flow of the page before I link to the demo, but if I do that you’re just going to scroll right to the bottom anyway. So go check out the demo, then come back here to read through how it works.
Ajax/Flex based flickr page (Flex 2 Beta 3)
The source is also available for download here:
Source files
Be forewarned, the code for this is ugly. Not because it couldn’t be done cleanly, but rather because I don’t have time to clean it up.
OK, now that we’ve had some fun, here’s how it works.
1. Page initialization
When the page is first loaded, the only thing the user sees is a simple HTML form to choose a flickr search tag. But down at the bottom of the page there’s a hidden flex ‘carousel’ component quietly biding its time. Behind the scenes, the HTML page is sending some javascript across the FABridge to initialize the component. Now keep in mind that the component we’re using knows nothing about javascript, the bridge, flickr, etc. It’s a straight flex component that was written for use in flex apps. it’s completely unaware that we’re actually scripting it from javascript.
2. Choose a tag
OK, so the user fills in the HTML form, and clicks the search button, But instead of doing a normal submit, the form uses an Ajax request to post the data in the bakgorund rather than submitting the entire page. The Ajax request hits a rails back end which forwards the request on to flickr and parses the response. Meanwhile, back on the client, the page has used some script.aculo.us effects to fade in an animated spinner to show the user the page is busy. Once the rails app has the urls in hands, it generates a response containing a javascript data structure with the urls and image ids. At the same time, it generates a fragment of javascript that uses the FABridge to pass the data structure in to the flex carousel component. This response goes back to the client who eval()’s it. The spinner is faded out again, and we’re ready to go.
3. Display the thumbnails.
Now the flex component has a list of urls to display. It loads the thumbnails one at a time, and then does what flash does best. You can click on an image, spin the arousel, drag it around etc. This component is doing a couple of things that can’t be done in DHTML.
The drawing API procedurally renders the spokes of the carousel;
The player’s matrix based display list is used to shear the images for the 3D effect.
The new bitmap filter library generates the subtle soft drop shadows on the individual thumbnails.
And again , even if it was possible to build this component in DHTML, I personally wouldn’t want to do it. Having worked in javascript and Actionscript 1 in the past, It would have taken me many times longer to build this functionality in those environments.
But I digress.
4. select an image.
The user selects an image from the carousel. At this point the component generates an event to indiciate the selection has changed. Now again, this component knows nothing about flickr, or javascript, or how it’s being used (In fact, this component doesn’t even know that it’s showing images or urls…but more on that in a future post). All it knows is someome might want to know that the selection has changed. So it generates an event.
Now let’s jump back to that javscript initialization code. When the page first loaded, we ran some JS that configured out flex component. One of the things it did was to regsiter a javascript callback handler for the ‘changing’ event of the carousel component. So when the user clicks an event, it bubbles all the way out to javascript, which gets passed an event object with a reference to the id of the image selected. The javascript callback once again throws up a wait animation using script.aculo.us, and submits a request off to the server for the image details.
5. wrapping it all up
The rest is straightforward Ajax/DHTML. The server fetches the photo details, and generates a few fragments of HTML to display them. These are sent back in the response along with some simple javascript informing the page where to insert the fragments. The HTML of the page is modified, and the process is complete.
6. Review
OK, so in summary, we’ve got: HTML => Ajax => Rails => Flickr API => javascript => flex => javascript event handler => Ajax => Rails => Flickr API => javascript => HTML. not bad.
Now that you know how it all fits together, take another look And play a round of Flickr Roulette: search for some tags, then grab the wheel on the left, and ‘throw’ it to the right with the mouse.

Flex FlexBook

2008-04-18T11:59:00.003-07:00

Somewhere around two years ago (really? Wow, it’s been a while), we got our first builds of the new flash player and flex framework up and running. To celebrate, I took a crack at building one of my favorite flash components in flex, the Book component. I got some basic proof of concept up and running, but had to set it aside amid the day to day details of getting Flex 2 built.
Well a few weeks ago, I dug the old code out and polished it up. So here, for your enjoyment, is the FlexBook component.
FlexBook can act as a container, allowing the developer to flip through its children components:
Example 1: FlexBook as a container
FlexBook can be driven by a list of data and an itemRenderer, like a List control or DataGrid. Here’s a porfolio viewer, driven by an XML data file and an MXML component itemRenderer:
Example 2: FlexBook as a List
FlexBook Supports a wide variety of configuration options. Play with some of them here:
Example 3: FlexBook’s styles and settings
FlexBook supports full transparency on its pages. This example is in honor of (and made possible by) my mom, who’s a world class medical illustrator:
Example 4: FlexBook’s transparent Anatomy
This example doesn’t show any new functionality, but it’s a nicely put together example of a dataDriven FlexBook, combined with a state/transition driven item renderer;
Example 5: FlexBook as an image browser
Here’s an example that combines the FlexBook with the Landscape Zoomer component to browse images. Turn the page until you find a picture you like, then click on the image to zoom in. Click again to zoom back out.
Example 6: FlexBook with the Landscape Zoomer
Interested in learning how FlexBuilder works? Take a peek at this walkthrough (work in progress)
A walk through the FlexBook page flip effect
The code for this component is written from scratch, using AS3, flex concepts, and player 9 functionality, but it is by no means original. The functionality is inspired by this excellent example from Macc/iparigrafika.

Flex Fisheye Component v0.3

2008-04-18T11:59:00.001-07:00

A few days ago I was idly browsing the web when I ran across a nice little DHTML animation that zoomed in on text as you moved your mouse around it. The effect reminded me of the Fisheye Menus developed by Ben Benderson at the University of Washington. I remember reading about the concept years ago and thought was a great little bit of UI innovation. Well, one thing led to another, and shortly thereafter a Flex component popped out.
Try out a demo below…

I’ve been poking and prodding it in my spare time, and decided it’s far enough along to put out for anyone to play around with. So without further ado, here’s the Fisheye component v0.1. It’s available under the MIT Open Source license, so feel free to use it or modify it in your own applications.
1D Demo
2D Demo
Download Source
A couple of notes:
Flash vs. Flex
One important goal with this component, as with a bunch of things I’ve been working on lately, is to help the community see how you can merge the best of what flex gives you (productivity, development process, consistent component model) with the best of what people have been doing in flash for years (rich, highly interactive, fluid, etc). The SDK’s GUI components provide a lot of value, but they’re really just the tip of the iceberg of what’s possible with Flex. Hopefully these kinds of demos whet your appetite.
Item Renderers
The Fisheye component is based around the concept of itemRenderer factories, just like the flex list and charting components. The goal is to use composition to separate behavior from content, so you can reuse the basic fisheye effect across many different applications and uses. Take a look at the source and see how it’s done.
states as a contract
I’m experimenting a bit in this component with the idea of using view states to communicate state information form the component to its item renderers. In addition to telling the Fisheye component what to use as its item renderer, you can tell it what state to put the renderer in when it’s hilighted or selected.
It’s a nice idea, but it’s complicated by the fact that there’s only one state variable for each component. With this approach, for example, you couldn’t have the fisheye menu use states as a contract and have the item renderer itself use states to control whether or not it’s expanded or collapsed.
For what it’s worth, we actually identified this limitation when we designed states for Flex 2. We sacrificed this use case in favor of the simpler approach on the belief it would make it easier to understand and use in the more general case. I’m still hoping we can find a way to get the functionality in the next release.
Separating layout from intent
The Fisheye component uses a pattern that’s been coming up a lot lately where the intended layout of the component is not the same as the actual layout.
In this case, the fluid animation as you move the mouse across the component is built by migrating the actual layout of the renderers towards the intended layout (as determined by the mouse position) over time. Over and over again, I find myself writing layout routines that update external structures rather than the components themselves, and update routines that use a variety of algorithms to reconcile them.
It’s come up enough now that I think I’ll try pulling it out into a reusable ‘mixin’ for my next project.
Styling
I borrowed the styling used in the explorer from a mockup by one of the excellent designers on the Adobe Experience Design team, Ty Lettau. Thank god for designers.
Limitations
I’m a little embarassed to point out the original Fisheye Menu as an inspiration for this, since at this point I’ve really only copied the form and not the function. The Fisheye menu is intended as an alternate way to present a large list of information on one screen without having to resort to paging or scrolling.
But this Fisheye component doesn’t make any attempt to fit the contents to its space on screen. RIght now the layout is determined entirely by the value of its styles.
In the next version, I hope to have it dynamically adjusting those values to keep the items constrainted within the component’s bounds.
Useful?
Personally, I think the real promise of Flex is in the marriage of the productivity of the platform with the expressiveness of flash. But I’m curious what you think. Where should the flex team be spending its time in the next releases? On features that make it easier to build ‘expressive’ content like this? Or elsewhere, on other things? Like what?

Flex top Animated DragTile Component 0.1

2008-04-18T11:58:00.003-07:00

The DragTile Component adds Picasa like Drag/Drop animated feedback to the basic Flex Tile behavior. Using this component, you can:
drag to reorder items in the component
drag from/to the component to move items into or out of the dataProvider to another component.
drag from/to the component (with shift key pressed) to copy items into the dataProvider
Flex Beta 3 is required to view these demos.
Sample Applications using the DragTile Component:

Picassa-like image drag/drop Demo
Alphabet Tile Game
Screamin’ Fireballs Dodgeball Team Manager
Known Issues/Areas for Improvement:
right now the content has to be data driven (i.e., with a dataProvider + itemRenderer). Really, there’s no reason it couldn’t be driven purely by children (i.e., you explicitly name the children to display, like any other container). Just needs a little work.
DragTile is based off of Container. Really, it should extend Tile, and modify its layout behavior.
Currently assumes dataProvider is an Array. Really should work off of collections, like other flex data-driven components.
drag/drop behavior isn’t as configurable as it should be. The Developer should be able to decide whether a drop is allowed, whether copy or move is allowed, etc.

A couple of samples from MAX (no, not that one)

2008-04-18T11:58:00.001-07:00

Last week at MAX Barcelona, I did a couple of off-the-cuff presentations and samples for the Flex Boot Camp session on Wednesday afternoon. I promised a few people I would post those samples on my blog, so, here they are.
Sample 1: Building a custom component
A number of people at Boot Camp wanted to see the basics of building a custom component stripped down to the fundamentals. So I built this component on stage for them, walking them through the basics of component base classes, graphics, sub components, drawing and layout, measurement, commitProperties, and custom events.
source
example
Sample 2: redefining what the children of an MXML component means
one or two people asked me how they could specify children of a custom MXML component both in the component definition and in the component instance. This is possible in flex today with a minimum of actionscript added to your custom MXML code. This component shows how to do it.
source
example
Sample 3: metaprogramming with custom actionscript metadata
Towards the end of the Flex 2 development cycle, we slipped a tiny feature into the flash player API that allowed us to get access to some actionscript metadata at runtime via the describeType() API. In Flex 2.01, we made it possible for the end devleoper to define what metadata is preserved at runtime. In Flex 3, we’ve made it even easier to preserve metadata. A couple of people have discovered this feature, and started to do some really interesting things with it. I got asked about this a few times during the course of MAX, so I put this sample together.
This demo I really like, and should be interesting even for the more advanced flex developers among you. In this demo, I’ve build a utility that allows you to use actionscript metadata to;
create one way and two way bindings between parts of your component.
assign a function to be invoked when an actionscript expression changes.
assign an event handler to a part of your component declaratively.
See the source for details.
source
example
Have questions, comments, feedback? Leave theme over here
A big thanks to everyone who came to MAX this year, both in Chicago and Barcelona. It’s tremendously helpful to us to talk to so many people who are living and breathing by the decisions we make in the SDK, and I really enjoyed meeting a whole new crop of flex developers (as well as saying hi to the old ones).

Flex Variable Radius Pie Chart.

2008-04-18T11:57:00.001-07:00

This sample shows how to extend the capabilities of the PieSeries class from the Flex Charting Package. It’s a good tutorial for how to extend any of the built in classes, and a good reference to start thinking about building your own series type from scratch.
In this example, we extend the built in PieSeries to use the underlying data to determine both the size of the wedge, as a typical PieSeries does, as well as the radius of the wedge. The New series goes through all the steps a Chart Series must to convert data from an underlying data provider to a value that can be used rendering on screen.
Notes:
This was a quick one off example I put together, so it probably has some issues in it. Specifically, if you turned on callout labels for this series, they wouldn’t draw all thew way in for the smaller wedges. Consider it an exercise for the reader ;)
* Variable Radius Pie Chart
* view source
* download source

Flex Interactive Bubble Chart

2008-04-18T11:56:00.002-07:00

The New York times has a really nice interactive bubble chart known as the Sector Graphic Chart. As a proof of concept, I put a few hours into seeing how hard it would be to recreate this chart using the Flex Charting components.
Take a look at the original version:
NY Times Sector Graphic.
Now before you go poking at the Flex version, Let me make one thing clear. The version I’ve put together is only a small portion of the functionality in that chart. As far as I know, that’s not due to any inherent limitations of the Flex charting components, but rather to the fact that I only put a few hours of work into this. Putting up a polished, produced and published application to be compared against a quick code sample is generally not a smart thing for me to do ;). But with only a few hours of work I was able to add the most visible and impressive interaction to the basic bubble chart supplied by the flex framework. It shouldn’t take too long for someone to take this example and turn it into a full fledged polished and working chart like the Sector Graphic.
Alright, with that caveat, here it is:
Interactive Bubble Chart
View the source
download the source
Some of the noteworthy concepts demonstrated by this example include:
Custom Bubble Item Renderer
Custom interactive Pan/Zoom chart element
Custom Axis Renderer
That last one is the real kicker. Between Beta3 and Release, we added the option of dropping your own component in as a custom axis renderer on a chart. Take a look.