Currently Browsing: Flash Catalyst

Adobe Flash Builder 4.5 and Flex 4.5 now available

Posted by in Adobe, AIR, Android, Flash, Flash Builder, Flash Catalyst, Flash Mobile, Flex, Mobile, RIA on May 3rd, 2011 | 0 comments

A year after Flash Builder 4 and Flex 4 SDK were released, new versions are available with Flash Builder 4.5 and Flex 4.5 SDK! The main focus for Flex 4.5 SDK and Flash Builder 4.5 is the ability to build mobile applications that target the Google Android, Blackberry Tablet OS, and Apple iOS operating systems. Additionally, Flex 4.5 SDK introduces new Spark components and improvements for large application development while Flash Builder 4.5 introduces dozens of new coding productivity features for faster ActionScript and MXML development.

Adobe have really focused on mobile development for this release, offering developers one tool, one development framework and one codebase to build mobile applications on Android, BlackBerry Tablet OS and iOS. Flash Builder 4.5 also helps developers make these applications ready to deploy for an app store/market. You can immediately develop applications for Android, and support for BlackBerry Tablet OS and iOS will be available through free Flex and Flash Builder updates in June.

Here are a few resources to get things started:

Build your First Mobile Application in Flash Builder 4.5

Build your First Flex 4.5 Application

Flex Developer Center

Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5

Examples and case studies

Adobe Flex Mobile Overview – Part 1

Posted by in Adobe, AIR, Android, Flash Builder, Flash Catalyst, Flash Mobile, Flex, Mobile, RIA on Nov 10th, 2010 | 0 comments
Adobe Flex Mobile Overview – Part 1

We recently had the pleasure of attending the Adobe MAX 2010 conference in Los Angeles at the LA Convention Center. Adobe showed off some exciting new technologies that are either available to use today or in the coming future. What interested me the most was the latest Adobe AIR 2.5 platform for Windows, Macintosh, Linux, Android, iOS and Blackberry Tablet OS. This allows us to develop applications using the next version of the Flex framework to build mobile and desktop applications using a common code base.

So once we got back to the office after 25 hours of flying, I handed our developers an Adobe MAX 2010 Adobe Flash Platform DVD with all the preview software. We dived straight into mobile development with the latest Flash Builder “Burrito” and Flex SDK “Hero” framework.

The result of our efforts was an iTunes Trailers application on the AIR for Android platform.

iTunes Trailers Home Screen

iTunes Trailers home screen

One thing that we noticed was, if you are already familiar with Flex, then you do not have to learn anything new. There are a few new components implemented to support mobile devices such as MobileApplication, TabbedMobileApplication and ActionBar. Also, you can have something up and running pretty quickly compared to other mobile platforms.

When you first create your project instead of extending Application, it extends MobileApplication. This class does a lot of work for you, including orientation support, persistence manager to save and restore state, listeners for the hardware buttons and the ViewNavigator (see description below).

“The ViewNavigator component is a container that consists of a collection of View objects, where only the top most view is visible and active. Views can be added and removed by using the popView() and pushView() methods on the navigator. When a new view becomes active, the old view’s instance is destroyed. When a view is pushed on top of navigator’s stack, the old view’s data property is automatically persisted and restored when it is reactived through one of the pop methods. ViewNavigator doesn’t provide index information about the Views that it is currently managing and strictly follows a stack navigation model. Jumping between a set of views similar to a ViewStack is not supported by this component. ViewNavigator displays an optional action bar that displays contextual information defined by the active view. When the active view changes, the action bar is automatically updated.”

iTunes Trailers movie info screen

You cannot define any visual components in the MobileApplication class, you will notice that it contains a property called firstView, which is the initial view your application will start with. Each view on the navigation stack must extend View. It extends Group and adds additional properties to communicate with it’s parent navigators’ various UI controls.

MobileApplication provides a way to persist your application’s view state and data when the application quits, so that the next time it starts, it can restore itself with the same current view and view history. This makes interruptions in your application’s life-cycle completely transparent to the user. This is very important on mobile devices, where the operating system can interrupt or kill an application at any time.

The ActionBar class defines a component that includes title, navigation and action content groups. In the context of a ViewNavigator and MobileApplication , the ActionBar is used as application chrome which is has content contributed by the active View. The screen shot above contains a back button in the navigation content group with the default title. The iTunes Trailers app we developed is using the default chrome and colors. Developers can however implement there own skins using ActionScript, FXG or bitmaps (recommended approach by Adobe for optimisation) rather than MXML and runtime MXML graphics. A good place to start would be to look at the ButtonSkin class under the package spark.skins.mobile. This will give you a good idea of how to go about developing your own mobile skins.

iTunes Trailers cast members screen

The List and Scroller components have added functionality to enable touch-and-throw scrolling. To enable touch scrolling, set the new property called interactionMode style to touch. If you are using the mobile theme, then this style is automatically set on all appropriate components for you, so no need to do anything explicitly. You may however, develop a desktop application using AIR for touch screens, which would require you to set the property. The default item renderer for the List component on mobile devices is MobileItemRenderer. This is a simple item renderer with a single text component.

There is a more advanced item renderer optimised for mobile devices called MobileIconItemRenderer, it contains four optional parts:

  1. an icon on the left
  2. single-line label on top next to the icon
  3. multi-line message below label and next to the icon
  4. a decorator on the right

The screen shot below is using all of these parts of the item renderer.

MobileIconItemRenderer

If you would like to create your own advanced item renderer then Adobe recommends that you create a new ActionScript item renderer that extends MobileIconItemRenderer. Most of the time you probably won’t need to create your own item renderers but on rare occasions you may need to extend the functionality.

In part 2 we will go into more detail on how we built the application and integrated the services using Flash Builder “Burrito”,  the design view to layout the views and how to package up the application for distribution on the Android Marketplace. Additionally, we will provide the source code for the application too.

iTunes Trailers Watch Trailer

iTunes Trailers watch trailer screen

For more information on Flex SDK “Hero” framework, check out these links:

Learn to Use Flash Catalyst

Posted by in Flash Builder, Flash Catalyst, Flex, RIA on Jun 3rd, 2009 | 0 comments

One of my colleagues at ThoughtFaqtory found this nice resource “Learn to Use Flash Catalyst” on Adobe Labs web site.

I have listed all the tutorials, videos and screencasts below.

Adobe Flash Catalyst

Adobe Flash Catalyst

Get Started
Learn about Flash Catalyst

Start Building Your First Flash Catalyst Application

Get Better
Explore Flash Catalyst Workflows

Work with Flash Catalyst

Learn from the Community