hey there this is Jonathan and in the
following tutorial we're gonna take a
look at this interactive Bilbo and try
and make them work so the first thing
that I want you to be able to look at is
the fact that I have a bunch of
different buttons over here if you click
on the button you'll notice that I've
given it to the stop hat and the stop
are the play hat button I've already
given them instance names but if you
click on other buttons you'll notice
that they do not have instance names yet
and those are something that you'll need
to provide now do be aware that I do
have text in front of these buttons so
you don't want to accidentally click on
the text because you can't give an
instance mean you also don't want to
click and drag on both because then it's
mixed and you can't provide an instance
name to that as well you just want to
click on the button itself so that's the
first thing to know now the next thing
is how Bilbo the animation is created
now I but I have a bunch of different
dumb animations that are inside here and
some are on the main level in some are
inside other movie clips on the main
level you'll see I have the Bilbo body
movie clip then I have a right foot and
a left foot or this is a left front foot
and a back right foot and a back left
foot and these are all individual movie
clips that have already been given
instance names and then we even have a
shadow most of the animations are inside
their own independent timelines like
this one for the shadow we have the same
thing for the feet each one is its own
independent timeline that means that we
can stop that one timeline and not stop
others inside the Bilbo animation that's
the body if you double click you'll
notice that I have a hat which is an
independent timeline you could double
click again go inside and see the hat
animation there and then I also have a
tail let me go back there we go I also
have a tail which is its own independent
timeline but the body of Bilbo is
animating in this particular timeline so
we've got a bunch of different nested
timelines that we're gonna have to deal
with with our code let's begin to add
our code by going to the first butt
that's the stop I'm hat button and let's
bring up our code window with f9
alternately you can go up to window and
choose actions up here now since we have
that button still selected the stop hat
button we can go to our code snippets go
to html5 canvas and we want to double
click on the mouse click event handler
to write our first code now as soon as
we write this code I want you to notice
that it automatically created an actions
layer for us and one of the things I
like to do is lock that layer the reason
why is because that way you you don't
put any content on that layer other than
code and even if the layers locked you
can still add code to it then we can
hide our snippets because we don't need
it anymore and let's take a quick look
at this code now one thing about this
code is that we want to also pin this
script and the reason why is if I click
on other things you'll notice that it
takes me off of that code I can always
go back to the top here and see it but
if we pin that script by going over here
now it stays active on that even if I go
and click on other items and I really
like that about pinning scripts let's
now remove all of the extra code or
comments from our script and take a look
at what we're left with the first part
that we have is what's called our event
listener and we are referencing a button
that we're adding an event listener to
and that the type of event is a click
and then we're asking it to run a
function when we click on that
particular button so we want to name our
functions so we can easily refer to them
later on
since stop hat is our button name I'd
say stop hat would be a good function
name so I'm gonna copy that and paste it
so that what I'm binding is the function
name right here and then that has to
match the function name for the function
below in this function what we're going
to do is run some code to stop that hat
so we need to find out where the
location is the beginning of this of
locating something is always like this
this means start with the timeline that
the code is currently on since the
timeline is the main timeline now I can
click on the object that I want to go
inside of find out what its instance
name is copy that name and paste it
after this so means starting from the
main timeline go inside of the build the
body underscore MC movie clip and now
let's find the object inside of there so
I'm gonna do a dot double-click inside
of my movie clip and then find the
instance name of that object which is
hat underscore MC and we could just type
this in as well you just want to make
sure that it's not wrong because
anything that is inconsistent here if
it's not an absolute you know reference
it won't work it won't be found after
you put in the name of your object you
do hat dot underscore MC dot and now
we're gonna we know we want to stop this
one so we'll do stop and we'll put in
the parentheses at the end which tells
this to be a function or a method now
we're ready to go ahead and duplicate
this code all of it so copy it all and
paste it below and we're gonna change
everywhere it says stop to play so this
will be the play hat button and that
will run the function called play hat
and the function here has to be also
called play hat we're making sure that
they're consistent and then we want
instead of stop as our function we want
play now since we have two event
listeners and two functions one thing
that we might look at doing is just
organizing our code in a little bit more
efficient way and maybe putting our
event listeners with each other and
maybe our functions with each other as
well now if you're not happy with that
you mean you can put your event
listeners below you can put your
functions at the top it doesn't really
really matter I like it when I stack
them together
find easier to read another thing that
we can do is if you have any spaces here
you have extra you know stuff that's not
perfectly formatted or or even added
some extra spaces go ahead and get those
things out of there and then I like the
function over here at the top right - to
format the code and it just reorganizes
it a little bit and you'll see one of
the things it does is put the curly
bracket up on the same line with the
function name instead of being on the
line below doesn't really matter it's
just six and one half dozen or the other
but I tend to like it in this format
anyway let's go ahead and save your file
at this point before you go on and when
you save go ahead and add your name to
it and then we're ready to test this to
test this movie you go to control test
movie there we go test which is control
enter that works and you'll see that we
have now created that output you click
on the stop hat you'll see the hat has
stopped and play hat and the hat is back
to playing so that looks really really
good we're getting it to work just as we
expected now if you're not getting what
you expected for example let's say that
I have something wrong in here
such as I'm missing bilbo body
underscore MC then when I test this
thing with ctrl enter bring it back in
if you notice that something is not
working what I would always do is go to
your inspect panel go to your console
and see what error you're getting and
this one says cannot read property hat
underscore MC of undefined what that
means is that there's something that I
have typed wrong in that particular area
right here and what's happening is it
can't find hat because I'm missing the
underscore MC from the bilbo body that's
always important to know how to
troubleshoot a little bit now before you
finish the rest of the file one of the
other things that I do want you to do is
let's go to the publish that
so you can click and go all the way to
your desktop or to your stage and you
can do publish settings here or you can
do file publish settings and one of the
things that I like to do is Center the
stage and you can even make it
responsive which means that it will
scale as you scale back your object
which I really like now there's some
other things in here about you know
advanced properties including your
JavaScript in your HTML there's a whole
bunch of different things this is kind
of nice because what it does is it gives
you one HTML file instead the two if I
look at the folder where it's output the
files here's the files that were output
when I publish this and I'm gonna take
out both of those so I can republish
this and I've included the JavaScript in
the HTML and what this means is that
when now when I hit OK or publish or I
do ctrl enter same thing you'll see that
my animation now is in the center and if
I scale this window you'll see that it
scales the animation as well really
really like that so it's now become a
responsive animation and if I go and
look at my code you'll see now
everything is in one file instead of it
being in two separate files just
something that's kind of nice to do
anyway let's go back to our code and to
finish this what you're gonna do is
you're gonna make duplicates of these
functions and event listeners and
function pairs and you're gonna add in
your feet stopping and playing the feet
and then stopping and playing all now to
do this I'm going to just start to
create the function for the foot so
we'll say function this will be the stop
eat
so to begin what I need to do is find
out what the first foot is called so I'm
gonna find that movie clip and I want to
start at the main timeline so let me
pull this up just a little bit the main
timeline where I'm currently at and then
I need to find the name of that foot and
and I think that's it because I don't
need to go inside of it I just go inside
of it one time and I stop it then I can
add another line for the next foot and
the next foot and the next foot each
time changing the object that's being
referenced to the instance name of the
timeline that I'm trying to stop so we
can add as many things as we want to
that function and then of course with
the play all we also want to stop the
Bilbo body itself and the pink hat and
the tail and the the tail and the pink
hat are individual movie clips that are
inside the body so that's going to be
more like this particular targeting
where we went inside the body and found
the Hat so good luck let me know if you
have any questions and when you're done
go ahead and save it with a new name so
you know that it's now done and publish
your output centering it and making it
responsive thanks