This is the final tutorial in getting your child’s artwork into Flash Catalyst and turning it into a working Twitter search application.  In Tutorial 1 you learned how to get your artwork into Photoshop and get everything all set up for Flash Catalyst.  Then you learned how to import the .psd into Flash Catalyst and turn the artwork into working components.  In the Tutorial 2, you learned how to build the various states your application will need and to use Flash Catalyst to create animations when then application switches between states.

In this tutorial you’ll learn how to move from Flash Catalyst into Flash Builder 4 and hook your application into the Twitter search API.  Before you proceed make sure that you are happy with how your application looks and behaves.  Currently Adobe’s Flash Catalyst -> Flash Builder work flow is one-way only.  There’s not really any way to move backwards from Flash Builder into Flash Catalyst.  You can do all the stuff you do in Flash Catalyst in Flash Builder 4, but for what we’re dealing with here, many of the steps are easier in Flash Catalyst.

Step 1: Start Flash Builder 4.

Click on the Flash Builder Icon

Click on the icon, navigate the menu, etc.

Step 2: Import the your Flash Catalyst project into Flash Builder 4.

Click on File and then Import Flex Project (FXP)…

Find your project by browsing and click open.  On the next screen you should be able to leave the defaults and click finish.

Your main application file is in Main.mxml.  Each of the custom pieces are shown under components.  All of the images that skin your custom components are located under assets.images.<your project name>

Step 3: Prepare your flex project

Open your Main.mxml by double-clicking on the icon.  If you see a bunch of code, switch to design mode by clicking on Design in the top left area of the workspace.  Click on your search text area and in the properties panel assign an id of searchText.  Click on your search button and assign an id of searchBtn.  You may need to switch to your searchResults states to see these elements.  The states are usually found in the top right of the Flash Builder interface. Next, click on the data grid and assign it an id of dataGrid.  If you have a signature button, click on it and assign it an id of signatureBtn. Next, switch to your start state and assign the id of startBtn to your start button.

Step 4: Create the data service to connect to Twitter

At the bottom of the work area, you should see a tab called Data/Services.  Activate it by clicking and then click on the Connect to Data/Service… link.  Choose XML.

Click next.

Click on URL for the XML source, and enter http://search.twitter.com/search.atom?q=catalyst.  This is the endpoint of the service for searching Twitter. Then click on the Invoke button.  Flash Builder will fetch the XML from Twitter so it knows about the data that will come back from it.

In the Select node drop down, you’ll see the structure of the XML that comes back from the Twitter search.  We only care about things in entry, so select entry. If Is Array? doesn’t get selected automatically, click on it to select it.  Click on Finish and Flash Builder will create the ActionScript needed to make a call to the Twitter search service.  In the Data/Services area, you should see a getData call.  Switch into design mode and choose the searchResults state.

Drag the getData call and drop it on the data grid.

Since Flash Catalyst created the project with some sample data, when you do this it will tell you that the component is already bound and ask if you want to replace the binding.  Click Ok.

Next the service will ask what you want to bind into the data grid.  Choose title in the dropdown.

Click OK.

Flash Builder now switches into Source mode and shows some of the code it just generated. It now shows the call to the getData service. This service takes an input which we want to have come from the value in the search text box.

Replace the highlighted text with searchText.text, the text the user entered into the search box.

So this is pretty close to what we want, but the function above actually tries to call the service when the grid is created which is actually right when the application starts up, and before there’s anything in the text box.  If you run the app now you’ll get an error.

While you’re still in Source mode, find the code that represents the search button.  After the <s:Button, type click=”.  Flash Builder will open a box with an option to generate code.  Press enter and it will create a function call and link it to the click event of the search button.

For me it added ‘click=”searchBtn_clickHandler(event)”‘. Up above in the script area you will find the function called searchBtn_clickHandler.  It should be just below the list1_creationCompleteHandler.

Copy the contents of the list1_creationCompleteHandler into the searchBtn_clickHandler.

Now you can delete the list1_creationCompleteHandler() function.  By can, I mean, you should now delete the function.

Find your list element and delete the creationComplete event.

In my project, Flash Catalyst had already created a click handler to handle the state transition.  I moved the code from that click handler into my new click handler.  I also removed the extra click handler.  It ended up looking like:

The component looks like:

You can now also delete the ArrayCollection of fake stuff that appears in the List object.

If you run your project now, you should be able to click the start button, see the transition to the search page, enter some text, click the search button and see a bunch of blank result areas appear.  This is actually good since it means we’re getting something back.  Now we just need to bind the data to the different parts of the result area.

To bind the results, open the components folder/package in the Package Explorer.  Find your RepeatedItem<something>.mxml.  For my project, <something> was 3.  I’m not sure how it determines the numbering or naming for Flash Catalyst imported projects.

Locate the <s:RichText /> elements.  One should have a text=”{data.text1}”.  This is the author area.  Replace the {data.text1} with {data.author.name}.  This tells it to use the author’s name for each entry.

Next find the RichText with the {data.text2}.  This is where the tweet appears.  Change {data.text2} to {data.title}.  This will make the tweet show up in the box.

The last bound piece is the image.  For me it’s bound to {data.image3}.  Change

source=”{data.image3}”

to

source=”{data.link.getItemAt(1).href}”

Run the project by going to Run -> Run Main or clicking on the green play button at the top.

Everything should work at this point.  There’s still one more change though.  In the RepeatedItem’s image, remove the

smoothBitmapContent=”true”

attribute.  While everything works fine if you run this locally, once it’s on a real server things will go all wonky.  This is because smoothBitmapContent actually modifies the image that is coming from another server.  This is not allowed outside of the sandbox of running your .swf using file:///.

That’s it.  At this point you should have a working twitter search application build off of your child’s art (or yours if you want).  Please let me know what you think or ask questions or let me know if there are errors or problems you find when going through the tutorial.  I built this app, then went back and built it again and tried to keep track of each step.  It’s very possible I’ve missed a step or two or screwed up something in the instructions.

The final apps can be seen at the following links:  Joey Twitter and Ana Twitter. Both are twitter search apps.  It would be pretty simple to make them into something else (like Flickr search or something similar).  I hope you enjoyed this set of tutorials.

Thanks,

David Stockton

« »