Tour de Flex – How to add your components, effects, skins, etc.

We launched Tour de Flex at Adobe MAX last week and have already seen over 8,000 users try it!  The pace of downloads is still accelerating as people discover this new tool.  Also, it’s worth noting that over 250,000 samples were viewed via the application in the first 5 days.  In other words, people are checking out lots of samples!

At launch, we included several 3rd party commercial and non-commercial components, skins, and effects from Google, Yahoo, Mapquest, Degrafa, ILOG, Doug McCune, Stephen Downs, Kap IT Labs, Mark Shepherd, Alex Uhlmann, Twitter, Amazon, Flickr, SmugMug, Salesforce.com, Ebay, and others.  This is only the beginning.  As of this writing, there are 217 samples.  My goal is to have 1,000 samples within 6 months and I NEED YOUR HELP!

Criteria for adding your Components, Skins, Effects, etc.:

• Samples must be relevant to other Flex developers and provide an obvious value.
• The sample must be runnable within the Tour de Flex application.  If the sample has AIR-specific functionality, please include details in the notes so we can contact you to work out getting your SWF/SWC included in the next application update.
• The source code to each illustration must be well structured, commented, and conform to normal coding standards.
• Any prerequisites or dependancies must be clearly identified.

Preparing your samples for Tour de Flex:

• We prefer that developers host their own samples.
• If possible, illustrations should fit within the default 663×246 frame of the application without scroll bars.  When the illustration is expanded, the window grows to 663×524.  Please make an effort to at least avoid scroll bars when expanded.
• If possible, set the background gradient to your samples to backgroundGradientColors=”[0x000000,0x323232]”
  
• If possible, set the default background color to #323232 by adding the following compiler option: -default-background-color #323232 or editing the HTML wrapper to set the default color.
  
• Icons ( 18×18 ) should be created for each sample.  If no icon is provided, we will use a default icon.
• The easiest way to provide the source code is to enable the “View Source” option in your project.
• Links to your blog, home page, etc. may be included
• We recommend creating an “about” page to include in the list of document URLs. This is a great place to include links to your home page, blog and other information about your work.  For example, look at any of the ILOG samples.
• Typical deliverables for new Tour de Flex samples:
  • URLs for each illustration
  • URLs for each document (source, readme, ASDocs, about page, and anything else you want to include)
  • Short description of each sample – fewer than 25 characters (this appears in the tree/list on the left).  Also include the preferred folder/category name.
  • URLs for icons (optional)
  • URLs for the download link (optional – this is typically a link to the Flex project, SWC, etc.)

Testing your samples in Tour de Flex:

• There is a sample test application built into Tour de Flex. Choose  Other Components -> Sample Testing -> Sample Tester.   Enter your URL and click the PREVIEW button.

Deploying new samples to the masses:

Each time Tour de Flex is executed, it checks for an updated sample database (XML file).  New samples can be rolled out in seconds without forcing a complete application update.

Our intent is to do at least monthly updates to the sample database.

Now, go build some samples!

~ by Greg on November 23, 2008.