Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Customize your Cursor with Code Snippets (episode 43)

0 (0 Likes / 0 Dislikes)
[Adobe® Developer Connection] Hello there. In this video, let's take a look at how you can create your own mouse cursor using the code snippets panel. In this case I am going to start out with a new project. I've saved this as "mouse cursor," but there's nothing actually in the project. So let's create a new mouse cursor. Let's create this quickly with the drawing tools inside of Flash®. So let me just create a line here, create a line here, and just kind of sketch out a triangle, and let's then paste in some color into this. And use this. Let's go ahead and select red, and then paint into that. Okay. So there I've got my mouse cursor. Let's right-click this and convert this into a symbol. I'm going to call this my mouse pointer. I actually want to hide the mouse pointer that comes with the operating system-- in this case I'm on a Mac, so the mouse pointer is black-- and replace that with this custom mouse pointer that I've created here. You might have encountered a lot of websites that have a very stylized mouse cursor when you go in, when you're exploring the site. The code that we're going to use with the code snippets here will allow you to do exactly that. So I'm going to select the object here, and I can apply Custom Mouse Cursor. And you'll see it says, "Replaces the default mouse cursor with the specified object." I'm going to take this and click Add to Current Frame. You'll see that you have a notification here. If you remember, I didn't give this an instance name. That's actually one of the nice things about the code snippets panel, is if it requires an instance name, it can automatically generate one for me. So I'm going to click OK. You'll see that we now have some code that's been added here. In this case it's saying Custom Mouse Cursor, and this is going to replace the default cursor with the symbol that I just created. So let's take a look at the code and see how this works. So we're adding a new child, which is the movie clip that's been named. In this case it was named "Movie Clip 2. And it's saying that it's mouse-enabled. And this is false. The mouse event 2 is adding a new event listener--in this case, Enter Frame. And we're executing a particular function whenever we enter into a frame. It's going to position this based on the X and Y coordinate that's part of the stage of the mouse. Now, none of this action script we actually have covered in the past-- specifically, the mouse X and mouse Y. So let's just run this just to show you exactly what's going on. So I run this to see if I move my mouse, you'll see that the mouse no longer appears-- the normal mouse cursor. Instead, it's using this custom one that I've created. So let's explain some of the code that's going on behind the scenes here. Stage.mouseX -- this is accessing the X coordinate of the mouse itself, not the object if I was dragging it or something like that. In this case, it's specifically accessing the mouse pointer. We're going to position the object that we have selected-- in this case, the triangle object--and position that based on wherever the mouse currently is on the stage. And we replicate that again with the Y coordinate. You'll notice that we're doing this at Enter Frame, so every single time we enter a new frame into our project, it's going to execute this code. Now a lot of times you might have a certain requirement where you need to turn the custom mouse cursor off. The code snippet gives us the code in order to do this, and you'll see that that's listed here at the bottom: "To restore the default mouse pointer, uncomment the following lines:" So I can do this, this, this. So now you'll see that the code is actually restored. So as you can see, the code snippets panel gives me lots of different commands, in this case, to do very common actions like creating custom mouse pointers. In the next video, we're going to show how you can use the code snippets to really easily control objects using the keyboard arrows which, again, is something that we've never covered here. but the code snippets makes it easy for us to introduce new concepts into action script and then modify that to get the desired result. [Adobe® Developer Connection]

Video Details

Duration: 4 minutes and 47 seconds
Language: English
License: All rights reserved
Genre: None
Views: 90
Posted by: adobetv on Oct 21, 2010

In this video, Doug shows how to create a custom mouse cursor for your Flash Professional CS5 project using code snippets.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.