Tutorial

Create Mobile and Tablet content with Flash Professional CS5.5

Come to the next San Diego Flash User group for a special event! Doug Winnie, Web Community Manager from Adobe Systems, will give an early run-through of his MAX lab for everyone to follow along with. Doug will walkthrough how to create a mutli-device project using Flash Professional CS5.5 and ActionScript 3.0. Bring your laptops and your development devices to follow along!

Doug Winnie is a Web Community Manager at Adobe Systems where he works with the developer and interactive design communities to help their workflow and efficiency when working with the Flash Platform and HTML5. Doug formerly was Principal Product Manager for Adobe Edge, Adobe Flash Catalyst and Creative Suite Web Premium. Doug tweets as @sfdesigner on twitter, blogs at sfdesignerdw.wordpress.com and lives in San Francisco, CA.

When: Sept 12th @6pm

Where: Art Institute of San Diego, South Building
7675 Mission Valley Road
San Diego , CA 92108

Hope to see you there!

Extending Flash Catalyst: Next & Previous buttons

Recently on the Flash Catalyst forums, someone was asking about an easy method to create Next and Previous buttons. They were trying to avoid having to go to each state and add the interaction to each button, over and over again. The programmer in me knew that this was an easy solution with a little bit of ActionScript.

Sample Project

I created a simple 5 state application in Flash Catalyst. I defined the state transitions (simple fades), and also gave each state a meaningful name (you do take the time to label your states and layers, right?!). Now you might have already started adding the individual interactions to go from state to state. Remove them. Flash Catalyst will create event handlers for each interaction you have, and since we want to have one set of interactions for the Next and Previous buttons, we only want one set. You can use the Make Same In All States function for you buttons.

Now launch Flash Builder 4.5, and then use Project > Flash Catalyst > Import Flash Catalyst Project.

Double click into the project until you open the Main.mxml file.

The first thing I like to do is clean up the handler names that Flash Catalyst generates, “button1_clickHandler” is not the most descriptive is it?

   <s:Button x="736" y="273" click="button1_clickHandler()" skinClass="components.RightButton"/>

Now do a find and replace on the value of the click attribute. This will change the reference in the component and in the event handler. Do this for both the Next and Previous buttons.

So we should now have components that look like:
   <s:Button x="25" y="273" click="leftButton_clickHandler()" skinClass="components.leftButton"/>
<s:Button x="736" y="273" click="rightButton_clickHandler()" skinClass="components.RightButton"/>

Let’s adjust the event handlers. Toward the top of the file, you should see the start of the <fx:Script> tag. It looks like this:

   <fx:Script>
