Also available on Adobe TV.
Archive | Flex RSS feed for this section
I’m pretty sure you will have heard that the Flex 4 SDK, Flash Builder 4 and ColdFusion Builder have been released today. If not, check out Andrew Shorten’s blog post on the Flex Team blog.
A few weeks ago, most of us on the Platform Evangelism team reached out to the developer community, offering free Adobe Flex Builder 3 licenses to unemployed developers so they can learn a new skill and raise their profile. Needless to say that we were swamped with email requests. Today, this is now a more formal offering, with information and access to the program available at https://freeriatools.adobe.com/learnflex/
Video tutorial: Using the new states model in Flex 4
The states model has changed quite a bit in the Flex 4 framework but it’s a lot easier to use. In this video I show you just how easy it is to add different states and to add different behaviors and change properties based on the current state.
Getting started with Flex 4, Flash Builder 4 and ColdFusion Builder
I’m pretty sure you will have heard that the Flex 4 SDK, Flash Builder 4 and ColdFusion Builder have been released today. If not, check out Andrew Shorten’s blog post on the Flex Team blog.
Andrew Shorten: In the Flex 4 SDK, we’ve implemented a completely new component and skinning architecture (Spark) that supports a level of expressiveness in RIAs not seen previously.
In Flash Builder 4, the team has made it easier than ever to connect to back-end services with a complete set of data centric development features, enabled new design and development workflows with Flash Catalyst and Flash Professional, as well as enhancing the core code development features that are essential to developer productivity.
We also released a completely new IDE for rapidly and efficiently building ColdFusion applications.
ColdFusion Builder is built on Eclipse and is integrated with Flash Builder 4 for fast, easy RIA development. ColdFusion Builder is packed with features and also allows you to easily build your own extensions. RIAForge already has a bunch of these that are ready to go.
When we first introduced ColdFusion Builder to the community, Ben Forta (Mister ColdFusion himself ;-)) wrote an article on how to get started with ColdFusion Builder.
Flex.org got a fresh new look and new/updated content including a new resources page to help you get started. We also launched a new Flex showcase. If you feel that your app belongs in the showcase, make sure you let us know! Tour de Flex has also been updated with new samples.
If you’re new to Flex or just want to update yourself on the new features in the Flex 4 framework and Flash Builder 4, you may want to take the Flex In A Week course. If you just want a quick taste of what Flex is, have a look at the Flex Testdrive.
Adobe’s Devnet and Adobe TV have a ton of new content on how to get started and use Flex 4, Flash Builder 4 and ColdFusion Builder. But before you get started, you may want to download the trial versions for Flash Builder 4 and ColdFusion Builder. Quick note: If you already played around with the beta versions, make sure you uninstall those first before installing the release versions!
There… That should keep you busy for a while. ;-) Flash on!
Mission critical Flash
NATO started using a Flex application for their Mission Support System in 2007. I saw it in action once… but if I told you about it I would probably end up in a dark dungeon 20 floors below the NATO HQ in Brussels. During MAX in San Francisco in 2008 Peter Martin and Mansour Raad from Adobe Consulting and ESRI discussed the application. The presentation (available on Adobe TV) gives you an idea of how NATO is using Flex.
Today, ISS announced that under the sponsorship of the Air Force Research Laboratory and direction of Navy’s Space and Naval Warfare Systems Command (SPAWAR) they developed and deployed an application to enable critical infrastructure monitoring to the White House Situation Room.
The ISS team developed an application for deployment on the SPAWAR touch table framework, leveraging touch technologies to provide insight into the current status of various elements of critical infrastructure across the United States. The application provides users such as the President and his staff with the ability to view the status of any of thousands of pieces of critical infrastructure with a single tap on a touch surface.
According to Rob Rogers, Vice President of National Systems at ISS, “The touch table application for the White House presented many interesting challenges to the team. The application is really a mash-up of technologies including the ISS-developed Web Enabled Temporal Analysis System framework for data access and aggregation combined with a custom touch interface developed by ISS, utilizing the Adobe Flex framework, finally sending results to Google Earth. The President, Vice President, and the Secretary of Homeland Security have used the application and have expressed positive feedback.”
I doubt that I will ever get to see that application…
Flash on!
Flex: The Ecosystem
The Flex family extends far beyond the Flex Framework and the Flash Builder IDE. A lot of third party vendors have created applications, frameworks, components and tools to help you be successful in your application development. There are tools for functional, performance and security testing, third party components, AMF products, licensing and encryption tools and even plugins for Visual Studio.
To make it easier for you to find these third party tools, we’ve just posted a comprehensive list of products and projects that provide support for the Flex framework.
New on Adobe Labs: Squiggly – spell checking engine for Flash Player and AIR
One of the most requested features for both Flash Player and AIR is definitely a spell checker. Grant Skinner released a spell check engine about 2 years ago and it has been used in number of different applications. While it was totally worth the cost, I did hear from some people that they thought this was an expensive solution. Adobe also recognized the need for a spell check solution for Flash Player and AIR and a small team has been working on this for a while.
Today Adobe released a first preview version of Squiggly. The Squiggly library allows you to easily add spell checking functionality in any Flex 3 based text control. The distribution package consists of a utility for building your own spelling dictionaries, a sample English dictionary, an ActionScript package that checks individual words for spelling accuracy, and sample code that demonstrates “check as you type” functionality [demo]. At the moment the library only supports English but the team has promised to address this limitation in a future release.
Links:
Squiggly on Labs
Download Squiggly
Download Squiggly ASDoc
Squiggly forum
Behind the scenes of the MAX widget – ColdFusion, FMS and Flex
While I was taking some time off, I thought it would be a good idea to give you a peak at what’s running behind the scenes of the MAX widget and why I chose ColdFusion and Flex to build it.
Why ColdFusion?
There are a number of reasons why I chose ColdFusion but the main reason is that I wanted to create something fast and not worry too much about possible config issues when connecting to my Flex front-end. I wanted a solution that I could just quickly install on a new server and be ready to go without the need to add new extensions or plugins. ColdFusion is perfect for that. With one simple install, you have everything ready to go. From Flash Remoting to image manipulation libraries.
The other big reason is also very simple. I think eating our own dogfood is a big part of our job. I’m fairly new to ColdFusion. I actually first touched CF about a year ago on the On AIR Train Tour through Europe. That was the first time I played around with CF after oh… some 10 years of working with PHP. I looked at CF a few years ago and never really took another serious look at it. I’m sure there are many of you out there in the same situation and I would like to invite you to take another look at ColdFusion. CF has changed and matured a lot since the early days and is just a breeze to work with. With a minimum amount of code, I was able to rapidly code my database calls for the widget. Another cool thing about ColdFusion is that once you write your database code, you can use it in a number of different ways. You can directly call the methods using Flash Remoting in your Flex application, call it as a webservice from a mobile Flash application and/or call it from an HTML page without changing anything in the original code. I surely was pretty impressed when I saw that the first time. If you’re a long time PHP user and want to know more about ColdFusion, I’d like to invite you to my session at MAX. I’m going to talk about the difference and similarities between PHP and CF and also talk about what CF can do right out of the box.
Why Flex?
I thought long and hard about this one. Using the Flex framework does add a bit of overhead (about 200k) to my application but the return is well worth it. I also wanted to prove that you can easily do these types of applications using Flex. Even though it’s built with standard Flex components, it looks nothing like a standard Flex application. What’s even more important is that all the transitions and styles you see in the widget are available today. No Flash Catalyst or Flex 4 styling was used in this application. Another reason why I chose Flex for this is the fact that your application becomes so much more organized using the Flex framework. I know there are other frameworks out there that provide similar functionality for pure ActionScript 3 projects but over the last couple of years, I’ve really become accustomed to using the Flex framework and since time was limited I went with what I know best.
Why Flash Media Server?
Well… That’s obviously an easy question to answer. Yes, there are third party solutions and even services that would offer more or less the same functionality but I do work for Adobe and so I also chose our own dogfood for this task. It also just works. You download the installer package, install the server, run it and you’re ready to go.
How long did it take to build this?
Obviously the team size is very important in any project. So let’s talk about that first… Oh wait… It was just me ;-) From concept phase to development took just about 3 weeks. That also includes setting up the ColdFusion server and Flash Media Server from scratch, writing the back end and creating a little content management system (pictured here on the left) to easily add facts, administer user videos and check the Twitter stats. I also created a static image version using nothing more than some standard ColdFusion features and reusing the database calls that I already created for the Flash based widget.
Building this widget has been great fun and it was great to also be able to build a real application again. Now don’t get me wrong. Building demos is also a lot of fun but knowing that millions of people are going to see and use this application is a good feeling. Well… Maybe not millions but you have to set the bar high enough, no? ;-)
Anyway… I hope you enjoyed playing around with the widget as much as I enjoyed building it. Hope to see you at MAX in Los Angeles… Oh wow… Is that really just 3 weeks away? I better get back to preparing my demos then ;-)
Tutorial: Sexy transitions with Flex 3 (as used in the MAX widget)
When I showed the first versions of the MAX widget to a few colleagues, most were very surprised to hear that this was all built with the Flex 3 framework and that no Flash Catalyst or Flash CS4 was involved in this.
“Including the animations?“, was a question I got a lot. And yes… Even the animations are “programmed” using the Flex framework. And you know what… It’s really not as hard as it sounds. The Flex framework actually has a bunch of effects built in and they are really easy to use.
In this case, I used 2 move effects and specified a “Back.easeOut” easingFunction. This easing function creates that bouncing effect that you see in the widget.
<mx:Move id="moveIn" yFrom="400" duration="350" easingFunction="Back.easeOut"/> <mx:Move id="moveOut" yTo="400" duration="250" easingFunction="Back.easeIn"/>
You can use these types of effects in a number of different ways but the easiest way (I think) is to specify the showEffect and hideEffect on a component.
<mx:Canvas id="page1_back" showEffect="moveIn" hideEffect="moveOut" width="400" height="400"/>
When you set the visible property to false, the hideEffect will trigger and the showEffect gets triggered when you set the visible property to true. I’m sure you can already see how I built this ;-)
In the widget, you see 6 different pieces of graphics slide in to place over time. To do that, I created a timer that triggers my setup function over time.
var setupTimer:Timer = new Timer(150, 3);
setupTimer.addEventListener("timer", doSetupPage1);
setupTimer.start();
This timer will trigger the doSetupPage1 function 3 times with 150 milliseconds in between each call. All my doSetupPage1 function does, is set the visible property to true on the different pieces of graphics I want to show.
private function doSetupPage1(event:TimerEvent):void
{
switch (event.target.currentCount)
{
case 1:
page1_back.visible = true;
break;
case 2:
page1_middle.visible = true;
break
case 3:
page1_front.visible = true;
break;
}
}
To hide them, I’m actually doing exactly the same thing. Instead of setting the visible property to true, I set it to false and when all pieces of artwork are hidden, I trigger the function that reveals the next page.
[flash medium=5 w=400 h=400 mode=1]
To get you started, I created this little Flex project that demonstrates this approach. Now I’m not saying that this is best practice or not but I think it’s just an easy way to create sexy transitions with Flex 3.
Are you a developer? Recently unemployed? Get Flex Builder 3 for free
A few weeks ago, most of us on the Platform Evangelism team reached out to the developer community, offering free Adobe Flex Builder 3 licenses to unemployed developers so they can learn a new skill and raise their profile. Needless to say that we were swamped with email requests. Today, this is now a more formal offering, with information and access to the program available at https://freeriatools.adobe.com/learnflex/
To get you up and running with Flex in no time, Safari Books Online is offering a free 60-day subscription to a collection of books on Flex 3 and related RIA development technologies.
More information on https://freeriatools.adobe.com/learnflex/
Video tutorial: Use Flex for your ActionScript coding for Flash CS4
There are a couple of ways you can use Flex and Flash together. I’ve already showed you a couple of those in previous tutorials. In this video, I’ll show you how to use the SWC files created by a Flex library project in Flash CS4. That way, you can have an ActionScript developer work in Flex who can then hand off compiled SWC files to a Flash designer.
Video tutorial: Use the Flex webservice component in Flash CS4 projects
In this video, I’ll show you how you can use the webservice component from the Flex framework in your Flash CS4 projects. If you’re missing the webservice component in Flash, just use the one in the Flex framework.
UPDATE: My sincere apologies. There is an error in my code which I did not explain in the video.
Line 10 should not read myWebService.load but myWebService.loadWSDL.
I do remember we recorded this one twice and I fear that that’s where the mixup happened. Please download the working FLA below.
Download the FLA file.
