Tip:
Highlight text to annotate it
X
In this movie I'm going to explain how to make functions modular. By the word modular
I mean reusable. In this swf file I'll demonstrate what that
means to make a function reusable. If you'd like to follow along, this is in the
chapter 03 folder of the Exercise Files and it's called ModularFunctions.swf.
In this example we have a function that's a block of code that will rotate and move
an object. We don't put boarder and snow inside of that
box but rather I'm going to click and drag boarder
to the run function on section. So the function will be run on boarder
and it'll take the boarder value and rotate and move it.
Now I'm going to click to run function on button.
The boarder rotates and moves. I'll click the reset button and try it on
the snow. So click and drag the snow, set run function
on snow and watch the snow move and rotate. Now I'm clicking the reset button.
So this function is now a lot more useful because I can rotate and move anything I want.
I just say run the function on the boarder, on the snow, or whatever, and
it'll rotate and move that particular object. So now let's go into Flash to learn how to
write the code for this. So I'm going to close out the Flash player
and go into Flash. And this file is called Making_Modular.fla,
it's in the chapter 03 exercise folder. What I'm going to do in this file is just
drag a few instances of mcBoarder from the library
onto the Stage. Make sure you have the art layer selected.
There's one there, and then maybe one going down the slope.
Let's just rotate these slightly so they look like they're actually on the
slope. There we go.
Nice. And then I'll rotate this one as well. To
rotate it I press Q on my keyboard or you can select
the Free Transform tool in the toolbox. And that looks good. So what I'm going to
do is go to the Selection tool or press V on my keyboard. I'm going to select the first
boarder, and I'll name him boarder1_mcm and I'll name
the other boarders boarder2_mc, and then boarder3_mc.
And there we go. Now let's open up our actions panel. I'm going
to click on the first keyframe of the actions layer and press Option+F9 my keyboard.
It's F9 on the PC. And let's take a look at our moveBoarder function.
So if I wanted to run it now, I actually have to give a number instead of
boarder1_mc.y and rotation. So I'm going to close the Actions window
and looking at all the boarders safely in the snow.
Test the movie by pressing Cmd+Return or Ctrl+Enter on your keyboard
and the boarder is happily flying through the air.
Great. If I wanted to run this function on the other
boarders, I'm going to click on that actions keyframe
and open up the Actions panel. I could change boarder1 to boarder2 or boarder3,
but that really isn't the most effective way to do it.
What I'm going to do is when I run the function or when I call the function, same thing,
move boarder in line 7, I'm going to send in the boarder that I want
to move to the function. Remember we watched that movie a minute ago?
We said run function on. That's what we're going to do here. We're going to run the function
on whatever we want. What I'm going to do is click in
between the parentheses on line 7, and I'm going to type boarder1_mc. So when
I run the function, I'm going to send it to my function and then it's going to run
on whatever boarder I send in. I need to do a few more things to set that
up. If I'm going to send it from somewhere or
if I'm going to send it when I run the function, the function needs to receive that
information or that data. The type of data is a movie clip, and that's
very important. So I'm going to click in between the parentheses on line 1,
when we define our function. And I'm going to type boarder.
I'm not going to type 1_mc, I'm just going to type boarder.
This is going to be a generic name to represent whatever boarder we want to move. Then type
a colon and we're going to set the datatype that this
function will receive. So I'm going to type movie clip with a capital
M. When it's selected in the code hinting window,
I'm going to press Enter or Return on my keyboard. So we run the function in line 7, boarder1_mc.
We send a boarder1 to the function. The function receives the movie
clip and inside of the function it will be known as boarder.
So it doesn't matter what we send into the function, we're going to call it boarder inside
of the function. When I say inside of the function, I mean
between the curly braces or within the curly braces of the function.
And let's just erase the one_MC So it should just say boarder.y = 50, and
boarder .rotation = 45; The name boarder that we're using, and we
pass it in here as boarder movie clip, this is sort of like a variable that's known to
this function. So we're sort of defining a variable called
boarder, that's a movie clip and then we can use it inside of here.
When we say an equal to value, we set what the boarder is equal to when we send it like
on line 7. So in our function, we have boarder the datatype
is a movie clip equal to, in this case, boarder1, as specified in line 7.
So again, boarder is a variable that represents whatever we send in to the function.
So we're setting the y to 50 and the rotation to 45.
Let's just close the Actions panel and verify that all the boarders are safely on the snow
Test the movie and see the boarder flying through the air.
Now this function is reusable. Let me go back to the Actions panel by selecting the actions
keyframe and pressing Option+F9 on my keyboard.
Now if I wanted to run this function on all of the boarders, I could select the code on
line 7 press Cmd+C or Ctrl+C on my keyboard,
after the ; press Enter, paste the code by pressing Ctrl or Cmd+V on your keyword.
Then press Enter and paste the code again. Change boarder1_mc to boarder2_mc, and then
boarder3_mc. So this function will run on all of the boarders,
but first it'll run on boarder1. That boarder1_mc will be sent to the function
as boarder. Set the y to 50 and the rotation to 45. Then
it will run as boarder2. Set boarder2's rotation to 45 and y to 50,
and the same for boarder3. I'm going to press Cmd+Return to test the
movie. And they're all the top of the screen. Nice.
Well, what if I wanted them to rotate and move based on their current position?
So instead of going up to y of 50, and a rotation of 45, what if I wanted them to move
a hundred pixels up from where they are currently, wherever that is and rotate 45 degrees from
where the current rotation is? Let's do that.
So what I need to do to do that is go inside of the function. When I say inside of the
function, again I mean within the curly braces of the function.
And instead of boarder.y = 50 I'm going to say boarder.y
minus equals 50. So put a minus sign right before the equal sign, and that will subtract
50 from its current y value. And again subtracting is not going to make
it go down, it will make it go up. The zero position of y is
at the top of the screen, not at the bottom of the screen. So we want to subtract to go
up and add to go down. So let's add 150 so it will be a little bit
more obvious, and for the rotation, I'm going to click right
before the equal sign and I'm going to type a plus.
So it should say boarder.rotation += 45; That will add 45 to the current rotation value
of the boarder. I will press Cmd+Return to test the movie.
Notice they're all moved up to different heights. They moved up 150 pixels from where they were
presently, or currently at the bottom of the screen before we ran the
movie. When we run the function they move up 150
pixels and rotate 45 degrees. And that's how to make a function reusable.
If I wanted to make it reusable more, I could even pass in different values when
I run the function. Different values for the y positioning and for
the rotation. And so let's do that. I'm going to click after
the boarder:MovieClip on line 1, and then type a comma.
If I want my function to accept multiple variables or multiple properties,
or these are officially called parameters, I separate them with a comma. After boarder:MovieClip
type a comma then a space and then type movement, and this will be a variable representing the
movement amount, type a colon and then type Number with a capital
N, that's just the datatype that it's going to be accepting,
type a comma and then a space, and then we're going to accept the rotation amount. I'm just
going to create a variable here called rotation, capital Amt, then type a colon and
then type the Number with the capital N. Now the function will not only receive the
boarder, it will also send in the movement and the rotation amount so they can
change whenever we run the function. So I'm going to replace 150 after boarder.y
-= with movement. So it'll be whatever we send in. We haven't
sent in anything yet. We'll do that in just a minute.
Now we'll replace the rotation += 45. So select the 45 with rotation capital Amt.
So now what we need to do is send in a movement amount and a rotation amount every time we
run the function. So I'm going to scroll back in my ActionScript
code. And when I'm running the function in lines
7, 8, and 9, after boarder1_mc, I just type a comma
and it's just like we specified above, we separate the values by commas and datatype
in a number to represent the movement amount. So I can type in 150 for
this one and then a comma then the rotation amount. I'll just type and 45 for this one.
And now when we run it on 8 and 9, I need to do the same thing or else the function
will not work properly. Because when this function runs, it's going to be looking to
accept a movie clip, a number and another number
separated by commas. So we need to do that every time now.
So I'm going to type a comma and then pick a number like 250, and then another number
90 degrees, rotate it. Right after boarder3 inside the moveBoarder
function on line 9 type a comma, and then we'll move this 50 pixels type a comma and
we'll rotate it 180 degrees. Press Cmd+Return or Ctrl+Enter to test the
movie and notice they all move differently.
So now our function is completely reusable. I can apply it on any object I want and
it can do a different thing based on the values that I put in when I run the function.
So that is how to make a function modular. In the next movie I'll explain how to make
a function give back a value after it runs.