Click on any phrase to play the video from that point.
[♪ Music ♪]
[Adobe Developer Connection]
Hi, Jacob Surber, Flash Catalyst Project Manager.
Today we're going to talk a little bit about some best practices with
Illustrator and Photoshop.
Putting in a little bit of extra effort into those files is
really going to help you later on in the game.
Let's take a look at some of the ways you can set up your files best.
Here we are in Illustrator.
I'm just going to create a new file.
You'll see here we've got new document profiles.
Now if you haven't checked out this list, here's a Flash Catalyst profile.
If you click that, it starts to make some settings that are going to make life
so much easier down the road.
It adjusts your dpi down to 72, it sets your color mode to rgb, but most importantly,
it sets align to pixel grid.
So I'm going to click okay, it's going to create the file.
I'm going to draw a box just for effect.
So if I zoom into this box, you're going to start to see the bounding
rolls straight through the stroke.
There's a couple of simple settings that if you change these,
everything is going to work out much, much better.
For starters, I'm going to change my reference point to the upper left.
As components are defined in Flash Builder and in Flash Catalyst,
the upper left is 0/0, so changing that inside of Illustrator is the first step.
After that, I'm going to come over to my transform panel.
I'm going to make sure align to pixel grid is checked, then come over to align, check my
options, and make sure use preview bounds is on.
So now when I reselect this you can see the selection is at the edge of the stroke
and everything is starting from 0/0.
Then I'm going to look at a comp that I've started to create as a basis
for my new AIR app.
So this is the design for Pixd.
It's going to be a work sharing app that Adobe XD is creating to share work
throughout the team.
Like I said earlier, spending a little bit of extra time up front to organize this project
is going to save you lots of time in creating your interactive prototype,
and ultimately the skins that will go to the final flex app.
If you look at our layers panel, we've started to organize the layers the same way
that you're going to organize the states in Flash Catalyst.
I've also gone through and given logical names to all of my layers.
By cleaning these things up before you import, you'll save a lot of junk in your file.
If your preference happens to be Photoshop, all of these same principles apply.
The only thing you're going to have to remember is go to Adobe labs and pick up
the fxg exporter plug-in for Photoshop.
This is going to export all your content from Photoshop and let you
import it right to Catalyst.
Now I'm going to jump over to Catalyst and create a new project from a design file.
In this case, my Illustrator file.
So it's importing all my artwork, and it's going to give me the basis to create my application.
Once you start the import you're going to be presented with a dialogue.
Most often the defaults are going to be fine, but it gives you some options as to
how the file's going to get imported.
All right, I've got my Illustrator file importing, and if you look at my
layers panel, it's going to look just like my layers panel did in Illustrator.
If I open up my states panel, I'm going to start to duplicate my state and create
the flow of my application.
So state two, I'm going to turn off grid view and add screenshot view.
Duplicate again, turn off screenshot view, and I'll add screenshot view with comments.
The last piece of the app is letting you add your work, so I'm going to add the
layer for posting a screenshot.
There we go.
I can rename all of these states to let me keep everything straight.
Cool, now that I have all of that work imported, that's look up what we can do with it.
Let's take this button.
I can expand my layers, drill in, find my upload button.
Here we go.
I'm just going to right click, say "convert artwork to component."
Now it's a button.
If I double click on it to check, you can see it's added the artwork
to the up, over and down states.
A couple of tweaks, add some transitions and I'm good to go.
So this is really just the tip of the iceberg.
If you want to learn a little bit more about how Catalyst works with Illustrator,
Photoshop, Fireworks, check out the Adobe Developer Connection.
Now, there's a great article that goes in depth.
You can learn tons. Thanks.
[Adobe Developer Connection]
[♪ Music ♪]
