This tutorial will walk you through importing your Flash Catalyst CS5.5 project into Flash Builder 4.5, show you how to convert it to a Flex Mobile project, and finally run your project on an Android device.

As a heads up, I use this strictly as a prototyping/proof of concept method (no release version/to market apps). Flash Catalyst CS5.5 does not create projects optimized for flex mobile.

Requirements:

• Flash Catalyst 5.5
• Flash Builder 4.5
• Motorola Xoom (or other Android device running at least FP 10.2)

1. Start out with your Flash Catalyst 5.5 project you'd like to run on a tablet device.
I created a really simple, two state application for the purposes of demonstration:

2. Save your project.
I saved my on my desktop, as fc_to_mobile.fxp

3. Open Flash Builder 4.5

4. Click File > Import Flash Builder Project

5. An import dialog appears. Click the 'Browse...' button to the right of 'File:':

Navigate to your Flash Catalyst project file (.fxp) in your file system. Click open.

6. A second import options dialog appears. The default settings should look as below, then press the 'Finish' button:

7. You'll now see a Flex project has been created in the "Package Explorer" panel in Flash Builder. It has the same name as your Flash Catalyst project file... in my case: FC_to_mobile.fxp.

We've officially imported our Flash Catalyst project into Flash Builder.

8. Lets convert our Flex project to a Flex Mobile project. In the File menu, click new Flex Mobile project:

9. Give your mobile app a name. I picked 'MobileTestApp':

10. Click 'Next'. Deselect 'ios' and 'blackberry', and pick 'blank' application. Make sure your settings look like these:

11. Click 'Finish'. You have now created an empty Flex Mobile application. You'll see it in the 'Package Explorer' panel next to your imported Flash Catalyst app:

12. Now we need to do a bunch of copy and pasting. Basically, you want to copy all of your Catalyst files (and maintain project structure) into your new Flex Mobile project. In the case of my project, I had to copy the 'components' folder from the FC_to_mobile project to 'MobileTestApp' (under the src folder), and then the 'main.css + PrivateData.mxml' files under the 'Default Package' folder. If you have an assets folder, you'll want to copy that over too:

13. The last piece of copy+paste, is to open your 'Main.mxml' file in your Flash Catalyst project... and copy the contents. Then open your main Flex Mobile project application file (in my case, MobileTestApp.mxml), select all, and paste the contents of your Catalyst Main.mxml file:

14. Press cmd-s to save your project, or select 'File>Save'. If you have any errors, they probably have to do with either (a) you didn't copy over all your catalyst project files (b) you didn't preserve project structure on copy paste... check to make sure everything is under the 'src ' folder, or (c) you have some global interactions in your project which use 'Main.xxx', in which case you should replace 'Main' with the name of your mobile project (in my case, MobileTestApp).

15. Now lets try running your app in the device simulator. Right click your Flex Mobile project and choose 'Run As > Mobile Application':

16. The 'Run Mobile Project' settings dialog now appears. Select the 'On Desktop' radio and choose 'Motorola Xoom' as an example:

17. Click 'Run'. Your Flash Catalyst app will now run in a window simulating the size and orientation of the Motorola Xoom. You can manipulate the orientation through the simulator 'Device' file menu.

18. Now lets run our application on an actual Android tablet. On your Android device, go to 'Settings' and then 'Applications'. You should see an option listed here called 'Development'. Click that. Turn on all options (USB Debugging, Stay Awake, Allow Mock Locations).

19. Connect your Android device to your machine via USB.

20. Right click your Flex Mobile project in Flash Builder, and choose the 'Run As' menu option, and choose' Run Configurations'. Instead of selecting the 'On Desktop' option, select 'On Device':

21. Click Run. Wait a minute or so. Your Flex Mobile application will be copied on your android device, and then automatically opened. Any 'on click' interactions you set up in Catalyst will work as 'on touch' interactions on the tablet:

Voila!

Other items to note:
- You'll want to make your app resizable in Flash Catalyst so that your app resizes nicely when rotating from portrait to landscape mode.

-If you need to make changes to your application after viewing it on an android device, you can either modify the code in Flash Builder, or edit your original Flash Catalyst project. Unfortunately you'll have to repeat all of the above steps to get the updated app onto a tablet.

-Again, this is just a neat workaround to get your Catalyst apps onto an Android device. Catalyst doesn't directly support this workflow, and does not produce mobile-optimized code.

-RollOver/RollOut won't work on Tablet. Use 'Click' events instead.

-If you have errors/can't run, see Step #14 above to make sure you've addressed the issues I've listed.

For an example, click the image below.

FXP(L)s and instructions after the jump.

To start a new project with a custom png preloader

1. Download the Preloader-Png FXP
2. Open the FXP in Catalyst
3. Import the png you would like to use, and rename it "preloader.png"

To start a new project with a custom swf preloader

1. Download the Preloader-Swf FXP
2. Open the FXP in Catalyst
3. Import the swf you would like to use, and rename it "preloader.swf"