<![CDATA[

We are interested in the two functions that our Next and Previous buttons call. They should start with:
   protected function rightButton_clickHandler():void

and

   protected function leftButton_clickHandler():void

But before we modify these functions, we need to define two variables. The first is an array of the states that the buttons will cycle through (and the order they should do so in).

   private var theAppStates:Array = ["MissionBay", "SanDiegoBay", "Family", "GoldenGate","Baja"];

The next variable we need is the critical one, the index of the the current state.

   private var theCurrentStateIndex:Number = 0;

Remember programmers love to start counting from 0 and not 1.

The basic goal of the function, is to add 1 or subtract 1 from our current index, get the state name from our array, and set the application’s (or component’s) state to the new value. We Also need to do some simple checks to see if we have reached the end or beginning of our array.

So we replace the existing Next and Previous button event handlers with this:

protected function rightButton_clickHandler():void
{
++theCurrentStateIndex;
if (theCurrentStateIndex == theAppStates.length) {
theCurrentStateIndex = 0;
}

   currentState = theAppStates[theCurrentStateIndex];
}

protected function leftButton_clickHandler():void
{
--theCurrentStateIndex;
if (theCurrentStateIndex == -1) {
theCurrentStateIndex = theAppStates.length - 1;
}

   currentState = theAppStates[theCurrentStateIndex];
}

And that is it. We now have a “smart” Next and Previous button for a Flash Catalyst based project.

Here is the final demo and a link to the source code.

Extending Flash Catalyst: A Smart Back Button

Often when developing a prototype for an application you might need to include a screen that is accessed by several different other screens. This might be a Settings screen or an About screen. The difficulty comes in trying to navigate back to the screen the user came from. Flash Catalyst does not have a method of storing the previous state.

If you have enough available states available, you could clone the screen, then attach different interactions to each clone to enable the back button to properly work, but this is far from ideal for many obvious reasons.

Now with round-tripping with Flash Builder available in Flash Catalyst CS5.5, it is quite easy to add the little bit of ActionScript to the project. This post will walk you through the steps needed to do so.

The sample Flash Catalyst project is a simple 5 screen design. I would not recommend building a site like this with Flash Catalyst, but it was an easy demo to construct. The basic outline is a menu screen, 3 content screens, and an About screen. You can download the FXP here, or see the working demo.

Project Screens

Launch Flash Builder, then select Project > Flash Catalyst > Import Flash Catalyst Project, then select the Nav Demo.fxp file. Once the project has been imported into Flash Builder, you can double-click the project folder in the Package Explorer (located on the left side of the interface), Continue double-clicking until you see the Main.mxml file. Open this file in the editor.

Package Contents

Near the top of this file, you will see <fx:Script>. This is the section of the file that we will be editing.

You will see a series of functions that look basically the same:

     protected function button_clickHandler():void
     {
            currentState='mercury';
     }

I would recommend renaming them so they have more meaningful names.

button_clickHandler -> goMercuryHandler

button_clickHandler_1 -> goGeminiHandler

button_clickHandler_2 -> goApolloHandler

button_clickHandler_3 -> goAboutHandler

button_clickHandler_4 -> goHomeHandler

If you look at what each handler does, it is all the same instruction of setting the currentState attribute to one of the defined states of the application. What we need to do is save the currentState of the application BEFORE we change it to our About screen. To do this we need to add a variable. Just before the first function, add the following bit of code:

     protected var theReturnState:String;

This creates a variable that accepts text strings as its variable type. This is where we will store our return state.

Now let’s modify the goAboutHandler function to actually save this data. Add this one line of code to the function:

     theReturnState = currentState;

so the function should now look like:

     protected function goAboutHandler():void
     {
         theReturnState = currentState;
         currentState='about';
     }

What that line does is take the application’s currentState and stores it in our theReturnState variable.

Now we need to add the functionality to return from the About screen. I did not add this interaction in Flash Catalyst, so we can add it within Flash Builder. Next to the Source/Design toggle, there is a Show state list. Click on this list and select ‘about’. This will grey out any MXML elements that are not included in that state. So, if you scroll down a bit you will see the small section of MXML that defines the ‘About’ state.

The actual item of interest is:

    <s:Button id="button5" includeIn="about" x="350" y="280" skinClass="components.BackButton"/>

We need to add a click attribute to the tag, so it will now look like this:

<s:Button id=”button5″ includeIn=”about” x=”350″ y=”280″ skinClass=”components.BackButton” click=”returnFromAboutScreenHandler()” />

You might get an error listed in the Problems panel. It is simply telling you that there is no handler named ‘returnFromAboutScreenHandler’ in your code, but we are about to fix that.

Return back to the <fx:Script> section of the file, and locate the last function, then after that, but before the ]]>, add the following:

protected function returnFromAboutScreenHandler():void

     {

       currentState = theReturnState;
    } 

This is the event handler that is called when the user clicks on the Back button. This one line of code simply sets the application’s currentState to the state that we stored in the variable before we went to the About Screen.

And that is it!

You can now either republish your project for more design work in Flash Catalyst, or if you are finished, you can use the Project > Export Release Build to publish the final version.

Understanding Bundled SQLite databases in AIR for Mobile

Quite often you will want to ship your mobile application with a prepopulated SQLite database. However there are a few things you need to do to before you can fully use them in your application. This article will walk you through the steps you need to take to use a SQLite database on your mobile device.

