Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The bitmap class doesn't come with support for interactivity, like mouse clicks. In order to make an image clickable, you'll need to take a few extra steps. Now, think of the bitmap class in ActionScript just like a bitmap on the Stage. So, if I go to the library and I click and drag this boats image onto the Stage, like so, I select it, I can see that it's a bitmap in the Properties panel. So, when I work with a bitmap it's a little bit different than working with, say a movie clip or a button.
I can't give it an instance name, so I can't add things like mouse interactivity. So that's the same as it is in code. Let's go to the first keyframe of the actions layer and open up the Actions panel. So if I were to type bmp. addEventListener and MouseEvent.CLICK, capital M, capital E, and then CLICK in all caps, and I were to run a function called bitmapClicked, I create the function now, so bitmapClicked, capital C, in the parentheses to event:MouseEvent, capital M, capital E, colon, void, no return data here, and then inside of bitmapClicked, I'll just simply type a trace statement.
So trace, in parentheses, some quotes, and I'll type clicked inside of the quotes. Now, if you test the movie and click the image, nothing happens. So we don't have that interactivity, but what can you do if you're working with a bitmap image and you want to add interactivity? Think about this. What do you do when you want to add interactivity to a bitmap on the Timeline? You wrap it inside of a button or a movie clip symbol. So I can wrap it inside of any other clickable object, and it will work just fine.
For this situation, a MovieClip would work, but it's only one image, so we might as well use the sprite for the optimization. Remember, a sprite is a single frame movie clip. So right below the line of code where you created the new bitmap, let's create a variable called sprite, all lowercase, and datatype that to a sprite. We'll set that equal to a new sprite and then add it to the Stage. So addChild and sprite in parentheses.
So that essentially creates an empty one-frame movie clip, and then we'll add the bitmap as a child of the sprite. So the line of code that says addChild bitmap, just change that to sprite.addChild bitmap. So, we're taking the bitmap image and putting it inside of a sprite, just like putting it inside of a MovieClip. And now instead of adding the EventListener to the bitmap, we add the EventListener to the sprite, test the movie and click, and there you have it.
If you ever want to see the hand cursor, just set the buttonmode property. So, sprite.buttonmode = true; and then test the movie, and there is that hand cursor. So just like when working on the Timeline, if you want to add functionality to an object, all you have to do is wrap it inside of an object that supports that functionality, just like we did with the sprite and the bitmap image here.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105455 Viewers
56 Video lessons · 117137 Viewers
71 Video lessons · 86363 Viewers
131 Video lessons · 41275 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.