In this tutorial video we're going to
talk about how to work with color and
Adobe Animate CC in a previous tutorial
video we've learned that Animate CC
creates objects with strokes and fills if
you've worked with Adobe Illustrator
before you're probably already familiar
with this concept so fill is the
internal inside color of shape so right
now the fill of all of these shapes is
this kind of light bluish green the
outside color this black line is what
we call the stroke so any of the
outlines or strokes on an object are
separate thing that you can fill with
color now if we come over here to the
properties panel we can change our
stroke here so I can go ahead and change
this to deep red
I can even make it thicker and then I
can come in here and change the film so
if I wanted my film maybe this golden
yellow and then let's say I want to
change a couple of these other circles
well I can do it one of two ways if I
want to change the stroke on a circle
I can come over here to this little
paint bucket looking tool with this
additional square on it so even though
it looks like a paint bucket it's
actually called the ink-bottle tool and
the ink-bottle tool will change your
stroke so if I click on that it will
look at whatever the stroke color is of
the selected object on the stage and
then you can click on any other object
and change that stroke color notice that
it also increase the thickness of the
stroke because we increase the thickness
of this stroke so it really is just
painting the strokes appearance on new
objects if we want to change the fill we
would need to use the paint bucket tool
the paint bucket tool again is going to
look at the fill that is created from
the object that selected on the stage
and it will start painting that fill
color in different objects so working
with strokes and fills are the most
basic form of working with color and
Adobe Animate CC however there is also
the color panel the swatches panel and
the gradient tool that you can work with
so let's take a look at that I'm going
to undo all these different color
changes that we've made so we can kind
of start with this original look
OK
so I'll switch back to my selection tool
and up here in the color panel which if
you can't see you can go up to the
window menu and choose color same thing
with the swatches panel if you have both
of them open it's going to be easier
when you're working with color so right
now what this is gonna do is it's
choosing what my stroke color is my fill
color because my fill color is selected
when I go and change the color here it's
going to change the fill color if I
click the stroke and change the color
this way I can change the stroke color
so whichever button is pressed here is
the one that it's going to change in
addition when you're changing colors you
can choose through hue so that's
changing just by color saturation so how
saturated your color actually is and
then you can also choose for brightness
so if you know you want the shade of
pink but you want to be a dark pink or
you want to be a really light pink then
you can absolutely work that way you can
also work with RGB values and you can
work with alpha channel so alpha is the
transparency if I switch to my film
right here and let's say I change my
filter this really deep dark blue and I
move my object over here and arrange it
so it's sitting on top if I change my
alpha to a certain percentage notice
that I can see through that deep blue
fill but I can't see through the stroke
if I click on the stroke I can adjust
the Alpha this way and keep trying to
adjust
oh it's not working because it has
selected so anyway we can go ahead and
do that and now you should be able to
see the other objects through the stroke
and the fill because we mess with the
alpha let's go ahead and grab this
object again just to move it up here and
we'll bring that back to a hundred
percent so we can really see what we're
doing here you can also change the alpha
here
alright so a couple other buttons this
will switch the stroke ad the fill so if
you want to switch between those and
I'll go ahead and make it thicker stroke
so we can really see what's happening
here so we'll switch the stroke and the
fill we can also go back to the default
of black and white and switch to black
and white and then if
I want to make sure my fill is no color
I can choose no color and that looks
better if we go back to that purple and
blue so if I click no color it's gonna
remove the film if I click no color
again it's going to remove the stroke so
I'll go ahead and then do that but those
are those three little buttons right
there and again you can pick a custom
color here to work with and if you pick
a custom color here this is the
hexadecimal code so if you're working
with specific colors let's say for a
branded project then you can definitely
enter the hexadecimal colors in here in
addition you can double-click inside
each of these and come up with the
swatches panel which you can see down
here and these are helpfully organized
with different shades of grey the
primary colors and then different shades
of all the different hues they also have
a couple of gradients here which we will
talk about in a second if you want to
choose no color for the fill or whatever
one you chose you can click no color
here change the alpha and this is also
where you can type in hexadecimal you
can come to this bigger color picker
that were used to with like illustrator
and photoshop if you'd rather work with
this type of interface so when you
create colors that you really like so
let's say I'm going to turn this too
deep purple and this one will do kind of
that outside teal color when you work
with colors that you really like you can
add two swatches and it's gonna add
those watches into the swatches panel
the great thing about adding those
swatches into the swatches panel is
later on if I want to use those same
colors that are really easy to grab and
I don't have to look for the hexadecimal
or the RGB values or any of this kind of
information there just right there and
easily clickable so let's go ahead and
start talking about bitmap fills
and gradients we'll start with a bitmap
fill first if we choose a bitmap fill a
bitmap fill just basically means you're
going to use a bitmap image or a pixel
graphic to fill either the stroke or the
fill color of an object so if I choose
bitmap film I can go and look for a
picture so let's see what picture would
look good for this we will choose this
picture this a orion nebula picture
and click open and notice that because
the fill icon was chosen then it's gonna
fill that with the bitmap image I'll go
ahead and undo and if I select multiple
objects I can also choose bitmap and
it's going to put that bitmap object
into all of those different objects and
last but not least if I click on this
and change this to a stroke color and
choose bitmap fill then I can have that
are orion nebula in the stroke
instead of the fill color
OK so let's go ahead and undo that and
let's start talking about a gradient
I'll go ahead and remove this stroke
just so we can have a clean circle to
work with when you add a gradient you
can either choose from linear radial
unlike illustrator and photoshop we only
have two gradient options so I'll go
ahead and choose radial because I want to
make this look like a ball now when you
usually choose a gradient it will give
you black and white for your two color
options here
I've already messed with this gradient
so that's why it has this kind
of garish green and deep blue and it
doesn't matter what color is picked here
because you can always add or take away
or change things so if I double click in
here and let's say I wanted to make a
blue ball I can have light blue here and
leave this dark blue and if I wanted to
I could throw in another color here by
just clicking and then I can double
click each of these color stops and add
different colors into this object so if
I don't like those colors which I don't
cause they're hideous I can drag those
off and I think I added too many so
they're like stacked on top of each
other so there we go I just wanted this
plain dark blue light blue now if I like
this radial gradient and I'm going to
use it often then I can click to add to
swatches and it will add that radial
gradient swatch so that's really handy
if later on I want to come in here and
I want to choose this as my particular
fill color in addition if I click the
stroke color and click that it's going
to give me a radial gradient but you can't
really see it with this particular
stroke it works better when you have a
linear gradient so anyway so with this
radial gradient even though we can
switch these color stops and move them
closer together or further apart
whatever
it may be you can also edit this color by
going to this tool here it's called the
gradient transform tool and usually it's
hidden under the free transform tool so
make sure you look for it
the third button down so if we click the
gradient transform tool you can see that
the tool is going to show up on this
gradient and you can click the center
part of that gradient and move it around
so you can change the light source you
can make it squashed or wider so I kind of
like that and then I can also resize it
and then I can rotate it
however I see fit so that gives me a
much better looking ball that I can
maybe bounced around maybe it's a planet
whatever it may be
so you can manipulate gradients maybe
not to the extent that you can do it
with something like illustrator and the
gradient mesh tool but you can
manipulate some of the gradients and
Animate CC to get some great color so
that's the basics of working with color
and Adobe Animate CC we've covered the
stroke and the fill the ink-bottle four
strokes the paint bucket for film and
then how to switch between the stroke and
the fill add a bitmap fill and work with
gradients and the gradient tool so make
sure you practice working with color and
for sure add your colors to the swatches
so you can work smarter not harder