Introduction to Flex tutorial (part 1)

I just uploaded a new tutorial that explains the basics of using the Flex framework. It highlights certain features that don’t exist in Flash like automatic layout and data binding. In the tutorial we build a simple Twitter search application. In part 2 we will take this application and add some more functionality as well as skin it. If you want to be a Flash polymath you have to learn Flex. Plus it will make you much more marketable to employers.

Update: I asked Kevin Hoyt to take a look at this to see if I was doing things according to Flex best practices. He reminded me that the HTML wrapper includes all the code to handle the browser back button and history management. It isn’t simple the “crappy embed code”.

Lee


Commentary

  1. schmo says:

    G’day mate :D

    Awesome stuff Lee, been looking forward to some Flex stuff for a while… and *poof*, it appears!

    Keep up the good work!

  2. simurai says:

    At 3:00.. “..not the crappy Adobe embed code”. Haha.. That’s sooo funny when it comes from you! Glad you say what you think.

  3. vamapaull says:

    Great tutorial!!
    Watching it I got some really great ideas for some AIR apps… I need to put my hands on Flex :)

  4. this is really nice, I always here about Flex but don’t see too many tutorials compared to Flash

  5. Hunter says:

    Love it Lee!

    It’s great to see a Flex tutorial from you! I’ve tried playing around with Flex before, and checked out some other tutorials to try and get the hang of it, but they were nothing compared to this! Thanks!

  6. Daniel says:

    Woo!

  7. Yes! Let’s all create twitter clients and flight check desktop apps! There’s not nearly enough of those and they’re just plain *FUN* to create!

  8. Simonas says:

    Haha, the first time You retrieve the search, containing “adobe” in it. The last tweet got me laughing. Need to be very careful, when doing some public information application tutorials… That guy was evil!.. :)

  9. Clemente G says:

    Lee, great tutorial. I just started getting into Flex, couple weeks ago and its not very hard to learn actually if you already know flash. Kinda makes some things easier like you said.

    I really feel like I should pay you, I’ve learned almost everything in Flash from you….and google. =D Keep it up. Looking forward to the next part.

  10. dominic says:

    Cool one lee. It’s cool to see the Flash platform isn’t just Flash CS4 itself.

  11. luke says:

    Awesome stuff,

    I wonder if perhaps this tutorials was spurred on by the discussion on this blog about the Flash tools changing their names and people discussing whether they are flash or flex developers. Many people (including myself) had said that they had steered clear of Flex because it was for the more “hardcore” developers.

    It’s great to see a nice introduction to it from someone already so familiar to the Flash only crowd.

  12. Hassan says:

    Great tutorial! Can’t wait to see part 2!

  13. TheGreyMan says:

    Fantastic. Just what the doctor ordered. I’ve had no idea how to go about tackling Flex as it looks so alien to someone who is coming at Flash from a design perspective. Maybe this will enable me to overcome my fear!

  14. Will says:

    Lee,
    So to clarify, does Twitter actually have an open policy file on their server? I mean if something like this is deployed to the web and not running in the debug player it needs to access a policy file to access data from other domains right?

    Great video as always. Others may be interested in a free video series called ‘Flex in a Week’ over at Adobe – http://www.adobe.com/devnet/flex/videotraining/

  15. Gzzle says:

    Hi Lee,

    the first tut on Flex that really convinced me to use Flex!

    Pretty awesome!!

  16. Makubex says:

    cool tut Lee…
    But instead of using httpservice, can we use URLLoder to load the atom file and display the content using E4X.. since we are using actionscript….

  17. Dennis says:

    Thanks, Lee. I learned a new word – “polymath.” :)

  18. Frank Mawn says:

    Thanks man! I often heard of Flex but never really knew how it worked. Can’t wait for the part 2.

  19. iBrent says:

    Great stuff! Now I have more tutorials of yours I can sell. ;)

    iBrent

  20. Reuben says:

    Thanks for the video it was great

  21. John O says:

    Lee –

    I’m concerned about where this is leading you. Hanging out with the Flex crowd… Whats next? LifeCycle? FMS? We’re calling for an intervention. Please step away from the Flex SDK. Slowly. Help is on the way. LOL ;)

    - John O.

  22. Chris says:

    Hi Lee:

    Absolutely excellent, further broadens the learning horizon and usage of these powerful developing tools. So does this mean theflexblog.com (still visit on a regular basis though haven’t used Flex in a while – that will no change) will be merging with theflashblog.com?

    Looking forward to the second part and hope to get down to London at the end of February.

    Thanks again and keep these amazing tutorials coming… please!!!

  23. mloncaric says:

    Nice tutorial!
    But why are you using ArrayCollection instead of XMLListCollection if you’re dealing with XMLList array?

  24. AnotherFlava says:

    Great Lee, I would like to see some tutorials on using flash swf as flex sub applications(A sub-application is any application SWF file that is loaded into a main application SWF file), http://www.adobe.com/go/learn_flex_loading_applications_en

    Thanks again keep up the good work!

  25. Stan says:

    Thanks Lee! I have been looking for an excuse to start checking out Flex development, and using the Twitter API was very intriguing to me. As always, your tutorials are the easiest to understand and really help to kick-start new developers. Keep up the good work!

  26. Mark says:

    Brilliant, it’s good to see some Flex tutorials from you Lee. Keep them coming!

  27. Steven Erat says:

    SwfObject2 is now the default in Flex 4 to replace “the crappy Adobe embed code”. Flex 4 with SwfObject2 FP detection can be found in the latest nightly build on the opensource website.

  28. csomak says:

    hey, awesome tutorial! I’we got to learn this! :)

    i noticed, that your dreamweaver and illustrator icon is smaller than the others.. (in my pc too) why’s that?

  29. LeonBlade says:

    LOL @ “MXML Land”

    Love the new video!
    I tried to post a comment from my PS3, but it wouldn’t work :(

    Looking forward to Part 2, I love Flex!

    Try to get PS3 comments working!
    I’m posting from my iPod touch :)
    LeonBlade

  30. leef says:

    Cool, I still haven’t taken to MXML, wishing to avoid another layer of syntax and brainspace, lol. But I know I should wrap my brain around it, and am digging the Flex tutorial. Eclipse + Flex plugin FTW!

  31. AnotherFlava says:

    Hey Lee, I was wondering if turning off the html wrapper will allow you complies to run if you use external RSL, necessary to reduce the size of your final swf file when using flex…
    The bin debug in your example is 400+k FLEX OUTPUTS SOME PRETTY LARGE SWF’s

  32. John O says:

    AnotherFlava – The debug SWF is going to be larger because of all the debug code inside. In Flex, you always want to build a release version (Project > Export Release Build) when you’re project is done. This release version will be much smaller.

  33. AnotherFlava says:

    John O – Actually the bin release only shaves off about a couple of kb’s external RSL can dramatically reduce the size of your final file.
    Thing is as far as I can remember it does not run from the desktop, I will test it.

    http://www.adobe.com/devnet/flex/articles/flash_player_cache.html

  34. Steven Erat says:

    In addition to SwfObject2 integration in Flex 4, I also QA’d the HTML Wrapper code which was upgraded as well.

    Now in Flex 4, the Flex webtier compiler (which allows you to compile on the fly static or dynamically generated MXML) now has functional History Management and automatic deep linking on Navigator components like the Accordion and TabNavigator.

    As you click across tabs, the URL parameters automatically change so that you can send someone a link that will open to a specific tab view. The mxmlc compiler is distinct from the webtier compiler, and behavior varied widely in SDK 3 and earlier, but are now more closely aligned.

    Note that the HTML Wrapper code does not work in the latest Opera 9.5 and behaves oddly in Google Chrome. However, in MSIE 6, 7, 8 and Firefox 2, 3, and 3.1 beta the HTML Wrapper code and SWFObject detection behave properly for Flex 4 apps.

  35. Cader says:

    Lee

    nice tutorial, Keep up the good work lee.

    I would like to know that the tutorials that you creating can be loaded/viewed in Adobe Media Player (http://get.adobe.com/amp/)?

  36. John O says:

    AnotherFlava –
    From Grant Skinner’s blog (but information found elsewhere as well)

    http://www.gskinner.com/blog/archives/2008/12/always_export_a.html

    “When preparing a Flex project for deployment, always make sure to export a release build. I think most people know about this feature of FlexBuilder, but I’m not sure everyone is aware of just how important it is. The SWF that is generated when you run or debug your project contains a lot of extra byte code used for debugging and profiling your content.

    This extra byte code has a very obvious effect on the size of your SWF (adding over 35% in some cases). It also has a less immediately obvious (but no less significant) effect on the performance of your application. In one example here at gskinner.com, a 980kb SWF was reduced to 675kb, and some performance intensive code ran over 2.5x faster in the release build than in the debug version.

    Never deploy a project without exporting a release build, and be sure to test a release build if you are experiencing problems with file size, performance, or memory utilization.”

  37. AnotherFlava says:

    I agree a bin release should always be done however, the complied BIN-RELEASE version of this simple example is 299 kb just 32 lines of code!

    I also tested it using the external rsl, and it does not work without the bin-debug wrappers

    Removing the flex framework libs (external rsl) reduces the file size to 120kb
    Removing the RPC framework lib bought the file size down to 73kb around quarter the size of just the bin-release and a lot closer to what flash produces .

    JohnO – try it yourself and you will see the huge difference in file size, and while I can still use deep-linking library to get browser history I will not be able to test my movie if I remove the the bin-debug when external rsl is set. ;)

  38. go2coffee says:

    Nice work!
    When can we expect part 2?

  39. jimmy says:

    so great things you did!!!
    i hope you post more tutorials for FLEX!

  40. Mcometa says:

    Haven’t been around to check out gotoandlearn.com. It’s about time for this one. Thanks Lee~ Actually I’ve been trying to learn Flex from one of the training vids out in the market. And God! THEY SOUND BORING! Nothing beats the way to you teach people. :)

  41. Jason says:

    Hey Lee, Great tutorial – I think you could have spoken a little faster though. Very detailed in what you said and made it easy. Great stuff! Keep it up!

  42. aomikotaru says:

    you made me impressed with Flex!

  1. [... I just uploaded a new tutorial that explains the basics of using the Flex framework. It highlights certain features that don't exist in Flash like automatic layout and data binding. ...]

  2. [... I just uploaded a new tutorial that explains the basics of using the Flex framework. It highlights certain features that don't exist in Flash like automatic layout and data binding. ...]

Leave a Comment