Click on any phrase to play the video from that point.
[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]