The first thing we need to do is include our prepopulated SQLite database in our AIR application. For applications built with Flash Professional CS5, go to File > AIR for Android Settings…, then select the General tab . Click the plus icon above the Include Files section, then select your .db file. If you are building your AIR application using Flash Builder, you just need to include the database in src directory.

Now, when you publish your application for your favorite mobile device, the prepopulated database will be automatically included when the application is installed. Here is where things can get a little tricky if you don’t understand the various application directories and permissions.

Without doing anything our application will read the data from our database using this ActionScript snippet:

var sessionDBConn:SQLConnection;
var sessionDBFile:File;
var selectStmt:SQLStatement;
sessionDBConn = new SQLConnection();
sessionDBConn.addEventListener(SQLEvent.OPEN, openSessionSuccess);
sessionDBConn.addEventListener(SQLErrorEvent.ERROR, openSessionFailure);

var embededSessionDB:File = File.applicationDirectory.resolvePath("demo.db");
sessionDBConn.openAsync(embededSessionDB);

The issue will be when we try to perform any create/update/delete functions on the database, as they will fail. Although we can read from the NativeApplication.applicationDirectory, we are not allowed to write to this directory. We need to find a solution to transfer the database to a location that we can have write access to. Thankfully, AIR also has another custom directory just for this type of use; NativeApplication.applicationStorageDirectory.

The first thing we need to check for is if we have already copied our database to the writable directory. We can check the exists property on the File reference to database in the writable directory to test this condition.

var writeSessionDB:File = File.applicationStorageDirectory.resolvePath("demo.db");
if (!writeSessionDB.exists) {
    embededSessionDB.copyTo(writeSessionDB);
}

Since we have not copied our database to a writable location, the exists property will be false. Now to need to perform our file copy from the applicationDirectory to the applicationStorageDirectory using copyTo method:

embededSessionDB.copyTo(writeSessionDB);

If the database is large, you might want to consider using the copyToAsync method instead.

As with all read and write methods, make sure you include event listeners for both IOErrors and SecurityErrors.

With that, our prepopulated database has been copied to a writable directory and is ready for use.

sessionDBConn = new SQLConnection();
sessionDBConn.addEventListener(SQLEvent.OPEN, openSessionSuccess);
sessionDBConn.addEventListener(SQLErrorEvent.ERROR, openSessionFailure);
var embededSessionDB:File = File.applicationDirectory.resolvePath("demo.db");
var writeSessionDB:File = File.applicationStorageDirectory.resolvePath("demo.db");
if (!writeSessionDB.exists) {
    embededSessionDB.copyTo(writeSessionDB);
}
sessionDBFile = writeSessionDB;
sessionDBConn.openAsync(writeSessionDB);

Hopefully this article will help you as you start developing mobile applications that use prepopulated databases.

Integrating maps into your mobile application

For many mobile applications, having some form a location-based capability is a requirement. This article will show how you can add a mapping solution to your mobile app. Most of the major map providers (Google, Yahoo, MapQuest, and Microsoft) provide ActionScript solutions that you can easily incorporate into project. Unfortunately, none of the currently available are designed for touch.

Recently, I developed the attendee guide for the recent 360|Flex East conference, and needed to add a map of the conference location, along with nearby restaurants. The application was being developed using Flash Professional CS5 (with AIR for Android extension), as the Flex 4.5 mobile framework was not yet available. My first attempt was to use the existing swc from Google. I had used their APIs before, and was familiar with the setup.

It took almost no effort to integrate the latest swc and have a working Google Map in my AIR for Android application. But there were issues to deal with…

The SWC version

 

One of the first issues I encountered was the default map controls were not optimized for touch. I had a feeling that this would be the case. Also the initialization time for the component was extremely long (30 seconds or more). I decided to address the load time first, since if I couldn’t bring up the map quickly, I would need to find a different solution. Looking at the code revealed no clues as to where I might be able to streamline the initialization. One of the issues of the long load time was there was no feedback given to the user while the component performed its initialization. Once the component was added to the stage, it assumed the top most layer and you could not overlay any elements (like a loading spinner). The screen would just show a grey rectangle where the map would be. Not the best user experience.

