Join Jim Babbage for an in-depth discussion in this video Creating a scroll panel, part of Fireworks CS5: Rapid Prototyping.
We're back in Fireworks here with our photo gallery mockup and I just wanted to go through a couple of little points here, and then we're going to be hopping back into Flash Catalyst. Now, I realized this is not a Flash Catalyst course. In many cases, as a designer, you may want to pass off just the graphics and the exported FXG file to your developer. But personally, I think it's a good idea to get a sense of what can be done and once you get a handle on the things you can do fairly easily in Flash Catalyst, it might empower you to start offering more services that way.
Let's take a quick peek here in Fireworks and see what we've got. I have this panel over here with a series of photos. In fact, if I zoom out a little bit more, you'll see there are six photos in this little strip of pictures, and beside that, I've got this very simplistic little scrollbar. Now, in Fireworks, here is the deal: typically, what I'd be doing is I'd only leave the four photos inside the panel, and I'd tell the client to envision this as a scrollable panel, because Fireworks can't create scrollable objects; it just doesn't work that way.
It creates static graphics; other than rollover effects, that's pretty much what you're limited to. However, by exporting this entire thing out as FXG and bringing it into Flash Catalyst, I can take all of these elements here, all the photos, the panel behind and the actual objects that make up the scrollbar, and turn this into an actual interactive component. So let's hop back over to Flash Catalyst, and see how to do this. By the way, did I mention there's no coding required? Very cool! I like that a lot. So I'm going to hop back over to Flash Catalyst, and we're going to start by creating our scrollbar.
Now, the scrollbar is made up of four elements here. I'm just going to scroll around a little bit, so we can see things a bit better. We've got the arrows at the top and the bottom. We've got the line in here that acts as a track or a little object where you can slide up and down through the scroll panel. So what I need to do is I need to Shift+Click to select all these different shapes. There we go! All four of those are selected and the little heads-up display that comes up here gives me the chance to choose a component.
And what do I want? I want a vertical scrollbar. Now you might think scroll panel, but no, that's the larger group. We'll be getting that in a minute. First thing we need is the scrollbar itself. Flash Catalyst kind of combines it altogether, almost like a symbol inside of Fireworks. Now it's a question of editing various parts. So I'm going to click on the Edit Parts button. I am going to start selecting elements. So I'm going to go ahead and select the line that runs up and down the panel, and I'm going to determine that that is going to be the track.
That's what the thumb is going to travel on as the scroll works. The next thing is the actual thumb itself, the little square, and that's going to be the thumb. Those are the only two pieces I need for a scrollbar. But I've got the up and down arrows, so hey, we might as well make use of them. So I'm going to click on my up arrow, and I'm going to choose that to be the Up Button, and I've got my down arrow, and I'm going to set that to be the Down Button. So now we've got pretty cool little component. So if I double-click, I come back to Flash Catalyst, to the main canvas, you'll notice that my thumb is all of a sudden at the top of the scrollbar.
Now let's take a look at what happens here. I'm going to quickly go to my File menu, and choose Run Project. Flash Catalyst will export out the entire thing as a temporary file and launch it inside of a browser for me. There is our project. There's my little thumb, and check this out. I'm actually able to move this thing up and down. Pretty cool! I can click on the up arrow or the down arrow and the thumb follows along.
Nothing else is happening because all we've built is a scrollbar at this point, but that took what? Less than five minutes. Now, we've got an interactive element there that's doing stuff that we couldn't hope to do inside of Fireworks. So let's go back over to Flash Catalyst. The next part of this project is to actually combine the scrollbar with these elements that are going to be scrolling. Now, the trick here is to make sure you've got more elements than you have scrolling area. So the panel is the same height as the scrollbar, which is kind of important, but our images spill out.
So what we're going to do is hold down the Shift key and Shift+Click to select the photos and the background. Everything is selected, and we're going to go on Choose Component, and we're going to turn this into a scroll panel. For the scroll panel, there's only one thing we have to set. We'll click on the Edit Parts, and you'll see To complete this component make a selection and choose Convert Artwork to Scroll Panel Part. So we have to tell Flash Catalyst what part of this is the part that's going to be scrolling in and out.
So I'm going to go ahead and select each of my images again, and then go to Choose Part, and choose Scrolling Content. Now, I didn't select the background, keep in mind, I just selected the photos. So now, you notice what's happened. All we see are the four images that fit inside the scrollable area, and the other ones that were bleeding out before are now gone. Let's do this one time: File > Run Project, and here we go, new version.
We can now scroll through all the photos inside of that panel and not a single line of code was written to do this. I'm a big fan of that. So I think this worked out really well. There's lots of other things we could do here. We could create interactive buttons for the thumbnails that lead off to the other pages that have the photos in them. We could create transitions and all these different things, but then we're doing a Flash Catalyst course. I just want to give you a sense of how you can take your Fireworks Designs, the artwork you create there, and turn it into something that's actually interactive.
And even if you're not into coding - and believe me I'm not, it's not too hard to start putting together these interactive elements yourself.
- 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