Introductionwelcome| 00:00 | >>Hi there, my name is Michael Niness and I'm
a senior user interface designer at Adobe systems.
| | 00:05 | This title is a series of movie-based tutorials designed to show you the
most efficient methods for importing content created with Adobe Photoshop
| | 00:11 | into Macromedia Flash while maintaining as
much of the original appearance as possible.
| | 00:16 | In addition, this title also teaches you how to control
the optimization settings in Flash for bitmap images
| | 00:21 | when they are embedded inside an exported SWF file,
including how to load external JPEGs into a Flash movie.
| | 00:27 | While recording this title, I used Adobe PhotoShop CS and Macromedia
Flash MX 2004 along with Adobe ImageReady CS, Adobe Illustrator CS,
| | 00:35 | and Macromedia Fireworks 2004.
| | 00:37 | Most of the training content in this title should work just
fine in the earlier versions of either of these products,
| | 00:42 | but please be aware that some menu commands may be named
differently or may appear in different locations in earlier versions.
| | 00:48 | I hope you enjoy the movies.
| | Collapse this transcript |
|
|
1. PSD to Flashbasic importing| 00:00 | >>Let's begin by taking a look at how Flash
treats layered Photoshop files by default.
| | 00:05 | What we've got here is a typical, layered Photoshop file opened in
Photoshop, and this is just file number one in the Chapter 1 folder
| | 00:12 | of your class files here.
| | 00:14 | And you can see that in the Layers palette here I've
broken up this document in several different layers.
| | 00:19 | You can turn them on and off to see exactly the structure of this document.
| | 00:22 | I've named my layers in an intelligent way
so I know what layer is what and so forth.
| | 00:26 | So, again, this is what it looks like in Photoshop.
| | 00:29 | Let's jump over to Flash and take a look at how Flash
will treat this document when we try to import it.
| | 00:35 | I'm gonna go ahead and open from the Chapter 1
folder the 02_Photoshop_Start.FLA document.
| | 00:42 | That's just a Flash file I've started for you to work with.
| | 00:45 | We'll open that up, and to bring anything into Flash from an
external file, we would use the Import command; and we will go ahead
| | 00:51 | and import at this stage.
| | 00:54 | There it is.
| | 00:54 | There's the Photoshop document that we were just looking at in Photoshop.
| | 00:57 | Let's go ahead and hit Open and this is what's
going to happen, depending if you're on Mac or Windows.
| | 01:03 | Since Flash doesn't recognize the file format, it's
basically saying, "Hey, I don't know what the PSD is.
| | 01:08 | Would you like me to try importing using QuickTime?"
| | 01:11 | That's the first thing to really talk about.
| | 01:12 | If you're on a Mac, QuickTime obviously
is going to be installed automatically.
| | 01:17 | If you're using a Windows machine, there's pretty good chance you've
got QuickTime installed, but if you don't, you need to go to Apple.com
| | 01:23 | and get the latest version of QuickTime installed.
| | 01:26 | We're gonna go ahead and click Yes. What's going
happen is if QuickTime is present on your machine,
| | 01:32 | the composite version of this Photoshop document will be placed into Flash.
| | 01:37 | Now what I mean by composite is that all of the
layers have been flattened down into a single layer.
| | 01:41 | And as I move this document around you see that's all I get.
| | 01:44 | I can't get to the individual layers now to animate
them or separate them or do whatever I want to them.
| | 01:48 | It's important to repeat again that Flash is only bringing that
composite file using the QuickTime plugin to be able to do that.
| | 01:55 | Now, that is only going to happen if Photoshop's
preferences have been set a certain way.
| | 02:01 | Luckily the correct preference is the default setting, but just in
case you've mucked with the settings, let's go take a look at that.
| | 02:08 | So in Photoshop under Edit, Preferences, General, or on the
Mac it would be under the Apple menu, but we'll go ahead
| | 02:16 | and look in the general preferences.
| | 02:18 | And down in the options for file handling, there's a feature here,
an option here called Maximize Photoshop PSD File Compatibility;
| | 02:29 | and we should make that to be "Always".
| | 02:32 | I'm using Photoshop CS here, but in previous versions of
Photoshop, this option was called many different things,
| | 02:39 | but the basic premise here is whether to include
that composite file in a layered Photoshop file.
| | 02:46 | So if that is turned on in addition to having the layers, the file
will save a flattened layered version of the document inside the file.
| | 02:55 | And that's what QuickTime is actually using to place inside Flash.
| | 02:59 | This is true for many other applications that are trying to deal
with a Photoshop file; often times you get just the composite file.
| | 03:06 | If this has been set to "Never", then that composite file is not
saved with the Photoshop document and Flash would bring in nothing.
| | 03:14 | Okay. So make sure your preferences are to change that to always so that
composite file's always being saved in your layered Photoshop document.
| | 03:23 | So bringing the layered file into Photoshop from the get go,
all you get is the composite as long as QuickTime is installed.
| | 03:30 | Let's go to the next chapter to see how we can start working around some
of these issues and actually bringing in the specific layers independently.
| | Collapse this transcript |
|
|
2. PSD to PNGs to Flashsaving layers as individual PNG files| 00:00 | >>As we saw in Chapter 1, Flash can't bring in the individual
layers of a layered Photoshop file, so we kind of have to help it out.
| | 00:06 | We're going to do that by separating each layer out into it's
own file and then bring those individual files into Flash.
| | 00:15 | Now there's two different ways to do that from within Photoshop
just using Photoshop by itself, and I'm going to show you both ways
| | 00:22 | because each one has its own little nuances.
| | 00:25 | Before we do that, I want to teach you how to walk through the Layers
palette in Photoshop and actually learn how to view one layer at a time.
| | 00:35 | So if you look in the Layers palette here, all my layers are
visible. On Windows if you [Alt + Click], or on a Mac (Option + Click),
| | 00:43 | on the eyeball of one layer, watch what happens.
| | 00:46 | That will turn all the other layers off so
you're just seeing that one layer isolated.
| | 00:50 | If you [Alt + Click] or (Option + Click) again, it goes back and turns on
the layers that were on previously, before that first Option + or Alt + Click.
| | 00:58 | And that's a slight change.
| | 01:00 | In Photoshop 7, it would toggle all layers on or off, whereas in
Photoshop CS now, it just turns on the layers that were previously on.
| | 01:09 | So that's a nice little change there.
| | 01:11 | Now there's one other subtle difference to note here, if I [Alt +
Click] to turn off this one layer, or turn all the other layers off
| | 01:17 | and just view this one layer, I then want
to go and view the next layer up by itself.
| | 01:22 | So I'm going to hold down the Alt key again. A lot of people think to
[Alt + Click] on the thumbnail of the layer to switch to the next layer,
| | 01:30 | but watch what happens when I do that.
| | 01:31 | That does turn this layer on, but it leaves the previous
layer turned on as well, and so that's not what I wanted.
| | 01:37 | I'm going to go back and turn this layer off, come back to this layer again.
| | 01:41 | Instead of Alt + (or Option +) clicking on the layer
thumbnail, Option + (or Alt +) Click on the actual layer name.
| | 01:46 | And when you do that, you'll see that that turns that layer that you
just clicked on, makes it visible, and turns off the previous layer.
| | 01:54 | So again, Option + or Alt + Click on the layer name lets you
cycle through the Layers palette one layer at a time.
| | 02:01 | Okay, so that's kind of a nice trick.
| | 02:04 | Now, with that in mind, you can see that I've isolated this one layer
by itself and I now want to save this off as a separate document,
| | 02:11 | a separate file with this layer in it.
| | 02:14 | We need to choose a file format in order to do that.
| | 02:16 | The only file format that's actually going to support that
transparency in Flash is the PNG format or the PNG file.
| | 02:24 | If we were to save this as a GIF or a JPEG, all the areas represented by
the checker board here, meaning transparency, would turn to opaque white
| | 02:31 | and that's not what we would want, of course.
| | 02:33 | So two different ways to dup off this document
or this layer into a separate document.
| | 02:38 | The first way is to go to the Layers palette, and in the
Layer Palette Options, is a command called Duplicate Layer.
| | 02:46 | And by default this Duplicate Layer dialogue box thinks
that you want to duplicate this layer in the same document,
| | 02:52 | and of course we're going to do that to a new document instead.
| | 02:55 | The reason I like this technique as opposed to
the other one I'll show you in just a minute,
| | 02:59 | is that the Duplicate Layer dialogue box reminds
you the name of the layer that you're duplicating.
| | 03:05 | And so you can use that as a reminder to name the new file the same.
| | 03:11 | So we're going to go and give this a name.
| | 03:13 | Now before I do that, let me tell you about one more thing
you need to know about, the way Flash brings files in.
| | 03:19 | Ideally, you're going to name this set of layers sequentially, so, you
know, zero one, zero two, zero three, and then after the number,
| | 03:27 | you'll give it some logical name, in this case the name of the layer.
| | 03:30 | Now the way Flash brings in sequential files is,
obviously, sequentially, so zero one, zero two, zero three.
| | 03:38 | Flash thinks from bottom to top, so any file numbered one would
be at the bottom of the layer stack when you bring it into Flash,
| | 03:48 | and the higher numbers would be on top.
| | 03:50 | And that may be a little bit different from what you're used to thinking.
| | 03:53 | I know personally when I look at my Layers palette, I kind of
reference it as top to bottom, a stack of layers with the top one being
| | 04:01 | of course on the very top.
| | 04:02 | So when I first started bringing these layered files out of Photoshop and
bringing them into Flash, I kept getting confused because they were coming
| | 04:10 | into Flash in the reverse order than I was used to.
| | 04:12 | So the point being, start from the bottom, export each layer from the
bottom going up, and so the bottom layer would be named number one.
| | 04:22 | This might make more sense later on when I actually import these
individual files into Flash, but it's just a warning for you,
| | 04:29 | or a little tip there; think from bottom up.
| | 04:31 | So we're going to name this "01_ -" and we could call it previous,
but since this is kind of a navigation layer that I'm using
| | 04:39 | for my mock-up here, I'm just going to call it "01_navigation".
| | 04:43 | We click OK and that does indeed generate a
second document with just that one layer inside it.
| | 04:49 | Now again, we want that checkerboard area to remain transparent,
so we'll go to File, Save As, and we'll choose the one file format
| | 04:57 | that Flash is going to preserve that transparency with, and that's "ping", PNG.
| | 05:00 | And you'll notice that because I already renamed my new document
ahead of time, it automatically grabs that as the file name.
| | 05:08 | We're going to go ahead and create a folder on the desktop here. We'll create
a new folder and we'll just call this "Layers to PNGs", layers to PNGs.
| | 05:17 | And we'll put our layers inside that document.
| | 05:20 | So I'll hit Save, click OK for this options (it's not
important), and there it is, that document is duplicated.
| | 05:26 | So we'll go ahead and close that.
| | 05:28 | Say no. So the next step is we'll Alt + or Option + Click on
the name of the next layer to turn off the previous layer
| | 05:37 | and just see this one layer isolated.
| | 05:38 | So here's the shadows.
| | 05:40 | And again, we'll go to the Layers Palette Options in
the Layers palette, say Duplicate Layer to a new document,
| | 05:47 | and we now know that this is layer 2_, and
there slide shadows, so I could just copy and paste.
| | 05:54 | I'll go ahead and do that- I'm lazy.
| | 05:55 | Copy and paste, click OK.
| | 05:59 | Again, we've duplicated this off to another
document and then File, Save As, and choose PNG.
| | 06:05 | Now I'm not going to bore you and do this for all 11 layers, but
just, you know, once or twice to help jog your memory here.
| | 06:11 | Again, it's saving it in our Layers to PNGs folder to the
Layers folder, layer 01, this is now 02, click Save.
| | 06:17 | The other option, kind of a different way to do the same thing, is to
again, just turn on the layer that you want to see by itself, so again,
| | 06:26 | we'll Alt + or Option + Click on the layer name, and if I do a file
Save As here, without duplicating the layer to a separate file,
| | 06:34 | one of your options in the Save As dialogue box is to turn off layers.
| | 06:40 | When we turn off that Layers check box, that's going
to not save all of the other layers in the document.
| | 06:46 | It's only going to save this one layer in
that file that you're generating here.
| | 06:50 | Now, the down side of that is the file name is not picking up
the layer name, so you'll have to remember to do that manually.
| | 06:58 | Just kind of keep your eye over here on the Layers
palette and see what layer you have currently selected.
| | 07:03 | We'll go ahead and choose Layers to PNGs and then we'll go ahead and
name this, choose PNG for our file format, and name it 03,
| | 07:12 | and look over at our Layers palette and this is field.PNG.
| | 07:19 | Also, you'll notice that when you choose this option, when you
turn off layers, the As A Copy option is automatically turned on,
| | 07:26 | and the difference here, Save As versus Save A Copy, when I click
Save and click OK here, the original document is left open.
| | 07:35 | The duplicated document is saved off and not left open on your screen here.
| | 07:40 | So that's the advantage of this technique.
| | 07:42 | When you do Save As and you're using save a copy it's a
little bit quicker to go to the next version, you know,
| | 07:49 | the next document that you need to create.
| | 07:51 | Again, the key difference though is that it's
not picking up the file name or the layer name.
| | 07:55 | The other difference that's important to kind of know about this Save As
way of doing it, if I go back and open that PNG file that we just created,
| | 08:04 | you'll see that the layer name is just a generic layer zero,
whereas if I'm actually using the technique by duplicating the layer
| | 08:11 | through the Layers palette, the layer in that document that you're
creating retains the original layer name, and if we remember to copy
| | 08:18 | and paste the layer name into the file name, those two match.
| | 08:21 | Okay? It might not seem like a big deal now, but later on when you want to
go back and edit the documents, it's nice to have those things matching up,
| | 08:28 | those names matching up.
| | 08:30 | Okay. So again, I would go back and do this
for all the layers in my layer document.
| | 08:35 | We'll go ahead and stop now and just pretend that we've already done that.
| | 08:39 | And in the next chapter we'll actually show how
we bring in all those layered PNGs into Flash.
| | Collapse this transcript |
| importing PNGs into Flash| 00:00 | >>So now that we've saved all of those layers out into separate
files we're ready to start bringing the individual files into Flash.
| | 00:05 | Now in your class files in Chapter 2, the PSD to PNGs to Flash, we'll go
ahead and open that up, there's the Layers to PNGs folder that we created
| | 00:13 | from the previous chapter there.
| | 00:15 | And when I go into that folder, you see I've done this
two different ways, bottom to top and top to bottom.
| | 00:21 | This is just there for your reference
in case you want to see the difference.
| | 00:23 | I'll show you the difference in just a minute.
| | 00:25 | Now, the most important thing, let's go over to Flash here, before we start
bringing these documents in, we want to make sure that the canvas size,
| | 00:35 | or the stage size, of the Flash document is the same size in
pixel dimensions as the Photoshop mock-up that we were creating
| | 00:42 | because we're going to create a new Flash document
and the default size is 550 by 400 pixels.
| | 00:49 | Let's go back over to Photoshop and just see what
the dimensions are of this particular document.
| | 00:55 | Now there's two ways to do that, the simple way is to go to Image,
Image Size, and in the Image Size dialogue box it will show you
| | 01:00 | that this is indeed 620 by 380 pixels.
| | 01:04 | The other way is if you happen to have your Info palette open and
visible, I'm just going to double-click on the Info tab to reveal it,
| | 01:11 | doing a [Ctrl + A], or Select All, or (Command + A) on the Mac, tells you the
width and height here as well without having to go up to the dialogue box.
| | 01:18 | So it's 620 by 380.
| | 01:20 | Great. We're now going to use that information back in Flash and we'll click
on the size button in the Properties panel and we'll type in 620 by 380
| | 01:31 | to have those matching dimensions.
| | 01:35 | Now, the reason that's important is that when we bring
the documents in, the PNG files that we've created,
| | 01:40 | if the stage size in Flash is the exact same size as the documents
we're bringing in, then things are going to register automatically for us,
| | 01:48 | we won't have to reposition them once
the documents are in the Flash document.
| | 01:52 | So, now that the document and the stage sizes are
corresponding, let's go and start bringing these things in.
| | 01:58 | We'll go to File, Import, Import to Stage or Ctrl + or Command + R, and
here's the two different versions, the bottom to top or the top to bottom.
| | 02:07 | We'll go ahead and do the top to bottom, meaning I exported the top layer
in the Photoshop Layers palette first and named that "01" and so on.
| | 02:17 | And to bring files in sequentially, all you need to do is just select
all of them, [Ctrl + A], and click Open and it's going to bring all
| | 02:23 | of those files in at the same time.
| | 02:25 | And there they are.
| | 02:26 | Now, it comes in as one layer with all of these
individual graphics on that particular layer.
| | 02:32 | Now, I'll zoom up and you'll see a couple things wrong here.
| | 02:37 | One, the bar at the top here, this black bar, it's covering
up what actually used to say "Darkhorse Photography" here. Also,
| | 02:44 | the shadow behind the slides here is actually on top.
| | 02:48 | And this is what I mean by getting things reversed; by exporting
the layers top to bottom, they end upcoming in in reverse in Flash.
| | 02:57 | So this is just to illustrate that.
| | 02:58 | That's probably not the way you want to do it, otherwise you're
probably going to have to sit there and change the stacking order
| | 03:02 | of all these particular graphics in Flash, which
can be more time consuming than it needs to be.
| | 03:06 | So what we're going to do is we're going to undo this and open up the original
starting document that's already been sized to 620 by 380 for us.
| | 03:17 | And we'll go to File, Import again, Import to Stage, and this time
we'll navigate to the bottom to top folder, and again, the same files,
| | 03:25 | just numbered a different way, saved from the bottom to the top.
| | 03:29 | Select all of them again, click Open, and now you'll see when they come
into the Flash stage they are indeed in the correct stacking order.
| | 03:37 | Now, in order to be able to do anything with these particular files,
these particular images, like say animate them or script them or whatever,
| | 03:45 | each one of these would need to be turned into a
movie clip and, ideally, put onto its own layer.
| | 03:51 | So as I said before, all of these individual graphics,
there's 11 of them, are all on the default layer one.
| | 03:58 | What we want to do is distribute all of these particular images
to their own layer, and luckily in Flash there's a great command
| | 04:04 | that will actually just do that for us.
| | 04:06 | So I'm going to do a Select All, [Ctrl + A], or (Command + A) on the Mac, and
even though it doesn't look like there's more than one selected, it's
| | 04:12 | because they're all stacked on top of each other.
| | 04:14 | All 11 of these images are now selected.
| | 04:17 | I can go to my Modify menu, to the Timeline submenu,
and there's a command here called Distribute To Layers.
| | 04:23 | I just remember the keyboard shortcut because it's a lot easier
and it's [Ctrl + Shift + D] on Windows, or (Command + Shift + D) on the Mac.
| | 04:29 | We'll go ahead and choose this menu command, and what's great here is that
it automatically distributes all of those documents just like it said,
| | 04:36 | all of those images to their own layer.
| | 04:39 | And a nice little touch here is that the layer name
picks up the file name of the imported graphic.
| | 04:47 | And you can see what I mean now by top to bottom, zero
one is at the bottom and the higher number is at the top.
| | 04:53 | But because we kind of planned ahead and knew how Flash thought,
everything's in the correct stacking order and the layers
| | 05:00 | in Flash are now named the same as they were in Photoshop.
| | 05:04 | So it's great how you do have an extra layer here,
layer one, the original layer that had nothing in it,
| | 05:08 | let's simply just delete that and there you go.
| | 05:12 | A much easier way to bring in layered Photoshop files and retain
their stacking order and retain their file names and so forth.
| | Collapse this transcript |
|
|
3. PSD to ImageReady to SWF to Flashbasic SWF export from ImageReady| 00:00 | >>When you install Photoshop CS, you also install ImageReady CS.
| | 00:03 | And one of the features that was added to ImageReady CS was the
ability to export to the Macromedia Flash or SWF file format.
| | 00:11 | So here is the Photoshop document that we've been working with
in previous chapters where the shadows are on their own layer,
| | 00:19 | all shadows on one layer, and the text has been rasterized.
| | 00:22 | Later on in some other movies in this chapter, I will talk about some
other options here based on how the file is constructed, but for now,
| | 00:30 | just a simple thing where everything's been rasterized.
| | 00:32 | We want to take this over to ImageReady and
do an export to SWF from that application.
| | 00:37 | At the bottom of the Tools palette in Photoshop is what
they call the Jump To icon, or Edit In ImageReady.
| | 00:44 | And if you click on this button, that will take this Photoshop
document and just launch ImageReady, if it's not already open,
| | 00:49 | and put that document there.
| | 00:50 | There's also a keyboard shortcut for it, the Jump To shortcut is
either [Ctrl + Shift + M], or (Command + Shift + M) on the Mac.
| | 00:57 | So let's go ahead and do that.
| | 00:58 | We'll click that button and that switches us over to ImageReady.
| | 01:02 | And it's as simple as going to File, Export and choosing Mac
or Media Flash SWF, or SWF, and you get this dialogue box.
| | 01:11 | You have a couple of options.
| | 01:12 | First thing that we want to make sure of is under the bitmap
options we decide what we want to do with the generated bitmaps
| | 01:19 | that are going to be created.
| | 01:21 | You can choose JPEG and choose a
default quality setting for all of them.
| | 01:25 | Again, one of the reasons why I don't like this particular
option for a document like this is that you don't get the preview
| | 01:31 | of what these JPEGs look like at this point in time.
| | 01:35 | For this particular type of a document where you're
dealing with layers and you care about the layer structure,
| | 01:40 | you might actually want to choose what's called
lossless 32 which is just a fancy name for PNG.
| | 01:45 | But choosing lossless 32 means that you're choosing the PNG format which
means they'll come in uncompressed. You can do per object compression
| | 01:52 | in Flash on an individual basis by going to the library palette in
Flash, double-clicking each individual bitmap that you want to customize
| | 02:00 | and doing it in the bitmap properties dialogue there.
| | 02:02 | So file format really important choice there.
| | 02:05 | Preserve Appearance: if this is turned on, then any type layers will be
rasterized if there's anything in the type layer that can't be preserved.
| | 02:16 | And we'll talk about some of that later on.
| | 02:18 | Preserving appearance is typically what you would check if you want the
image to come in looking exactly like it did in ImageReady or Photoshop.
| | 02:28 | You can choose the background color for the resulting SWF; since
ours is going to be white, we're just going to leave it at the default.
| | 02:34 | You can also choose to generate the containing HTML document, but
since this is going into Flash, we're not going to do that right now.
| | 02:39 | Let's go ahead and click OK and we'll give this
a name, we'll just save it to the desktop here.
| | 02:45 | Click Save.
| | 02:46 | Great. It gives you a warning saying "Hey, since you chose preserve
appearance, I may have had to have flattened one or more layers."
| | 02:53 | You can choose to get rid of this dialogue box.
| | 02:56 | Sometimes it's helpful just to keep it on just to let you know
that something could have changed in terms of the layers structure.
| | 03:01 | So go ahead and click OK.
| | 03:03 | At this point we'll switch over to Flash and we'll Import,
[Ctrl + R], or (Command + R), or File, Import, Import To Stage,
| | 03:12 | and there's that file that we just exported.
| | 03:14 | And we'll go ahead and click Open and there it is.
| | 03:17 | It looks pretty good.
| | 03:19 | The problem though is that since we chose Preserve Appearance, some
things got flattened out, like that dialogue box told us, more,
| | 03:26 | you know, into one layer.
| | 03:27 | So we've lost the individual layers here.
| | 03:30 | It looks exactly like it did in Photoshop, but certain
things were flattened, squished into just a single layer.
| | 03:38 | So let's see if we can improve upon that experience here.
| | 03:40 | Let's go ahead and revert this file back to its
starting point and we'll jump back over to ImageReady.
| | 03:48 | We'll try the export again, Export Macromedia Flash.
| | 03:52 | And this time we'll turn off Preserve
Appearance just to see the difference.
| | 03:55 | Go ahead and click OK and we'll just save over
this other SWF file that we generated before.
| | 04:00 | Let's go ahead and replace that.
| | 04:03 | Again, let's jump back over to Flash and let's import that again.
| | 04:07 | Import To Stage, and there's that same SWF file that we just replaced.
| | 04:10 | We'll open it up, and now, since Preserve Appearance was turned off, you
didn't get the flattening effect and each little slide here, slide map,
| | 04:20 | is a separate file or separate layer that you can move around.
| | 04:24 | So sometimes you just have to try it with Preserve
Appearance and without Preserve Appearance checked to see
| | 04:30 | if you like how the resulting structure is in the document.
| | 04:33 | And then of course, if you do a Select All and go to your
Timeline and say Modify Timeline, Distribute To Layers,
| | 04:41 | you can have all of these objects end up on their own layer again.
| | 04:43 | So that's just some basic importing from
ImageReady to Flash by exporting a SWF file first.
| | 04:52 | In the next movie we're going to talk about some of these issues about dealing
with layer styles and vector type and keeping those editable as well.
| | Collapse this transcript |
| dealing with text| 00:00 | >>So for this movie, we're going to actually look at this
similar document, it's got basically the same content,
| | 00:05 | but it's constructed just a little bit differently.
| | 00:07 | So we're going to open up file number two from the Chapter
3 class files here, Photoshop Type and Styles.
| | 00:13 | You'll see that the visual appearance of this document looks pretty much
exactly the same, but you'll look over in the Layers palette and you'll see
| | 00:19 | that I've got type layers for all the text.
| | 00:21 | The black bar here is actually a shape layer, a vector shape layer.
| | 00:26 | And all the slides actually have drop shadow
layer effects applied to them.
| | 00:31 | So again, just a little bit more complex of a document
where things haven't been rasterized or flattened down.
| | 00:37 | Let's go ahead and export this to Macromedia Flash from
ImageReady here and take a look at what our options are going to be.
| | 00:45 | Preserve Appearance is checked.
| | 00:46 | Let's go ahead and take a look at what that's going to do.
| | 00:48 | Again, we choose PNG or lossless 32 for the embedded
bitmaps, and we'll go ahead and click OK.
| | 00:53 | Let's go and just save this to the desktop and we'll write "Preserve", and
this is just something for me to keep track of what option I chose here.
| | 01:04 | We'll go ahead and hit Save, and again I get this dialogue
box that says "Hey, since you have preserve appearance checked,
| | 01:10 | something may have happened that you may not have
expected, so we're going to warn you about that."
| | 01:14 | Go ahead and click OK.
| | 01:15 | Let's jump back over to Flash and we'll import that, [Ctrl + R] or (Command
+ R), and there's the document Photoshop type and styles preserve.SWF.
| | 01:23 | Go ahead and click Open.
| | 01:25 | And because we had Preserve turned on, we get
this one big giant bitmap again.
| | 01:32 | However, the text layer, since that was still a type layer, if we
double-click on that, you'll see that the text is still individual text.
| | 01:41 | Now unfortunately, every character is a separate text block
here, and we'll talk about how to deal with that in just a minute
| | 01:49 | because that's probably not what we want.
| | 01:52 | It's still editable text, it's still vector text, but
each character has become an individual text block here.
| | 01:58 | So, let's revert this file back, File, Revert,
and we'll jump back over to ImageReady.
| | 02:05 | And this time we'll do an Export To Flash
with Preserve Appearance not checked.
| | 02:11 | Go ahead and click OK.
| | 02:13 | And we'll just say "no preserve" for the file name here.
| | 02:19 | Go ahead and save and now we'll jump back over to Flash again
and import that, [Ctrl + R] or (Command + R). And there it is,
| | 02:27 | "Photoshop type and styles no preserve", go ahead and click Open.
| | 02:30 | And you'll see that while I have the individual slides
coming in as separate objects, and the type is still type,
| | 02:38 | I've lost the drop shadow because Preserve Appearance was unchecked.
| | 02:43 | So there's two problems here, one, I want the text to come in, but I
don't want the individual characters to become individual text blocks
| | 02:50 | so how do I deal with that issue?
| | 02:52 | And of course, I actually do want the effect of the drop
shadow to come in, but I don't want this whole big bitmap,
| | 02:59 | this whole big area to turn into one giant bitmap because I want
to be able to animate each slide in separately or whatever.
| | 03:06 | So let's go back and revert this file one more time.
| | 03:12 | Jump back over to ImageReady and let's talk about
a different way to construct this file.
| | 03:16 | We're going to have to start making some choices here.
| | 03:17 | First of all, let's talk about the type issue.
| | 03:20 | For the type, what I didn't tell you before is that
I've applied some tracking to each of these type layers.
| | 03:26 | I've tracked this to a value of 60 to space out the letters
here, and that's what's causing the individual characters
| | 03:34 | to become individual text blocks in Flash.
| | 03:36 | Unfortunately, each product has a different type rendering engine
and while Flash does have the ability to do kerning and tracking,
| | 03:44 | because they're not using the same text engine,
the characters turn into individual letters.
| | 03:48 | So what we're going to do is, if we care about the text
being editable, do we want to be able to edit in Flash?
| | 03:56 | Then we have to keep our text formatting options
pretty basic in Photoshop and ImageReady.
| | 04:00 | So I'm going to go ahead and select all these text layers, and through
the ImageReady Layers palette here I've selected all of these,
| | 04:13 | and I'm going to take the tracking back to zero
to get rid of all that extra formatting.
| | 04:19 | Now, if we decided that tracking is more important than the editability of
that text, then what we should do is we can either rasterize the text here
| | 04:29 | and turn it into a pixel layer instead of a type
layer, and then the text will come in just fine.
| | 04:35 | It will look exactly like it did in the previous application; it's
just that you won't be able to edit the text directly in Flash anymore.
| | 04:42 | Sometimes that's more important, the editability, and sometimes it's not
as important, sometimes you just really care about what it looks like.
| | 04:48 | So again, all we've done, is we've taken the tracking value and set it
back to zero and let's go do an export here and see what the difference is.
| | 04:56 | Go ahead and Preserve Appearance.
| | 04:57 | Go ahead and click OK, and here I'm going to call this "no tracking.SWF".
| | 05:05 | Go ahead and save that to the desktop.
| | 05:08 | Again, we get that warning, let's jump back over to Flash and
we'll import that document, that SWF file, we named "no tracking".
| | 05:15 | Go ahead and click Open.
| | 05:17 | So now, if we click on this type object here and we double-click on it
to get inside it, you'll see that it is one text object where
| | 05:27 | each letter has not been converted into an individual text character.
| | 05:30 | And if I wanted to take the kerning or tracking back to the individual
value, I could certainly do that now and really space that out.
| | 05:38 | So again, the engine is a little bit different,
so the 60 is the same as 6 in Flash.
| | 05:42 | Sixty, it's actually not quite the same, but the concept is the same.
| | 05:46 | Select all the text, choose a different value.
| | 05:48 | The increments are different between Flash and Photoshop.
| | 05:51 | But you see that I can go back and space that type back out.
| | 05:54 | So again, that's just a small example.
| | 05:56 | If you've done some complex text formatting, and you don't want to have
to recreate that in Flash, then render the text as pixels in Photoshop
| | 06:03 | or ImageReady before you export it to SWF.
| | 06:06 | If editability is just more important, then take all of that
complex formatting off the text and reapply it back in Flash.
| | 06:14 | It just depends on what's more.
| | Collapse this transcript |
| preserving layer styles| 00:00 | >>So as we saw in the previous movie, that we had these layer styles,
the drop shadow layer styles, generating these drop shadow effects
| | 00:08 | for these particular layers, so, I can turn that shadow on and off.
| | 00:12 | When we chose the Preserve Appearance option, what ended up
happening is these four slides ended up becoming one big bitmap.
| | 00:21 | And what we're trying to accomplish is keeping each slide as
an independent graphics that we can animate them separately.
| | 00:27 | Now there's two ways to, to work around this issue, to
basically end up having those slides come in independently,
| | 00:33 | and the two choices that you have depend on what your end goal is.
| | 00:37 | If, for some reason, you want the shadows themselves to be independent
from the slides, so you can animate those separately let's say,
| | 00:44 | that would be one method that I'll show you with that goal in mind.
| | 00:50 | If you don't care about keeping the shadows separate from the slide,
you just want the composite effect for each slide and its shadow
| | 00:56 | to be a single graphic and then this slide and its shadow to be a
single graphic, and so forth, that's a different method of work around.
| | 01:04 | So we're going to address the keep the slide and the shadow
together as one graphic first, and then I'll teach you about how
| | 01:10 | to handle keeping the shadow separate.
| | 01:12 | So let's do that.
| | 01:13 | So let's select the mountain layer here.
| | 01:16 | And I'm going to create a new layer, a new empty
layer for the mountain layer here to merge it into.
| | 01:23 | And by default, if you click the New Layer icon,
that generates a new layer above the current layer.
| | 01:29 | So that's actually not what we wanted for this particular work around.
| | 01:32 | So I'm going to undo that, [Ctrl + Z] or (Command + Z) on the Mac.
| | 01:35 | If you hold down the Ctrl key on Windows or the
Command key on the Mac, and click the New Layer icon,
| | 01:41 | what happens instead is the new layer gets
generated underneath the active layer.
| | 01:45 | So I'm going to select the previous layer, the mountain layer, and merge this.
| | 01:50 | If I merge the mountain layer into a blank layer underneath it,
the end result here is that it's like flattening the drop shadow
| | 01:59 | into the actual slide layer here.
| | 02:03 | The merge command is [Ctrl + E] or (Command + E) on the Mac. Unfortunately,
the one bummer about this is that you lose your original layer name
| | 02:10 | because whatever layer gets it merged
into is the layer name that's retained.
| | 02:15 | So we'll just go and double-click and rename that mountain.
| | 02:19 | So we need to go do this for the other three layers as well.
| | 02:21 | So again, we'll Ctrl + or Command + Click on the New Layer icon to generate
a layer underneath the target layer, select the previous layer, merge it,
| | 02:28 | [Ctrl + E], and rename it to the previous layer name.
| | 02:34 | Select the fence layer, [Ctrl + Click] on the New Layer
icon, select the top layer here, previous layer, merge it,
| | 02:40 | Ctrl + or Command + E, and rename it fence.
| | 02:43 | And we'll do this one more time to field.
| | 02:46 | [Ctrl + Click], select the field layer, [Ctrl + E] or
(Command + E) to merge it, and name it fence, or field.
| | 02:54 | Now, one little point to make here is that if you need to
be able to go back and re-edit those shadows at any point,
| | 03:01 | you probably should have done a Save As first and save out the
layered version before you start merging these layers down. Because
| | 03:08 | of course once you've merged this, you've lost the
ability to go back and edit that shadow independently.
| | 03:12 | So as a general tip, just back this up before
you start modifying your document like this.
| | 03:18 | Okay, so we've got the shadows all merged into the
respective slides and now we can go export this.
| | 03:23 | So File, Export to Macromedia Flash.
| | 03:27 | We're going to turn off Preserve Appearance because we've already handled
the appearance issues ourselves and we'll go ahead and click OK,
| | 03:34 | and we'll name this "Photoshop no layer styles.SWF".
| | 03:42 | Go ahead and hit Save.
| | 03:44 | Let's go back to Flash and we'll import that, Ctrl + or Command +
R, and there's the SWF file that we created from ImageReady,
| | 03:50 | "Photoshop no layer styles.SWF."
| | 03:52 | Go ahead and click Open and you will see that each slide comes
in independent and with the drop shadow included in that slide.
| | 04:00 | Okay? Again, this would be important if, let's say,
I wanted the slides to animate independently of each other.
| | 04:06 | Okay. So let's revert that.
| | 04:11 | Now part two of this, go back to ImageReady
here, and we'll revert this file again.
| | 04:18 | We said that part two was the ability where we want the shadows to be
independent from the slides so that perhaps we could simulate a kind
| | 04:28 | of a light source moving across the top of the image and as the
light moved the shadow would want to move to mimic reality there.
| | 04:35 | Because we have the Jump To button, we can
just jump this same document back to Photoshop.
| | 04:40 | We'll go ahead and do that.
| | 04:42 | I'm going to preserve how the proof set up turned on, proof
colors to make this look like the same it would in Flash.
| | 04:49 | Now, these layer styles that we created, the drop shadow layer style,
if we want to separate that drop shadow and do a separate layer,
| | 04:59 | there's a command in Photoshop to allow us to do that.
| | 05:01 | And if I (Ctrl + Click) on the Mac or right-click on
the actual little layer style icon for getting a layer,
| | 05:07 | and the contextual menu is a command here called create layer.
| | 05:12 | And what that's going to do is separate that drop shadow into its own layer.
| | 05:16 | Now, not all layer styles or layer effects will do this
successfully, but some of the basic ones will, like shadow.
| | 05:22 | We'll go ahead and click OK.
| | 05:23 | And you'll see it now has created a separate layer called
"mountains drop shadow" that can be turned on and off.
| | 05:29 | Okay? We'll go back to the windmill layer and again, we'll right-click or
(Ctrl + Click) and say Create Layer. And yes, thank you for the warning.
| | 05:38 | We won't show that again.
| | 05:39 | Go ahead and click OK.
| | 05:40 | Same thing for the fence layer; right-click or (Ctrl + Click), Create
Layer, and then for field, (Ctrl + Click) or right-click, Create Layer.
| | 05:49 | All right.
| | 05:51 | So now, each one of these shadows is a separate layer.
| | 05:57 | We can now take this document back to ImageReady by doing the Jump
To button and you'll see that the layer stack has now been updated
| | 06:04 | where each shadow is its own layer as well.
| | 06:07 | And now, we'll go back to File, Export,
Macromedia Flash, go ahead and click OK.
| | 06:12 | Again, we're choosing PNG for our file format.
| | 06:14 | Go ahead and click OK, and I'm just going to call this
the same thing, except "no layer styles separate shadows".
| | 06:26 | Kind of a crazy long name, I wouldn't name this for real,
but just to illustrate the point here, go ahead and hit Save.
| | 06:32 | Jump over to Flash, and let's import that ridiculously long file
name document here- Photoshop no layer styles with separate shadows.
| | 06:39 | Go ahead and click Open and you'll see
that each shadow is now a separate file.
| | 06:46 | Now, it didn't match the Opacity setting, but because it's its own
shadow now, we can convert that into a symbol and change the alpha.
| | 06:54 | I'll just do that for you.
| | 06:55 | So, I've got this graphic selected, we can
hit F8 to convert that to a movie clip.
| | 07:00 | Go ahead and hit OK.
| | 07:02 | Now that it's a movie clip we can go to the Properties panel, or
Properties pane, and choose an alpha and change it from 100% to
| | 07:10 | I believe it was 60% in Photoshop.
| | 07:14 | Okay. So now I've got the ability to recomposite these
files and work with them independently of each other.
| | Collapse this transcript |
| adjustment layers and blending modes| 00:00 | >>All right, this is pretty much same the file we've been working
with all along, but just slightly more complicated. That is,
| | 00:05 | we've added what's called an Adjustment layer above the slide
layers, here, the mountain, windmill, fence, and so forth layers,
| | 00:13 | and this Adjustment layer is making all
the layers underneath it to be tinted red.
| | 00:18 | So let's take a look at what's going to happen here.
| | 00:19 | If we export this using the Export Flash command,
here, in ImageReady, we'll turn on Preserve Appearance.
| | 00:27 | If this is turned off, that Adjustment layer will be ignored, so it's
important that we turn that on and click OK, and we'll just go ahead
| | 00:34 | and save this to the desktop, and just call it "adjustmentlayers.SWF."
| | 00:37 | Go ahead and click Save.
| | 00:38 | It's going to give us a warning, "Things were flattened."
| | 00:40 | Let's just go ahead and turn that off for
this session so we won't see it again.
| | 00:44 | Go ahead and click OK.
| | 00:46 | Now, when we switch over to Flash, we can go and
import this, [Ctrl + R], or Import To Stage, here.
| | 00:52 | There's the SWF file that we just created, and go ahead and click Open.
| | 00:55 | So it's looks great.
| | 00:56 | It looks exactly like it did in Photoshop and ImageReady, but the
problem here is that it, again, generated one big giant bitmap in order
| | 01:03 | to accomplish that effect.
| | 01:04 | So there's a different workaround here
that you might want to consider using.
| | 01:09 | Ideally,what we've been doing the entire time- let's go
ahead and revert this- what we've been doing for our export, here,
| | 01:18 | is trying to export all the layers all at once,
and sometimes, that's just not the way to go.
| | 01:23 | Obviously, it's less time if it works for you, but a different strategy is
to just isolate the layers for a given effect, and do more than one export.
| | 01:33 | So just do an export for the appropriate set of layers.
| | 01:36 | Let me just show you what I mean.
| | 01:37 | So let's turn off these other layers, and first
learn one other thing about Adjustment layers.
| | 01:42 | So Adjustment layers, by default, affect every layer underneath
them, and so they're tinting all four of those slide layers.
| | 01:49 | What we're going to do is limit the effect.
| | 01:51 | First of all, we're going to turn off these other layers, and then it
would look like it's the same thing that I wanted to try to accomplish.
| | 01:56 | I just want the blend mode- or sorry, the
Adjustment layer- to go to this one layer.
| | 02:01 | The problem is that since the Adjustment layer, like I said before, it
affects every layer underneath it, even though we've turned them off,
| | 02:07 | when we export this to Flash, the bounding box for this
particular image is going to be the size of the canvas,
| | 02:14 | because the Adjustment layer is currently affecting the entire
canvas, even though there's no pixels here in the transparent areas.
| | 02:22 | So to fix that, what we're going to do is limit the
Adjustment layer to only affect the layer directly below it.
| | 02:29 | The way to do that in ImageReady is to hold down
the Alt key on Windows, or the Option key on the Mac,
| | 02:36 | and put your cursor right between the two layers here,
Option + or Alt + Click. What that does is that groups,
| | 02:42 | or creates what's called a Clipping Group, for that Adjustment layer.
| | 02:45 | So you see it kind of indents to the right, and the
layer that it's being clicked to underlines as well.
| | 02:51 | So if I turn on these other layers, you'll
see that they're not red anymore.
| | 02:54 | So I've limited the Adjustment layer to just the layer directly
below it, by Option + or Alt + clicking between the two layers.
| | 03:00 | So we'll go ahead and turn these off.
| | 03:03 | Now, if we do a File, Export To Flash, and,
again, choose Preserve Appearance and click OK.
| | 03:10 | I'm just going to go ahead and replace the
existing SWF file that we generated earlier.
| | 03:14 | If I were doing this for real, I might decide to save each one of these
SWFs out with a different file name, but for the purpose of speed here,
| | 03:21 | and because I actually still have the layered ImageReady or
Photoshop document, I can always go back and regenerate another SWF
| | 03:27 | of just specific layers if I need to.
| | 03:29 | We'll go ahead and click Save, and replace that existing one.
| | 03:32 | Let's jump back over to Flash, use our Import command, Ctrl +
or Command + R, choose that SWF, and click Open, and you see,
| | 03:40 | we get exactly what we wanted.
| | 03:42 | The slide looks red, and the bounding box is just the size of
the pixels on that particular layer, and the good news here, too,
| | 03:48 | is that it also rendered the layer style correctly without having to do
one of the other two workarounds that I showed you in the previous movie.
| | 03:56 | So again, this is a great technique if you're willing
to spend the time of exporting individual layers,
| | 04:02 | and realize it's going to just take multiple
exports before you rebuild your file.
| | 04:05 | So let's continue on and go back to ImageReady.
| | 04:08 | We'll un-group, or remove that clipping group, for these two layers.
| | 04:13 | Again, we Alt + or Option + Click again between
those two layers to remove that clipping group.
| | 04:17 | We'll turn off the mountain layer, turn on the next windmill layer,
move that clipping- or that Hue and Saturation Adjustment layer
| | 04:26 | to above the windmill layer. And again, we'll Alt +
or Option + Click between those two layers, and again,
| | 04:31 | we're doing that so that the resulting bounding box in Flash is
just going to be the size of that slide, and not the entire canvas.
| | 04:38 | So again, we'll go to File, Export, Macromedia
Flash, Preserve Appearance, click OK
00:04:45.076]
Replace the existing SWF file that's there.
| | 04:47 | Go and hit Replace.
| | 04:49 | Jump back over to Flash, and here's the best part about this.
| | 04:52 | Because we've matched the stage size in Flash to the canvas
size in Photoshop, when we import this updated SWF, here,
| | 05:01 | and click Open, watch what happens.
| | 05:03 | It comes in the exact same registration and Z-order as well.
| | 05:07 | So it's really smart about that, and some people, you might be worried
that you've actually clipped that slide behind the front one, but it's not.
| | 05:14 | It's just sitting behind there.
| | 05:15 | So it's really smart about that.
| | 05:17 | So let's go back to ImageReady and learn one other trick, here.
| | 05:22 | So again, what we'll do is to proceed, here, to move on, we'll Alt + or
Option+ Click between those two layers again, turn off the windmill layer,
| | 05:29 | turn on the fence layer, and move that Adjustment layer to
just above it, and Alt + or Option + Click to constrain that.
| | 05:36 | Now, the Adjustment layer is now working because we've isolated
it to just two visible layers, and we've clipped it, here.
| | 05:45 | This also will help us deal with blend modes.
| | 05:48 | Now, Flash doesn't have blend modes natively
yet, so let's change this to, say, Overlay,
| | 05:52 | and you can see how that significantly changes how the
red tint layer blends with the layer underneath it.
| | 05:58 | We're going to do some other crazy thing, like Difference,
or whatever blend mode that you happen to be using.
| | 06:04 | So we'll just stay with Overlay at this point. What
we want, again, if I had turned all these other layers on,
| | 06:10 | it's possible that we could have kept the blend mode for
this one particular layer, but we would have ended up with
| | 06:16 | that one big giant bitmap again.
| | 06:17 | So by using this technique, just isolating the given layers
that you want to be working with at this point in time,
| | 06:23 | you can now preserve the blend mode. You're going to basically
just create a little flattened version of just these layers,
| | 06:29 | but still preserve the transparency around it.
| | 06:31 | So let's go to File, Export, Macromedia Flash.
| | 06:35 | Again, Preserve Appearance.
| | 06:36 | Click OK.
| | 06:37 | We'll just replace the existing SWF again.
| | 06:40 | Let's just jump back over to Flash again, and we'll Import, Ctrl + or
Command + R, choose that updated SWF file, click Open, and there we have it.
| | 06:48 | We have the effect of the Adjustment layer, the effect of the
blend mode, and the bounding box of that graphic just by itself.
| | 06:55 | So we can just continue to proceed to bring all the other layers
in under separate exports and separate imports into Flash.
| | 07:01 | So hopefully that gives you a handle on how to get the
visual appearance of your Photoshop content, via ImageReady,
| | 07:09 | and learn how to isolate the particular exports
to gradually build up the file back into Flash.
| | Collapse this transcript |
|
|
4. PSD to Illustrator to SWF to Flashopening a PSD file in Illustrator| 00:01 | >>So Chapter 2 showed us how to use Photoshop just by itself to create
a workaround to get layers of a layered Photoshop file into Flash.
| | 00:10 | In this chapter, we're going to talk about an alternate way to do
the same thing by sending the Photoshop into Illustrator first,
| | 00:18 | and there are some pros and cons for doing
that, and I'll discuss those as we go.
| | 00:23 | One of the cons of going the Photoshop-only route is,
here's the document that we created from that chapter.
| | 00:30 | You'll notice that when you click on any one of these images,
the bounding box, if you will, for this particular graphic,
| | 00:37 | is the size of the entire canvas, and there's really no way around
that by saving the layers out as individual documents.
| | 00:45 | Whereas, in this document, this one that we're going to create now in this
chapter, by going through Illustrator, you'll notice that when I click
| | 00:51 | on these individual graphics, the bounding box, if you
will, is just the size of the actual pixels of that graphic.
| | 00:59 | So again, we did this by sending our document through Illustrator.
| | 01:02 | So let's talk about how to do that, and jump over to Illustrator.
| | 01:10 | So the first step on using Illustrator as kind of a middle-man, if you
will, is to not create a new document and import the Photoshop file.
| | 01:20 | It's what a lot of people would think to do.
| | 01:21 | While you can do that in Illustrator, you can
place, or import a Photoshop file into Illustrator,
| | 01:27 | a better way to go is to actually open a Photoshop file in Illustrator.
| | 01:32 | A lot of people don't realize that you can do that, but here's that
same Photoshop file that we've been working with in previous chapters.
| | 01:38 | Go ahead and double-click on it to open it, and when you open
it, Illustrator says, "Hey, what do you want me to do with this?
| | 01:45 | This is as Photoshop layered document.
| | 01:47 | Do you want me to convert those Photoshop layers into Illustrator objects?
| | 01:52 | And, hey, if you even have text layers, do
you want me to keep the text layers editable?"
| | 01:56 | In this particular document, we don't have text
layers, but just as a tangent, it's a nice option.
| | 02:00 | It's a way to go back and forth between Illustrator and Photoshop.
| | 02:04 | "Or do you want me to flatten all the Photoshop
layers to a single image, so bring in the composite?"
| | 02:08 | We're going to choose the default option,
to, basically, preserve those layers.
| | 02:12 | I'm going to go ahead and click OK.
| | 02:14 | Little color management warning there,
and take a look at the document now.
| | 02:19 | So over in the Illustrator Layers palette, the layer
structure comes in exactly as it was in Photoshop.
| | 02:25 | All the layer names are retained, and so forth.
| | 02:27 | Now, the background layer is just a solid white background.
| | 02:32 | Since the Stage color in Flash is going to be white, we don't
really need that layer, so I'm going to go ahead and just delete
| | 02:36 | that layer, get rid of it.
| | 02:38 | One final thing that we want to do to set up this
document, like we did from going from Photoshop to Flash,
| | 02:43 | we wanted to make sure that the Flash document was
the same pixel dimensions as the Photoshop document,
| | 02:48 | we're going to do the same thing here for Illustrator.
| | 02:50 | We're going to go to File, Document Setup, and one of the great things
about Illustrator now, is that you can change the measurement system
| | 02:58 | to pixels, and we're going to make the width 620 by 380, and that will
make it a wide orientation, and that will match the pixel dimensions
| | 03:09 | of the original Photoshop document.
| | 03:10 | So we click OK, and now you can see that the size of the
document has been trimmed to just the size of the actual content,
| | 03:18 | and everything's going to stay registered.
| | 03:20 | Now, we've set up our document correctly.
| | 03:23 | All we've done is we've opened it instead of imported it, preserved
the individual layers as Illustrator layers, and now we go to the File,
| | 03:32 | Export Option, and in the File Export dialogue box, you
can choose Macromedia SWF, or Flash, as your file format.
| | 03:42 | Once you do this, once you choose this and click Save,
you're going to be presented with another dialogue box,
| | 03:47 | where you can choose three different export options.
| | 03:51 | The chapters that come next are going to walk us through
the differences between those there different options.
| | 03:56 | So- go to the next chapter.
| | Collapse this transcript |
| exporting layers as a single SWF| 00:01 | >>So when you click the Save button after you've chosen Macromedia
Flash as your Export file format, you get this dialogue box,
| | 00:07 | the Macromedia Flash Format Options. In the Export As popup menu,
you have three choices, AI File To SWF File, AI Layers To SWF Frames,
| | 00:16 | and AI Layers To SWF Files.
| | 00:19 | We're going to walk through these three different options, here.
| | 00:22 | So the first one, AI File To SWF File.
| | 00:25 | What that means is, all the layers in the Illustrator file
are going to be exported as a single SWF file on one frame.
| | 00:34 | The AI Layers To SWF Frames is every layer in the Illustrator
document will come in as an individual frame in a SWF file.
| | 00:44 | This is an option where you might want to use
if you're creating a flipbook animation,
| | 00:48 | where every layer was a different frame in your animation.
| | 00:51 | The layers would be exported as individual frames in a
single SWF file, and would come in as a little animation.
| | 00:59 | The third option is AI Layers To Individual SWF Files, and
that would create a series of sequential files for you,
| | 01:06 | similar to what we did earlier, when we manually saved
out each layer in Photoshop as a separate PNG file.
| | 01:13 | So let's choose the first option, AI File To SWF File, and then
down below here, we've got some other options. Generate HTML,
| | 01:20 | we don't need that for now, and Preserve Appearance
versus Preserve Editability Where Possible.
| | 01:25 | Preserve Editability is where, if you had some vector
objects, let's say that you had created in Illustrator,
| | 01:30 | and you wanted them to come in as vectors, you could choose that option.
| | 01:33 | It doesn't apply here for the particular content that we're creating.
| | 01:36 | This is the most important portion of the
dialogue box down below, the Image Format.
| | 01:40 | You definitely want to choose Lossless.
| | 01:42 | Lossless simply means PNG, the PNG file format here, meaning any bitmaps
in this SWF file that's going to be generated should come into Flash
| | 01:50 | as lossless PNGs, meaning no compression's going to be done.
| | 01:53 | The reason you want to choose that here is that if
you choose Lossy JPEG, and choose to compress them,
| | 01:58 | you don't get a preview of what these bitmaps are going to look like,
and they're all going to be optimized to the same settings.
| | 02:04 | So we're going to choose Lossless, and they'll just come in
untouched, uncompressed, just as they were in the original Photoshop
| | 02:12 | and then Illustrator document.
| | 02:14 | Go ahead and click OK, and the first option we're
choosing is AI File To SWF File, and click OK.
| | 02:20 | That resulted in a single SWF file.
| | 02:23 | Let's jump over to Flash and open up our document, here.
| | 02:31 | This is in Chapter 4, the "PSD to Illustrator Start" file.
| | 02:36 | Click Open, which has already been resized
to the 620 by 380 pixel dimension.
| | 02:41 | Go and choose-- get this in window, and we'll File, Import, Import to
Stage, and we're going to navigate through to the Chapter 4 folder,
| | 02:52 | here, and in Chapter 4, I've actually saved off the
three different versions, here, and there's the first one,
| | 02:59 | the Illustrator file to a single SWF file.
| | 03:01 | We'll go ahead and click and open that, and there it comes in.
| | 03:06 | It comes in as a single layer, a single frame, and
all the objects are independent objects in that frame,
| | 03:13 | and you'll see a key difference here right away is that each graphic,
now, has a bounding box that's appropriately sized to just the content
| | 03:23 | of that particular graphic.
| | 03:24 | At this point, we probably want to get
all these graphics onto individual layers.
| | 03:29 | So again, we can do a [Ctrl + A], or a (Command + A), to Select All,
and go to the Modify Timeline, Distribute to Layers command,
| | 03:36 | or Ctrl + or Command + Shift + D, and again, that's going to
distribute all those particular graphics to their own layer,
| | 03:42 | and retain the layer stacking order.
| | 03:45 | That's great.
| | 03:47 | It's actually much faster than going that, save
each file out separately as Photoshop route.
| | 03:51 | So you gain speed here.
| | 03:53 | The bad side of this, or the thing that's
not so great, is that you now have generic layer names.
| | 03:59 | They're no longer named the same as they were in Photoshop.
| | 04:02 | So if you want, you can go back in there
and manually rename those to match.
| | 04:07 | Also, when you look in your Library palette, Ctrl + or Command + L,
the graphics that came in were generically named as well.
| | 04:14 | So it's just Bitmap One, Bitmap Two, and so forth.
| | 04:16 | So you gain one thing in terms of speed, bringing these files in a
lot quicker, but you end up with generic layer names and symbol names.
| | 04:25 | If you just want to do it quick and dirty, though, it's a great
technique. And again, the advantage is that the individual graphics
| | 04:31 | come in at the appropriate size.
| | Collapse this transcript |
| a SWF with multiple keyframes| 00:01 | >>In this movie, we're going to see the second export option
for choosing the Macromedia Flash format from Illustrator.
| | 00:07 | So go File, Export.
| | 00:09 | Again, choose Macromedia Flash from our File Type options, and
we're going to choose, save this as Layers To Frames,
| | 00:17 | to indicate our second option here. For the purposes
of this tutorial here, we'll just save it to the desktop.
| | 00:23 | Go ahead and hit Save, and once we do that, the Macromedia Flash Format
Options dialogue box comes up, and we'll choose the second option,
| | 00:35 | AI Layers To SWF Frames. As I said before, this is the file format, or
the option to choose, if you wanted to create a flipbook animation,
| | 00:43 | where every layer was a different frame of an animation, and when you
import this into Flash, it'll come in the timeline as a series of frames.
| | 00:51 | So as a little animation.
| | 00:53 | We'll leave everything else the same, including the Image Format Loss list.
| | 00:56 | You know, this isn't the appropriate choice for this particular type of
document, but I'll just do it to illustrate that there is a difference.
| | 01:02 | Go ahead and click OK.
| | 01:04 | Let's jump back over to Flash, and we've got our "Start" file open again
from our Class Files, Chapter 4 folder. The "PSD To AI Start" FLA file.
| | 01:14 | We'll go to Import that other option.
| | 01:17 | Now, for the purposes of grabbing the file, you can either grab the
one from the desktop that you just created if you're following along,
| | 01:24 | or you can just use the one that I've done ahead of
time that's included in your Chapter 4 folder.
| | 01:29 | So you're just, PSD To AI Layers To SWF Frames.
| | 01:32 | Go ahead and click Open, and you'll see in the Timeline, rather than
a single frame where everything is on the Stage in a single layer
| | 01:40 | in a single frame, each layer came in on one layer on its own frame.
| | 01:47 | So if I were to scribe this, play ahead very slowly so you can see
the animation, if this was more of a flipbook style type of content,
| | 01:55 | it would make a lot more sense.
| | 01:56 | So again, not the export option you would choose for this particular type
of document, but if you were drawing a frame-by-frame type of animation,
| | 02:05 | or doing stills from a video and converting them
to layers, or so forth, this would be a great option for you.
| | Collapse this transcript |
| exporting layers as multiple SWFs| 00:00 | >>And finally, we'll show the third export option
when exporting a Macromedia SWF file from Illustrator.
| | 00:06 | We'll go to File, Export.
| | 00:08 | Again, choose Macromedia Flash as our file format.
| | 00:10 | I'm going to go ahead and call this, "Layers
to SWFs," and go to the desktop.
| | 00:16 | Now, since I'm going to be creating a series of files, we'll put them in
a folder, and call these "Layers to SWFs", and place them in that folder.
| | 00:29 | Go ahead and hit Save, and again, our Options dialogue comes up,
and this is where I'll choose the AI Layers To SWF Files. Again,
| | 00:36 | just to reiterate, every layer in the Illustrator file's going to be
turned into a separate individual SWF file, and I'll show you the advantage
| | 00:44 | of that once we click OK, and it goes and does its thing.
| | 00:48 | Let's jump back over to Flash. Actually, before we do that,
let's go look at the desktop, and there's my folder, "Layers to SWFs",
| | 00:55 | and those are the sequential files that was created.
| | 00:58 | So "Layers to SWFs", layer one, layer two,
layer three, layer four, and so forth.
| | 01:03 | Back into Flash, here's our starting document with nothing on
the Stage, here. If we go File, Import, Import to Stage,
| | 01:12 | I'm going to navigate to the folder in your Class Files folder.
| | 01:17 | I could just as easily go to the desktop and grab the ones
that we just created, but in the Chapter 4 class files
| | 01:23 | as well is a folder I've already created for these, "AI Layers to SWFs."
| | 01:26 | Open that up, and there's my sequential files.
| | 01:29 | I'll go ahead and Select All, [Ctrl + A] and click Open. The advantage
of this technique, and the reason why I like it as your best choice
| | 01:36 | for this type of content from Illustrator, is that it automatically
created each one of those SWFs and placed it on its own layer.
| | 01:45 | So it's recreating the stacking order for
you, and it may not get it right completely.
| | 01:49 | You might actually have to switch some of the layers around, but the other
advantage of this technique, too, is that while it creates the layers
| | 01:57 | for you, it also constricts the bounding
box to the actual size of the content.
| | 02:02 | The downside is that because this happened
automatically, the layer names are generic.
| | 02:07 | They're not the same name as they were in Photoshop.
| | 02:11 | So just depends if you're trying to bang something out very
quickly, this is a better way to go to get a quick copy into Flash.
| | 02:18 | If you really, really care about the file
names, this is the downside of this technique.
| | Collapse this transcript |
|
|
5. PSD to Fireworks to FlashPSD to Fireworks PNG to Flash| 00:01 | >>If you happen to have a copy of Fireworks on your
machine, that is actually another interesting way
| | 00:05 | to get a layered Photoshop file into Flash.
| | 00:08 | So take a look at this document.
| | 00:10 | It's slightly different than the ones
I've been using in the previous chapters.
| | 00:15 | I've done a couple things like kept the text
as text layers, so it's still editable text.
| | 00:20 | So if I take a look at the next and the previous layers here,
those have not been rasterized into pixels, I've kept them as text.
| | 00:28 | Also, to see if this works, I've converted the black graphic,
here, that was just a rectangle filled with black pixels.
| | 00:36 | I've converted that to a shape layer,
which in Photoshop, is a vector object.
| | 00:42 | So I want to see if that will convert into a vector object in Fireworks.
| | 00:46 | So I've maintained the text as text layers, created just a basic shape
as a vector, and also kept the drop shadows, here, as layer styles.
| | 00:57 | So each slide, here, the mountain, windmill and so forth, each has a drop
shadow effect, whereas in the previous versions of the Photoshop document
| | 01:05 | that we've been working with, I had converted
those layer effects into a separate layer.
| | 01:11 | I'll actually talk about how to do that in a layer chapter.
| | 01:14 | Anyway, we've got this file set up.
| | 01:15 | We're going to turn off the background layer, because we don't
really need that for our mockup, and we've saved this document,
| | 01:22 | and let's go take it over to Fireworks and see what it looks like.
| | 01:25 | So close this.
| | 01:27 | Don't save changes and we'll jump over to Fireworks. We'll open this
Photoshop file, and I'm in the Chapter 5 folder of the class files,
| | 01:36 | and file number one is that same Photoshop file we just took a look
at in Photoshop. When we click Open, you'll see pretty quickly,
| | 01:43 | Fireworks has converted this document into a Fireworks document, where
each layer comes in as a separate layer, just like it was in Photoshop.
| | 01:51 | It retains all the layer names.
| | 01:52 | Let's see about that type.
| | 01:53 | So if I click on the type, it's still a text layer.
| | 01:57 | So I can still go in there and edit the text
if I need to, which is kind of a nice feature.
| | 02:01 | The bar did not come in as a vector.
| | 02:04 | So that's easy enough to re-create, though, in Fireworks.
| | 02:06 | So we'll just go ahead and delete that object.
| | 02:09 | Get our Rectangle Tool, and draw just a new rectangle in place of the
old, because there's really no reason for that to be a bitmap.
| | 02:18 | It would add file size more than we need.
| | 02:19 | So we'll just make that the correct size, and we'll move that
correct order in the layer stack, and just re-name it "Bar".
| | 02:26 | Okay, but you'll notice that the layer styles did convert to a drop shadow.
| | 02:32 | So if I take a look at the Properties palette,
down the bottom of the Properties pane,
| | 02:36 | each of these slides now has what Fireworks calls a dropshadow effect.
| | 02:42 | So it's a layer style in Photoshop, it's an effect
in Fireworks, but it converted over just fine.
| | 02:48 | Most of the layer styles in Photoshop will convert over just fine, unless
there's a layer style that doesn't exist as an effect in Fireworks,
| | 02:56 | but the basic ones come over fine, like
drop shadow, bevel emboss, things like that.
| | 03:01 | Some of the more obscure ones, like satin or
whatever, Fireworks doesn't have an equivalent of that,
| | 03:07 | so that would not convert over into the Fireworks document.
| | 03:10 | So let's turn off that background layer, and we've seen
that, for the most part, the document came over just fine,
| | 03:17 | and now we're ready to get this into Flash.
| | 03:20 | Now, some of you may actually be tempted to export a SWF from Fireworks
and place that SWF file into Flash, and while that's a valid thing,
| | 03:29 | you can do that, in Fireworks MX 2004, there's a little
quick export shortcut in the top upper left-hand corner--
| | 03:36 | upper right-hand corner here, and I can
choose Macromedia Flash and export a SWF.
| | 03:40 | I'm actually going to advise not to do
that because it's not as good of a result.
| | 03:45 | What not as many people realize is that you can actually just place,
or import, a layered Fireworks file directly into Flash without having
| | 03:53 | to convert it to a SWF first.
| | 03:55 | If I choose Export SWF, it gives me a file name.
| | 03:58 | I can click Options, and I have certain options here that I can choose.
| | 04:03 | It's just not as robust as going the direct
route, but just to talk about this.
| | 04:07 | If I did export a SWF from Fireworks, if there are vector
objects in the file, I can maintain their paths when it comes
| | 04:15 | into Flash as a SWF file.
| | 04:17 | If the paths have some effects on them, you would want to turn on Maintain
Appearance, and that would rasterize those and turn them into pixels,
| | 04:25 | but if it's just straight, basic shapes with no effects on them,
you can go ahead and maintain them as paths, and for the most part,
| | 04:31 | that will keep the file size down smaller.
| | 04:33 | Text, same thing.
| | 04:34 | If it's just simple text, and you want to be able
to edit it in Flash, choose Maintain Editability.
| | 04:39 | If the text has some effects on it, again, convert that to paths to
maintain the appearance of it, and you can choose JPEG Quality Setting
| | 04:46 | for the embedded bitmaps, and so forth.
| | 04:48 | We're going to go ahead and cancel that,
because that's not the way I want to go.
| | 04:51 | I've just got my file.
| | 04:52 | I've got it set up correctly.
| | 04:54 | We'll go ahead and save this as just a regular
Fireworks document, which is the PNG file format.
| | 05:01 | Go ahead and hit Save, and we'll go and replace
that one, and now let's jump over to Flash...
| | 05:09 | and we've got the starting document open.
| | 05:12 | It's number three in the class files folder from this chapter, and
we'll just go import to the Stage, the PNG file that we just created.
| | 05:21 | So there's the original Photoshop file.
| | 05:23 | Here's the version that all we did was just opened it up into Fireworks
and did a little tweaking to get the vector shapes to be vectors again.
| | 05:31 | We'll go ahead and choose that file, and
we get a little bit more options in here.
| | 05:36 | So the file structure.
| | 05:38 | Do we want this to come in as a single movie clip on the current
layer, but retain the layer structure within that movie clip,
| | 05:46 | or do we want to just import it into a new layer in the current scene?
| | 05:48 | I'm going to choose that option, and again, the similar options that we saw
in the SWF Export from Fireworks, the ability to keep the paths editable,
| | 05:55 | and keep the text editable, if that's what we want.
| | 05:59 | Those are the choices I'm going to choose for this particular document.
| | 06:02 | What you choose is just going to depend
on the kind of document you've created.
| | 06:05 | Again, if you've got some effects, or special appearances on those
vector objects, or the text objects, you would want to choose Rasterize
| | 06:12 | to make sure that the looks were maintained, and of course you
have the option that you probably wouldn't use in this context,
| | 06:18 | but you could bring everything in as single flattened bitmap.
| | 06:21 | We'll go ahead and click OK, and you'll see, it does a pretty
good job of bringing everything in, and this background layer,
| | 06:27 | the big white rectangle, we don't really need.
| | 06:29 | So I'm going to delete that.
| | 06:31 | I can select all the objects, and if I look at the
timeline, they're all single objects on one layer,
| | 06:37 | and what we've seen before in previous chapters, we can distribute
those objects to their own layers by going to Modify Timeline,
| | 06:44 | Distribute to Layers. If I tone down the timeline
there, you can see each object now is on it's own layer.
| | 06:51 | So I've maintained the layer stack just like it was in Photoshop.
| | 06:54 | I do get some generic names, unfortunately.
| | 06:56 | You would want to probably go in there and rename these layers to the same
as they were in Photoshop, but it is a timesaver to get this content in,
| | 07:04 | and then of course, the cool thing here is that if I double-click
on this text object, you'll see that it is still editable text.
| | 07:11 | If I click on this vector object, it comes in as a group
to protect it because it's all on the same layer initially.
| | 07:18 | So if I double-click on that group to edit it, you can see that
it is, indeed, a shape, a vector shape, and I can just modify it,
| | 07:26 | just like in the other shape.
| | 07:27 | Let's go back to the scene, and there you go.
| | 07:30 | So pretty robust support from going from Photoshop to Fireworks to Flash.
| | Collapse this transcript |
|
|
6. Using the PSD2FLA Plug-in for Photoshopa FLA file directly from PS| 00:01 | >>So in the previous chapters, we walked through the
various different ways to get a layered document into Flash.
| | 00:06 | We used Photoshop by itself, and then we looked at some other options,
like using ImageReady, Illustrator, or Fireworks kind of as intermediaries
| | 00:14 | to get those layered documents into Flash.
| | 00:17 | There's another option, a commercial option, from a
company called MediaLab, and it's called PSD2FLA.
| | 00:24 | Let's take a look at their website.
| | 00:25 | It's medialab.com, and I show this to you not to try to sell you something,
but just to let you know this is something you're doing often
| | 00:32 | getting this layered content into Flash.
| | 00:34 | This is yet another option that you could consider.
| | 00:36 | It's relatively cheap.
| | 00:37 | It's $89, and it's an Export plugin for Photoshop.
| | 00:41 | So let's go take a look at what it actually does.
| | 00:44 | Here I have my same Photoshop document we've been working with,
and when you installed PSD2FLA, it comes up under the Export menu.
| | 00:54 | So File, Export, PSD2FLA.
| | 00:57 | My favorite non-useful feature of this product is that every time you
open the plugin, you get a new random message at the bottom, you know.
| | 01:06 | So this time it says, "Brace for impact.
| | 01:07 | Great Flavor and fresh breath ahead."
| | 01:09 | Completely random...
| | 01:10 | Let's cancel and go open it again.
| | 01:13 | "Try our new brunchilada."
| | 01:15 | Completely random...
| | 01:17 | Anyway, a couple things that make this plug-in unique.
| | 01:20 | First of all, you'll see there's a new check box here.
| | 01:22 | It says, "Open In Flash After Export," and what this implies, along with
the name PSD2FLA, is that this plugin actually can create an FLA file
| | 01:32 | for you, not just a SWF file.
| | 01:34 | So all the other options that I showed you earlier resulted in a
SWF that you had to then import, or place, into another FLA file.
| | 01:44 | Now, many of you know this already, the SWF file format is a great
run-time file format, but it's not necessarily a great interchange format.
| | 01:52 | Things tend to get Flattened.
| | 01:53 | Things turn into frames and so forth.
| | 01:55 | So the ability to create an FLA file is really a neat option here.
| | 02:00 | The other check box here that's useful is the ability
to ignore hidden layers, layers that you've turned off.
| | 02:07 | So in this particular document, you'll see
that the background layer I've turned off.
| | 02:10 | Since it's just a white background, I don't really need to
include a giant bitmap that's just white in this document,
| | 02:16 | because the Stage color in Flash can be white.
| | 02:18 | So I just had this in my mockup in Flash
to represent what it would look like...
| | 02:22 | or rather, the mockup in Photoshop.
| | 02:24 | So I've turned that off.
| | 02:26 | Turning this check box off in the plugin
is going to ignore that hidden layer.
| | 02:29 | We'll go ahead and click OK and see what happens.
| | 02:32 | It's done its export.
| | 02:32 | We'll jump over to Flash now, and you'll see, it's created an FLA
file for me, just like I said it would, and let's take a look at it.
| | 02:39 | First of all, you'll see that the bounding boxes, the
particular graphics, or the size of the graphic, which is nice.
| | 02:45 | If you take a look at the Timeline, it's automatically created all the
layers for me, and it's named the layers in Flash the same names they were
| | 02:55 | in the Photoshop layered document as well, and then one other nice
touch is that if you open up the Library, just Command + or Ctrl + L,
| | 03:03 | and take a look at it. The PNG files that it generated for you
are also all named the same name as the layers were in Photoshop.
| | 03:11 | So huge timesaver for you.
| | 03:13 | In my opinion, it is one of the best options if this
is a particular workflow that you need to do often.
| | 03:19 | Again, the advantage of the other techniques that I showed you in
the other chapters is that if you already own those other products,
| | 03:24 | it doesn't cost you any additional money.
| | 03:26 | So anyway, just another option for you to check out.
| | 03:29 | PSD2FLA from medialab.com.
| | 03:32 | Cheers.
| | Collapse this transcript |
|
|
7. Controlling Bitmap Optimization in Flashoptimization settings for each bitmap| 00:00 | >>In this movie, we're going to talk about
how to bring non-layered images into Flash.
| | 00:05 | So things like GIFs or JPEGs or PNGs, and it
doesn't really matter where these files came from.
| | 00:10 | It could be a JPEG off a digital camera, or a GIF that you saved out
of Fireworks, or a JPEG that you saved out of Photoshop, and so forth.
| | 00:17 | Whatever. It doesn't really matter.
| | 00:19 | But we want to talk about how to bring those
particular files in, and more importantly,
| | 00:22 | what Flash is going to do with them once you've brought
them in, and then exported your SWF file from within Flash.
| | 00:30 | So let's go import some bitmap images, here, and in your
Class Files folder, I've actually got a chapter here
| | 00:39 | for the Flash bitmap Optimizations, Chapter 7, and in there
I just have the same image saved as a GIF, a JPEG, and PNG.
| | 00:46 | So we can talk about the differences here.
| | 00:50 | Let's go ahead and click Open, and here they are.
| | 00:54 | So there's one.
| | 00:55 | There's a PNG, and a JPEG, and a GIF.
| | 00:58 | So we'll kind of put these side by side, so that we can talk about them.
| | 01:05 | Okay, so let's bring this one to the front.
| | 01:08 | Arrange, Bring To Front.
| | 01:10 | Okay, so the same image saved as a PNG, a JPEG, and a GIF.
| | 01:14 | So let's talk about what happens here.
| | 01:16 | If we go to our File, Publish Settings In Flash, and
go to the Flash Tab. By default, what Flash does,
| | 01:25 | is has something called a "Global JPEG Quality Setting," and what
this means is that every image, every bitmap image that's placed
| | 01:34 | in a given Flash file that is not already a JPEG, by default
will get converted into a JPEG when you create your SWF file,
| | 01:44 | and the default quality, the default JPEG quality, is set to 80.
| | 01:48 | Now, as a frame of reference, you should know that an 80 quality JPEG from
Flash is not the same thing as an 80 JPEG quality from, say, Fireworks,
| | 01:58 | or Photoshop, or ImageReady.
| | 02:00 | It's the same terminology, but every product uses its
own compression algorithm, so you're going to get different results.
| | 02:06 | So an 80 JPEG out of Flash will look different, and potentially
have a different file size, than an 80 JPEG from another product.
| | 02:13 | So, again, when you bring in a bitmap, if it's not already
a JPEG, by default, it's going to go out of Flash as a JPEG,
| | 02:22 | which may or may not be what you actually wanted.
| | 02:25 | You know, if you chose PNG as your file format to bring your
bitmaps in, the advantage of PNG is that it's non-destructive.
| | 02:31 | Meaning, it's a non-lossy compression format.
| | 02:34 | It's not going to degrade any.
| | 02:36 | Now, the downside of that, of course, is that the file size of a PNG
is going to be larger than the file size of, say, a JPEG or a GIF.
| | 02:44 | Usually. That's not always true, but for the most part, that's true.
| | 02:48 | So, if you brought in your images as PNGs because you wanted
to maintain the highest quality, and then when you export your SWF file
| | 02:55 | out of Flash, and you're wondering why your PNG files aren't looking so
great, it's because if you haven't done anything to determine what's going
| | 03:02 | to happen to that individual PNG, all those
PNGs are being sent out of Flash as JPEGs.
| | 03:07 | So let's go ahead and click OK for now,
and we'll make this really extreme.
| | 03:10 | We'll take down the JPEG quality to 50, and click OK.
| | 03:14 | So let's do a test movie, and a test movie is just [Ctrl + Enter], and
you can see, here's the PNG that we placed, and normally,
| | 03:24 | a PNG would not be compressed, but again, like I said, every
PNG, by default, is going to go out of Flash as a JPEG.
| | 03:31 | If you're wondering why that's been happening to you, well, now you know.
| | 03:35 | You can definitely see that this PNG file has been compressed.
| | 03:39 | Now, the good news about this is that if the image you brought
in was already a JPEG, then Flash doesn't do anything to it.
| | 03:48 | It just leaves it alone.
| | 03:49 | By default, JPEGs do not get recompressed when you export the SWF file.
| | 03:55 | Now, the GIF file also goes out as a JPEG, and so it can
change based on how you brought it in as well.
| | 04:02 | So let's go in and close this test movie window.
| | 04:05 | So the trick then becomes, well, how do we
control the individual bitmaps within Flash.
| | 04:11 | So JPEG is your most flexible format here, because if you've already
done the JPEG compression outside of Flash, like I said earlier,
| | 04:20 | it will just go out as you brought it in.
| | 04:23 | So there's no other work that needs to be done.
| | 04:25 | If you brought in a GIF or a PNG, then you need to make some decisions.
| | 04:29 | To control the per-object compression settings of an individual
bitmap in Flash, you need to do that from the Library.
| | 04:37 | So if I look at my Library panel, there's
girls.GIF girls.jpg, and girls.PNG.
| | 04:42 | If I double-click on, let's say, the PNG file, it opens
up the bitmap properties for that particular image,
| | 04:50 | and you'll see that the default compression setting for this PNG file
is set to JPEG, because it's using that Document Global JPEG setting
| | 05:00 | that I showed you in the Export Settings.
| | 05:02 | If we turn off the Use Document Default Quality, okay,
that's what's corresponding to that slider I showed you.
| | 05:08 | If we turn that off, it still defaults to JPEG,
but you can choose a different quality setting.
| | 05:14 | So if you want it to go out as a maximum quality JPEG, you can type in 100.
| | 05:19 | In order to actually see the results of this new number, you do
need to click the Test button, and then kind of move the image
| | 05:27 | around with the Grabber Hand inside this little tiny preview window, okay.
| | 05:31 | So you can see, at 100 JPEG, the file is not going to be all that
compressed in terms of quality, but the file size will be a lot larger
| | 05:39 | than if you left it at 50, or whatever.
| | 05:41 | You can see, though, it came in as 140K PNG file, so you can understand
why, by default, these PNG files are being converted to JPEGs.
| | 05:50 | If every PNG was left as a PNG, you'd have a pretty large file,
but again, you're the one that probably wants to make those choices.
| | 05:58 | So to re-iterate, if you want to change the way a PNG gets sent
out of Flash, you double-click on the PNG in the Library panel,
| | 06:09 | you turn off the Use Document Default Quality, and if you do indeed
want it to go to a JPEG, you can override the global setting here
| | 06:17 | by typing in your own number.
| | 06:19 | So if I want it to go out as 60, let's say, I can click the Test button
again, and now again, I can walk around through this little preview
| | 06:27 | to make sure that that's actually acceptable to me.
| | 06:29 | If I don't want it to go out as a JPEG, I actually do want it to go out
as a PNG, then I need to choose that option from the Compression flyout
| | 06:38 | and click Test. And you'll see now, it's going
to go out exactly as it came in, uncompressed.
| | 06:45 | All right?
| | 06:47 | Now, on a given JPEG, if you decide that you do want to recompress
it, for whatever reason, because, you know, you do a file size test,
| | 06:55 | and your SWF file is still too big, you really have two options.
| | 06:59 | You can do an external edit on this JPEG, and go to a different
application, recompress it and update it inside Flash,
| | 07:07 | or you can use Flash's ability to recompress the JPEG as well.
| | 07:11 | So I'm going to double-click on the JPEG in the Library palette.
| | 07:15 | So the girls.jpg.
| | 07:16 | Go ahead and double-click on that.
| | 07:18 | Up comes the Bitmap Properties dialogue, and again the
default option for a JPEG is to use imported JPEG data.
| | 07:25 | What that really means, or what that's really saying is, "I'm not going to
recompress you, I'm just going to send you back out the way you came in."
| | 07:31 | If you turn that off, you can then override the JPEG
information that came in with it, and type in a different number.
| | 07:39 | So if we do, let's say 80, and click Test,
the file size will get even smaller.
| | 07:45 | So again, if I want to see the results of that, I need
to kind of pan around inside that little preview window.
| | 07:52 | Okay? My advice is that Flash is a great
application for doing a lot of things.
| | 07:58 | It hasn't done a lot in recent years to improve the
JPEG compression that you can get and
| | 08:05 | the preview experience is sometimes difficult to work with.
| | 08:07 | So my advice is, if you really care about the absolute image
quality, that you actually do the JPEG-ing outside of Flash.
| | 08:14 | So whatever image editor that you happen to be using
and you like the results when you save a JPEG out.
| | 08:20 | Do it outside.
| | 08:21 | When you bring it into Flash as a JPEG, it's just
automatically going to go out the way that you brought it in.
| | 08:28 | Sometimes you don't have that option.
| | 08:30 | For instance, in the previous chapters, we were talking about
bringing the layer content in, the layered Photoshop files in.
| | 08:36 | You always wanted to bring those layered files in as PNGs so that you
could actually see the results of the compression from within Flash.
| | 08:45 | So sometimes you do need to go in there in individual PNGs, turn them
into JPEGs manually, and fiddle with the quality setting in Flash.
| | 08:52 | These other single-layer documents, your best choice, again, is to
make the JPEG settings outside of Flash, bring them in, and that way,
| | 09:00 | you get to control exactly what's happening to these embedded bitmaps.
| | Collapse this transcript |
| updating an externally edited bitmap| 00:01 | >>Well, let's talk about some other things that you should know
when you're working with embedded bitmaps inside a SWF file.
| | 00:06 | First, you should to always bring in the images into Flash that
you're embedding here at the actual size you intend on using.
| | 00:15 | Of course, that's not possible if you're going to be animating
the Scale property, because that scale will be changing over time.
| | 00:20 | But if the image is going to be static and not scaled through animation,
then, by all means, what you want to do is try to bring that image
| | 00:27 | in at the actual size you intend on using.
| | 00:29 | Well, why is that?
| | 00:30 | Well, let's go get our Scale Tool here, and we'll
make the image a little bit smaller-- like so.
| | 00:35 | And you'll see that whenever you make an image smaller, the
on-screen version of that now has been interpolated down.
| | 00:43 | Flash's great strength of course is its history as a vector
animation tool, as a vector drawing tool, and it doesn't necessarily do
| | 00:52 | as good a job with image interpolation.
| | 00:54 | You can get much better results by downsampling, or interpolating, your
images in an external bitmap editor-- whatever one you happen to be using.
| | 01:02 | So that's one reason you'll get a better
result if you do that outside of Flash.
| | 01:05 | The other reason is that you're not actually saving
any file size when you scale the bitmap down.
| | 01:12 | Let's go ahead and do a test movie on this
particular image at its full size again.
| | 01:15 | We'll do [Ctrl + Enter], or (Command + Enter) on the Mac, and you'll see that
the image is-- as exported-- we're actually looking at the SWF file now.
| | 01:23 | Here we get a file size readout of what this export SWF file really is.
| | 01:29 | It's because we have something called the Bandwidth Profiler turned on--
it's under the View menu, or [Ctrl + B]. So if you don't have that on
| | 01:36 | in your version of Flash yet, go to the View menu and turn
that on, and that gives you this little file-size preview.
| | 01:40 | So we're at 62K.
| | 01:42 | Let's go ahead and close this.
| | 01:43 | Let's jump back over to the large image here, and we'll scale it down.
| | 01:48 | And we'll do a test movie again--[Ctrl + Enter].
| | 01:51 | You'll see that even though the image is
smaller, technically the file size has not changed
| | 01:56 | because what's happening here is the entire bitmap is still
being included in that exported SWF file, and then at run time,
| | 02:02 | the Flash player is simply just changing the width
and the height of that particular embedded bitmap.
| | 02:09 | It's the exact same thing as what happens in, say, something
like HTML where you scale a bitmap just by changing the width
| | 02:15 | and the height attributes in the HTML code.
| | 02:17 | So again, bring your images in at the actual size you intend to use them.
| | 02:20 | You'll get a better looking graphic that way because
Flash won't be interpolating the image for you.
| | 02:26 | Your external bitmap editor will be doing that.
| | 02:28 | And you'll be getting a more accurate reflection of what the
actual file size of your result in SWF file is going to be.
| | 02:35 | So we'll go and do that edit here.
| | 02:38 | Okay. Speaking of edits, when you edit an embedded bitmap outside of
Flash, there are two ways to actually trigger an edit like that.
| | 02:49 | You can trigger from within Flash, or you can do it outside of Flash.
| | 02:52 | Let's show you what I mean by editing this
image outside of Flash and see what happens.
| | 02:56 | So let's go over to our class files here, and in the Chapter 7
folder, there's the big file that we placed in our Flash file here.
| | 03:04 | We'll go and edit this in Photoshop.
| | 03:06 | One thing I want to point out here is if you look on screen,
the image looks much darker in Photoshop than it does in Flash.
| | 03:15 | Let's go back to Flash.
| | 03:16 | You can kind of see the difference.
| | 03:17 | It's much lighter here.
| | 03:18 | Now, you're not actually seeing two different versions of the file.
| | 03:22 | What you're seeing is Photoshop presenting
the image in a different preview fashion.
| | 03:27 | So to make them look the same, we'll go to our View menu
in Photoshop and change the Proof setup to Monitor RGB.
| | 03:35 | And what that does is that makes that look the same as it did in Flash.
| | 03:39 | So when you're working with files-- bitmap files-- in
Flash that you want to send in to a Flash document,
| | 03:45 | change your View Proof setup to reflect Monitor RGB, and that
will be a more accurate preview of what it's going to look like
| | 03:54 | in your embedded Flash file.
| | 03:56 | So let's do a non-destructive edit, something like an Invert,
Ctrl + or Command + I, just to change the file and see what happens.
| | 04:02 | So we'll save it and close it, and then we'll jump back to Flash.
| | 04:06 | And you'll see that the embedded bitmap here doesn't update automatically,
so we can force that to update if we wish, if we've done an external edit,
| | 04:15 | and we want to make the one inside Flash look exactly the same.
| | 04:19 | The way you do that is you go to the Library Palette, and you
either (Command + Click) on the Mac, or right-click in Windows,
| | 04:25 | and pull down to the Update command in the Contextual menu here.
| | 04:30 | And it knows what the original path was to that file,
so we can just ahead and select that and click Update.
| | 04:36 | And now that shows you the external edit that we did.
| | 04:40 | So that's one way to do it.
| | 04:41 | If you want to make sure that you have the latest version of
that particular file, go to the Library, find it in the Library,
| | 04:49 | Right-click on it, (Command + Click) on it, and choose Update.
| | 04:51 | And make sure it pulls in the most recent version.
| | 04:55 | The other method is to trigger an external edit from
within Flash, and the way to do that is a couple of ways.
| | 05:01 | If you happen to be using Fireworks, you
can do it directly from within the Stage.
| | 05:07 | You can just right-click, or (Command + Click), on the
actual bitmap on the Stage and say, Edit With Fireworks.
| | 05:12 | And that will launch Fireworks if it's not already open.
| | 05:15 | If you want to use a different image editor, such as Photoshop, you
would go to the Library here, and do a right-click and say, Edit With...
| | 05:23 | That will bring up a dialogue box where you
can navigate to the image editor of choice.
| | 05:27 | So I'm going to go to the Adobe Photoshop folder and choose Photoshop.
| | 05:30 | Go ahead and click Open.
| | 05:32 | It shows me that file.
| | 05:34 | I'm going to go and invert it back, back to its original-- again,
if I want to make it look the same, change it to Monitor RGB.
| | 05:40 | We'll go ahead and save this, close the file, and then when we
come back to Flash, you'll see that it automatically updates.
| | 05:49 | So again, you can do an external edit, and then manually update the file on
a one by one basis, or you can just simply right-click and choose
| | 05:58 | the Edit With option to initiate that edit from
outside in an external editor from within Flash.
| | Collapse this transcript |
|
|
8. Photoshop Tips for Image Quality and Optimizationdownsampling large images| 00:00 | >>So in this chapter, we're going to take some time and talk
about what you can do to make your images look as good as possible
| | 00:07 | when you're preparing them to put in a Flash file.
| | 00:10 | So chances are, when you're working with an image that's going to go
into Flash, it's probably a lot bigger than it needs to be in terms
| | 00:17 | of pixel dimensions, especially if you're using a picture off a
digital camera or buying stock photography or something like that.
| | 00:23 | So one of the first things you want to do when you open up
the image in Photoshop is to view it at the 100 percent size.
| | 00:30 | Now 100 percent doesn't mean actual print dimensions.
| | 00:34 | If you're coming from the print world, you often think
of 100 percent as actual size from that perspective.
| | 00:39 | When you're dealing with web graphics, or on-screen
graphics, there really is no concept of resolution.
| | 00:45 | All you really care about is pixel dimensions.
| | 00:47 | Now a lot of you out there are still under the myth or the
belief that web graphics need to be 72 pixels per inch.
| | 00:54 | And that's actually not true.
| | 00:56 | Let's actually go ahead and go on a tangent
here and talk about that for a second.
| | 01:00 | So I create a new document and my measurement
systems here are set to pixels.
| | 01:04 | Let's change the width to, let's say, 800 by 600, and it's going to be RGB.
| | 01:10 | Let's change the resolution to 1000 pixels per inch.
| | 01:14 | And most of you would agree that that's a high-resolution file.
| | 01:17 | If you take a look at the file size, it's 1.37 megabytes.
| | 01:21 | We're going to go back and change that resolution again to 1 pixel
per inch, and you'll notice that the file size doesn't change.
| | 01:29 | So in this context, resolution really only matters when you're
talking about output resolution, when you're talking about print.
| | 01:38 | When you're talking about a web graphic, or a graphic that's going to be
seen inside a Flash file, all you really care about are pixel dimensions.
| | 01:46 | Resolution's not a factor.
| | 01:48 | So it could be 72, 600, 1-- it really doesn't matter.
| | 01:51 | You just care about pixel dimensions.
| | 01:54 | So hopefully that clears things up and debunks that myth there.
| | 01:59 | So back to this image, where it's rather large--
you know, it opened up a 25 percent view.
| | 02:04 | The 100 percent view in Photoshop means actual pixels, meaning 1
pixel on your screen is representing 1 pixel in the actual image.
| | 02:12 | So it's the actual pixel's view.
| | 02:14 | So a good way to get to the actual pixel's view, or the
100 percent view, is to double-click on the Zoom Tool.
| | 02:20 | And we'll go ahead and do that.
| | 02:22 | That takes you to the 100 percent view.
| | 02:24 | You'll see that up here.
| | 02:25 | And then I often want to work in full screen
so I can see as much of my image as possible.
| | 02:30 | So I'll press the letter F to put the image into full screen.
| | 02:33 | If I press the letter H, it gives me the Hand Tool, and
you can see that I can pan this image around quite a bit.
| | 02:38 | It's a much larger file than we would actually put in a Flash document.
| | 02:43 | So we need to resample this image, or downsample it.
| | 02:47 | And the most common place to go to do that is
somewhere called the Image Size dialogue box.
| | 02:52 | Now, when we open up this dialogue box, there are two
ways to use it, and not everyone gets that nuance.
| | 02:58 | By default, the Resample check box is turned on, so you can use
this dialogue box to resample an image, or to resize an image.
| | 03:07 | If this Resample check box is turned off, you'll notice
that the top portion of the dialogue box is unavailable.
| | 03:15 | I'm going to turn that back on, and I'm
going to describe this for a second.
| | 03:18 | This, "upstairs" is what I call it,
there's an "upstairs" and a "downstairs".
| | 03:21 | The "upstairs" in the dialogue box is really for
dealing with web graphics, or on-screen graphics.
| | 03:26 | You'll notice that there's no resolution field here, because
resolution's irrelevant when you're dealing with a web graphic.
| | 03:32 | That's why there's nothing up here.
| | 03:33 | But "downstairs" is really dealing with print documents-- documents
that are going to print it-- and that's why there's a resolution field.
| | 03:41 | What will the output, or the print resolution of the file, be?
| | 03:45 | So when the Resample is turned off, you'll see that
I cannot change my pixel dimensions in this image.
| | 03:51 | So it really doesn't matter what I do down here in the "downstairs".
| | 03:54 | It will not change the on-screen view of the image in Photoshop.
| | 03:58 | So if I change the width to, say, 6 inches,
you notice that forces the resolution to go up.
| | 04:04 | The file size didn't change.
| | 04:06 | So to fit the smaller space, the pixels themselves
had to shrink so the resolution effects goes up.
| | 04:13 | We go and click OK.
| | 04:14 | A lot of you are sometimes confused by this, because nothing
happened on screen, and other people have been confused
| | 04:21 | where the image is 100 percent. You can pan for acres,
but you print it and it's the size of a business card.
| | 04:26 | You know, it's so huge on my screen, why is it
only the size of a business card when I print it out?
| | 04:32 | It's because all you did here is resize the image.
| | 04:34 | You didn't resample it.
| | 04:36 | If we go back to Image, Image Size, and dial in our original
resolution here-- 72-- this time we'll turn on the Resample check box,
| | 04:44 | which was the default setting here.
| | 04:46 | And this is where we can actually-- now
instead of resizing, which is not destructive--
| | 04:50 | we'll do resample where we'll either add pixels to the image
or, in this case, we'll take away pixels from the image.
| | 04:58 | So we're going to make our width, let's say, 400 pixels wide.
| | 05:02 | And you'll see that the image that used to be 7.5 MB--
it's now going to be 625 K. And this is what we're doing,
| | 05:09 | is we're downsampling that file.
| | 05:10 | We're throwing away a bunch of pixels that shouldn't be there.
| | 05:15 | Now, when you're resampling, you've actually got a couple of
different options in Photoshop CS as to what interpolation algorithm--
| | 05:22 | a bunch of new terms there-- you can choose to resample an image down.
| | 05:27 | The default is Bicubic, and that's the same option
that's been there through many, many versions.
| | 05:33 | In Photoshop CS, they added two new options--
Bicubic Smoother and Bicubic Sharper.
| | 05:39 | Without getting into a lot of technical detail, basically if
you're upsampling an image, you're increasing the file size--
| | 05:45 | you'd want to choose Bicubic Smoother.
| | 05:47 | And if you're making the image smaller, you'd want to use Bicubic Sharper.
| | 05:50 | For now, I'm going to use Bicubic, and I'll show you
the difference and do a comparison between the two.
| | 05:56 | Now, before we actually do this resample, I'm going to cancel this.
| | 06:00 | And let's go back to the Normal mode.
| | 06:03 | I'm going to duplicate this image first and create two
of them side by side so that we can compare the results.
| | 06:10 | So I'm going to change the Proof back to the Mono RGB.
| | 06:14 | Great. So we're going to resample this one with Bicubic
Interpolation, and we're going to choose Bicubic Sharper for this one,
| | 06:22 | and we'll compare the difference.
| | 06:23 | Let's go to Image, Image Size, turn on Resample, make this
one Bicubic, and we'll make the width 400 pixels wide.
| | 06:29 | So the file is getting smaller, and we're using the Bicubic default option.
| | 06:34 | Click OK. Now we'll do the same thing with this version.
| | 06:38 | We'll go to Image, Image Size, but instead of Bicubic,
we'll choose Bicubic Sharper, and change the width to 400.
| | 06:45 | And click OK.
| | 06:49 | And we'll zoom that document up to match this document side by side.
| | 06:57 | Now, I don't know if you're going to be able to tell on your
video here, but hopefully you should see that this version
| | 07:03 | on the right is much sharper, has much
more detail, than the image on the left.
| | 07:08 | The image on the left was a touch softer.
| | 07:11 | So what the Bicubic Sharper algorithm does is try to retain as much
detail as possible and keep the image crisp like the original was.
| | 07:20 | So that's one tip for you, is that when you are
resampling your image, you're making them smaller--
| | 07:25 | you choose Bicubic Sharper to retain the detail.
| | 07:28 | Now, the good news about that-- it usually saves you an additional step--
this image probably would not need to have any additional sharpening on it
| | 07:36 | because it looks crisp enough, whereas this image here,
because we chose Bicubic, it looks a little bit soft.
| | 07:42 | We would want to use, you know, something like the
Unsharp Mask filter to bring back some of that detail.
| | 07:47 | So rule of thumb here is if you're using Photoshop CS, change
your interpolation method for resampling to Bicubic Sharper
| | 07:55 | when you're making your images smaller.
| | 07:57 | If you're using Photoshop 7 or earlier, what you need to do is after
you make the image smaller with Image Size, is you need to go back
| | 08:04 | and sharpen that image with Unsharp Mask to
make it look like it had the original detail.
| | 08:10 | For now, though, I'm doing this on purpose to illustrate
another point, when it comes to saving a file as a JPEG.
| | 08:18 | We'll get to that in just a second.
| | 08:20 | One thing that you might want to consider doing under your preferences in
Photoshop CS-- the image interpolation method now can be set as a default,
| | 08:30 | so, we said earlier, it's Bicubic.
| | 08:32 | If you find that, you know, 90 percent of
the time you're making your images smaller,
| | 08:36 | just change the default interpolation method-- Bicubic Sharper.
| | 08:40 | That way when you go into Image, Image Size,
it will automatically be set to that option.
| | 08:46 | All right, so we've got a slightly soft image on
the left, and a slightly sharper image on the right.
| | 08:53 | And you'll find when you're doing web graphics, if you haven't
discovered this already, that you never get anything for free.
| | 08:59 | So while this image looks better on the
right, it's going to come at a cost.
| | 09:03 | What do I mean by that?
| | 09:04 | Well, let's choose the image on the left here, the softer image.
| | 09:07 | We're going to go our friend Save For Web-- File, Save For Web.
| | 09:11 | And this will bring up the Save For The Web dialogue box.
| | 09:15 | The original image on the left, uncompressed, and then the
image on the right, chosen to a JPEG of medium quality.
| | 09:22 | Let's see.
| | 09:22 | Let's just do a comparison.
| | 09:23 | We'll make this a high-quality JPEG-- a quality of 60.
| | 09:27 | And the file size here is 59.3 K. So this is the soft image, the soft
original, as the result from just using Bicubic instead of Bicubic Sharper.
| | 09:38 | It has a 60 percent quality JPEG.
| | 09:40 | The file size is 59.3.
| | 09:42 | We're going to remember that.
| | 09:44 | Cancel. We're going to choose the sharper image now--
same pixel dimensions, same original source file.
| | 09:50 | It's just that we used Bicubic Sharper for the interpolation method.
| | 09:53 | We'll go back to File, Save For Web again.
| | 09:56 | Same settings-- high quality, 60 percent quality JPEG.
| | 10:01 | And it's now 66.45.
| | 10:03 | So I think it was 59 something before, 66 is higher.
| | 10:07 | So even though the pixel dimensions are the same, the
sharper image is slightly higher in terms of percentage.
| | 10:15 | It's a significantly higher file size than the softer version.
| | 10:20 | Well, why is that?
| | 10:22 | Well, it's because JPEG likes soft images.
| | 10:25 | The softer the image, the lower the file
size can be without destroying image quality.
| | 10:31 | JPEG doesn't like edges, and an edge is
defined by a light pixel next to a dark pixel.
| | 10:37 | And when you're sharpening something, that's exactly what you're doing.
| | 10:40 | You're increasing the contrast of edge pixels, meaning the light half
of an edge gets lighter, and the dark half of the edge gets darker.
| | 10:47 | Therefore, you're creating a more pronounced edge.
| | 10:50 | The harder the edge is in your image, the larger the file size
will be comparatively when you're using the same quality setting.
| | 10:58 | What that means is you'll have to increase the quality setting
to retain the original image detail without getting artifacting.
| | 11:06 | You can see around Maya's face here.
| | 11:07 | At the quality 60 setting, she's getting quite a bit
more artifacting than we saw on the softer version.
| | 11:16 | So there's no right or wrong.
| | 11:17 | I just want to teach you how JPEG likes to think.
| | 11:20 | It works. It likes soft images, which might finally explain
why the heck there's a Blur field, or a Blur control,
| | 11:27 | inside a Save For The Web dialogue box.
| | 11:29 | You may have wondered why would you want to blur your image?
| | 11:31 | And if you look at the Tool Tip for it, it actually
says, "Applies blur to image to reduce artifacts".
| | 11:36 | Well, that's part of it, and that's kind of an inside,
again, to the way JPEG works-- the fewer edges that are fine.
| | 11:42 | So the less severe the edge, the less JPEG crusties.
| | 11:46 | Or artifacting, you'll see...
| | 11:49 | So if I were to blur this image, just even a small
amount, like just a quarter of a pixel- .25-
| | 11:56 | and click in another field to update that preview, you'll
see I'm just about where I was to the previous image
| | 12:04 | where I was just using Bicubic instead of Bicubic Sharper.
| | 12:07 | So the moral of the story is, if you've got an image that's just not
getting to the file size you want, one of your other options in addition
| | 12:15 | to lowering the quality setting is to just blur it slightly
if you don't care about the crispness of the detail.
| | 12:21 | So we'll go and cancel this.
| | 12:23 | So to review, when you make your images smaller, if you care about the
detail more than you care about the file size, choose Bicubic Sharper.
| | 12:31 | If you're more concerned about the file
size over the detail, then choose Bicubic.
| | 12:36 | You'll end up in a slightly softer image, which will reduce to
a smaller file size when you choose JPEG with fewer artifacts.
| | Collapse this transcript |
| tips for sharpening images| 00:00 | >>In the previous movie, I told you how the best way to resample an
image down but maintain detail was to change the interpolation algorithm,
| | 00:10 | the resampling method, to Bicubic Sharper.
| | 00:12 | Well, that assumes that you were starting with a decently sharpened image
to begin with, so, you know, it doesn't add detail that wasn't there.
| | 00:21 | So I thought I would give you a couple of shortcuts, or
a couple of tricks, on my favorite sharpening techniques.
| | 00:26 | So I'm going to zoom up this image to 100 percent so
I actually see the full-size pixels, and you can see
| | 00:34 | it's a relatively sharp image. But I want those water
drops to really pop off the leaves, so to speak.
| | 00:40 | So one of my favorite techniques is a technique that is pretty common.
| | 00:44 | A lot of people know about it already.
| | 00:46 | It's called High-Pass Sharpening, and what we do is you duplicate your
existing layer and, for me, the best way- and the easiest way-
| | 00:54 | to duplicate a layer is just to do Ctr + or Command
+ J-- [Ctrl + J] on a PC and (Command + J) on the Mac.
| | 00:59 | And that duplicates your active layer.
| | 01:03 | You can see that in the Layers palette.
| | 01:05 | And then you go to this obscure filter called Filter, Other, High
Pass, and it's in the Other submenu-- so Filter, Other, High Pass--
| | 01:13 | and what this does is turn your image into a lot of gray,
but along the edges, it makes it kind of darker and lighter.
| | 01:22 | So this is what some people call an edge detection filter.
| | 01:26 | Along the edges, it gets darker and lighter, and everything
that's not an edge just turns into this middle gray.
| | 01:32 | So I'm just going to use a radius, a modest radius amount--
maybe a pixel and a half here-- and I'm going to click OK.
| | 01:39 | And what I want to do now is make that gray stuff disappear and
just leave the darkening and the lightening around the edges.
| | 01:47 | The blend mode-- one of the blend modes-- that happens to ignore gray
and increase contrast at the same time is the Overlay blend mode.
| | 01:55 | So you can see that now those raindrops are much
more sharp, and they're just popping off that leaf.
| | 02:02 | I'll turn off the sharpened layer and turn
it back on so you can see the difference.
| | 02:08 | So now we just have a much better starting
point to downsample an image down.
| | 02:13 | So we aren't making a soft image smaller.
| | 02:16 | We're making a sharpened image smaller.
| | 02:18 | And to maintain that detail, we would then go use Bicubic Sharper.
| | 02:22 | Let's go do that-- Image, Image Size.
| | 02:25 | We changed our default setting here to Bicubic
Sharper, so let's change this to 600 pixels wide.
| | 02:30 | Click OK. And we've just got a much nicer looking file that
we can then save as a JPEG and put into our Flash document.
| | 02:38 | That's where our final destination is.
| | 02:40 | So I'm going to close this document and give
you just a slight variation of the same thing.
| | 02:46 | Again, we'll zoom this up to actual size,
actual pixels, and for this particular image,
| | 02:52 | we may want to decide to limit the sharpening effect only to certain areas.
| | 02:57 | So typically the most important part of the portrait is the eyes.
| | 03:01 | We might want to draw attention, or draw the viewer in, to the eyes.
| | 03:05 | So, again, we'll do the same technique.
| | 03:06 | We'll duplicate the layer- [Ctrl + J]. We'll Fit Into Actual Size here.
| | 03:10 | I'll go and hide my palettes just so you can see this a little bit better.
| | 03:14 | So [Ctrl + J] will duplicate the layer and
bring our palettes back, and you can see that.
| | 03:18 | We go to Filter, Other, High Pass, and again, we'll just
use a very modest amount-- maybe one or two pixels--
| | 03:26 | just enough to increase contrast along those specific edges.
| | 03:30 | We'll click OK.
| | 03:31 | Then we can change that blend mode to
Overlay to make the gray stuff disappear.
| | 03:37 | And now if I turn the layer on and off, you should see those eyes just
popping up a little bit more-- just looking a little bit more crisp.
| | 03:44 | Now, if I just zoom out though, you'll see that other areas
are being sharpened where I may not want them to be sharpened.
| | 03:51 | So to limit the effect on the sharpening, I might want to add
what's called a layer mask to this layer that we've used to sharpen.
| | 03:58 | I might rename this layer to "High Pass" so we
actually know that that was our sharpening layer.
| | 04:05 | Now, normally, when you click on the Layer Mask icon at the bottom of
the Layers palette, the layer mask is added and is set to Reveal All,
| | 04:14 | which means all of the effect of the sharpening
is being applied on this particular layer.
| | 04:19 | If you want the reverse of that, you hold down
the Alt key on Windows, or the Option key on Mac.
| | 04:26 | It creates a layer mask but hides everything on this
layer, so it's as if you didn't sharpen this layer at all.
| | 04:32 | So if I turn this layer on and off, nothing changes.
| | 04:35 | So now that I have a layer mask applied to this "High Pass"
layer set to Overlay, I can type B for my Brush Tool and,
| | 04:43 | with my foreground color set to white, I can paint
in the sharpening effect just where I want it.
| | 04:49 | So I'm just going to paint it immediately around the eyes and
maybe lower my brush size by using my right and left bracket keys.
| | 04:57 | And paint in the eyelashes here, and maybe the highlight shine on her
lip a little bit, the edge of her nose, the diamond earring here...
| | 05:06 | And so what I'm doing here is I'm not emphasizing,
you know, like, pores and skin and things like that.
| | 05:12 | I'm just increasing the interest, or the tension, around the
eyes and the subtle details that I want to draw the user to.
| | 05:19 | So if I [Shift + Click} on the Layer Mask icon, I can turn that
mask on and off, and hopefully you can start to see the effect
| | 05:29 | of that sharpening layer.
| | 05:31 | Now, to just make this a little bit more dramatic, what
I can do is duplicate this layer again- [Ctrl + J]-
| | 05:36 | to just double the effect so you can see
that it's much sharper now around the eyes.
| | 05:41 | And then I'll go ahead and flatten this
image down and go to Image, Image Size.
| | 05:48 | And again, we've strengthened the portion of the image that we think is
the most important before going down and resampling this with Image Size.
| | 05:56 | So I'll take the width to 600 again, click OK,
and view that at actual size, and there we go.
| | 06:02 | We've really drawn attention to the portion of the image that
we care about, and we've left the rest of the image soft.
| | 06:09 | So that's some brief techniques on how to increase sharpness of your images
and make them look a little bit crisper before popping them into Flash.
| | Collapse this transcript |
| color casts and digital noise| 00:01 | >>I'm going to show you two of my favorite techniques for dealing with
color cast removal and also trying to eliminate, or at least reduce,
| | 00:08 | the effects of digital noise.
| | 00:10 | I'll explain the noise issue in just a minute.
| | 00:12 | If you look at this first image here, it's pretty obvious that it's kind
of dingy and kind of looks like it has a yellow or green cast to it,
| | 00:18 | and starting in Photoshop 7, and of course in CS as
well, there was a new command added called Auto Color
| | 00:26 | that could help eliminate these color casts pretty instantly.
| | 00:30 | The menu command is Image, Adjustments, Auto Color.
| | 00:35 | And you'll see there's also a keyboard
shortcut, and that's what I try to remember.
| | 00:39 | So the keyboard shortcut is (Command + Shift + B)
on the Mac, or [Ctrl + Shift + B] on Windows.
| | 00:46 | And you can see that with just one keystroke,
we very quickly eliminate that color cast.
| | 00:51 | So [Ctrl + Z] to undo to see the before.
| | 00:55 | [Ctrl + Z] again to see after.
| | 00:57 | So check out Auto Color.
| | 00:58 | And I'm just trying to give you some quick tips for trying to make
your image look as best they can before you send them in the Flash.
| | 01:05 | If your image has some color issues, color cast removal-- like the
white balance wasn't set correctly on the camera when you took a picture
| | 01:11 | or whatever-- that's one of the first techniques you should
try, is the Auto Color command- Command + or Ctrl + Shift + B-
| | 01:17 | to see if you can remove the color cast.
| | 01:20 | This next issue is the issue of noise.
| | 01:23 | It's especially an issue with digital cameras- low-end digital
cameras- especially in shooting in either low light in high-speed ISO,
| | 01:32 | or a combination of the two.
| | 01:34 | You can see in my wife's face here- in the low light and the shadows
here- the camera just introduced a lot of random colors across her face
| | 01:44 | and in the shadow area, right here on Sophie's neck, and
sometimes in the sky if it's low light there as well.
| | 01:52 | Now, noise itself isn't bad.
| | 01:54 | I mean noise can represent grain as it does in analogue film.
| | 01:58 | If you look at the water here, there is,
quote, a "grain" there present in the image.
| | 02:04 | But you notice that it's not these random red and green and blue
colors, so it not as obnoxious, and sometimes it's actually desirable.
| | 02:11 | But if I go to another portion of the image and zoom up, let's say, on my
wife's chin, you can see a lot of the random red and blue and green pixels
| | 02:21 | that were introduced here in the hair as well.
| | 02:24 | So let's just take this portion here and see how we can try
to eliminate or reduce the effect of those random colors.
| | 02:32 | This technique requires you to duplicate your existing layer, and the
duplicate command is Ctrl + or Command + J. And you'll do something
| | 02:40 | that you wouldn't normally want to do to an image.
| | 02:42 | You'll blur it.
| | 02:42 | You go to the Filter, Blur, Gaussian Blur command, and we're going
to blur this enough so that those random colors start to blur
| | 02:51 | into the surrounding areas.
| | 02:53 | So let's try a radius of three.
| | 02:55 | You can see that I'm just trying to smooth out,
or soften, the effects of those random colors.
| | 03:01 | Go and click OK.
| | 03:04 | And what we're going to do is use the color information
of this top layer that we've just created by blurring,
| | 03:11 | and the detail information of the layer underneath it.
| | 03:15 | Well, to use the color of this layer, there's a blend
mode called Color, and that's exactly what it does.
| | 03:21 | It uses the color information of this layer, but
applies that to the detailed layer underneath it.
| | 03:27 | So if we turn off this Color layer-- this layer set to the
Color blend mode-- you can see that the before and the after,
| | 03:33 | and hopefully you can see that that looks much
better-- there's still grain, still, quote, "noise"--
| | 03:38 | but when you remove the random color pixels of that and change their
color, shift their color to colors that are actually supposed to be
| | 03:45 | in the image, the random noise starts to look like actual film grain.
| | 03:50 | If we pan around to a different part of
the image, and-- right here, let's say--
| | 03:55 | and turn it on and off, again you can see right around here the
random colors are now shifting into something that's more natural,
| | 04:01 | that should be part of the image.
| | 04:03 | So that's a handy noise reduction technique.
| | 04:07 | I'll show you this with another image-- and certainly, these images are in
your class files folder if you elected to get them in the Chapter 8 folder.
| | 04:16 | So let's zoom up to this image, and you can see hopefully on your screen,
there's lots of these random reddish and greenish and blue pixels here,
| | 04:25 | and the grey of the water and on the tree bark as well.
| | 04:30 | And we just want to try to neutralize those.
| | 04:32 | So we'll zoom up a couple of times, and let's go and do that.
| | 04:35 | Let's duplicate the layer-- Command + or
Ctrl + J. Go to Filter, Blur, Gaussian Blur.
| | 04:40 | And we just want to choose a high enough radius where those colors
start to just melt away and blend in with the underlying areas.
| | 04:46 | So let's do maybe a pixel radius of five on this particular image.
| | 04:50 | Click OK. And again, set that blend mode to Color
to use the color information of the top layer,
| | 04:56 | but the detail information of the bottom layer.
| | 04:59 | There's before and there's after, just by turning the layer on and off.
| | 05:03 | Zoom up over to this area, and you can
really notice it hopefully right here.
| | 05:07 | So we turn that off, and turn it back on to see the effect.
| | 05:13 | So anyway, hopefully those two techniques will help you getting your
images looking the best they can before you start downsampling them
| | 05:19 | and getting them into Flash for your artwork there.
| | Collapse this transcript |
| using two different quality settings| 00:01 | >>In Chapter 7, I mentioned that if you really want to control
how the imbedded bitmaps in your SWF files are optimized,
| | 00:09 | the best way to do that is to optimize it in an external image
editor, such as Photoshop, and set the JPEG compression settings
| | 00:17 | to your liking in that application.
| | 00:19 | And then bring in the Flash as a JPEG and, by default,
if it comes in as a JPEG, you do nothing else to it.
| | 00:25 | It will go out as it came in and not be recompressed.
| | 00:28 | Well, now that we know that we can kind of take advantage of that little
piece of workflow there, and use the feature in Photoshop to help us make
| | 00:37 | at least a more optically better looking
image based on what we think is important.
| | 00:41 | So if I look at this image here-- and I think everyone will agree
that the most important part of the image is the couple's faces--
| | 00:48 | and maybe we don't care so much about the foreground portion
of the image, which is pretty soft and blurry anyway.
| | 00:53 | So what we can do is create something called an alpha channel, and use
that alpha channel to optimize two portions of the image differently
| | 01:04 | from each other using two quality settings
in two different areas, so to speak.
| | 01:07 | To do this, you go to the Channels palette.
| | 01:11 | Delete the channel that's already there.
| | 01:12 | No cheating, nothing up my sleeves.
| | 01:13 | We're going to create a new channel that's called "Alpha1",
and what we want to do is be able to see an alpha channel
| | 01:20 | and the image at the same time.
| | 01:21 | So I'm going to turn the eyeball on the Composite channel,
and now we get a red overlay representing the Alpha channel.
| | 01:28 | I'm going to switch to my Brush Tool- if I type in the letter B-
and I'm going to paint with white on this mask area around the areas
| | 01:36 | that I think are important.
| | 01:37 | And you see that I have a nice, soft edge, so I'm going to get a transition
| | 01:40 | between a low compression setting versus
a high compression setting later on.
| | 01:45 | So again, I've just painted a very quick mask around the
areas that I deem to be important on this particular image.
| | 01:51 | When I'm done painting my mask, I can simply turn off
the Alpha channel and go back to the Layers palette.
| | 01:56 | And I'm now ready to go to my friends, Save For Web, and here I am up
on my 2-up display, before and the original, and here it is as a JPEG.
| | 02:06 | I've set the JPEG quality to, let's say, a medium setting, and
you can see that the faces here are getting pretty compressed--
| | 02:15 | lots of artifacts around the edges.
| | 02:17 | So I may be okay with how the rest of the image is being compressed, but
I'm really unhappy with how those faces are getting optimized as well.
| | 02:26 | So there's this little button here to the right of the Quality
setting, and it's been here in actually several versions of Photoshop.
| | 02:34 | Recently in, I think, Photoshop 7, we started giving you some feedback
to let you know that there was actually a button in previous versions.
| | 02:40 | If you moused over this little icon, it didn't do anything.
| | 02:43 | At least now we give you the finger, so to speak.
| | 02:46 | (That was funny...
| | 02:47 | You'll get that on the way home.)
| | 02:48 | So if you mouse over that icon and the little Tool
Tip says, "Use a channel to modify quality setting".
| | 02:53 | Well, let's click on that, and see what happens.
| | 02:54 | It brings up the Modify Quality Setting dialogue box.
| | 02:57 | I call it the channel-based optimization.
| | 02:59 | And we need to move this down so we can see
the faces, because that's what we care about.
| | 03:03 | And you'll see that under the Use Category,
there's a channel that's set to None.
| | 03:08 | We're going to pull down and release on "alpha"-
that Alpha channel that we created earlier-
| | 03:13 | and you'll see that there's some black areas and
some white areas and then some grey along the edges.
| | 03:18 | And those are being represented here in this Quality slider.
| | 03:21 | The black slider here represents the areas in black.
| | 03:24 | The white slider represents the areas in white, and
then the greys-- the transition between the two.
| | 03:29 | So we decide that those faces are set to 30 percent right now.
| | 03:34 | We probably should increase that Quality to maybe 70 percent.
| | 03:38 | And you can see the detail of the face comes back.
| | 03:41 | And we've really maximized the compression on the other
areas, but it's limited to just the areas in black.
| | 03:48 | If we decide that that's too much, you know, we can control
the black areas independently of the white areas now.
| | 03:54 | So maybe we want the black areas to be set
to 30 and the face areas set to 70 percent.
| | 04:02 | So there you have it, that's channel-based optimization.
| | 04:04 | The trick is to create an alpha channel, paint in white on the areas
that you care about, and the areas that you don't care about in black.
| | 04:11 | And it's a way to set two different compression settings
in the same image based on what you deem important.
| | 04:16 | We're going to go ahead and cancel that and
see a slight variation of that same technique.
| | 04:23 | Here's a typically challenging image to save as the JPEG file format.
| | 04:28 | If any of you have worked with type or an image, you know that solid
color type on a solid color background creates a pretty hard edge,
| | 04:36 | and JPEG just doesn't like hard edges.
| | 04:38 | You tend to get very quick artifacting along
those edges, even at high quality settings.
| | 04:44 | So this was an image that I saw on MSNBC, and I thought it
was a good image to kind of recreate and show you what I mean.
| | 04:51 | So I've rendered this using actual type layers now.
| | 04:55 | And we're going to go to the File, Save For Web command.
| | 05:00 | And we'll set the JPEG quality into, let's say, low just to
exaggerate, and you can see right away on the interior of those letters,
| | 05:07 | they're not staying in the nice, crisp solid yellow as the original.
| | 05:12 | And if we zoom up here, you can even exaggerate even further.
| | 05:16 | I mean, that "G" is looking pretty gross.
| | 05:19 | So again, we're going to go to that friend,
the Channel-based Optimization setting.
| | 05:23 | It's the little icon to the right of the Quality slider.
| | 05:26 | Pop that open, and you'll notice that in Photoshop 7 in
CS, we added a check box that says, "Use All Text Layers".
| | 05:36 | In previous versions, you could use the
the channel trick that I taught you.
| | 05:39 | You would have had to make an alpha channel
based on the type yourself, manually.
| | 05:43 | Now you just simply click the All Text Layers check box, and
it automatically creates a mask based on the type layers.
| | 05:50 | So I can set the type areas- the areas indicated in white-
| | 05:53 | to, say, be 80 percent, and you can see the
compression on the type has been significantly reduced.
| | 05:59 | And then the areas that the pixel image portion of the picture here
can be set to a different compression setting-- let's say 30 percent.
| | 06:08 | Again, just the way to set two different compression settings in the same
image to protect certain areas from being-- having too much artifacting.
| | 06:16 | Let's go and click OK, and we'll zoom back out.
| | 06:19 | You can see the before and after side by side,
and now that type is looking great and, of course,
| | 06:25 | this image is at the appropriate compression setting there.
| | 06:28 | Okay, so we'll go ahead and hit Cancel, and there you
go- just a different twist on channel-based optimization.
| | Collapse this transcript |
|
|
9. Loading External JPEGshow to load at runtime| 00:00 | >>Of course, file size of a SWF file is always a big concern.
| | 00:03 | It's probably why a lot of you are even watching this title,
to learn tricks on how to get your JPEGs as small as possible,
| | 00:10 | and keep the quality and things like that.
| | 00:12 | Well, another option at your disposal is to actually not embed
the actual images that you want your users to be able to see
| | 00:21 | or interact with in the actual container of the containing SWF file,
but rather load them in from an external source when it's appropriate,
| | 00:31 | when the user actually calls upon that image.
| | 00:32 | So what am I talking about?
| | 00:34 | I'll just give you an example.
| | 00:36 | See, here, I have a starting file that we're
going to build and make a little bit more complex,
| | 00:40 | but the basic idea here is that I've got some
thumbnails (cropped versions of a much larger image)
| | 00:46 | and when the user clicks on the thumbnail, I want the
larger version to appear in this area here in the grid.
| | 00:53 | Now, you can imagine that for an image that's this big, this is
375 pixels by 500 pixels, depending on how many of those I have,
| | 01:02 | and let's say in this photo gallery, or this online portfolio that I
want to make or whatever, that could significantly increase the file size
| | 01:10 | of your SWF file, even if you've done a good
job of optimizing those large-sized graphics.
| | 01:16 | So there's a way in Flash to load an external
movie into your containing SWF file.
| | 01:24 | And it's, you know, very similar to what you do with HTML.
| | 01:27 | You just have a path to a JPEG somewhere else, and when
the user clicks on a link or whatever, it loads it.
| | 01:34 | So let's go and test this movie.
| | 01:36 | You can see, you know, what it is that we're going to be building.
| | 01:39 | So [Ctrl + Enter] or (Command + Enter) to test the movie, and
you'll see that roll over the thumbnail and it fades into view.
| | 01:46 | We'll learn how to do that as well.
| | 01:48 | And when I click on the thumbnail, the
larger version of it shows up over here.
| | 01:53 | And we'll do the same for that image as well.
| | 01:56 | So for your exercise files, we're going to add a couple of more
thumbnails, learn how to make them into these opacity rollovers,
| | 02:04 | and then add some very simple ones with ActionScript
to make it so that when I click on the thumbnail,
| | 02:10 | the large version of it appears over here.
| | 02:13 | So let's take a look where this file is.
| | 02:15 | Let's close it and not save changes.
| | 02:18 | And if you've downloaded the exercise files, there's a folder "Images" here.
| | 02:24 | And there's Chapter Nine-- "Loading External JPEGs".
| | 02:26 | We'll go and open up that folder.
| | 02:28 | And there's a start and a final.
| | 02:30 | So the final has, you know, all five thumbnails
with everything hooked up, ready to go.
| | 02:34 | And then here's our starting file.
| | 02:35 | So we'll go and open that up.
| | 02:37 | We'll just change the view here to 80 percent.
| | 02:40 | Now, what I've done just to make it clear-- let's
go take a look at what else is inside that folder.
| | 02:47 | I've got little thumbnails for all five of the images that we're
going to be working with, and what I've done is I've cropped these
| | 02:54 | from the larger image.
| | 02:55 | So there's the thumbnail for image one, and there's the large picture one.
| | 02:59 | I just find it more interesting. Rather than scaling the larger image down
to smaller view, which makes it very, very hard to see the detail anyway.
| | 03:07 | I just think people are more likely to click
on the link if they just get a taste of it.
| | 03:11 | So if I just see a subset of the image, I can get a much
closer detail of that particular detail of the image.
| | 03:17 | I don't know about you, but maybe it's
subconscious- or not, maybe I'm just anal-
| | 03:21 | if I kind of get an idea that I'm only seeing a portion of the
image, I'm more likely to click on it to see the larger view,
| | 03:28 | as opposed to seeing the entire image on a much smaller view.
| | 03:32 | Maybe it's just me.
| | 03:33 | Anyway, so what I've done is I've actually got two separate files-- one for
the thumbnails that have been cropped, and one for each large-scale image,
| | 03:42 | along with the start and final files.
| | 03:44 | So that's the basic structure of the files for this particular exercise.
| | 03:48 | Let's jump back into Flash, and what we want to learn how to
do is import the JPEG, and convert it into this button here.
| | 03:56 | Now, there's probably a lot of different ways to do this in Flash.
| | 03:59 | If you're a real geek, you can do it all through ActionScript
and probably not do it the way I'm going to do it.
| | 04:04 | But for those of you just learning some new things with Flash and just
want an easy way to do it, that's what I'm going to show you here.
| | 04:11 | So first let's take a look at our Library.
| | 04:13 | [Ctrl + L], (Command + L) will open up the Library.
| | 04:16 | And you can see I've got some stuff going on for what exists here already.
| | 04:21 | Let's go and import the next thumbnail,
not to the Stage, but to the Library.
| | 04:27 | And you'll see why we're doing that in just a minute.
| | 04:30 | Just go to the files for this class, for this chapter, "Load External
JPEGs", and we'll grab the next one, which is "thumbnail three",
| | 04:40 | or "thumbnail three JPEG".
| | 04:41 | Go ahead and click it open.
| | 04:42 | Now that adds it to the Library, not the Stage.
| | 04:45 | And if we click on the little thumbnail in the
Library, we'll get a little preview of that.
| | 04:49 | We're going to drag that from the Library onto our Stage.
| | 04:54 | Now, when it comes in to the stage, it's just a bitmap, which
means you can't change the opacity of that bitmap in Flash.
| | 05:04 | In Flash, opacity is a property of a movie clip symbol.
| | 05:08 | So in order to change the opacity of a bitmap, you need to wrap it
into a container, or embed it into a container, called a symbol,
| | 05:17 | and then change the opacity of that symbol.
| | 05:20 | So that's why I had you put it into the library first.
| | 05:23 | So we drag an instance of it onto our stage.
| | 05:25 | And we'll just put that into position.
| | 05:27 | We'll line it up with our guides here.
| | 05:29 | And we want to turn this into a movie clip.
| | 05:32 | So keyboard shortcut F8 will bring up the Convert To Symbol dialogue
box, and we'll choose Movie Clip, and we're going to call this "thumb03",
| | 05:42 | just to follow our naming convention of
the rest of our thumbnails over here.
| | 05:45 | Go and click OK.
| | 05:47 | And we want the initial state, or view, of this button, if you
will, to be slightly dimmed back or faded back into the background,
| | 05:55 | so an alpha of, say, 25 percent.
| | 05:58 | Now that it's a movie clip, we look in our Properties pane.
| | 06:01 | You can see that we have this Color option, and it's currently set to None.
| | 06:06 | And if I change that to Alpha, then I get
a slider and it's defaulted to 100 percent.
| | 06:11 | We can take that back down to, say, 25 percent.
| | 06:17 | Great. So now I've got the initial state of this button that I'm
going to be creating at the particular alphabet that I want it to be.
| | 06:25 | Now to make this interactive so that it has an additional
state, like an over state, we're going to wrap this movie clip
| | 06:30 | in another container called a button symbol.
| | 06:33 | So again, I'll press F8, choose Button, and this time we'll call it
"maya03", again following the naming convention of the other buttons
| | 06:43 | that I've already created.
| | 06:45 | Go and click OK.
| | 06:46 | Now the reason I put the bitmap in a movie clip, and then put the
movie clip in a button, was so that I had the appropriate wrappers
| | 06:53 | around to get the ability to change the alpha in this simplified way.
| | 06:58 | So if I double-click on this button and
take it into that movie clip's Timeline.
| | 07:04 | I'll go ahead and open the Timeline, and you'll see that
I have an up state, an over state, and a down state.
| | 07:08 | And the up state is defaulted to the 25 percent alpha.
| | 07:12 | I'm going to click in the over state, and create
a key frame for the over state by default.
| | 07:17 | If I hit F6, that copies the contents of the
up state and puts it in the over state.
| | 07:21 | And if I click what's in that over state now,
it's that movie clip that has the bitmap inside it.
| | 07:29 | So the movie clip is now currently set to 25 percent.
| | 07:32 | We're going to take that back to 100.
| | 07:34 | So now in the over state, the movie clip is set to 100 percent opacity.
| | 07:38 | And in the up state, it's set to 25 percent opacity.
| | 07:43 | Up here in our Timeline tree here, we'll
go back to Scene 1, and we've done that.
| | 07:48 | So let's go ahead and test the movie- [Ctrl + Enter]- and now you see as I
roll over that new thumbnail, it's got that opacity effect that we wanted.
| | 07:57 | So now the trick is to connect it to this container
over here and tell it to load the larger image.
| | 08:05 | What I've done here is just created what I call a placeholder
container, and if I close the Timeline here and zoom out, it's- Good.
| | 08:16 | You'll see all I've done is created. I drew a rectangle.
| | 08:19 | Well, let's just go ahead and do it.
| | 08:20 | We'll delete this one.
| | 08:21 | I'll get my Rectangle Tool, and I'll set the color to black to
match the foreground color, or Stage color, a stroke of none.
| | 08:27 | And we'll go ahead and draw just a placeholder
container within these guides that I've drawn.
| | 08:33 | Let me get my pointer tool here.
| | 08:35 | I'm going to select that rectangle that I've
just created and turn it into a movie clip.
| | 08:40 | We'll just call it "mycontainer".
| | 08:43 | And we'll tell it to be a movie clip.
| | 08:47 | Go ahead and click OK.
| | 08:49 | This is just something that we can address now, so I've got
this placeholder container-- it's called "mycontainer"--
| | 08:56 | and we want to give that an instance name.
| | 08:58 | If you want to be able to dress a particular movie clip
through ActionScript, you have to give the instance
| | 09:04 | of that movie clip an actual instance name.
| | 09:06 | So we'll just call it "mycontainer" again.
| | 09:11 | So now the trick is to connect the button that we've created
with the "mycontainer", so that when we click on this button,
| | 09:19 | the image that we want gets put into the placeholder container.
| | 09:23 | So to do that, we're going to click on this image thumbnail-- the button--
and the easy way to do it is to go to your behaviors in Flash MX 2004,
| | 09:33 | in your Behaviors panel.
| | 09:35 | And at a behavior, there's a movie clip category, and there's
one called either Load External Movie Clip or Load Graphic.
| | 09:41 | Either one will work.
| | 09:42 | I'll just go ahead and choose Load External Movie Clip.
| | 09:45 | And this brings up a dialogue box.
| | 09:48 | It's pretty simple.
| | 09:49 | It says, "Type of the url of the SWF file you want to load."
| | 09:51 | Now, back in my class files directory, you'll see that the image that
I want to load, "picture03", is in the same directory, the same folder,
| | 10:01 | as this "start.FLA" document, and the resulting
SWF file that it's going to be generating.
| | 10:06 | So all I need to do is put the name of the JPEG in that field.
| | 10:10 | If it's in a specific directory, or a specific path, you
would need to enter that path into this dialogue box here.
| | 10:16 | So for here, we're just going to put,
"picture03.JPEG", and it must be a JPEG.
| | 10:24 | That's the only file format that you can use other than another
SWF file, but you can't load a PING file or a GIF file
| | 10:31 | or any other file format, with this load movie clip
behavior, unless it's been wrapped in a SWF before.
| | 10:40 | So "picture03"- and then down below, it says, "Select the movie
clip that you want this picture03.JPEG file to load into".
| | 10:48 | So we're going to choose the "mycontainer" object here that we created.
| | 10:51 | So we'll go click OK.
| | 10:52 | And now if I look in the Actions panel for
that selected object- the selected button-
| | 10:57 | you'll see that it automatically created
some appropriate ActionScript for me.
| | 11:01 | So on Release- there's a comma here- Load Movie Behavior.
| | 11:05 | If this dialogue container- blah, blah, blah- you guys can see that
| | 11:07 | it's basically saying when I click on this
button, it loads "picture03" into this movie clip.
| | 11:17 | And we'll go ahead and test the movie-
[Ctrl + Enter]- and we'll see if it works.
| | 11:22 | The rollover works.
| | 11:23 | So when I click, I've got that movie, or that
image, being loaded into that larger movie clip.
| | 11:30 | So the behavior's nice, because it's just a simple
click, and you just put the name of the file in.
| | 11:35 | As you get more advanced, you realize that you
don't need, necessarily, all this code.
| | 11:39 | It can be a lot easier than this.
| | 11:40 | So I'm going to go steal and take a look at
this placeholder that we had at the beginning.
| | 11:45 | It says, "On Release Container".
| | 11:47 | We'll add "mycontainer" here.
| | 11:51 | So the name of the movie clip that loads
movie, and then the path to the graphic.
| | 11:55 | So we can just copy this- click the map button.
| | 11:59 | It's not wrong to keep it in here.
| | 12:01 | It's just a couple of more lines of code than you actually need.
| | 12:04 | And we'll just paste this in here and in this picture03.
| | 12:07 | And again, we'll just test this- [Ctrl + Enter].
| | 12:13 | That works, and that works.
| | 12:18 | Great. So we'll do this one more time, and
we'll just do it with the four thumbnails.
| | 12:22 | So we're going to add another thumbnail to our Library.
| | 12:28 | So Import To Library.
| | 12:29 | Grab "thumbnail 4".
| | 12:30 | Done that.
| | 12:32 | Great. There it is in our Library.
| | 12:36 | Drag that onto our Stage.
| | 12:38 | Line it up like so.
| | 12:40 | Good enough.
| | 12:42 | It's a bitmap, so if I open up my Properties panel.
| | 12:45 | You'll see if I click on this bitmap on the Stage, you'll see that
it tells me it's a bitmap, and I don't have that alpha setting--
| | 12:56 | that color option with the alpha to change the opacity
of that, because I need to put that in a movie clip.
| | 13:03 | So F8 again.
| | 13:05 | We'll name this "thumb04".
| | 13:08 | Click OK. It's now in a movie clip.
| | 13:11 | It gives us the option to change the alpha to 25 percent.
| | 13:20 | Good. We'll wrap that movie clip into
another movie clip called a button symbol.
| | 13:26 | F8, make it a button.
| | 13:28 | And we'll call it, "maya04".
| | 13:32 | Click OK. Great.
| | 13:35 | Now, if we double-click on "maya04"-- that button here--
and go look at its Timeline, there's the up state.
| | 13:41 | We're going to hit F6 to duplicate the contents
of the up state into the over state.
| | 13:47 | We'll select that movie clip on the Stage
and change the alpha value to 100 percent.
| | 13:53 | Great. There's the up state.
| | 13:55 | There's the over state.
| | 13:56 | Back to up.
| | 13:57 | We'll go back to our main stage, or main scene, and again
now we want to connect that thumbnail with this container.
| | 14:04 | The instance name here is called "mycontainer".
| | 14:07 | So if I go look at the Action for the previous button, I can just copy
this "OnReleasemycontainer.Load Movie" and then print the season name
| | 14:17 | and path to the actual graphics.
| | 14:19 | We'll go ahead and copy that.
| | 14:21 | Come back to that thumbnail, reopen the Actions palette, paste
them in there, and we just need to change this to "picture04"
| | 14:28 | because of the naming conventions that I've been using.
| | 14:31 | Great. Let's go ahead and test the movie- [Ctrl + Enter].
| | 14:35 | And then rollover, and then we click, and the larger one loads in.
| | 14:41 | So if we go back to the final file-- we won't save this--
| | 14:44 | and take a look at the file version, and you'll see
that we've got five thumbnails all hooked up here.
| | 14:54 | Test the movie-- [Ctrl + Enter].
| | 14:56 | All the rollovers are working, and as I click the
external file is loading into that placeholder container.
| | 15:03 | So if you've got the concept, there's actually a much more
advanced ActionScript that you can use to control a lot more
| | 15:10 | of how this graphic loads into the container.
| | 15:12 | If you know what I'm talking about,
there's a class called the movie clip loader class.
| | 15:17 | I'm not going to cover it in this particular movie, but as you get your
feet wet and get comfortable with this whole concept of bringing files
| | 15:24 | in externally, you might want to do things like
animate the entrance of that movie at a pre-loader,
| | 15:30 | just if it's a really large file, things like that.
| | 15:33 | In another chapter, I'll actually give you an example
of a file that someone has created for you to play with.
| | 15:39 | So if you want to see a more complicated example of icon-load and so forth,
take a look at chapter 10, and you'll get a better idea of what's possible.
| | Collapse this transcript |
|
|
10. Loading External JPEGs on Steroidsphoto gallery from Airtight Interactive| 00:01 | >>So in Chapter 9, we learned how to load
JPEGs externally into a containing SWF file.
| | 00:06 | I mentioned that as you get more advanced, you can
actually do all sorts of crazy things with that same concept--
| | 00:14 | things like controlling the animation and
loading behaviors and things like that.
| | 00:18 | Well, I made a reference to an example, something
that a web design shop has done out there.
| | 00:22 | The name of the company is Airtight Interactive, and they've created this
cool little slideshow utility, all done in Flash, called SimpleViewer.
| | 00:31 | So in your class files folders, if you've elected to
download those, Chapter 10 has something called SimpleViewer.
| | 00:37 | It will open up that directory, and my version of what I've
done with their utility is in SimpleViewer_Mike.
| | 00:46 | What you download is some information about the
companies and the "About SimpleViewer" folder.
| | 00:50 | Let's go take a look at that.
| | 00:51 | There's a link here to the Airtight Interactive
webpage- SimpleViewer.htm.
| | 00:56 | Go and double-click that, and that will
take us to that page in your browser.
| | 01:02 | And this just gives you a highlight of what SimpleViewer is.
| | 01:05 | You can download it, download the files, and customize it yourself.
| | 01:09 | Let's go take a look at what this thing actually is.
| | 01:12 | So you can see it's a very dynamic user
experience for viewing a folder of images.
| | 01:18 | You got some nice animation here, some nice
interactivity, some nice rollovers here.
| | 01:22 | As I move my mouse in the larger image, I get
an overlay for navigation, so I can just click.
| | 01:28 | Now I can just click in the corner, and it knows not to show
me the arrow anymore unless I move over to the other corner.
| | 01:33 | So I can go before and after, back and forth.
| | 01:37 | I can also use the arrow keys on my keyboard
to just go the next and previous image.
| | 01:43 | Watch what happens when I go even further.
| | 01:45 | That whole column of thumbnails shifts
over, which is kind of a nice effect.
| | 01:50 | So anyway, the idea is that they've generated a SWF file and a text
file for you to change to customize this and use your own images.
| | 01:58 | So, AirtightInteractive.com in the utilities is SimpleViewer.
| | 02:01 | Let's go check out how to customize this for your own images.
| | 02:05 | So we'll go back up a level here, and in this SimpleViewer_
Mike directory, this is basically what you would download
| | 02:13 | if you download the SimpleViewer yourself.
| | 02:15 | There's an images directory and a thumbs directory, and
that's where you would put your own images and thumbnails.
| | 02:21 | There's a SWF files that you can't modify, that's all kind of wrapped up
and contained, but there's the text file that will open up and show you how
| | 02:28 | to modify some of the properties here.
| | 02:30 | The rest of the files in this directory are a webpage that contains
the Viewer.SWF, and then some things like Flash text icon
| | 02:37 | to let the user know that they do need to have the
Flash player in order for this to work correctly.
| | 02:41 | Let's take a look at the images and thumbnails directory
because there's an important thing to notice here.
| | 02:46 | Open up the images and go ahead and open up the thumbnails as well.
| | 02:53 | And what you should notice here is that
the file names are exactly the same.
| | 02:58 | Okay? You'll have a large version for
your large pictures, your pictures folder.
| | 03:03 | Your thumbnails will be some cropped
version as well- whatever pixel dimensions you want.
| | 03:09 | But it's just really important that the file names match.
| | 03:13 | Two different directories, two different files-- but just
matching file names in order for this to work correctly.
| | 03:20 | So let's take a look at what I've done, to use my own images.
| | 03:24 | We'll go ahead and double-click on the index
on the HTML document, jump over to our browser,
| | 03:29 | and we'll reload this so you can see the loading behavior.
| | 03:31 | You can see my images fly in, and I can just start using my arrow
keys or clicking on the image itself to advance from image to image.
| | 03:39 | So this is very easy to get working for yourself.
| | 03:44 | Let's go take a look at that text file.
| | 03:46 | So there it is- "ImageData.XML"- and I've
already got it open in a simple text editor.
| | 03:52 | So here it is.
| | 03:54 | SimpleViewer Data-- these are where the properties for the entire document
are stored, and you can modify them so the maximum image dimension,
| | 04:02 | that kind of make sense, just how big can your images actually be.
| | 04:06 | My images are all a maximum height of 540 pixels.
| | 04:09 | If I make that number smaller, then the
images will be scaled down at run time.
| | 04:14 | You can change the frame color and the text color if you
actually like to have captions in the files later on.
| | 04:19 | But you can change the text color and the frame color.
| | 04:22 | It's defaulted to white.
| | 04:24 | The frame width is defaulted to 10 pixels.
| | 04:26 | Let's go and change that to 20, let's say.
| | 04:28 | Stage Padding is how much space between
the thumbnails and the large picture.
| | 04:32 | Let's leave that at 50.
| | 04:33 | And then you can change how many columns or how many rows of thumbnails.
| | 04:36 | I'll just change that to three columns and two rows.
| | 04:39 | The navigation position can be left or right, and the
navigation direction can be left to right, or right to left.
| | 04:46 | You put RTL if you wanted to switch that.
| | 04:49 | We'll go and leave those alone.
| | 04:51 | Then you'll see that the rest of the document is just an image
tag for every image that you want to load into the viewer.
| | 04:56 | This automatically takes care of both
the thumbnail and the large-sized image.
| | 05:01 | That's why the file names need to be the same.
| | 05:03 | So you only have to enter the name in once between the nametags, and
then if you want, you can put a caption in for each image as well.
| | 05:10 | So for this image, we'll just type in, "Isn't she cute?"
| | 05:15 | Go and save that file.
| | 05:17 | Come back to our browser, and just refresh this and you'll see that we've
just modified the entire experience-- the frame width is now 20 pixels.
| | 05:27 | There's three rows and two columns now, and I've got a caption here.
| | 05:30 | And everything else still works.
| | 05:32 | So a very nicely done way to kind of see what you
can do with the ability to load things in externally.
| | 05:40 | And again, you're free to download it yourself.
| | 05:42 | Just make sure that you leave the credit to the developers here.
| | 05:47 | This is a link that takes you back to their website where other
people can then download the SimpleViewer and use it themselves as well.
| | 05:52 | Anyway, hopefully, that at least inspires you to
see what can be done, and hopefully you like that.
| | Collapse this transcript |
|
|
