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

The Path Object in Flex 4

0 (0 Likes / 0 Dislikes)
[ringing sound] [ADOBE DEVELOPER CONNECTION] [keyboard clicking] [codedependent ( ) ;] [Chet Haase - Flex SDK Team] Today on Code Dependent I'm going to talk about a graphics demo that's based on a larger demo that comes from my book, "Flex 4 Fun." [Flex 4 Fun -] So I wanted to talk about how to handle path data. It's not intuitively obvious if you look at the API for the new Path Object in Flex 4. Flex 4 provides all these great new graphics objects. You can create graphics in MXML just by declaring these graphics objects instead of diving down into ActionScript code and issuing calls directory into Flash APIs. So I wanted to talk about dealing with Path. The tricky part about dealing with Path is that it takes a string as input. There is no way that you can supply new points through actually setting points in a data structure. Instead, you tell it the string that is the list of commands which the path will execute as it draws itself. And these commands are what you would expect--"I want to move the pen to here," "I want to draw to there," "I want a bezier curve to this other point." And I wanted to show how you could very simply create a list of points and then issue that data string to create new Path Objects. In particular, I wanted to show a simple drawing application that I call Scribbler that allows you to do that. So we have Scribbler here. We have an empty white canvas. We can draw into it, make a nice little picture there of our little geek, because everybody needs a drawing application that allows you to scribble. So how does that actually work? It turns out it's really simple. Here's all the application code here. We have an Application tag here, and we have three functions that basically handle the mouse events. This is the way that you get the input to actually draw the items. I want to know when the mouse was clicked down, where it dragged to, and when it was clicked up so I know when to create and stop creating these Path Objects. We have a couple of internal variables that we use. We have Shape, which is a Path Object, and we have Path Points, which is our intermediate data structure that's going to hold the information about what these lines are that we're scribbling all over the screen so that then we can eventually issue the data string that the Path Object needs. So in our Application tag, we said, "Okay, when there's a mouse down event, "I want you to call the mouseDownHandler." One important point about doing these kinds of applications is I didn't actually need to add the mouseMove and the mouseUpHandler yet because I don't care about drag and release operations until I'm actually drawing a shape. So instead, I only want to listen to mouseDown events, and then I want my mouseDownHandler function to be called. And when that is called, then I know, "Okay, they've created a shape." "Now I need to start listening for the Move operations and the Release operation." So I go ahead and add a mouseMove and a mouseUpHandler at that point. So in the mouseDownHandler, it's time to create a shape. We go ahead and create a shape. We say, "Give me a shape." We'll make it a new Path Object. And we create our data structure that's going to hold all the intermediate information about the line segments that are created as the mouse is being dragged around. And then we're going to set a stroke on the path because we need to tell it what color to draw and other information, potentially, about the stroke. And then we're going to add that shape to the display list of this application group that we're in. So nothing is actually being displayed yet. We haven't actually created--well, we created the path, but we didn't put any data into it because the mouse has only gone down. We haven't actually added anything to it. So a little bit later, the mouse is dragged and we get a call to our mouseMoveHandler. At that point, we say, "Okay, we're going to add a new point to the Path data structure "of the current mouse location." So we know we started at this point in our mouseDownHandler, so we have an initial point where it started, and then every time we move, we're going to add a new point to it with the point that we just moved to. So we're going to get this list of points in time in our data structure that represent the trajectory of the mouse over time for each one of these events that we handled. And then we're going to call constructPath, and that will actually issue the data to the Path Object that allows it to display on the screen. constructPath is down here. We say, "Okay, I want a new String Object that I'm going to create." First of all, I'm going to move the pen to the initial location. That's the first point that we recorded in the data structure of our points. We're going to put the first Path Points in there for the X and Y locations. So we're going to say, "Move to this X and this Y location," for those first two pieces of information. And then for the rest of the information in the Path Points data structure, we're going to issue a line command. And this is basically going to say, "Okay, wherever the pen is now, "draw a line to the new location I'm giving you in this thing that I've just appended to the string." So I'm going to draw a line there, there, there, there, there, there, there. And you may think that, "Well, we're not actually drawing lines." "We're scribbling on the screen. We're doing this freehand stuff." "We're getting all these nice curves. So how are we doing that?" We're doing that because the mouseHandler is being called so often that little, tiny line segments are just as good as having curves on the screen. What's happening is we're getting calls for every one of these little, tiny deltas and even though we're issuing straight line segments, the segments are so small that you get this nice curvy look on the screen anyway. And then finally, we set the data property on the path to this new string that we've created. And then we go about and we receive another call to our mouseMoveHandler and we keep getting these calls over time, and then eventually, the user gets bored and they release the mouse and then we get a call to the mouseUpHandler. One more time we record that last point that they were at in case it's different than the previous Move operation. We construct the path to get all that information in the data string and into the Path Object itself, and then we remove the Move and the Up mouse listeners because, again, we don't want to listen to it if the user is not actually actively creating a shape. So we're going to wait around for a Down operation before we listen again to the Move and the Up operations. And that's it. That's the whole application. So it was three mouse handling functions to handle the Down, the Move and the Up operation and then one internal function to actually construct the path into this string. Maybe not obvious how to create a path or, more importantly, how to edit a path on the fly, so we just took the approach of, "Okay, we're going to edit our data structure "that holds all the point information and then when we need to actually change the value "of the path data itself, we'll just create a new string based on that information "that we've allocated so far." If you want to see the code for this application and other related applications, check out my blog at [Chet's Blog -] [ADOBE DEVELOPER CONNECTION]

Video Details

Duration: 6 minutes and 55 seconds
Language: English
License: All rights reserved
Genre: None
Views: 143
Posted by: adobetv on Oct 21, 2010

Flex 4 provides the tools you need to create custom graphics.  In this episode, Chet explains how to utilize the Path object and mouse events to create a simple drawing application.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.