Since there was nothing I could do while the map did it’s thing, I decided to see if adding something before the map was actually loaded might give enough feedback to the user to make the experience acceptable. I knew from my years of prototyping that this type of solution just might do the trick. So I added a standard spinner and some loading text to the frame before the map, and a simple 5-second timer. I demonstrated each version around the office, and confirmed that folks thought the map did load faster on the version with the loading screen. In Apple’s Interface Guidelines, it refers to this illusion when talking about the splash screen.

Loading Animation

So, with the loading distraction in place, I could now address the touch-ability of the default map controls. Typically there are both pan controls and zoom controls to interact with. Since users could directly pan the map by dragging, I did not need to create a touch-friendly version of that control. I did still need to address the ability to change the scale of the map.

Unfortunately, here is where I ran into an actual hardware issue. At the time I was developing the application on the Google Nexus One (one of the few devices running FroYo, a requirement for AIR for Android), but there is a known issue with Multitouch on that device. This meant that a pinch and zoom gesture would be problematic. I needed to find a different solution to allow the user to change the scale of the map.

I created touch-friendly zoom in and zoom out controls and added them to the screen once the map finally loaded. Now I had a basic functioning map in my AIR for Android application and had it running on a device.

Google Map - Completed swc version

Now I needed to add the markers for the restaurants and the conference venue to the map. Creating markers is a fairly straightforward process of converting my graphics into MovieClips, enabling them for Export for ActionScript, then adding a bit of code to properly place them on the map. I manually geocoded (Update: Thanks to Randy Troppmann for spotting I had the term reversed) the venues into their latitudes and longitudes, so I did not need to look up that static information every time the map was accessed. The next test was to see how the info-windows would function. What good is seeing the marker for a bar if you can’t see the address?

This is where I hit the proverbial brick wall. The info window would appear, but the controls were far from usable on a touch device. Despite my best efforts, I could not modify the info window enough to make the controls usable on a mobile device.

So now what?

I decided to investigate using a new feature in AIR for Android called StageWebView. A little background on StageWebView; this is a new API that allows AIR developers to embed HTML content into their mobile applications and render it using the platform’s native rendering engine.

I removed the Google Map SWC from my project and added the following code:

