02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoNext Video

Touchable

This is our first class that walks away from our inheritance line we are now creating an object that is touchable but is not part of our in hesitance line. with it this object has the same features as do our cat and dog objects.

this new object that is being created is our first step into polymorphism.

Video Transcript

00:00Alright, so last we left off, we had a cat that would get annoyed at us when we clicked
00:05on it, and a dog that would be really happy when we wagged still.
00:09We want to add in another element, and I gotta say thanks and props to openclipart.org because
00:15I got this cup and this kind of cool fire from there.
00:18I did a little bit of tweaks on it, but not too many tweaks.
00:23And I left the original source files, original art inside of the source files, so if you
00:28want to grab the original art, you could play with it as well.
00:32Or just go to openclipart.org and find whatever art you want, it's a free resource that you
00:38could use for whatever things you want, and there's kind of cool stuff in it like this
00:42cup of water, which I deleted a few things out of it to make it more usable inside of
00:47Flash.
00:48Alright, and I turned it into a bitmap.
00:50Alright, so let's start working.
00:52What I want to do is, so far we worked with the cat, we worked with the dog, both of
00:55them were playing with their touch function, and I want to create a cup with a touch functionality.
01:01And after that, I want to extract that click event that we have inside of our cat and
01:06dog and move it into our main class, because what I want to be able to do is I want to
01:10be able to control the cup, the dog, and the cat using the same code.
01:14And that might sound crazy, and it is, and it would definitely not be possible with
01:19inheritance alone, but it definitely is possible using interfaces, and we're going to see
01:25how that works.
01:26And the idea of an interface is really to cluster different types of things together
01:29that don't have a direct relationship with each other, you know, a cup and a dog are
01:34not the same thing, but a cup and a dog are touchable.
01:38And that's our relationship between them.
01:39So we won't be able to do an inheritance for a cup and a dog because there's no real
01:42relationship between them, but we could definitely do something that's called an interface between
01:47them.
01:49So let's see it in action, and then we'll explain the theory behind it.
01:52We'll start first by creating this cup of water that is touchable, and start to integrate
01:57it into our functionalities.
01:59So I'm going to start off with creating a new class, oops, not open, file new, and I'm
02:06creating a new class inside of our polyfirmism folder, so that would be a com.zero2geek.op.polyfirmism.cupofwater.
02:19And we created the file, I'm just going to save it.
02:21I'm going to make sure that it's going to be inside of our folder, polyfirmism, cup
02:26of water.
02:27Now, cup of water is going to extend a movie clip.
02:32Extends.
02:39Beautiful.
02:40So our cup of water extends a movie clip, and really the main reason is because our
02:43cup of water is a movie clip.
02:45We have a timeline here.
02:47If we click into it, we'll see that I created a timeline of 40 frames, and our water gets
02:52drained down in those 40 seconds, in the 40 frames, excuse me.
02:56Alright, so my next step now that I have a cup of water is I really want to create that
03:00function touch.
03:01It's not going to override anything, we're just going to create a new public function,
03:05so that it's going to be a public function, not publuc, public function touch.
03:16Now the public function touch, we'll keep it simple.
03:19What I want to do is I'm going to create basically, what I want to do is, in my touch,
03:23whenever touch is called, I want to know exactly in what frame I'm in right now in the movie
03:27clip, and how many frames are left.
03:30Now it's quite easy to find out how many frames are left and what frame we're in.
03:34We could use the movie clip's property, current frame.
03:38And we could also use the movie clip's property, total frames.
03:42Now total frames and current frames is going to tell me what frame we're in, so right
03:46now we probably want to make sure that we're actually connecting our class to this, because
03:51right now it's not even connected to our cup of water.
03:54So I'm going to connect it to our cup of water.
03:57Now one thing that I want to do is before, okay, let's first connect it.
04:01So we're going to go into our library, find our water.
04:05Where's our cup of water?
04:06Oh, here we go, cup of water, properties.
04:13And I'm going to just export it to action script, and I'm going to make sure that the
04:17base class is cup of water, and I'll just call it L cup of water.
04:24And that's okay.
04:26And now it should be connected, now we should get that tracing.
04:29We should be getting 40 frames, which is true, and we were at frame one at the beginning.
04:34So this is perfection.
04:36All that's left for us is maybe to create a stop here and maybe randomly select a couple
04:41of frames between, let's say, 5 and 10 frames as long as it's less than the total
04:46amount of frames.
04:48And the idea behind it is really what we want to do is we want to play, but we want
04:53to play it only for a certain duration of time.
04:56Now because we know our frame rate, our frame rate is 24 frames per second, we could gauge
05:05this and kind of like more or less let it play until it reaches that end frame.
05:11So what we could do, and there's a lot of ways we could play around with this, but
05:15let's try to keep it to the simplest that we could.
05:18What I'm going to do is I'm just going to create here, I'm going to just whenever
05:21it's touched, we're going to start playing.
05:26And the only thing that's left for us to do is to make sure that we stop it.
05:29So we're going to set here an interval or set timeout maybe.
05:34And let's just start with something simple.
05:35So we're going to call the stop function automatically after 250 milliseconds pass.
05:44And that should, let's see what happens if we do this.
05:50So first of all, we're, okay, we're calling the timeout, but we need to import it.
05:54So let's make sure that we're importing it.
05:56All right, let's run it one more time.
06:07There we go.
06:08So for 250 milliseconds, the water starts draining down.
06:11Now obviously one problem that we have is we need to have some sort of a way to know when
06:16we reach that last frame, even if we do start playing.
06:19But first of all, we want to make sure that we don't even start playing if we're already
06:23in that last frame.
06:25And that's quite easy for us to check.
06:26We could check if our current frame equals total frames, then we don't want to do anything.
06:35So if it's not equal, then we should be good.
06:38And then we could start playing and we could add this timeout, making sure that no matter
06:42what we stop after 250 frames, sorry, 250 milliseconds.
06:47All right, so just for the sake of our example, let's just connect it for a moment with a
06:53click event.
06:54So I'm just going to copy one of the click events that we have in the animal itself.
06:58And I'm just going to create a new on click method.
07:01So I'm going to not touch it automatically, just create an on click, I'm going to create
07:05your private function.
07:15So it's going to be a mouse event, not a mouse, but a mouse event, but slow tonight.
07:27Yep, my brain is not connected to my head right now.
07:33All right, so whenever it's clicked, we will just call the touch function.
07:39This way we don't have to republish each time.
07:42So right now we're doing good, right?
07:43If we click on our cup, we're going to be able to drink a bit and a bit more and a bit
07:46more and a bit more.
07:47But our only problem is, is that we're going to start all over each time when we finish
07:50drinking and we really want to have a way to know when we reach the bottom of the
07:54cup and not continue onwards.
07:56And that's exactly our next issue that we're going to try and solve.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!