Tip:
Highlight text to annotate it
X
Hi, in this video I thought I'd go over importing graphics
from Illustrator and if I can dig around and find one from Photoshop.
I'll show you how to do that as well. I think that
for a number of projects.
Being able to import from another program is helpful.
Be familiar with using Illustrator or Photoshop rather than drawing.
In flash, so let me go over into Illustrator.
here I've made a graphic of a byplane here.
And I've done a couple of things here that are going to
be helpful once we bring this into Flash
Notice that over in the layers pallet
we need a couple of different layers, I made kind of a fuelsolage layer
which I titled plane. I have a couple of prop layers
we are going to use to assemble into a movie clip so that the
prop appears to spin. If I
turn off these layers. Notice that here's one propeller.
If I advance the layer the propeller
seems to be moving and the entire
seems to be moving and the entire
intent is that we will import those layer and they will come in as keyframes
and animate out that way. And then we have a cone which is just the
the front end of the plane. We are going to assemble all of the
those items as different library
items and then we are going to put them together into one movie
clip which will be a plane movie clip. So let me
close this and we'll move over into Illustrator
sorry into Flash. Let me just save
this to a location cause I don't want to hunt around for it on my drive
so I will save this to the desktop.
So that I can find it.
Ok, and then over in Flash
I'm going to go to our library and
if you have read the chapter on symbols you'll know that
as you make symbols they appear in the library. Why is this helpful?
First thing to remember is that the library make this
globally editable I can go in and edit in the library.
and everywhere it is used it updates. That's cool.
But what is even cooler is that everytime that you use an instance of a symbol
it doesn't take the same amout of memory as it would to make a copy.
of all of the stuff that makes up that symbol
you are just using an instance so the file size in flash is quite a bit
smaller. So if you are in the habit of copying you know option+copy
or drag copying or whatever. I you are using
a repeated graphic element even if it's just a graphic
get in the habit of putting it into the library and then pull it out of library
and use it on the stage instead. Anyway,
let's import that so I am going to choose file>import
and I am going to import this directly to the library
and conviently it takes us to the desktop
of course you would search around and find your graphic file
here's that graphic. And when
you import to the library you get this big dialogue
box that says what letters do you want to import?
Now you could import the whole thing and it would come in graphic item
in Flash and it would come in only on a single layer in flash.
But instead of that, I am going do I am going to
just import the plain layer to begin with.
And it's going to come in as a single Flash layer.
and notice that it comes in and it
is just titled Byplane A on it
it's little symbol here indicates that it
is a graphic and that's ok. Let me open this up a little bit.
so that we get a bit of a preview. If you want to rename these which makes
sense you can just right click or control click choose
rename and I am just going to call this plane.
I am going to import the next
group.
So I am choosing the same file again.
And this time I am going to import
and instead of having it be Flash layers you can
have multiple Flash layers or single Flash layer but I am going to choose keyframe
You will see what happens here as I bring it in as keyframes.
Now this time when I bring that in I have this
prop and notice that the icon for it is a
movie clip instead of a graphic symbol and that's
a good indicator that I've brought in keyframes.
I am going to go ahead and rename this.
Just call it prop and we can
play the little movie clip and preview it here.
And it just appears to turn cause I made those little things
just like I showed you in the layers. And what's cool is that it now
appears to be turning through time and you'll see here
in a second why that becomes really cool. Finally I am going to choose
file>import again to the library.
And I am just going to bring in that cone.
So we will just turn off everything else
except for the cone.
And this time I am going to bring it in just as a
single Flash layer.
And it comes in one more time and notice it's another graphic
symbol. I will just rename this cone.
Ok, now here's a
good example of what I am going to do next is make
a new symbol a movie clip symbol and it's going to have a movie clip
inside of it and this a great reason why you would have movie clips inside a
movie clips. This little guy will be the rotating prop
part of it and you will see here in a second. So I am going to go under
insert and choose new symbol.
And I am going to call it byplane
It's going to be a movie
It's going to be a movie
clip here. Just push ok
when you start editing a
new symbol you get this little registration point. This is the point
that is used on the stage to reference it's
the movie clips x and y position
In order to keep things sane
I usually like keeping this in the upper left hand corner of the movie clips
but it is not critical but if you are
trying to do that it might get a little hard to put this together.
You know working off this registration point so I am going to go under view
and I am going to bring up ruler. I am just going to drag down
a guide on that goes along the registartion
point edges so that it's easy for it is easy to line things up and
make sure it is registered against this edge.
Notice that I am editing the byplane rather than
being in the scene. I am going to drag in these different parts.
So I drag in the plane part.
Put this up on the stage
Right up against the registration point
there we go. I can take the
the prop and drag that over and drop it
on top.
And finally we will take the cone.
And drag that in
I missed it here, there we go
and position
the cone so it looks correct. Alright
we get all this stuff in position and once were are set
we go back to the scene and notice that
if I take my byplane I can drag this onto the stage
now and let's just preview it.
I am going to go under control and test movie. And notice that I
have that little spinning propeller. So the spinning propeller
is inside the movie clip that's inside the plane. So why
is it helpful to have a movie clip inside of another. Because
now I can take this main
movie clip and move it around the movie clip inside will move
on it's own. It's kind of like the moon
rotating around the earth. If you were to try and get the moon to rotate
around the earth while the earth is rotating around the
sun and you did not have the earth to register the moon against
think about that, that would be a complex
spiraling rotation that would go all the way around
the sun. Instead since we just have the moon rotate around the
earth we can just make the rotation around the earth and then we take the earth
itself and move it around to make it go around the sun.
So now that I am saying this I am thinking I should have done that as a
animation. I am just going to move this off to one side.
make a motion tween. Let's extend it a little bit on the other side of the motion tween
we will just go across, maybe we will scale it down a little bit
let's look at the motion. And again one property of the movie clip is
you don't see the movie clip until you test the movie. So
if you noice the prop isn't playing right now that's
the way that it works.
I go to control and test the movie
and notice it appears as it's moving
across the stage the propeller is moving
independantly on its own. We don't have to get the propeller to rotate
on its own and rotate across the stage at the same time we just hook
it to this main movie clip and it will just follow along with
whatever the main movie clip is doing. So I hope this gives you an idea
first of all importing Illustration files and
then how you can use them. I just realized that I should
look at Photoshop stuff too. So why don't I
get rid of all this stuff and remove this tween
let's get rid of these extra frames.
So I am just holding shift and clicking extra frames
and choosing remove frames. So we are back to the stage here.
Let me detour into Photoshop
I am going to open up Photoshop
and I am going to edit a duck graphic
the two differences that you'll notice when you are working in photoshop
let me open up the doc you guys probably
have seen this graphic before
lets see, lets do a search for it
Ok, here's this duck graphic.
We are going to save this first one just to the desktop
Now what I am going to do is remove this background
so instead of having the white background to it let's use the
I'm going to use the magic wand here.
actually first turn this into a layer. There we go.
And with the white area selected I am just going to press command x to cut it out.
So this has a transparent background to it. I am going to save this as
And the first time I am going to just save it as a psd file with
the layer.
And I going to do another save as. This time let me choose
Now I haven't tested this in tiff with the layers as well.
Cs4 but in CS3 what would happen is that tiff files
Even if it had the background removed it would still come in with this white background
So let's see if that is still the case. So I am just going to jump back
Over to flash here and we are going to the
into the library just like we've been doing
And first of all ducky.jpg
So we import ducky.jpg notice it is just a picture file.
If I drag duck.jpg onto the stage ok
we see the duck is here. Now
I am going to change the stage color so that we can see whether we have a transparent background.
background or not. So lets just pick kind of a light yellow ok so you notice that
ducky.jpg has this white background all right
let's import another one.
This time I'll bring in the tiff file. This is the file that had the
erased background. Let's see what happens.
So we have ducky.tiff
Notice that even though it has the erased background in photoshop,
in flash it still sees that white as being opaque.
All right, finally let's import into the
library. Import the psd file.
Ah, Ha, so this is kind of
cool, we have something different happening with psd files. Notice
conveniently we also get a little thing showing us that there is going to be transparency
Great. So it is going to bring it in as a flash layer.
I am just going to press okay. Ducky.psd comes in
as a graphic. Instead of just a picture, an imported picture it comes in as a graphic.
A graphic symbol. So that
if I drop it on the stage it has that transparent background so important
Pretty cool, I can now some things with this since it is a symbol
do with it just before since it was just an image
There you go, so we have brought in some illustrator stuff brought in different photoshop
items you can see if you want. Non-rectangular photoshop items you can see if you want.
Non-rectangular photoshop items you can see if you want
graphics build them and save them as a psd file and then just remove
all of the content and you will have a non-retangular object.