Screencast: Watch a Flex app built in 11 minutes
Comments: 27 - Date: November 14th, 2006 - Categories: Flex
[Update: This screencast has been updated for Flex 3. Read more about it here.]
Many times I am asked “Where do I start learning about Flex?”. Most of the time I point them to flex.org as a starting point. However it is often just easier to see the product in action. So I recorded a screencast of me building a simple Flex app with Flex Builder. Here it is:
http://www.adobe.com/products/flex/media/flexapp/
I hope this is helpful to those of you new to Flex. After you watch the screencast, download Flex Builder and give it a try. If you find yourself saying things like “Wow! Coding is fun again!” or “I had no idea RIA programming was so easy!”, Welcome to Flexland! A few years ago I found myself in Flexland and to me it’s like being in the mountains… Once you are there, you never want to be anywhere else. :)
Comment by guillermo Pared - November 16, 2006 @ 2:56 pm
Thanks, cool
Comment by Mark Murphy - November 17, 2006 @ 4:42 pm
You might consider linking straight to the SWF in addition to providing a link to the HTML wrapper. Your screencast doesn’t work in Linux using either Flash 7 (in Firefox) or Flash 9 (standalone player). But, then again, I might not have extracted the link to the SWF correctly, so I might have not done the Flash 9 test properly.
Comment by James Ward - November 17, 2006 @ 5:36 pm
I will try to get a standalone version of the SWF hosted here for download. However, just so you know, the video is probably streaming a flv and it does work fine on Linux with the Flash 9 plugin.
Comment by Stewart Grainger - December 6, 2006 @ 7:03 am
Can you make available the code for this project….! As it has some nice bits that I would like to use if possible….?
Pingback by 2 Sentences or Less » Blog Archive » Try Flex - December 6, 2006 @ 9:22 pm
[...] Screencast of a simple application being built using Adobe’s Flex Builder. [...]
Comment by James Ward - December 8, 2006 @ 12:24 am
Sorry it took so long. You can get the code here:
http://www.jamesward.org/phones/
Start with the FlexStore code that ships as a sample with the free Flex SDK and Flex Builder. Copy the assets and data folders into a new project. Then copy the PhoneDetails.mxml and PhoneRenderer.mxml files into the assets folder. Then copy the phones.mxml file into your project root, compile and run it! Let me know if you have any problems.
-James
Comment by Dave - June 1, 2007 @ 10:02 am
Thanks for the PhoneRenderer.mxml etc. I’m following along with the online demo and I find the data and assets in my install of flex2, but none of the .mxml files. tThis should help things.
Dave.
Comment by Rachid - December 11, 2007 @ 2:26 pm
Hmm,
“Definition assets:PhoneRenderer could not be found.”
Why is that ?
Pretty much followed the video…
Comment by Rachid - December 11, 2007 @ 2:55 pm
Ah, it seems that my browser is downloading the mxml files as xml files.
That doesn’t work obviously. :-)
Too bad that they don’t show how this itemRenderer is made, and how it works.
Looks like an incomplete tutorial to me this way…
Comment by James Ward - December 12, 2007 @ 2:04 am
Hi Rachid,
The PhoneRenderer.mxml should either be in an assets dir or you can change the itemRenderer to just be “PhoneRenderer”. I hope that helps.
-James
Pingback by [ ? ? ] ??????? » Blog Archive » ?Adobe Flex????? - January 5, 2008 @ 2:09 am
[...] ??Flex????Ward??????????????Flex??????????????????????????Flex?Java?????? Adobe Developer Connection? ? [...]
Comment by Jason - January 21, 2008 @ 7:51 pm
Could you give a brief tutorial, on how to add a close “linkbutton” to the details mxml in your phone example. so that the details panel could close.
Thanks, and “wow, flex is fun and easy!”
Comment by James Ward - February 7, 2008 @ 9:11 am
Hi Jason,
The best way to do this would be to add the close button to the PhoneDetails component. On click of that button dispatch a custom event. In the main application handle that event and switch the currentState to the default state (specified by ”).
I hope that helps.
-James
Comment by ashok - February 27, 2008 @ 1:46 am
hi james,
will it be possible for you to provide a link to the phone live app link. I was making my sample aplication, and all of a sudden the live flex app link to the phones application is no more there.
thanks,
ashok
Comment by James Ward - February 27, 2008 @ 8:50 am
I’ve uploaded the demo and code: http://www.jamesward.org/phones-demo/phones.html
Right-click to get the code. I hope that helps.
-James
Comment by Andriy Drozdenko - March 11, 2008 @ 8:04 am
Phones? The video is about cover flow. The <local:VideoCoverFlow is not bounded you used Doug McCune’s CoverFlow component and people dont understand where the VideoCoverFlow component came from… go on this link and see for yourself http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1340534 . Can you post the code for CoverFlow video tutorial please?
Pingback by James Ward - RIA Cowboy » Blog Archive » New Flex Screencast and VideoCoverFlow Component - March 11, 2008 @ 8:59 am
[...] the Flex 2 product pages on adobe.com I recorded a screencast of a Flex app being built in 11 minutes. For Flex 3 I recorded a new version of that screencast. In the new version I used Doug [...]
Comment by James Ward - March 11, 2008 @ 9:02 am
Hi Andriy,
The screencast has been updated for Flex 3. More details here:
http://www.jamesward.org/wordpress/2008/03/11/new-flex-screencast-and-videocoverflow-component/
-James
Comment by cojack cool - March 30, 2008 @ 5:48 am
hi James
iam from egypt thanks for the src i realy like it and it help me alot it more than i was looking for
god bless you
so have fun
bye
Comment by Pascal - March 30, 2008 @ 6:37 am
Hi there!
Any chance we could get a link to the first screencast? I’ve seen it before and wanted to go back to it because there were a couple of cool things you did in there that I can’t remember how you did.
thanks!
Comment by Pascal - March 31, 2008 @ 9:00 am
well I don’t know what I was on, but I just noticed the link to the live app a bit higher.. so nevermind my previous post and thanks for the screencasts :-)
Comment by Srikanth - May 6, 2008 @ 4:00 pm
Hi James,
I am trying to a similar application.I am able use the video cover flow component to display videos and play mp3 files that are streamed from Flash media server 3.
Now what i am trying to figure out is how do let the user search these videos ?In order to do that i will definitely have to put some meta-data associated with the video/audio files.I also want to do display some information about the videos/audio files when the user plays them.The information would typically be some few sentences about the video,about the author etc.
Is there a simple to achieve this by just using FMS and some action script?
Any information or pointers towards this will be very helpful.
Regards,
Sri
Comment by James Ward - May 7, 2008 @ 12:02 pm
Hi Sri,
You could probably just have some web service which searches your database of videos.
-James
Comment by Rajat - June 16, 2008 @ 3:25 am
well neither the code , nor the demo is workin for me …
i am getting following errors..
[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler()
at mx.rpc::Responder/fault()
at mx.rpc::AsyncRequest/fault()
at DirectHTTPMessageResponder/securityErrorHandler()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/redirectEvent()
any comments ???
Comment by James Ward - June 24, 2008 @ 2:11 pm
Thanks Rajat for letting me know. I need to update the demo to use my new .com URL instead of my old .org URL. That is why this no longer works. Sorry.
-James
Comment by Reshmi - July 20, 2008 @ 11:24 pm
i need a code in flex for displaying a video at the same time showing the timer.
Comment by James Ward - July 23, 2008 @ 9:06 am
Hi Reshmi,
That is easy to do. Basically just a VideoDisplay and a Label bound to some variable that changes in response to some event.
-James
Leave a comment