Monthly Archives: July 2006

Learning Flex through ‘Just MXML and AS3′


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 :)

Flex 2 Preloaders – SWF, PNG, GIF Examples


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 :)

Flex 2 Custom Preloaders


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 :)

Real World Flex Seminar – New York


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 :)

Generating Custom Classes with Interfaces in Flex Builder


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 :)

Filtering UI Data in Flex


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 :)

FlexComponents Discussion List


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 :)