Flash Catalyst

Hiding offscreen elements in Flash Catalyst

Recently someone in the Adobe forums asked why elements that were not on Flash Catalyst’s artboard visibile in the browser?

This is a good question. It comes down to whether you have your application set to be resizable. If you have your Flash Catalyst project to be resizable, the HTML code will set the width and height of the swf to be 100%.

The project showing offscreen elements.

The question is how to solve this? There are two solutions depending on what you need your application to do. The more complex solution is to apply constraints to ALL your components in your project. This will then provide the proper information on how to correctly position each element as the browser’s dimensions are changes.

But what if I don’t want to update all those components? What if, my project is actually of a fixed size and I don’t care about resizing. Then, go to Modify… > Artboard Settings and uncheck Resizable. Publish your project, and only the artboard will be shown.

Alternately, you can edit the exported html file as well. Look for swfobject.embedSWF values and change the “100%”, “100% to the project’s actual width and height. You will need to make two more changes in the <object> tags as well:

<object type=”application/x-shockwave-flash” data=”Main.swf” width=”100%” height=”100%“>

and

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”100%” height=”100%” id=”Main”>

Save the file and test it in your browser. Your project should now look like this:

The project no longer showing offscreen elements. The grey frame was added for demonstration purposes.

Here is the original project, and the fixed version.

Flash Catalyst: Gallery & Datalists

When working with Flash Catalyst, often you will use the Datalist for displaying content. What is not always clear is how you can interact with each item in the Datalist. Let’s start with a simple Datalist of five photos.

The user can click on a photo, and view a larger version of the photo and some other information. But how to do this?

Gallery Details Sample

With the Datalist selected, go to the Interactions panel, and add an On Select interaction:

Interactions Panel

Now the additional setting that will make all this work, is the last option, “When a specific item is selected”. You will have to add an interaction for EACH item in your Datalist (this is where knowing ActionScript would play off, as you could write a simple event handler for this). Starting with 0 for the first item (programmers love to start counting from zero), keep adding interactions, and adjusting the item value.

Now you might encounter the 20 state limit of Flash Catalyst, so some up front planning might be needed to wrap the content within a custom component to work around that issue. (Again, if you were programming this design, you would have a template UI that is automatically populated via code).

On the state that displays our larger photo, I have included a Close button to return the user to the initial gallery screen. But there is a slight issue that the item we clicked on in the Datalist is still showing in a selected state. This is not the best user experience. To unselect the Datalist, we need to add an Action Sequence.

Again, with the Datalist selected on the Gallery screen, go to the Interactions panel, and Add Interaction – On Select. Now change the action to Play Action Sequence. Leave the last option to”When any item is selected”.

Now, select the Timelines Panel in the lower left. You should see an item under the Action Sequences panel. Select this item. The timeline will show an empty Action Sequence. There is a button along the button that says “+ Add Action”. Click this menu, then choose “Set Property”.

Available Actions

This will bring up the Properties Panel:

Properties Panel

Set the property to “Selected index” and the value to -1. Flash Catalyst uses -1 to mean that nothing is selected. Now when the user clicks on a photo, the selection state is forgotten.

Here is what a interactions panel will look like for a Datalist with 3 items clickable. Note that the Play Action Sequence is the last item in the list. If you place it before the Play Transition actions, it will not work.

Sample Interactions Panel

Here is a quick sample FXP that you can look at and play with.

Farewell to Flash Catalyst

Danny Winokur, VP/GM Interactive Business Unit, announced at the recent Flex Summit that Flash Catalyst was being discontinued. This was somewhat expected in light of the other Flex related news. I was disappointed, however, as Flash Catalyst was finally starting to find its true place in the Flash Builder workflow, and the roadmap for its future held a lot of promise. Now that is all moot. The Flex SDK is headed to the Apache Foundation, and several features in Flash Builder will not be included in future versions, like Design View and Data Centric Development (DCD).

As you might know, I am also the Community Lead for Flash Catalyst. Although there will not be any new versions of Flash Catalyst, I plan to continue helping Flash Catalyst users via the forums. However, expect fewer blog entries on Flash Catalyst. I will continue to write about prototyping and mobile development. So, to the entire Flash Catalyst team (Doug, Mark, Adam, Peter, Tara, Ian and the rest), Thank You for your efforts and may you find good fortune whereever you head to.

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!

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.

Quick Guide to Flash Catalyst Published

Quick Guide to Flash Catalyst: A Designer’s Guide to Visual Development By Rafiq Elmansy has been published by O’Reilly Media.

How do you transform user interface designs created in Photoshop or Illustrator into interactive web pages? It’s easier than you think. This guide shows you how to use Adobe Flash Catalyst to create interactive UIs and website wireframes for Rich Internet Applications—without writing a single line of code.

Ideal for web designers, this book introduces Flash Catalyst basics with detailed step-by-step instructions and screenshots that illustrate every part of the process. You’ll learn hands-on how to turn your static design or artwork into working user interfaces that can be implemented in Flash Builder or Adobe AIR.

  • Get an overview of Flash Catalyst’s interactive components
  • Import files from Photoshop, Illustrator, or Fireworks
  • Convert your artwork into interactive components and apply specific actions
  • Create animated transitions between the web pages in your project
  • Test interactive components and transitions while you work
  • Get optimization tips to help you create fast-loading applications
  • Export projects to the SWF format for web use, or to Adobe AIR for desktop applications
If you are attending Adobe MAX this year, I will have several copies to give away during my session.