• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Workshop Chapter 7. Adapting Built-In Co... > Editing Scripts in Components

Editing Scripts in Components

The Flash UI Components Set 2 came out only days after Flash MX was released, and they’re pretty sweet. For example, the DraggablePane component is similar to the ScrollPane component that is installed with Flash MX. Both these components enable you to identify a symbol (by its linkage “identifier”) and it automatically appears inside a scrollable window. This is great for when an image is larger than the space you want to allot to it. The DraggablePane component adds features for dragging, resizing, and collapsing. However, those extra features seem to be a tad sluggish, especially when your movie’s framerate is low. Let me walk you through how to adjust this component—not as a way to “dis” an otherwise great component, but to practice our bug-finding skills.

Import a photograph or draw a large graphic. Convert it into a Movie Clip symbol. Access the Linkage settings for the Movie Clip you just created (from the Library’s options menu). Click the Export for ActionScript option and set the Identifier to read myPicture (see Figure W7.2). You can trash any clips or photos on the Stage. (They’re both safe in the Library.)

Figure W7.2. You need to set a linkage identifier for clips used with the DraggablePane component

Drag a DraggablePane component onto the stage. You might need to change the currently visible set of components (to view “Flash UI Components Set 2”) by clicking the little arrow inside the Components panel. With the instance on the Stage selected, use the Parameters tab of the Properties panel to specify a value for Scroll Content—that is, make it read myPicture.

Set the movie’s frame rate to 3 fps, and then select Control, Test Movie. You should notice that whereas scrolling the image is very snappy, dragging and resizing it (from the bottom-right corner of the window) is very sluggish. We can try to fix this.

Back in Flash, we’ll need to snoop through the code in the component. Even if we mess up, the original component won’t be affected (just the one in this movie). Anyway, there’s a ton of code, so let me walk you through the way I found to fix these issues.

Because you can’t just double-click a component instance, you have to select it and then choose Edit, Edit In Place. Nearly all the code for this component is in the first layer: “Actions : Class.” Even though there are nearly 700 lines of code, we can get to what we want very quickly by using the Find button. I know that scripts that include the ActionScript fragments _xmouse, mouseMove, or startDrag likely affect dragging. Select the first frame and then open the Actions panel. Click the Find button and search for mouseMove. The first instance I found was on line 494. This is line 494:

this.onMouseMove = this.controller.dragResizeCursor;

We don’t have to know everything this says except that we’re assigning a callback for the onMouseMove event—namely, the function called dragResizeCursor. We’ll find dragResizeCursor defined on line 502. (It’s so close, you don’t have to search for it.)

The key problem with the definition of dragResizeCursor is that there’s no updateAfterEvent() script. Insert a line of code before the closing curly brace (in line 506) that reads:


When you test the movie, the resizing feature should be very smooth despite having a low frame rate. (That was an easy fix.)

Now to fix the dragging issue. If you continue to search for likely drag-related-scripts, you’ll find that startDrag appears around line 561. This is an older Flash feature. Just replace the line of code (this.controller.startDrag()) with the following:


Notice that right after what you see here, there should be a closing curly brace (for the titleTrackBegin definition of which we are currently inside). Also, there are two lines of code that appear above what I just told you to insert. You’re just replacing the one startDrag() line of code. Notice that we didn’t say this.onMouseMove; we said this.controller.onMouseMove because the line we replaced said this.controller.startDrag.

A few lines after where startDrag() used to be, you’ll find the stopDrag() command. (It’s in the titleTrackEnd definition.) Replace that line with the following:


This stops our code from functioning (at the same instance that the old stopDrag() was doing its thing).

If you test the movie now, you’ll see that it’s much smoother—although it looks as though you’re always dragging from the top-left corner. That’s because the center of the component is that top-left corner and our code says to position the _x and _y to where the mouse is—meaning the “center” of the clip goes to where the mouse is. We need something here like the extra touch we did in Workshop Chapter 3, “Creating a Horizontal Slider.”

To use an offset, change the two lines that set the _x and _y (in the code that replaced the startDrag() code) so that those lines appear as follows:


This just says “move to where the mouse is plus the offset variables” (that we’re about to define).

To assign the values for our offset variables, add the following code anywhere in this frame script (except inside another function):


Put simply, when the user clicks, this script figures out how far off center the mouse is and stores that information in the two variables (offsetX and offsetY).

Test it out. It works pretty well. One thing you probably want to do is test to see that the changes we made didn’t break anything else. By the way, you might try your hand at fixing the same issue in the MessageBox component; the fix is nearly the same as what we just did.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint