Dave Stockton's Official Blog

The other day I decided to have my two daughters draw what they think a computer program should look like.  I sketched out a few key components so they’d know what I needed.  I drew a search button, a search box, a start button, a scroll bar, a scroll bar thumb, an area to put data in, and a repeating data item.  The idea was that I’d take their drawings and turn them into working Twitter search programs using Flash Catalyst to build the interface and then dropping that project into Flash Builder 4 and hooking it all into Twitter.

The final apps can be seen at the following links:  Joey Twitter and Ana Twitter.

As it turns out, doing all of this with absolutely no Flash Catalyst experience and basically no Flex experience was pretty simple and the girls love it.  So without further adieu, here’s the tutorial.

Skill Level: Beginner

Software Used: Flash Catalyst CS5, Flash Builder 4 Standard, Adobe Photoshop CS5 Extended

Hardware Used: Flatbed scanner, markers, paper

Step 1: Get the artwork.  I drew out some basic user interface components so my kids would have an idea of what I needed them to draw. For this tutorial, you’ll need a scroll bar and a scroll bar thumb (the part of the scroll bar that moves), a start button, a search button, a search text area (this is where you’ll be typing in the search term, a box to contain the search result items, a box to contain each individual search result.

Here’s what they came up with.

Step 2: Scan the artwork into Photoshop.  You could do this with a camera if you don’t have a scanner but in any case, you need to get the artwork into the computer and into Photoshop.

Step 3: Make the artwork layered, grouped, transparent, etc.  The more work you do here, the easier everything will be in Flash Catalyst.  Basically you want to put together the interface in the way you want to see it. That means each of the components should be in its own layer and components that are built up of several pieces should have each of those pieces in its own layer and all of those layers should be in a group. I pretty much used the marquee tool to select each of the components, copy and paste it to another layer and then the magic wand to select and delete the background. This step should be pretty self explanatory and simple to do.  If you have questions please post a comment.  Here’s what it looks like after this step is done. I also put in some sample text to represent a search result.

Step 4: Save your interface as a .psd file.

Step 5: Open Flash Catalyst and import your Photoshop file. You can do this from the Flash Catalyst welcome screen or using the menu File –> New Project from Design File..

Step 6: Import your Photoshop artwork into Flash Catalyst.

When you import, Flash Catalyst will ask you about how large to make the interface.  If you’ve sized your elements to the final size you want when you built it in Photoshop, then the defaults should work.  If you haven’t, then you’ll need to pick something that seems reasonable.  Please note though, if you build an interface in Photoshop at high resolution and then import into Flash Catalyst and shrink it there, your final .swf file will be large since it will contain the full resolution interface elements in your project.

When your artwork comes into Catalyst it should look pretty much like it did in Photoshop (you can use Illustrator with Catalyst as well, but that’s a different tutorial).  You’ll notice that the groups and named layers you created in Photoshop show up in Flash Catalyst.

Step 7: Convert the button art into a button component

Click on the start button.  You’ll see it get highlighted and you should see a box that looks like below:

In the StartButton (Image) box, we want to convert the artwork to a button so using the select box, choose Button.

The box below will appear.  You can now modify each of the button states.  Click on Up.

The interface will now change slightly (everything but the start button fades out a bit) and you can now modify what each of the states of your button look like.  On the right, you’ll find various filters like blur, drop shadow, inner shadow, glow, etc. You can experiment with changing the size, position and effects on each of the button states until you get what you want. For my girls’ artwork, I put a drop shadow on the Over state. For the down state, I did a drop shadow but moved it closer so it looks like the graphics were pushed in.  When you are done with the button states, click on your project name. If you later decide to modify the button states, you can double click on the button or right click and choose Edit Component.

Do the same thing for the search button.  For my daughter’s artwork, I also made her signature into a button.

At any time if you want to see how things are working, you can run the project by clicking on File –> Run Project or hitting Command + Enter.  You should be able to see the different states of the buttons working when you mouse over and click on them.

Step 8: Convert the text input art into a text input component

Click on the text input artwork and using the Convert Artwork to Component dropdown, choose Text Input.  Then double click on the art/component. If your text input artwork is pretty straight, you may not need to do this part, but if you actually have your kid draw the art, you may want to do this. In the layers palette, you’ll notice there are two layers – Text Display and SearchBox (or whatever you called the search box layer in Photoshop).

The Text Display layer is where the text that you’ll be typing into the search box will be displayed. For me this part was trial and error since modifying the rotation property on this layer just changes the shape of the box and doesn’t really show where you’ll be typing.  You may also want to update the font size.  For my daughter’s artwork, she wrote a search term in the box which makes it hard to see what you’re typing when using the app.  I used Catalyst to drag a white rectangle over the area where the text should go.  I rotated it appropriately and changed the opacity so it would be easier to see what you’re typing but that my daughter’s original search term “rabbit” is somewhat visible. What you need to do may differ from this. Keep tweaking and running the project until the text shows up how you want it to.

Step 9: Convert the scroll bar artwork into a scrollbar component

Click on the scrollbar group in the Flash Catalyst layers palette. You’ll see blue boxes appear on all the parts of the scrollbar.

For my daughter’s artwork artwork, I separated out the up and down arrows, the thumb (the round moving part) and the track. The only required pieces are the thumb and the track.  In any case, select all the parts that make up your scrollbar.  Select Vertical Scrollbar (or Horizontal if that’s what you need) from the Convert Artwork to Component dropdown.

You’ll see a box that tells you that you need to select the various parts of the Vertical scroll bar.  Click on the Edit Parts button.

Click on each of your parts of the scrollbar and choose what it represents.

As long as you at least assign art to the thumb and track parts, your scroll bar will work correctly.  If you don’t assign the up or down buttons it just means there won’t be any buttons to click to move the scroll bar, but you can still drag the thumb around to scroll.  Once you’ve assigned the parts, you can also modify the scrollbar’s states (Normal, Disabled and Inactive). When you’re all done assigning pieces, your thumb part may move.  From what I can tell, the top of the thumb moves to the top of the track.  When you are scrolling the bottom of the thumb can move down to the bottom of the track.  Keep that in mind when you build your artwork.

Step 10: Create the data list component

To create the data list, you need to select your scroll bar, the box that will hold the scroll results, and the other artwork that represents the results.

Click on Data List in the Convert Artwork to Component drop down.

In the component editor, choose all the artwork pieces that will be used to show the results of the search.

For my daughter’s artwork, I chose the photo that represents the Twitter user’s icon, the text for the Twitter user’s name, the text for the tweet and the artwork that surrounds the image and the art that surrounds all the rest of the result.  Under Convert to Data List Part, choose Repeated Item (required).  As soon as you do this, it will repeat the repeated item:

Shrink (or expand) the area where the repeated items can appear in.

Next double click on the repeated item component and edit its states.  By default the over state will be a large blue overlay which doesn’t look so good on this artwork.  I chose to put a colored glow around the art (using filters) for the Over and Selected states.

At this point, all your artwork should be converted to components.  In the Flash Catalyst layers area, you can rename the components to something that the Flex developer (this could be you) can use to easily tell the components apart (or you can let them do that later).

To rename, just double click on any of the names.  It should let you edit the names inline.

So at this point, I’ve been working on writing this tutorial and doing screenshots and what-not and it’s 1:30 in the morning.  Also the tutorial is enormous.  So I’ll be splitting this tutorial into at least a couple of separate posts.

Look for part 2 to be posted soon. I’ll take you through building different states and transitions for your application.

Thanks,

David Stockton

Part 2 is here

« Kelley’s Doves Using Flash Catalyst to Let Your Kids Make Computer Interfaces – Part 2 »