Flash Builder

Choosing the Right Mobile Development Platform – D2WC

I had a fantastic time in Kansas City last week at the Designer/Developer Workflow Conference. I ran a workshop  on jQuery Mobile and did a short talk on Choosing the Right Mobile Development Platform. I had a room full of great folks both times around!

I’ve just posted my slides from the talk on Speakerdeck. If you have any questions, please feel to ping me.

Flash Catalyst CS5.5 and Flash Builder 4.6

You might be aware that a new version of Flash Builder 4.6 was recently released. Along with that release, Adobe also released Flex SDK 4.6. Unfortunately, Flash Catalyst projects are not compatible with the new SDK.

Flash Catalyst Project error in Flash Builder 4.6

The reason for this error is that Flash Builder 4.6 does not come with Flex SDK 4.5 installed. You can manually install this SDK, and you should not have any issues.

If you would like to convert your project to use Flex SDK 4.6, there are a few steps you need to perform. The first is to disable the Automatic Check Compatibility function. Note: You can not do this in the Project Properties panel, it must be done via the menu.

Flash Catalyst Compatibility Checking

With the Flash Catalyst Checking disabled, bring up the Project Properties panel.

Project Flex SDK Properties

Change the SDK version to 4.6 from 4.5. Click OK. Your project will now compile under the new SDK. However, this means you will no longer be able to round-trip the project with Flash Catalyst.

Hope this quick post helps.

Adding Keyboard Navigation to a Flash Catalyst project

Sometimes you might want to use the keyboard to control your Flash Catalyst application, but keyboard input is not directly supported. But with just a little bit of ActionScript code, you can create a prototype for navigating via your keyboard.

The first step is to create your Flash Catalyst application like you normally would. For this example, I have built a simple image viewer. Each image fades in, and a caption then fades over the image. Each adjacent state has a set of transitions applied to them. Don’t forget to have a transition to and from the first and final states.

Now, let’s import the FC project into Flash Builder. Remember to use Project > Flash Catalyst > Import menu and not the File >Open menu. This method preserves some of the metadata that Flash Catalyst uses for round-trip editing. In the Project Explorer, locate the Main.mxml file and open it.

Depending on if you have added any interactions, you might already have atag near the top of your file. If not, you will need to add it to your file. The first thing we need to create within this tag is a list of all the states that are used in the application. We are going to store these values in an array named theSlides.

private var theSlides:Array = ["State1","State2","State3","State4","State5"];

If you have forgotten what you named them, look for thetag in the Main.mxml file and you will see them listed.

We need to create a variable that will store the index value of our current state. Like I have written before, programmers love to start counting from zero, so the first state is actually 0 and 1. Since the number of states is not going to change, we can also store this value as well. It will be used to determine when the state is reached.

private var theCurrentSlide:Number = 0;
private var theNumOfSlides:Number = 5;

With our variables set up, we can now turn our attention to adding the code that will listen for our key press event. This is a three-step process. Your FC application might have an application_creationCompleteHandler function. If not, we need to add an attribute to thetag and write the function. For thetag, you will add this new attribute at the end.

To add this function, return to thetag, and after the variables that we defined, add the following:

protected function application_creationCompleteHandler():void
{
}

In this function, we will define the initial state of our application

currentState='State1';

Next, we need to add our basic mouseEvent listener. Wait, I thought we were going to be using the keyboard and not the mouse! The funny thing is for this to work correctly, we need to give focus to application, and not the browser. Hence the need for this bit of code:

this.addEventListener(MouseEvent.CLICK, clickHandler);

On the next line we can add our event listener for our key events

this.addEventListener(KeyboardEvent.KEY_DOWN, slideChange);

If you see little yellow triangles in your editor next to these lines, don’t fret. These are just warnings from Flash Builder saying that we have not written the functions that our event listeners will call when triggered. So, let’s fix these problems.

First, we can add the function to handle the mouse click event, and give our application the focus it deserves.

private function clickHandler(event:MouseEvent):void
{
    stage.focus = this;
}

Now let’s add the final piece of the puzzle, the keyboard event handler. This function is a bit more complex, so hang in there as we walk through it. The function looks similar to our other functions we have added:

private function slideChange(evt:KeyboardEvent):void
{
}
You might notice that this function accepts a keyboard event as a parameter. One of the items within this keyboard event is the numeric code that identifies which key the user pressed. The left arrow key’s code is 37, the right arrow key’s code is 39, the up arrow key’s code is 38, and the down arrow key’s code is 40. So with an if-else statement we can act properly upon each key press. Here is the framework for this:
if (evt.keyCode == 39) {
} else if (evt.keyCode == 37) {
} else if (evt.keyCode == 38) {
} else if (evt.keyCode == 40) {
}

Now that we have a framework, we need to apply the logic to change our application to the proper state. To advance to the next state, we need to increment our counter by one. Then we need to check if we have exceeded the total number of states (or slides). If we have exceeded, we then need to reset the counter back to zero. Once our counter has a valid value, we can look up the name of the next state, and tell our application to change to it. Here is the code for this:

++theCurrentSlide;
if (theCurrentSlide == theNumOfSlides) {
   theCurrentSlide = 0;
}
currentState = theSlides[theCurrentSlide];

