Flex ActionScript 3.0 Odeo API Example with Live typing reflection

Delving deeper into the ActionScript 3.0 API research I present the Odeo API Example. Full source available. Use of TileList with drop-in ItemRenderer. Parallels for animation and the search text field has a real time “web 2.0″ reflection. A little bit of Flash CS3 to Flex communication going on here too.

This application should probably be broken down in terms of architecture. Refactoring this to PureMVC or Cairngorm would be a fun project. Perhaps after the remaining API examples have been completed.

http://www.seantheflashguy.com/flex/OdeoBasicExample/

Check out “Snippage” AIR App by: Gabocorp (Gabo Mendoza)

SnippageWe all remember the old school gabo site. Here is an AIR application Gabo Mendoza is developing. It looks pretty cool. From the homepage:

“Wouldn’t it be great if you could take pieces of your favorite web sites and put them on your desktop? Things like that auction you’ve got your eye on, your web mail’s inbox, or even that search box you’re always using. Well, Snippage lets you do just that.”

http://snippage.gabocorp.com/

http://pixelbreath.gabocorp.com/?p=26

Shout out to Morgan at Digital One Stop for pointing this out.

Flash CS3 and Flex 2 communication using ActionScript 3.0

Flex and Flash CS3 communicationHere is an example that demonstrates how to control the timeline of an SWF that was published with Flash CS3 from AS3 code in a Flex project. The Flash CS3 based SWF is set to publish for Flash Player 9 and uses ActionScript 3.0. The SWF is loaded into Flex using a SWFLoader control. Once it is loaded functions on the timeline of the loaded SWF can be called from functions in the Flex project.

This is something I have wanted to look into for a while now. I just got the chance last night while working on the Odeo API example. Using this technique really starts to blur the lines between Flex and Flash CS3. I think this approach also opens the door to more opportunities for interesting UI development.

View example here.

Full source available.

ActionScript 3.0 API’s Examined: YouTube up first!

YouTube API Basic ExampleIf you didn’t see the list of 22 ActionScript 3.0 API’s that I posted you might want to take a look. To continue exploring the API’s I have decided to begin creating simple examples for 10 of the 22 from the previous post. I have broken these 10 into the following categories: Media, Social Networking, Marketplace, Misc and 3D. Currently on the line up: YouTube, Odeo, Flickr, Facebook, Twitter, del.icio.us, Amazon, ebay, Away3D, Papervision3D.

First up is the uber popular YouTube.com. I was disappointed that the YouTube API does not have a means to provide a path to the raw FLV file via the API. That would be loads of fun considering what can be done with video in the Flash Player.

I started with the YouTube API hoping that pulling in video data would be supported, oh well. I did notice another YouTube example that Ted Patrick created that does appear to pull in the actual video. I was getting a #2044 error from his example so I wasn’t able to see that in action. I also received the same error when trying to upload this example to my server. That is why the working SWF/HTML isn’t available.

You can view the source here. You can also download the source here. Once you get the example set up in Flex Builder the #2044 error should cease. If anyone has any info on this please drop me a line..

This example uses Adobe’s as3youtubelib and as3corelib. You will need to download these using Tortoise SVN. Here is a decent looking tutorial on that if you need. Once you get the libraries downloaded you’ll need to add them to your Flex project’s Build Path.

The UI for this example has a very basic October/Halloween theme. I used a piece of vector art for the background and then used a Halloweeny typeface to kick up the look and feel a notch.

For the Top Ten video display a TileList was used. The TileList uses a drop in ItemRenderer.

One minor issue I had with the as3youtubelib was with regard to data binding. I ended up needing to create my own custom, bindable VideoVO class. This is because the properties of the as3youtube Video class are not bindable. I could be doing something incorrectly here, again drop me a line or leave a comment with any suggestions, info etc.

The next API slated is the popular podcasting service Odeo. I hope to keep these examples as simple as possible. Leave a comment with questions or suggestions.

And don’t forget to: “Flex it up a notch!”

Recap: Kevin Lynch Flashforward Boston Interview

A few items mentioned that caught my attention:

Astro
Microformats
RIA
Take advantage of the local system with AIR
Buzzword
Picnik

Thanks Aral and Kevin, this was a great interview, and thanks for the info!!

