In this tutorial (divided in 9 chapters) we will create a prototype of a typical RSS reader for mobile devices using Adobe Flash Catalyst “Panini” importing the entire layout from Adobe Illustrator CS5.

We will use some of the most important components available in Flash Catalyst – “DataList”, “VerticalScrollBar”, “ScrollPanel”, “TextInput” - applying transitions and iterations in order to enable navigation and create a more pleasant user experience.

We will also analyze the UI import process from Illustrator to Flash Catalyst and we’ll structure the project so that the mxml code generated by Catalyst is of good quality and well-structured, suitable for subsequent use in Flash Builder.

For this reason, after each chapter we’ll take a look at the source code to see what’s going on behind the scenes.

PREREQUISITE KNOWLEDGE

Familiarity with Adobe Flash Catalyst, Flex and MXML

Note: This tutorial focuses on the use of Flash Catalyst to build a mobile-style application.
The use of Illustrator for the user interface design is beyond the scope of this tutorial.

RELATED PRODUCTS

• Illustrator CS5 (Download trial)
• Flash Catalyst CS5 (Download trial)
• Flash Builder 4 (Download trial)

You only need Flash Catalyst CS5 to try this tutorial.
Source code contains the Adobe Illustrator file and a Catalyst project for each chapter.

• Download AI layout
• Download FC projects (soon available)

OVERVIEW

This application will consist of three main states:

1. SplashScreen: simple static page of content imported from Adobe Illustrator

2. BlogList: this page will uses a “Vertical Scrollbar” and a “DataList” components to create a scrollable list of clickable items. At the top, in addition, we’ll also use the “TextInput” component to create an input text field to simulate a search box.

3. ArticleDetails: this state represents a hypothetical page to display the details of the selected item.
In addition to containing some graphics imported from Illustrator, we’ll also create a scrollable text area using the “ScrollPanel” component. We’ll also add some interations to the buttons.

Here is the application diagram, which represents the hierarchical structure of components that we will create in this project:

Important notes about MXML generated files:

• “Custom/generic components” represents custom MXML components and usually extend the Group class;
• “Other Catalyst components” are necessary parts for components that contain them;
• Orange rectangles instead represent the Spark Skins (other MXML files that extend the Skin class and that can be used to skin Spark Flex 4 components);

-
RELATED ENTRIES

• Optimizing MXML code in Flash Catalyst “Panini” - Introduction (this tutorial)
• Optimizing MXML code in Flash Catalyst “Panini” - Part 1 - From Illustrator to Catalyst
• Optimizing MXML code in Flash Catalyst “Panini” - Part 2 - CUSTOM/GENERIC COMPONENTS
• Optimizing MXML code in Flash Catalyst “Panini” - Part 3 - Vertical Scrollbar component
• Optimizing MXML code in Flash Catalyst “Panini” - Part 4 - DataList component
• Optimizing MXML code in Flash Catalyst “Panini” - Part 5 - ScrollPanel component
• Optimizing MXML code in Flash Catalyst “Panini” - Part 6 - Interactions and Transitions
• Optimizing MXML code in Flash Catalyst “Panini” - Part 7 - Text Input component
• Optimizing MXML code in Flash Catalyst “Panini” - Part 8 - MXML Code optimization
• Optimizing MXML code in Flash Catalyst “Panini” - Part 9 - Develop Mobile apps with Catalyst?