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

Learn Text Controls using Code Snippets (episode 42)

0 (0 Likes / 0 Dislikes)
[Adobe Developer Connection] [Doug Winnie - Principal Project Manager; Flash Catalyst, Flash Platform Workflow] In this video, we're going to introduce something new in ActionScript, but this time we're going to do it using the code snippets. We haven't really worked with text too much, so let's introduce how you work with text and modify it using a code snippet of it that is going to display a text field when I click on a particular object. So in my project here, I have that same blue square we've been working with. I'm going to select it here on the Stage and then apply this action here, Click to Display a textField. You'll notice the tool tip that appears here says, "Clicking on the specified object displays a text field." A textField is a special class instead of ActionScript that allows you to input and display text in a multitude of fonts and colors and different styles. So we're going to take this and apply this onto that object. You'll see that there is a whole bunch of code that has been created for us. Let's take a look and actually explore the code that is created for us here. So if you look at the instructions here, you'll see that we have replaced the value 200 with the x coordinate, replaced the value 100 with a y coordinate, and there is a string here that we can use to modify how we work with the code. So if we have an event list that has been created for us that's been based on that blue square object that's on the Stage. Now, it's creating a new text field for us. And then it's providing a string of what we can do to put into that particular text field. We have an event handler here that is based on the MouseEvent.CLICK, and it's creating a new text field, and you'll see that there are some options here around auto-sizing, background, borders, and other things that are displayed here. Finally, it adds the Child to the display stack, so that the text field actually shows up when we run the project. So let's modify this a little bit. Well, first, let's run it and see what happens first. So, if I click it, you'll see that the text field appears, but it's off the screen. So, let's modify that, so that the display is--let's say that the display is right next to the object. So, we're going to modify x here, and say that the position of this is actually going to be based on blueSquare.x + blueSquare.width + 5. I'm going to run this and just show you how this works. You'll notice that the position of the object is now 5 pixels to the right of the object that we had created. That's because I'm now positioning it dynamically based on where the object is. Let's do this to the y coordinate, and I'll be able to explain this a little bit better. blueSquare.y I'm going to click. You'll see that the text field here is directly to the right of the box. If we look at line 21, you'll see blueSquare.x. That's the position of the object on the x coordinate. We're then adding in the width. We're accessing the width property of it, and then we're adding 5. So we have the x plus the width, plus 5 extra pixels, so that's how we're positioning up on the x axis. On y, we want it positioned at the top of it. There are other things we can do to modify this, so let me modify the text string here and say that "This is a blue square." Save this and run it again. There. You'll see that the text is now displayed on this particular item correctly now. Let's also modify it, so that it doesn't do it on a click. Let's do it so it does it on mouse over. I can modify my event listener here and say instead of MouseEvent.CLICK, do MouseEvent.MOUSE OVER. So using the code snippets, we haven't really covered text areas before. We've been able to introduce new functionality that we didn't even know about before and start learning how to modify it and work with it in our ActionScript projects. In the next video, we're going to talk about how you can customize your own mouse cursor using code snippets, which is something that a lot of people want to do, but, frankly, it is sometimes difficult. Luckily the code snippets will make that a lot easier, and we'll cover that in the next video. [Adobe Developer Connection]

Video Details

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

Code snippets can introduce you to working with a TextField and with Text Controls inside ActionScript. Doug Winnie explores this new functionality in Flash Professional CS5.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.