Kevin Lynch Flashforward Boston Interview
http://aralbalkan.com/1034

Kevin also mentioned technorati.com. I am adding my blog to technorati with this post.

Sean Moore Technorati Profile

Flex Skin Design Deconstructed - Behind the Design

Here is an excellent article from Dolores Joya regarding user interface design using Flash, Illustrator and Adobe Flex. This is a behind the scenes look at a designers approach to creating a custom, skinned Flex application. Get inspired!!

Flex Skin Design Deconstructed - Behind the Design

I’ve always loved repeat motif or repeat patterns since I first learned about them in my graphic design class in ‘95. That is also one of the things that caught my eye about the San Francisco inspired style and movement called “Hyphy”. The concept of repeat patterns layered with metallics is big in the Fashion scene right now and one that I employed as a recurring theme throughout this design. I dipped into this style for my 1st Flex skin theme called Green and Gold GUI Flex Skin. Below I’m going to go into my design approach to creating this unique user interface design using Photoshop, Illustrator and Adobe Flex. I call this user interface art.

UPDATE:
The link above appeared to be broken. It should now be working.

Search craigslist From Your Desktop Using Burrow (made with AIR)

Burrow extends the search ability of Craigslist.org classified ad listings. Search and scan results from up to 20 cities at once. Clip and save listings. Email the results to you or a friend. Turn on auto update to refresh listings.

Now telecommuters and contractors can quickly scan gigs from all over the US, Recruiters and Real estate agents can track listings covering more territory. Pinpoint “For sale” items and find people, apts, and friends faster.

Please leave additional feedback, feature requests or bug reports here in the comments.

The Adobe Intgrated Runtime (AIR) is required for Burrow to run. Use the Express Install link to automatically setup AIR and Burrow or download and install them separately.

Burrow Homepage:
http://www.seantheflashguy.com/burrow

Burrow Installer Direct Download Link:
http://www.seantheflexguy.com/air/burrow/burrow_v1_08.air

AIR Installers:
http://labs.adobe.com/downloads/air.html

Burrow has been entered into the Adobe AIR Developer Derby. Wish ‘er luck!

10 New Flex and AIR Books to watch for in 2008 and Fall 2007

Here are 10 new books that will be available in late 2007 and throughout the year in 2008. Enjoy!

Foundation AIR:
Creating Desktop Applications with the Adobe Integrated Runtime (Foundations)
by: Zach Stepek
Paperback - Jan, 2008

Professional AIR: Application Development for the Adobe Integrated Runtime
by: Charles Freedman, Keith Peters, Clint Modien, and Ben Lucyk
Paperback - Feb, 2008

Flex X Cookbook:
The Adobe Developer Library Guide for Rich Internet Application Developers (Cookbook)
by: Joey Lott and Chafic Kazoun
Paperback - Feb, 2008

Flex X User Interface Design & Development:
Creating User-Friendly Rich Internet Applications
by: Matt Voerman and Simon Reid
Paperback - Feb, 2008

Creating Mashups with Adobe Flex and AIR
by: Chris Korhonen and David Hassoun
Paperback - Jan, 2008

Professional Adobe Flex 3
by: Rich Tretola
Paperback - Jan, 2008

Foundation Actionscript 3.0 with Flash CS3 and Flex
by: Steve Webster, Sean McSharry, and Tim Willison
Paperback - Nov, 2007

AdvancED Flex Application Development: Building Rich Media X (Advanced)
by: R Blank, Chris Charlton, Omar Gonzalez, and Hasan Otuome
Paperback - Oct, 2007

Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers (Solutions)
by: Marco Casario
Paperback - Oct, 2007

Flex 3: A Beginner’s Guide
by: Michele E. Davis and Jon A. Phillips
Paperback - Mar, 2008

List of 31 Flex APIs, Libraries, Components and Tools

Following up the list of 22 ActionScript 3.0 libraries is a new list of 31 Flex APIs and resources. You will find: time saving APIs, libraries, tools and other resources related to Flex development.

Adobe Flex cookbook beta
http://www.tiny.cc/VbU44

AnimatedGIfLoader Flex Component
Allows you to load animated gif files into your Flex applications
http://dougmccune.com/blog/animatedgifloader-flex-component/