var webView:StageWebView = new StageWebStage();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 100, stage.stageWidth, stage.stageHeight);
webView.loadURL(http://map.google.com);
addChild(webView);

I recompiled the project and loaded it onto my mobile device, and a touch-friendly Google Map was displayed.

The load times were acceptable (I still kept my fake pre-loader, as there was a bit of load time ). I had touch-friendly zoom controls and scrolling. With this technical proof of concept validated, I quickly wrote a custom web page to house my map and markers.

Completed HTML version

I was still unsure how the info-windows would appear. To my pleasant surprise, the info-windows were quite touch-friendly . They were not as nice as the native elements, but certainly more usable that the ones in the SWC’s.

Info Window

So, now I have a mobile friendly map solution in my AIR for Android application. Hopefully this solution will work for you when you need to add a map to your mobile application.

Sample HTML map.

Creating Lightbox Galleries with Flash Catalyst

One of the more popular uses of Flash Catalyst by designers is to create rich and engaging portfolios. However, many can quickly become frustrated as they try to convert their visual designs into the world of components. In this tutorial I will show the how to quickly build a “lightbox”-like gallery.

Here is the basic look of our final application.

and with an image being displayed

The first step is to convert each of the six thumbnails into a button. Select each thumbnail and either use the Heads Up Display (HUD) or the contextual menu to transform it into a button. We are not going to add any interactions to these buttons yet, but now is the best time to rename each of the buttons in the library. Keeping your assets well named and organized is one of the best workflow tips that a team can have. I named each button Photo_1, Photo_2, and so on. Note: You cannot have spaces in the name.

Now let’s turn our attention to the overlays. Many first time users of Flash Catalyst would take the approach of creating a new page for each full size image and then link each button to that specific page. This solution will work, but you will quickly discover that Flash Catalyst only allows a maximum of 20 pages/states. If you have a large portfolio, you quickly will hit this limitation.

The solution within Flash Catalyst is to create what is known as a “custom component”. By encapsulating a portion of project within a custom component, we can usually avoid hitting the 20-page limit. It also allows us to keep the project in a more manageable state.
We are going to apply the same idea that we would have done by placing each photo on a separate page in main application, but now we are going to do it within the context of a custom component.

On main page, let’s add a basic rectangle using Flash Catalyst’s drawing tools. This rectangle will serve as our dimming effect. Set the width and height to match the applications (800×600). Remove the rectangle’s stroke and change the fill to black. Then adjust the opacity of the mask to 50%. All of these can be set using the Property Panel.

Now let’s add the white frame that the photo will sit on. Again, use the basic rectangle tool to draw. The photos are 640×480, so make the rectangle 680×520 pixels and then center the white rectangle on the artboard. Next place the large version of the photo that matches the first photo button, and align it to the center of the artboard. The final step for this template is to add the close button in the upper right of the white frame. Select the close button graphic and convert it to a button using the HUD.

Now select just the mask, the white frame, the photo and the close button. Using either the HUD or the contextual menu, “Convert to Custom Component”.

In the library panel, rename this component to “LightboxComponent”.

Now we can add the individual photos within this component. Double click the newly created component, and then use the Duplicate State button on the Pages/States panel.

Rename the first state to “Off” and the second state to “Photo_1”. With the elements now duplicated, we can delete them from the Off state. Select the Photo_1 State. Now let’s add the interaction to the close button. Set the interaction type to On Click, and choose the Off state as the target.

With this interaction added, you can keep duplicating the photo states as needed.  Since the portfolio only has 6 images, only 5 more states are needed. Rename each of the states to match the names of the buttons, as this will make connecting the interactions so much easier in a moment.

With the all the full sized images properly inserted, we can now add the interactions to each of the thumbnails. Using the breadcrumbs, navigate to the top level of the application. Select a thumbnail, and then using the interaction’s panel, add an On Click interaction. From Choose State select the proper state within the Lightbox component. Finally, set the “When in any state” to Off. That last setting keeps the thumbnails from working while an image is being shown.

With that our basic Lightbox style portfolio is done. You can take this further by adding transitions within the custom component.

Download the fxp.

Using Custom Components in Flash Catalyst

One of the unfortunate limitations of Flash Catalyst 1.0 is that it only allows for 20 Pages/States per application (or component). As you start developing more complex prototypes, you might quickly find yourself reaching this limit. This tutorial will walk you through a solution to overcome this limitation by creating custom components.

A common example where one might encounter this problem is when creating a photo slide show project.

Photo Slide Show

To keep this tutorial simple, our slide show will only have 3 photos. Here is the existing slideshow prototype with each photo and its controls laid out as top level Pages. You can download the FXP to see the structure of the Flash Catalyst Project.

Now let’s transform our prototype into a custom component. If you are not familiar with the concept of custom components, the Flex Framework allows you to create your own component just like a Button or Scroll Bar. This ability to merge various components together into a single, more manageable component is incredibly powerful. For example: you can take Image component (such as a photo) and Text component (such as a caption) and combine them into a single component. If you are familiar with MovieClips in Flash Professional, they are much like that.

Let’s get started. Downloaded the FXP and open in Flash Catalyst. Take moment to inspect the structure of the project. You should see each page simply toggles the visibility of the photos, and the interactions use a basic cross-fade type effect.

Select Page 1 from the Page/State navigator. This is one critical step when creating a custom component. Using the Layers Panel, turn the visibility of each photo on.

This will ensure that they will be available within the component. I find it easier to bring in all the assets that my component will use at this step, instead of adding them later.

Now select all the elements on Page 1.

Using the Heads Up Display (HUD), select Custom/Generic Component from the drop down list.

This option is also available through the contextual menu. Since this file had interactions applied to the arrow buttons, Flash Catalyst will warn us that in creating a custom component we will remove all the interactions association with these elements. Click OK.

In the Library Panel, a new component will appear. Let’s change the name from “SanFranCustomComponent” (which is auto-generated by Flash Catalyst) to something more meaningful like “SlideShowWidget”.

We now need to rebuild our interactions within our new component. Open the SlideShowWidget component in the Library Panel. You will notice that the Pages/State Navigator only shows one Page. Now we can add new states within the component, and not count against the top level’s limit of 20 Pages. The component is also limited to 20, but with some careful design you should be able to solve this problem. I would caution that if your efforts are going to used by a Flex developer, you should talk with them as how best to create the components so that they may be used. Also, if you find yourself facing a very large Page/State count problem, it might be time to reconsider the scope of the prototype or solve the problem by using Flash Builder to code portions of the prototype.

I wish there was an easier method other than completely rebuilding the prototype’s interaction inside our component, but there isn’t. Hopefully, by being aware of this limitation, you can use custom components at the start of your project instead of when you reach this limit.

Just like the top level version, we add additional States for each photo, apply Smooth Transitions between them, then add the interactions to the buttons.

Once the new component has been built, we can delete the other top level Pages that previously contained the other slides.

Photo Slide Show

Download the completed FXP.

I hope this simple tutorial has helped you better understand what custom components are, and how you can use them in your next Flash Catalyst project.

Databinding for Designers

Quite often a prototype that you are quickly building needs just a touch of realism. This recently happened to me while building a sample web application. The app followed standard login pattern, but I knew that having a placeholder <username> onscreen once the user had signed in might bother the client as they walked through the prototype. I know some will say, “Can you just explain that it is just a placeholder?” Maybe, but I have had experiences in the past where the simplest things (like this) have tripped up the client and spent an entire meeting trying to move past it.

Prototype UI without databinding

So, to avoid this issue, I’m going to show you how to add just a few lines of code to your Flash Catalyst project and build a more realistic prototype.

Here is the start of the original Flash Catalyst project. A few elements converted into buttons, and text inputs. The entire project is 3 scenes. You can download the project here.

If you purchased one of the Creative Suites you should have Flash Builder. If not, you can download a trial from Adobe.com.

Launch Flash Builder, then go to File>Input FXP.

Flex Project Import Dialog

You will be presented with a dialog that gives you two choices; pick File, then locate the DataBinding.fxp file.

Import Flex Project Dialog 2

The settings on the next dialog can be left alone, and just click Finish.

Once the Catalyst project has been imported, you will see your project in the Package Explorer on the left.

Flex Package Explorer

Open the project folder if not already open, then navigate until you find Main.mxml. This is your main file for the project and the one we will be editing. Double-click this file, and the code window will automatically open for you.

I am sure to a designer, this entire markup might be unnerving. But we only need to make a few changes. We need to locate the markup for the user in put text input.

<s:TextInput skinClass="components.userNameTextInput"
x="526" y="72" d:userLabel="User Name Input"/>

and add

id=”usernameTextInput”

It should now look like:

<s:TextInput skinClass="components.userNameTextInput"
x="526" y="72" d:userLabel="User Name Input" id="userNameTextInput"/>

This gives the element a unique identifier that we will be able to reference later.

Now, we need to locate the text component that displays the <username> text once the user has signed in.

<s:RichText color="#ffffff" fontFamily="Myriad Pro Semibold" fontSize="12" kerning="off"
lineHeight="350%" d:userLabel="&lt;username&gt;" whiteSpaceCollapse="preserve"
x="605" y="25" visible.SignInForm="false">

Here we can attach the linkage (or data binding) between the username input and text label.

One of the features that the Flex framework offers is databinding – allowing two components to share values between them.

To this component we need to insert the following:

text. Home={usernameTextInput}>

The markup should now look like:

<s:RichText color="#ffffff" fontFamily="Myriad Pro Semibold" fontSize="12" kerning="off"
lineHeight="350%" d:userLabel="&lt;username&gt;" whiteSpaceCollapse="preserve"
x="605" y="25" visible="false" visible.Home="true" id="richtext1" 
text.Home="{userNameTextInput.text}">

Let’s break down exactly what we added. First is the Text.Home attribute. This uses the revised state system in Flex 4. It says that text attribute in the “home” state is going to have a specific value. This allows the same component to have different attributes in different states. The next portion of the statement is establishing the actual databinding. This is done by the addition of the { }. The item surrounded by the { } will be automatically replaced by the actual value.

So here is where we will use that ID we added to the text input. Between the curly braces, we place the reference to the text inputs text value usernameTextInput.text.

That’s it!

Run this project and you should see the username you entered on the signin screen appear on the final screen. By adding two little items to the markup, we have added a touch of realism to our prototype.

One last touch up

Now the real application would contact some server, validate the user, and return the response, then display the proper page. But, this is a prototype and we can fake that part.

There is one more thing we might want to fix. If you noticed, the password field displays its unmasked contents when you transition form the signin screen to the home screen. Again, this is a simple fix. Locate this component:

<s:TextInput skinClass="components.PasswordTextInput"
x="526" y="127" d:userLabel="Password Input" displayAsPassword.SignInForm="true"/>

and change the

displayAsPassword.SignInForm attribute from
displayAsPassword.SignInForm="true"

to simply

displayAsPassword ="true"

Now this component will always use password masking in any state, not just in the SignInForm state.

A more realistic prototype

I hope this simple tutorial has shown you that a little time using Flash Builder can produce a more realistic prototype.

Building a scrolling thumbnail component

The other day on the Flash Catalyst help forums, someone asked if there was a way to create scrolling content, but not have the scroll track or thumb. Here is what we want the finished application to look like.

If you have tried creating a scrollbar in Flash Catalyst you will notice that both the scroll track and the scroll thumb are required elements (The increment and decrement buttons are optional).  So how do you solve this problem?

Let’s start by creating a basic scrollbar. I have “high” quality buttons that I have imported, but my design obviously did not include a scroll track nor thumb. Using the built in drawing tools, I added two basic rectangles to the screen. Exact size and position are not critical for these elements. This is not true for the other two parts. You will need to have these positioned to where you will want these buttons in relation to your data list.

The scrollbar component with all four components shown.

You can test your component by going to File > Run Project. The scroll thumb should move back and forth within the scroll track.  So now let’s “remove” it. Double click to access the scroll bar components, then select both the scroll track and the scroll thumb. In the lower right, you will see the Properties Panel. Now just change the Opacity property to 0.

Now if we look at our scollbar, we should see the component looking like this:

The scrollbar component with the track and thumb hidden.

Combining the scrollbar and the datalist.

I am going to skip the portion of attaching a scrollbar to your datalist. If you need help with this step take a look at this tutorial.

The second part of the question was “how do I have each thumbnail do something different?” Again, Flash Catalyst makes this fairly easy.

With the datalist selected, locate the Interactions Panel, and click the Add Interaction button. This will display this dialog:

We want the interaction to occur on the “On Select” event, then click on the CHOOSE STATE menu. You will need to have the states already created before you can add this interaction.  For this demo, I have created a state/page for each of the 8 photo collections.

With the correct state selected, change the last option from “When any item is selected” to “When a specific item is selected”

Use the numeric stepper to pick which item in your datalist on which this interaction should happen. Remember, programmers like to start counting from 0.

After a while, your interactions Panel should start to look like this:

You should now be able to use the scroll arrows to move through your list, and clicking on a specific item in the list should take you to that state/page.

It would be nice if we had some visual transitions as we move from collection to collection, but it can be a real pain to create transitions from each item in a data list to all the other items in the data list. Again, Flash Catalyst has some nice features to ease that burden. If you look in the Timelines panel along the bottom, you can simply select all the state to state combinations, and then click the Smooth Transitions button.

You can also just display a specific state set by using the drop list.

And with that we have a nice scrolling selectable datalist. If you examine the FXP, you will notice that I moved the default selection layer and the over layer for the datalist repeated item.

You can download the FXP from here.

Hope you enjoyed this short tutorial!