Archive | Flex RSS feed for this section

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!

Read full storyComments { 23 }

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.

Read full storyComments { 13 }

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

Read full storyComments { 17 }

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.

maxwidgetadmin.jpgWhy 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 ;-)

Read full storyComments { 7 }

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.

download_manager_72x72

Download the source.

Read full storyComments { 14 }

Are you a developer? Recently unemployed? Get Flex Builder 3 for free

adobe_flex_builder_s.jpgA 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/

Read full storyComments { 13 }

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.

Read full storyComments { 19 }

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.

Read full storyComments { 12 }

Recently laid off? Learn a new skill, upgrade your profile.

UPDATE: This is now a more formal offering. You no longer need to send email. For more information read this post.

I’m sure I don’t have to tell you that the economy is not in a good place right now. Since October 2008, more than 300.000 people have lost their jobs in the tech industry.

I’m not saying that being laid off is fun but you could see it as an opportunity. An opportunity to learn a new skill and while doing that, upgrade your profile. There’s still a pretty strong demand for Flash/Flex/AS3.0 skills. So, if you haven’t looked in to those technologies, why not do it now?

If you’re interested in learning Flex, send me an email (serge@adobe.com) and I may be able to hook you up with some stuff ;-)

Read full storyComments { 10 }

Video tutorial: Create Flex container components with Flash CS4

In this video I show you how to make a Flex container component with Flash CS4 and the Flex Component Kit for Flash.

The Flex Component Kit for Flash is incredibly powerful and allows you to combine your Flash design/development skills with the power of the Flex framework.

Subscribe to the Adobe Developer Connection videos on iTunes.

Read full storyComments { 13 }
Page 1 of 3123