On Monday, I received 2 email requests within 30 minutes requesting MXML/AS3 examples. I made an example, added a subject, and pasted the MXML/AS3 into the body. It struck me as a simple way to learn Flex, so I created ‘Just MXML and AS3‘.

The goal is for the community to post working MXML and AS3 examples to explore working Flex applications. Just paste the code into Flex Builder 2, Flex SDK, Flex Data Services, and it will compile a working example. You can then explore the working code and discover how Flex really works from the inside out.

I learn by doing, seeing, exploring, and understanding. Books are great, but there is no substitute for compiling code, seeing it work, and understanding it. It allows you to see patterns, discover new techniques, and explore another developer’s perspective. I have learned more from tinkering with source code than I ever have from a manual or textbook. Real understanding or innovation rarely comes from reading a manual, it occurs when you explore the known to discover the unknown and unwritten.

What would the modern world be like if the Wright Brothers had not tinkered with bikes, kites, and propellers? Real innovation and knowledge comes from exploration.

So what is ‘Just MXML and AS3‘ about?

OPEN – Anyone can post code to ‘Just MXML and AS3′ but all code is approved for publishing. Post example MXML and AS3 here.

DEVELOPER CREDIT – The name of the developer will be in the post title. “by YOUR NAME HERE” will be in every post.

TEXT POWERED – With ‘Just MXML and AS3‘ you can compile an application in less that 1 minute and see code working on your machine. With text, sharing code is as simple as cut and paste.

I look forward to seeing what you contribute to ‘Just MXML and AS3‘ and I want to encourage everyone to post code often. There is so much to learn in AS3 and MXML that we could post 1000′s of examples and still not cover every feature.

Post code, Get credit, Have fun!

Cheers,

Ted

Last friday I posted an example of custom preloaders for Flex 2 applications. Using the exact same code, I made 3 examples this morning that show the use of PNG, SWF, GIF within custom preloader classes. Also full source is available below…

SWF Flex 2 Preloader
SWF Flex 2 Preloader View Source
SWF Flex 2 Preloader Source ZIP

GIF Flex 2 Preloader
GIF Flex 2 Preloader View Source
GIF Flex 2 Preloader Source ZIP

PNG Flex 2 Preloader
PNG Flex 2 Preloader View Source
PNG Flex 2 Preloader Source ZIP

I will be posting a new release later this week that contains the progress notification for users of the preloader state. Users will be able to see:

1. Loading progress of RSLs.
2. Loading progress of base SWF.
3. Initialization progress.

More to come!

Ted

I have been working on a custom preloader component for Flex. The idea here is to make the preloader into a splash screen just like desktop applications. It conditions the user to think that this is not a web page and is an application. Here is the first public build.

Flex 2 Custom Preloader Example

Flex 2 Custom Preloader View Source

Flex 2 Custom Preloader Source ZIP

Next Build:

- Add Download Progress
- Add RSL Download Progress
- Add Initialization Progress

Features:

- Preloader is available after application initializes.
- Preloader is faded in and out.
- Preloader supports GIF,JPG,PNG,SWF (Yes, Flash Preloaders are supported!)

I am adding in download/initialization progress into the preloader next week. Currently there is no feedback to the end user that the app is loading or initializing, this will change in the next build.

The important item here is that these preloaders can contain GIF, JPG, PNG (with transparency) and SWF files (Flash 2 or higher!). I made sure that it was easy to embed assets into the base movie for playback before the base Flex SWF has loaded. This makes building/customizing preloaders easy. Simply swap the file (welcome.gif) in the /preload directory and edit the Embed statement in the preload.WelcomeScreen.as Class and you are good to go. The goal here was to allow anyone to make a killer preloader for Flex 2.

I will continue to add features to the preloader as needed until it hits 1.0. Getting the base design ready was not easy but now that the hard part is done, it looks to be smooth sailing.

If you want a feature added please post a comment.

cheers,

Ted

Today July 20 is the last day for Early Bird registration for the Real World Flex Seminar in New York City. The session content at the seminar is simply fantastic and if you are getting into Flex development this looks to be a great way to learn.

Here is the Real World Flex schedule:

Keynote: David Mendels, Adobe
Yakov Fain + Dr. Victor Rasputnis: Flex and Java
Christophe Coenraets: Extending AJAX with Adobe Flex
Simon Horwith: Flex Data Services
Dave Wolf: Cynergy Systems Technology Presentation
Jesse Randall Warden: Flash & Flex – A Winning Combo
Fumi Matsumoto: Building RIA Consumer Shopping Experiences
Mansour Raad: On Creating Great Mapping Mashups Using Flex
Flex Power Panel Live on SYS-CON.TV

Again to save $100 you will need to register before midnight tonight July 20th!!!

What is really interesting for me is that both my current and former employers are sponsoring the seminar. It will be good catching up with everyone at the conference.