If we want to view the previous state, the process is almost identical to the code above, we just need to subtract 1 from the counter, then check that the value is not less than 0. If it is, set it to the last index value. (Remember, programmers start counting from 0, so the last index value is actually 1 less than the total number of states).

--theCurrentSlide;
if (theCurrentSlide == -1) {
   theCurrentSlide = theNumOfSlides - 1;
}
 currentState = theSlides[theCurrentSlide];

For the up key, I have the application return to the first state. Conversely, the down arrow sets the application to the last state. I did not create transitions for these state changes, so the visuals will just pop in.

And that is it! It may seem like a lot when you write it all down, but in reality it is just a few lines of ActionScript. Here is FXP of the project, and here is the example working.

Updating Flash Catalyst 1.0 projects: Part 2

Recently I have been updating some older Flash Catalyst 1.0 projects to work in the latest version. I have previously documented a few of the changes you might need to make. Most updated with out a problem. But I recently was updating a project that had a SWF animation included in the project. I brought the project into Flash Builder and applying the other updates. I then tried to export the project, and I received a warning about “Unexpected child: “swfcontroller1″. Expected a compatible visual component”. Ugh.

Luckily, the fix is fairly simple. In Flash Catalyst 1.0, SWF content was displayed using the <fclib:SWFController> tag. This component is no longer supported in the new version of the SDK. So, instead we need to use the <s:MovieClipSWFLoader> tag. I would recommend adding an id attribute (which may not be present in the <fclib> version. The rest of the attributes should be identical. And with that quick edit, my project exported just fine.

Hope this helps!

Review: Flash Development for Android Cookbook by Joseph Labrecque

The world of mobile development is a new and exciting world for many Flash and Flex programmers.  They are learning about a whole new development platform, that utilizes a variety of technologies like accelerometers, GPS, cameras, microphones, and touch screens, just to name a few. Joseph Labrecque, employed by the University of Denver as senior interactive software engineer specializing in the Adobe Flash Platform, has written a clear and concise collection of recipes on these and other mobile development specific topics.

This book is not an introduction to development on the Flash Platform. Some familiarity with ActionScript is required. Nor is this book designed to have you work through an entire project from cover to cover (like the Classroom in the Book series). It is intended more as a reference guide.

For example, the chapter on using geolocation will walk you through the various class imports that are required, as well as the methods and functions that can be accessed, but it does not place it within context of an actual application. The advantage is the reader can see just the relevant code for using geolocation in their application, without have to create a ‘real-world’ demo, which often confuses the reader in the end.

Joseph does an excellent job in showing each topic for a variety of development environments. If you develop in Flash Professional, Flash Builder, or FDT, you will find this book useful.

“Flash Development fo rAndroid Cookbook” is one of my top recommended resources to anyone starting to develop in the mobile space.

Updating Old Flash Catalyst Projects

Recently, someone was trying to use the Flash Catalyst Classroom In A Book files with Flash Catalyst CS5.5. Unfortunately, those files were all authored with Flash Catalyst 1.0. For most of the files, this is an easy fix if you have Flash Builder 4.5 installed. If you don’t, you can download a trial version from Adobe.com.

Once you have imported the FXP into Flash Builder, open the Main.mxml file. This can be found in the PackageExplorer panel, inside the src > (default package).

Now select Properties from the Project Menu.

Flash Builder Player Target Dialog

Then, select the Flex Compiler option from the list on the left. Now change the Adobe Flash Player options from ‘Use a specific version’ to ‘User minimum version required by the Flex SDK’, and click OK.

You can now export the project for use in Flash CatalystCS5.5. Do this, again go to the Project menu, select Flash Catalyst > Export Flash Catalyst Project. It will run the Compatibility Checker, and then export the FXP. There are a few CIB files that require some additional editing, and they are being worked.

Adobe MAX

Adobe MAXI am honored to be speaking on “What’s New in Flash Catalyst CS5.5” at this year’s Adobe MAX conference. Flash Catalyst has gained a lot of key features with this latest release. If you are involved with developing Flex based applications, you should attend this session and learn how Flash Catalyst can aid your workflow. Here is the official session description:

Learn how to use Adobe Flash Catalyst CS5.5 to create rich, engaging prototypes and application interfaces. This session will introduce you to features in Flash Catalyst CS5.5 that enable your team to build compelling, Flex-based projects. It will cover the concepts and workflow involved in using Flash Catalyst and show you how to use Flash Catalyst to enhance static designs created in Adobe Illustrator and Adobe Photoshop and easily integrate with Adobe Flash Builder. Even if you’ve used Flash Catalyst before, you’ll want to attend this session to discover the many new features offered in the latest version.

So wrap up your MAX conference by attending my session, you never know, I might have a few give aways…

Presenting: What’s New In Flash Catalyst CS5.5

I am pleased to be presenting on What’s New in Flash Catalyst CS5.5 to the Orange County Flex User Group.

Flash Catalyst CS5.5 represents an important step forward in the Flex-based designer/developer workflow. As Flex-based applications become more visually rich, more technically complex, and more prominent in the enterprise, the ability to prototype and create visually accurate applications becomes even more critical.

I will also be raffling off a copy of Flash Catalyst CS5.5! Hope to see you there.

Date: Thursday July 7,  2011
Time: 7pm
Location:
18006 Sky Park Circle
Suite 207
Irvine, CA 92614