Since Flash Professional CS5.5.1 and Flash Builder 4.5.1, its easier than ever to create great cross-platform / cross-mobile content. Flash-To-Mobile (as I generically call this solution) is a compelling choice when targeting iOS/Android and others.

However within ‘Flash’-To-Mobile to mobile development we have a choice in tools (Flash Pro, Flash Builder, FDT, More…), component frameworks (Flex 4.5.x vs Non-Flex), and application frameworks (none, custom, Robotlegs, PureMVC, others…).

Let’s assume we have a Flash-To-Mobile project to be created with Flash Builder. Flash Builder features many types of projects. Some are relevant to mobile development and some are not. For now, let’s consider two. How do we decide between using ‘ActionScript Only’ (Flash) vs ‘Flex Mobile’ (Flex) for the project setup?

THE CHOICES

The Flash vs Flex development paths are possible in both browser and desktop development. But here let’s consider the implications on mobile.

There was a time when the extra k-size of the classes required by the Flex framework and slower run-time performance of Flex components shaped were dramatic factors. Today these are insignificant/marginal factors for many of us with today’s faster internet connections and faster processors. The decision for flex or non-flex depends on other factors as we will see.

When creating a mobile-focused Flash Builder project we have these choices. Let’s take a look at each.

Flash Builder Mobile Project Types

• 1. ActionScript Mobile Project – DocumentClass extends Sprite
• 2. Flex Mobile Project – Main class extends ViewNavigatorApplication
  • Blank – This is the most vanilla setup. Its the most ‘raw’ of the Flex Mobile options.
  • View Based Application – Allows for View-Based architecture, but includes no navigation between the views. You must code that yourself.
  • Tab Based Application – Allows for View-Based architecture, and includes button-style navigation between the views automatically.

Flash Builder Mobile Project Options

• Automatically Reorient – If this is checked then the application will automatically reorient itself between landscape and portrait when the user rotates the mobile device.
• Full screen – If this is check then the app will launch in full screen mode and hide the status bar at the top of the mobile device.
• Automatically Scale App By Screen Density (FlexMobile Only) – Selecting this option automatically scales the application and handles density changes when targeting your application across multiple device types with varying screen densities.

1. ActionScript-Only Projects

ActionScript-Only projects extend Sprite and do not include the Flex Framework. You can think of this as the most ‘raw’ starting point for your project.

This is the ideal choice if you don’t need the Flex framework in your project. But how do you know if you need it? If your application uses nontraditional User Interface (UI), for example a game which features oddly shaped menu buttons and key-input for gameplay, it may be best for Action-Script only. Also if your project is not data-intensive (loading, parsing, handling, filtering, binding, etc…) large data sets, it may be best for Action-Script only. Your team’s skills are important to consider too. If you have talented Flash developers with strong AS3 skills, but without Flex experience, it may make sense to use ActionScript only.

2. FlexMobile Projects

Mobile-Only Components?

During the Flex 4.x development cycle Adobe worked on a simplified, more performant set of ‘mobile only’ flex components. This included some, but not all of the standard Flex components. However that project was ended and all mobile-only components removed. Adobe trusted that the run-time would become more efficient, and devices would become faster, so they continued to work on exactly one set of Flex components. So today all of the components work for mobile and non-mobile projects. Advanced developers will notice that there are however different support classes and ‘modes’ for some components to address the unique nature of mobile vs non-mobile projects.

FlexMobile Screens

Mobile devices (phones and tablets) are small compared to our desktop and laptop computers. So designing with less real-estate takes some care. The “screen” metaphor is a solution that divides your application content into ‘screens’ or pages. By uncluttering your app and dividing your content into logical units your users can focus on one screen at a time.

Some Screen Considerations

• Memory Management – Pushing dozens of screens can eat up all the memory available on the device
• Transitions – Between screens. Those nice effects that help you create an application like a professional UX Designer
• Passing data – From one screen to another
• Preserving State – Of the app when the OS choose to close it
• Integration with hardware buttons – For example using the Back button of the phone to navigate to the previous screen

ActionScript-Only vs Flex Mobile? – Checklist

LINKS

More About FlexMobile

• FlexMobile Views And ViewNavigator
• Types of Flash Builder Projects
• First FlexMobile Project: How-To

Flex Mobile Development Tips and Tricks

• Data Handling
• Styling Application Tabs and ActionBar

Flex Mobile Skinning

• Optimized Skinning Basics
• Handling Different Pixel-Densities
• Multi-Platform Development