Join Jim Babbage for an in-depth discussion in this video Using the new integration with Device Central, part of Fireworks CS5 New Features.
- View Offline
It's a mobile world and Fireworks is right there to help you design for it with new integration with Adobe Device Central. This integration is so key to Fireworks CS5 that Adobe Device Central is even bundled with this standalone version of Fireworks. Let's have a look at this workflow from a couple of different perspectives. We'll see how we can begin a new design in Fireworks by starting in Device Central. Then we'll also take a look at how we can preview an existing design inside of Device Central. So we are going to go to our File menu and down near at the bottom of the menu you'll see Device Central. If you click on that, Device Central gets launched for you.
What we are going to do here is we are going to browse for a specific device. So I am going to go to my Browse option here. I can search on a wide range of criteria: phone models, what type of player is used in the phone, the creator, ratings. I am going to go with the measurement though. So I am going to start off here with 240 in my search field, and that gives me quite a few different phones to choose from but a lot less than I began with. So I am going to scroll down and let's see here. There is the Nokia 3600 slide phone, so I am going to select that one.
Now, I can also view the details of the phone if I want. See what it's all about. If it's one of the phones that I want to work with, I can add it to my test devices. So I am going to go over to my Test Device panel. I am going to create a new group and I am going to call this olive game test. I am going to grab that phone and I am just going to drag it into my olive test folder. Here we go and I go back one level here. I'll grab another phone while I am it. That was a Nokia, so let's see what else we've got.
There is a Motorola RAZR, so I'll grab that one, drop it into the same folder as well. So it has downloaded both of those different phones into my Test Device folder. Now from here, I select a phone, I'll grab the Nokia one again, and I can choose Create. You'll see inside of this window we've now got a snapshot of the phone and a blank canvas from Fireworks. Now if I go down to my Create button on the bottom-right corner, Fireworks generates a brand new document at the dimensions based on phone, so 240x320 pixels.
So we can start by picking our device and we can move right into Fireworks knowing that we're working with the right dimensions, which is really handy. Now let's take a look at this from the other side of things. We'll fast forward a bit to the point where we've got some mockup pages done for our little application. So here is our olive_game.png file. So with these particular pages done I've got three different screens to look at here. What I want to do is preview the design inside of a mobile device to make sure everything fits the way I expect and that there are no surprises.
So I am going to go to File again and choose Preview in Device Central. Now you might get a default phone loading up automatically like you see here. What I want to do is go to my olive game test area and just double-click on my slide phone and I'll see that works out really well. My entire display shows up nicely in the phone. I can double-check it on Motorola RAZR as well and it's also showing up quite nicely there. But one other nice advantage of this is you can also test and see what your design is going to look like, good or bad, in phones that weren't intended for that specific resolution.
So if I go back to my Browse window here, go back to Home, and I'll type in a dimension of 176 pixels, so a little bit smaller than my actual design. And I'll just grab, and there's another Motorola RAZR right there. Just double-click on that and I'll add it to my test folder. And then if I go back to my options here in Device Central to emulate the image, there is the one phone, the RAZR that did work, and if I take a look at the other one... And this is what's happening. You can see that my entire design isn't showing up in the screen anymore.
So I can double-check how accurate my designs are, how they are going to work in different devices, and make sure that I'm delivering the right content for the intended device.
- Using document templates
- Creating compound vector shapes
- Controlling, editing, and saving strokes
- Aligning artwork with the Snap to Pixel command
- Exporting Fireworks documents as FXG files
- Performing roundtrip editing between Fireworks and Flash Catalyst
- Integrating with Device Central
- Testing the mobile compatibility of Fireworks documents