See you in New York!

Cheers,

Ted

While putting together a custom Preloader for Flex 2 I generated an ActionScript 3 Class using Flex Builder. I decided to explore the Add/Remove Interfaces feature in the New ActionScript Dialog. OMG, this is such an awesome feature, I am speechless.

For every Interface you add to your new class, Flex Builder will add all the methods the Interface needs with correct input and return types instantly. I didn’t really know what to expect but this far exceeded my expectations.

Try this:

1. Open Flex Builder
2. Create New Flex Project
3. Create New AS Class
4. Enter Class Name
5. Enter “flash.display.Sprite” for the SuperClass
6. Enter “mx.preloaders.IPreloaderDisplay”
7. Make sure that ‘Generate functions inherited from Interface’ is checked.

Bingo! A perfect custom preloader AS3 Class, ready for deep customization. Rockin!

I love automation, don’t make me think, save me boatloads of time, and works perfectly every single time! Great work Flex Builder Team, this one is a jewel.

Custom Preloaders are loading…

Cheers,

Ted

There is a very useful UI pattern emerging for RIA applications in terms of filtering results. Basically as a user enters data and results are filtered in real time. I have seen many cases of this recently in several applications and thought highlighting a few would be useful.

Slider Based Filtering:

HomeLocator by ASFusion

Flex Store(view Products)

Text Input Filtering:

YouTube.com Live Search by Kirk Ballou

FlexJax Search (php/mysql) $$

Search Grid Component by Uday M. Shankar

Apollo Tunes by Mike Chambers

What I find interesting about these examples is that filtering simplifies the amount of visible data. Filtering removes irrelevant data from view and allows the end user to focus and work within the remaining data. The slider model allows you to set high and low bounds on the viewed dataset and the text input provides search results. It will be interesting to see changes to this pattern as we see many Flex applications appear publicly.

More to come!

Next post is “Custom Pre-loaders for Flex 2″!

Ted

The new FlexComponents list is 100 Percent focused on creating custom components for Flex. The list is NOT for general Flex development and is laser focused on creating custom components for Flex. If you are creating components for Flex, please join in.

FlexComponents

Post message: flexcomponents@yahoogroups.com

Subscribe: flexcomponents-subscribe@yahoogroups.com

Unsubscribe: flexcomponents-unsubscribe@yahoogroups.com

Regards,

Ted

I wrote TagTV over the past 2 days for my session at Mashup University on Monday at the Computer History Museum in Mountain View, CA. The event should be allot of fun and I will be highlighting Flex 2 from a mashup developer perspective.

Mashup University – Mashups in Flex 2 by Ted Patrick – Monday 9:45-10:45

CNet is going to be covering the conference and is recording the sessions for web broadcast.

TagTV – Flex RIA for viewing/saving photos and video.

The goal with TagTV is to provide an alternate search/viewing/saving format for photos and video in a single interface. All viewing/searching/saving of content occurs on your TagTV desktop. As you search, you are interacting directly with YouTube.com and Flickr.com backends. All media in TagTV is driven by these content sources. The application allows you to save media and searches within TagTV within the settings panel. If you refresh your the TagTV page, all saved data will be saved with the exception of your viewed media history.

Click to View TagTV

The full source for TagTV is available, simply right click to view source and to download a ZIP file of the entire application.

Enjoy TagTV and see you at Mashup University!

Cheers,

Ted

Mike Chambers presented Apollo at ACDS. I posted his slides that shed some light on the Apollo project. I have had the pleasure to work with Apollo and it is easily one of the most impressive projects in development at Adobe.

Apollo – Mike Chambers
on
What is Apollo?

Apollo is a cross-OS runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.

More to come!

Ted

It is time to update site detection scripts, yet again. Many sites search for a version lower than a fixed player version and break when you visit with Flash Player 9. Flash 9 is compatible but your site’s JavaScript needs an update.

Future-Proofing Flash Player Detection Scripts

I have long advocated using SWFObject for Flash Player detection because its simple to use and it works. Basically SWFObject overwrites an HTML DIV tag with minimalist Object/Embed if a player version is supported.

For Flex 2 applications, I recommend sticking with the default HTML/JS templates in Flex Builder 2 and the generated HTML/JS from MXML files in FDS. These templates include some new code that seamlessly enables Express Install within Flex application. If a Flash Player views this HTML/JS and they have Flash Player 6 r65 or higher they will automatically be prompted to upgrade their player. After the download the Flex 2 application is displayed. The user experience here is really great and there has been allot of hard work to enable this killer upgrade feature for Flash Player.

Geoff, contact me so that we can get SWFObject working seamlessly with Flex 2 applications. We need to make it drop dead simple to get Flex 2 SWF into HTML applications in the small and in the large.

Again update your JS/HTML to be compatible with Flash Player 9.

Regards,

ted