Asdia
Provides an easy way to integrate flowcharts, uml or any other diagrams in flash tools.
http://code.google.com/p/asdia/

as3flexunitlib
ActionScript 3.0 framework for unit testing.
http://code.google.com/p/as3flexunitlib/

AsWing A3
Allows programmers to make their flash application(or RIA) UI easily
http://www.aswing.org/

Cairngorm
http://labs.adobe.com/wiki/index.php/Cairngorm

DisplayShelf Component
Provides a rich, templatable control to display a faux-3d view of a list of items
http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/

flex2treemap
Treemap Component for Adobe Flex 2
http://code.google.com/p/flex2treemap/

flex4filemaker
Flex4FileMaker is an Adobe Flex 2 FileMaker API modeled after the FileMaker PHP library.
http://code.google.com/p/flex4filemaker/

FlexBook
Flex flip book component. Supports transparantcy.
http://www.quietlyscheming.com/blog/components/flexbook/

flexbox
Directory of Flex Components
http://flexbox.mrinalwadhwa.com/

flexcalendar
Flex Calendar Components
http://code.google.com/p/flexcalendar/

flexedtoolkit
Flexed Toolkit
http://code.google.com/p/flexedtoolkit/

FlexLib
community effort to create open source user interface components for Adobe Flex 2.
http://code.google.com/p/flexlib/

flexservicelocator
ServiceLocator for flex to use web service
http://code.google.com/p/flexservicelocator/

flextube
FlexTube is an flex UI front end for youtube
http://code.google.com/p/flextube/

Flex 2 Basic Email Form
Cut and dry example using an HTTP Service to send an email in Adobe Flex 2 via a simple PHP email script.
http://augiemarcello.com/flex-2-basic-email-form/

Flex 2 Debug Component
http://www.mikenimer.com/index.cfm/2006/7/5/FlexDebugPanel

Flex 2 Primitive Explorer
http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html

Flex Developers Journal
The first and only independent magazine serving Adobe Flex developers worldwide.
http://flex.sys-con.com/

Flex Style Explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Fluorine
FLUORINE is an open source .NET Flash Remoting Gateway.
http://fluorine.thesilentgroup.com

Free Visual Reflection Component for Flex 2
http://blog.benstucki.net/?id=20

Granite Data Services
Free, open source (LGPL’d), alternative to Adobe® Flex 2 Data Services for J2EE application servers.
http://www.graniteds.org/confluence/display/INTRO/Granite+Data+Services

JAM - Just ActionScript and MXML
http://www.onflex.org/code/

Live “reflection” component
http://www.rictus.com/muchado/2006/07/05/live-reflection-component/

osflash-xray
Open Source Flash Debugger for AS2/AS3/Flex1.5/Flex2
http://code.google.com/p/osflash-xray/

scale nine
themes for flex and apollo/AIR
http://www.scalenine.com/

SpringGraph
Adobe Flex 2.0 component that displays a set of items that are linked to each other.
http://mark-shepherd.com/blog/springgraph-flex-component/

The Flex Show
Jeffry Houser and Ryan Stewart’s Poscast covering Flex related topics.
http://www.theflexshow.com/blog

The ServeBox Foundry
Based on several design patterns, and includes tools built to resolve some of the recurrent Flex 2 development challenges.
http://sourceforge.net/projects/sbasfoundry

Yahoo Astra Components
Tree, Menu, TabBar, AutoComplete, and Charts
http://developer.yahoo.com/flash/astra-flash

Yahoo! Maps Web Services - Flexâ„¢ API
http://developer.yahoo.com/maps/flash/flexGettingStarted.html

ZoomFrame
http://www.zeuslabs.us/2007/08/14/open-source-flex-component-zoomframe/

Very Simple LogoViewer created with Flex Builder

While traversing through some potential typefaces for my brand the thought occurred to me to build this simple logo viewing application. While helping companies define their brands my lovely and talented wife often sends out multiple versions of logos using various typefaces to clients using PDF files. That is what jarred the idea for this application concept. There is nothing crazy going on here a few Canvas containers a Slider control and of course Tweener.

Anyway, thought I would share. Any thoughts on a typeface selection are appreciated too! If there is any interest I may build this app out a little more. Too many other things going on though at the moment…