Join Jim Babbage for an in-depth discussion in this video Examining the structure, part of Fireworks CS5: Rapid Prototyping.
- View Offline
Building an AIR prototype is quite similar to building an HTML prototype inside of Fireworks. Essentially, they are doing the same kind of thing. They are not fully functional web sites or applications. They are just literally interactive mockups of what will eventually become a web site or an application, and as a result, when you are building an AIR prototype, you are actually using a lot of the same kinds of features and tools that you'd use when you are building an HTML prototype. So let's just take a quick look at this existing prototype and get a sense of what's going on. We have got our common page, we have got our master page here that has all the common elements that are going to be the same on every single page, our thumbnail images, our logo, our background, the title of the application, background area for the images that are going to be popping up, and I have even dropped in a couple of icons down the bottom: one for closing the file and then one that would act as a saving of maybe the current image if this is a true application. And you'll notice I am using hotspots and slices here.
I've got the hotspot over the Close button, and I have got slices over the top of my images here, or most of them, the top three. And the reason I have got slices here is I am also incorporating rollover effects. So if you take a look over here in the Layers panel, if I go to State 2, you will see that there's a slight difference. I'll just turn off the slices for a minute here. There is a slight difference to the images, adding inner shadow to those so that they show up a little bit differently on mouseover. So we've got a rollover state for each of the different images. If I hop on to my photo 1 page, here is where I have the elements that are unique to that page, again, very much like in HTML prototype.
The main things that are changing from page to page will be the large image, and then we might decide to customize the text that's showing up underneath the photo, so I have put those things on the actual page rather than on the master page. All the other elements can't be selected because they are master page elements. So all I can do is edit the elements that are currently part of that page. Now if I flip over to the flip side of the image and switch over to State 1, you can see I've got sort of, like, almost like the back of a postcard feel here. I've got a little thumbnail image of the photo again, the current photo, a title, and then some text, and then a way to get back to the main gallery one more time.
And the process would be pretty much the same for all the different photos. We'd have a flip side ideally for each image, and the process would be the same for all the different photos in the gallery. From a prototype perspective, we'd probably have a different flip side image for each of the different photos, so we could drop in a different title and a different photo. Now we are going to be working with this prototype, and we are going to be fleshing out a bit more, adding a couple of pages, adding in some of the interactivity as a little bit of a review for you, and when we are done, I will be showing you how to export this file out as an AIR prototype.
- Planning and creating wireframes
- Creating multi-page mockups
- Adding interactive calendars and pop-up windows
- Embedding SWF files into an HTML prototype
- Creating AIR prototypes with rollovers, events, and pages
- Exporting to FXG 2.0
- Integrating with Flash Catalyst
- Creating customized mobile designs in Device Central
- Testing a mobile project