This swf must be a simple AS3 movie clip (you can't use a swf created in Catalyst).

For an existing project

Here's the longer way to customize the preloader on an existing project (you can use a png, gif, jpg, or swf)

1. Download the Preloader FXPL
2. Open your project in Catalyst
3. Import the FXPL
4. Import the png, gif, jpg or swf you are going to use as the preloader
5. Save your project as an FXP, and import it into Builder
6. Open Main.mxml (the application file under src > default package)
7. At the end of the <Application> tag, add the attribute preloader="preloader.CustomPreloader"
8. In PreloaderUrl.as (under the src > preloader package), replace "preloader.png" with the name of your preloader asset
9. That's it, you can export your project as an FXP and open it up again in Catalyst

For some preloader inspiration, check out PrettyLoaded
The source for the preloader is a modified version of the code here.
If you want a progress-bar like preloader, check out this video over at gotoAndLearn or Jesse Warden's tutorial.

Happy preloading!

This component is pretty simple, buttons 1-10 that, when clicked, navigate through pages 1-10. They also disable the button for the current page, so the component acts like a combination of a tab bar and content. The bonus here is not having to wire up all those "On Click > Go To State > When In State" interactions for each button.

Click on the image for a preview.

The FXP is available here.

Details after the jump.

Component States: Pages 1-10

Component Parts: Buttons 1-10

Clicking on a button jumps to the corresponding page and disables the button. All other buttons are enabled. I figured most people should be satisfied with the 10 pages / states built in, but you could always add some more by modifying the skinnable component in Builder.

Click on the image to view the swf.

I went with a refrigerator magnet theme. If you're lucky, you may be seeing another skin from Tara.

You can download the FXP here.

Details after the jump.

FlickrFeed States

• Loading: The component is loading the feed, and has not yet added the first image to the thumbnails list
• Active: The component is displaying image thumbnails
• Fault: An error has occurred while loading the flickr feed
• Disabled: The component is disabled (this is uncommon)

Parts

• Add Photo Delay Ms (RichText): Delay between adding new photos to the list, in milliseconds
• Max List Size (Rich Text): Maximum number of thumbnails to display in the list
• User Ids (Rich Text): Comma separated user ids used to filter the feed (optional)
• User Tags (Rich Text): Comma separated user tags used to filter the feed (optional)

Click the image to view the running example.

You can download the FXP here,
Or the FXPL here.

More details after the jump.

The skinnable component takes a group placeholder to insert the player into at runtime. It also takes a video id as a RichText part. The video id should be the last 11 characters of a YouTube video url, right after the "=" sign. The video id should go in the "Properties" state, and the placeholder should go in the "Video" state. If there is a problem, the skin will wind up in the "Error" state, with the problem in the error message skin part, if it's assigned.

It sounds a little complicated, but you can always check out how the FXP is set up.

This skinnable component has a "droppables" group of graphics you can drag to and position on a "canvas" group. For this example, the droppables is a set of accessories for the robot in the canvas.

Click on the image to preview.

The fxp is available here.

Details after the jump.

As always, this requires the Panini Preview or later to run.

The skin parts:

• Droppables Group: A group of optimized graphics, each optimized graphic in the group will be droppable onto the canvas. Some optimized graphics may cause trouble when you drag an object over them. If this is the case, just rasterize the graphic, and then convert the image back to an optimized graphic.
• Canvas Group: The group you can drop and position your droppables on. This object needs a background fill to properly pick up the mouse drops. In this case there's a white semi-opaque rectangle.
• Trash Group: Dragging a droppable from the canvas to the trash group will remove it from the canvas.
• Reset Button: Removes all droppables from the canvas. In this example, the reset button and trash group are one and the same.

Most of the graphics here are courtesy of OpenClipArt, with the background generated by BGPatterns. For all you ever wanted to know about Drag & Drop in Flex, here is the Flex After Dark tutorial.

Check it out by clicking on the image below:

Download the FXP here.
Download the FXPL here.

More info after the jump.

You can customize three states of the list:

• normal (or default)
• dragOver (what it looks like while a user is dragging on top of a list which supports drop)
• drop (which is how the list appears for 0.5 seconds after releasing the mouse cursor over a drop-able list).

There are some optional skin parts on the DragDropList which you can assign to customize lists:

• enableDrag - text part which you can set as true or false. If true, allow dragging from the list.
• enableDrop - text part which you can set as true or false. If true, allow dropping onto the list.
• enableDragMove - text part which you can set as true or false. If true, remove the item from the source list after dropping onto a target list. If false, copy items from the source list to the target list.

In our example above, the left list of favorite things only allows you to drag. The right list only allows you to drop. You'll notice after dragging and dropping an item from the left to right, the item stays in the left list. We set enableDragMove to false, just in case you're so passionate about vinyl it needs to be in your favorite things list more than once.

You can customize your list items to look however you'd like... so drag and drop lists of text, images, graphics, etc.

Take an image list and wrap it inside the FlightBox skin. You must also include a skin part, the "chrome," that surrounds the popped up image. In this case, the chrome looks like a polaroid photo. The tiled background is courtesy of squidfingers.

Download the FXP

The popup is displayed on top of the rest of the application. Since it is modal, the rest of the application is grayed out while the popup is open.

You can download the fxp here.

Click the image to view the running example.

The project is available here. There's an overall weather component that takes a zip code, and provides information for up to seven single day forecast components. It is currently pulled from the NOAA weather forecast service. Happy forecasting!

Details after the jump

This skinnable component requires Flash Catalyst Panini or higher.

The WeatherComponent has the following skin parts

• Zip: A RichText skin part taking a zip code for the forecast
• Day[0-6], WeatherComponentSingleDays, each representing the forecast for a 24 hour period

The WeatherComponentSingleDay component has the following skin parts. If they exist in a skin, they are dynamically populated at runtime.

• Forecast Period: The day of the week the forecast is for.
• Forecast Conditions: A summary of the forecast (eg "Slight Chance Rain").
• Temp High F/C: Forecast high temperature in Fahrenheit / Celsius.
• Temp Low F/C: Forecast low temperature in Fahrenheit / Celsius.

The WeatherComponentSingleDay has several states, each corresponding to a general weather condition. There are many different weather classifications; this component condenses them into a reasonable number of visual states.

Update: There is a bug for some NOAA forecasts, where the component doesn't update its text fields. I'll get a fix in when I can.