Over the past weekend, I put together a quick and dirty (and cheesy!) Flash Catalyst prototype, to show off the capabilities of this application to my colleagues. The end result seemed worth sharing.
Here’s a screenshot of, and link to, “Squirrl,” an imaginary web app for finding and stashing tchotchkes. Its purpose is to demonstrate PSD > Catalyst import, quick component creation, data lists, and custom/generic components. Though this is a mid-to-low-fidelity prototype, there should be enough to fiddle around with.
About the demo
Aside from displaying my propensity for coming up with quirky product names, I used this prototype specifically to show off the following capabilities of Flash Catalyst:
File Import
One of the benefits I wanted to drive home was that Catalyst can fit into our existing workflow, given its ability to import mockups already created in Photoshop, Illustrator, or Fireworks. To that end, the art used in this prototype was created solely in Photoshop. Yes. Even the cheesy squirrel.
Creating common components with a single click
Another capability I wanted to demonstrate was the one-click ease of turning groups of item states into common components like text fields and buttons.
The power of data lists
The prototype is so small in scale that I could have manually created separate “selected” appearances for each item in the left-hand column, for each major page.
Instead, I chose to use the Data List component. I turned the left-hand column into a vertical list to demonstrate the power of repeating items. Then, all I had to do was use the “Selected Index” field in the properties dialog to tie the selected state of a specific list item to a top-level page. By default, this field is set at “-1” since all repeating lists start at 0, which means that no item will appear selected until you change the number to 0 or higher.
Generic/Custom Components
The little “Squirrel This!” area is a single component. I used this to show how the states of small widgets could be contained within a custom component to better mimic the details-on-demand nature of a web application environment. There is the added benefit of being able to export this widget as part of a library for future project use.
Thanks for looking!
Simply let me know if you would like me to break down any of the above steps into more detail. Ideas for upcoming posts also welcome!
