Next is Winking at MovieClips
Taking a peak into the future. Now that we know what objects are we can peak at some visual objects - The MovieClip.
Video Transcript
00:00A nice way to summarize our schooling so far
00:04in the world of objects, which is really probably
00:07the most, well, it's the core.
00:11It's basically what everything in Flash is.
00:13Everything is objects.
00:15Because we're working really in a world
00:16that's an object-oriented world.
00:17If we choose to program in an object-oriented way
00:21or we choose not to, we're still working
00:23in an environment where everything is objects.
00:26And that's why it's really important
00:27to understand what objects are.
00:29Now, what I want to do is kind of in a nice kind of a little bit
00:34of a tease to show you what we're going to be doing
00:36in the visual lessons.
00:38I want to create a movie clip and create a text field
00:41and show you how those objects could be accessed
00:44and how we could look at their properties.
00:47So to do that, I'm going to go into my Flash CS5
00:51and I'm going to create a new movie clip.
00:53And to do that, I'm just going to create a new ActionScript
00:563 file, a new FLA.
00:59And then I'm going to draw something on the stage.
01:01And right now, you'll notice that there's only one layer.
01:05So I could, if I want to give that layer a name,
01:07let me just double-click on that layer.
01:09And I'm going to call it MC for Movie Clip
01:11because I'm going to place inside of it a movie clip.
01:14Now, before I could create my movie clip,
01:16I need to actually draw something on the stage
01:18and then convert it into a movie clip.
01:21So basically, initially, if I grab just one of my editing
01:25tools here, which, for example, this rectangle tool,
01:29I could create a little rectangle.
01:31Now, this rectangle is not programming.
01:33It's not accessible for programming right now.
01:36But to make it accessible, we have
01:38to do a few little steps here.
01:40The first step is actually to highlight our square
01:43and then go into our Modify, Convert into Symbol,
01:47Convert to Symbol.
01:48What that would do is it would convert it into an object.
01:52And as we said before, by converting it into an object,
01:56we're making it accessible for Flash to code.
02:00Now, movie clips have a lot of other properties,
02:02a lot of amazing properties, which
02:03will go much in depth in them in future courses,
02:07but not part of this basic training course.
02:11But just if we just look into it
02:12and we just convert our symbol and we make sure
02:15that our type is Movie Clip, we
02:16don't want to have any other type right now selected.
02:19So make sure that it's a type.
02:21And let's give it a name.
02:22We'll call it MC Sample.
02:26Like starting my definitions with an acronym,
02:30or some call it a Bulgarian notation, which basically means
02:34just taking, if it's a movie clip,
02:35just calling it MC to make it easier for us
02:38to see that it's a movie clip.
02:40Because there's so many different objects
02:41and we're going to place them in our library, which
02:44is something that we haven't gotten into as well.
02:46But our library basically stores all of our visual elements
02:50that were created on the stage.
02:52And it stores also other elements,
02:54such as external assets that we added into our library,
02:57or music files, and so on.
03:00But let's focus right now on our movie clips.
03:02I'm creating a new symbol.
03:04And this new symbol is a movie clip which I'm creating,
03:06which I'm calling MC Sample.
03:08Now, we have to make sure that we understand
03:10the difference between our MC Sample,
03:12which is a library asset, and a movie clip
03:16which is on the stage, which are two different things.
03:19So if I create my movie clip, my movie clip
03:23that's on the stage doesn't have any name.
03:25Although its definition is that name
03:28that we just gave before, which is in a way,
03:30it's kind of its blueprint, its creator.
03:32And the way we could see that if we just go into our window
03:35and select our library just to open up our library,
03:38you can see I have a little shortcut here.
03:41You could see that I have a movie clip, which
03:43is the name is MC Sample.
03:46But if I wanted to, I could have dragged out of the library
03:48duplicates of that symbol.
03:51So I've created now a blueprint,
03:52but I could grab that blueprint and duplicate it
03:55and create as many blueprints as I want.
03:59So I've created now three duplicates.
04:00Now, all these duplicates don't really have names.
04:03And to prove that, we could just go into the Properties panel
04:06and you'll see in your Properties panel
04:08an area dedicated for the instance name, which
04:11is basically our variable name, which
04:13we've met before for objects which weren't visual.
04:17So if I wanted, for example, to let's say
04:19we'll select the first rectangle,
04:22and I'm going to go to my Properties panel
04:24and I'm going to call it MC.
04:27I'm going to type Enter just to make sure that it got in
04:30and my variable name really is MC.
04:33So now I have one variable here, one movie clip,
04:35which is called MC, and two movie clips, which I didn't
04:37give them a reference name.
04:39So I can't access them via code, right?
04:43Now, let me lock this layer where all my MCs are,
04:46and I'll create a new layer by clicking on the New Layer
04:49tab.
04:51I'm going to do all the coding inside here.
04:53We're not going to go out into the class
04:54because we don't want to make it more complicated right now.
04:58And I'm going to double click on my layer,
05:00and I'm going to rename my layer AS because I'm
05:02going to put all my ActionScript code directly
05:05into the layer.
05:06As we've said before in one of the earlier videos,
05:08we usually don't want to do this,
05:10but just for the sake of this example,
05:12as we're kind of like jumping into a topic that's
05:14a bit further away from us right now.
05:16So I'm going to select that keyframe, which
05:19is the first frame, this empty frame in my layer,
05:23and I'm going to go into my Window Actions.
05:26And an Actions panel will open up,
05:28enabling me to type my code, which I want to type.
05:32Now, I know that I already have a variable on the stage which
05:34is called MC, which I could prove that by just tracing out
05:40MC and seeing what would come back.
05:42So if I run the application now by hitting the command
05:46Enter, we're going to see that first we
05:49see our visual elements that we put on the stage,
05:51and we see in our trace message, we see in our output,
05:54we see that we have there an object, which is a movie clip.
05:58We have a movie clip object.
06:00Everything is an object.
06:03So now that we know that we have our movie clip,
06:06let's see if we could actually do something
06:08to that movie clip.
06:09There's a lot of things that you
06:10could do with movie clips, and the easiest way
06:12to figure out what those are.
06:14And I'm just going to just show you
06:17what the really easiest way of doing it.
06:19Usually, you just double click on the definition
06:22of the word of the class, of the creator,
06:24even though we didn't create it ourselves.
06:26We know it's a movie clip.
06:27And it's camel case, starting with M,
06:30and then the CSUpper case.
06:31And then we could just click on the Help.
06:33Excellent.
06:34So CS4 would take us to the browser, but CS5 doesn't.
06:38So in CS5, let's look at our movie clip.
06:42So if we look at our movie clip definition,
06:43we're going to see that its inheritance chain goes
06:46through a lot of interesting things.
06:48It implements a lot of different things.
06:50And basically, inheritance chain basically
06:52means that the properties and methods
06:55that we had in our object are then passed over.
06:58Oh, sorry about that.
07:00Update later.
07:02The properties and methods are passed on, and passed on,
07:05and passed on.
07:06And all these different properties
07:07are being passed on all the way up to our movie clip.
07:09So our movie clip would then have
07:11all the properties, all the basic properties
07:13that we saw for our object, because it inherits its
07:15properties from the object and so on.
07:19But let's just look at a few properties
07:21that our movie clip has.
07:23So if we just scroll down, if it's in the browser
07:26or if it opens up this cute little AR application,
07:31you're going to see that you have quite a lot of properties
07:33in here.
07:34And we're not going to dig into all these properties right now,
07:37but there's a lot of properties.
07:39And you could always go into these places
07:41and tinker and play around and figure out
07:43what properties are there, and just play with them
07:45and see what happens.
07:47But that's all I really wanted to say about referencing
07:49to the documentation at this point,
07:51because it is really early on in the process.
07:53So let me just delete this.
07:55And let me just show you one property that I know of.
07:58And it's called scaleX.
08:04And scaleX, we will give scaleX a value.
08:07And the base value of scale, which is basically
08:10we'll scale our movie clip to its x and its x-coordinate.
08:14So well, x would be in that way.
08:17Its default is 1 in ActionScript 3.
08:20So if we wanted to make it two times bigger,
08:22we could have set it to 2.
08:24If I run my application, now we're
08:25going to see that our movie clip was going to be two times
08:28as big as it was originally.
08:30And we could do the same thing with the y-coordinate.
08:32So if we wanted our MC scaleY, if we wanted to,
08:38we could have said we wanted to be half the size
08:40that it originally was.
08:42And if we run our application now,
08:43we're going to see that it's going to be not as high.
08:46Now, let's get another couple of quick properties.
08:49Because then these are really simple things that are really
08:51just down to now that we understand this relationship
08:53that objects have properties and methods.
08:56And as we evolve and we go into more advanced topics,
08:59and if this isn't very clear, don't worry about it,
09:02because we're going to get back into movie clips.
09:04And we're going to invest a lot of times in movie clips
09:06because they're the heart of Flash.
09:08And that's going to be in a future topic in future courses.
09:13So right now, if we go back to our MC,
09:15we could check, for example, we could move our x position.
09:18So currently, well, let's see first, what is our x position?
09:21So if I trace out my mc.x, let's also trace out my mc.y
09:28if we're already doing it.
09:29And we could run our application.
09:31We're going to see that our movie clip currently
09:33is positioned at position 14 and 62.
09:36And if we wanted to, we could have even
09:37seen it through our properties panel.
09:39Just toggle that down for a second.
09:43I'm going to unlock my movie clip layer and select it.
09:46And go to my properties panel.
09:47I'm going to see that my x position is 14
09:50and my y position is 62.
09:53So we see that it's accurate.
09:55We're getting the right results from our actions script panel,
09:58from our trace output.
10:00Let's just change our x position.
10:01Let's change our x position, our mc.x.
10:04Let's change it to, let's say, 0.
10:07Let's just flush it to the top.
10:09And we're going to do the same thing for our y.
10:11We're just going to flush it all the way to the top.
10:14Now, if we run the application, we're
10:15definitely going to see that it's repositioned.
10:17But let's also just copy this trace again
10:19right after we did that.
10:22Now, if we run the application one more time,
10:24we're going to see that it's all flush to the top.
10:26And we'll see that, although before it was in 1462,
10:29after we made our changes, our movie clip then
10:31became flush to the top.
10:34OK, so this is all I really want
10:35to talk about related to visual objects right now.
10:38And it's kind of a bit of a tease.
10:40And I do encourage you to play around with it
10:42and just tinker with it and look at the help panels
10:46and look at the different attributes
10:48that our movie clip has and just explore them.
10:52Nothing bad could happen.