 |
|
|
|
|
|
|
|
|
|
|
|
||||
|
||||
|
||||
A lively discussion on Flashpad pointed me to the Infinovation site, where I saw this clever effect. It took me a while to spot how it was done (until I worked out that it uses scale to draw the line -- it's obvious when you've worked it out!). Here's the .fla file in .zip form.
My original version was a total mess but after fiddling around with Duplicate Movie Clip on another project, I realised that it could be simplified massively. From what's said in the Flashpad discussion, I can only assume this was how it was done in the original.
It's not exactly rocket science, but there are a couple of clever tricks in use here that might not be obvious when you first look at it. Allow me to elaborate...
Okay, first of all you need to understand what's going on. Once per frame we're reading the co-ordinates of the mouse and drawing a line from where it was in the last frame to where it is now (and leaving a trail of 'old lines' that gradually fade out). If you don't know already, we can find out the co-ordinates of the mouse by creating an empty movie clip (here called tracker) dropping it into the main timeleine and adding the following action to the first frame:
TUTORIAL INFO 
OTHER LANGUAGES
Français
DOWNLOAD
Start Drag ("/tracker", lockcenter)
Now we can use GetProperty to find the x and y values of /tracker, and we have the co-ordinates of the mouse.
As is so often the case, most of the hard work is done in a 'control' movie clip. This is set to loop once per frame, and every frame it executes a whole bunch of actions that do all the mouse detection and line drawing. You'll find these actions in frame one of the movie clip called control.
In fact this is (in my opinion) the cleverest part of the whole technique. You can't just tell Flash4 to 'draw a line from Point A to Point B', so it uses a cunning little trick with scale. You create a line that's at 45° (called Line) and whose height and width is exactly 100 pixels, then place it in the main timeline and give it an Instance Name. By detecting the coordinates of the mouse (using the method described above) we can place a duplicate of this movie clip at the 'old' position of the mouse (which is stored in the variables /:OldX and /:OldY) and scale it in the X and Y directions by the difference between the old co-ordinates and the new ones (NewX and NewY). The actions look like this:
Set Variable: "Line" = "NewLine"&/:Counter
Duplicate Movie Clip ("/Line", Line, /:Counter)
Set Variable: "Line" = "/"&Line
Set Variable: "NewX" = GetProperty ("/tracker",_x)
Set Variable: "NewY" = GetProperty ("/tracker",_y)
Set Property (Line, X Position) = /:OldX
Set Property (Line, Y Position) = /:OldY
Set Property (Line, X Scale) = NewX-/:OldX
Set Property (Line, Y Scale) = NewY-/:OldY
The first line simply creates a variable with the name of the line that we're about to create -- NewLine plus the current value of Counter, which increments by one with every loop of the movie clip. Next we use Duplicate Movie Clip to create a new copy of our line, using Counter as the Depth value (each copy of our line needs to be on a different 'depth' layer, like the layers in a Flash movie). Then we add a '/' to the beginning of our new line name, and use GetProperty to find the new co-ordinates of the mouse. The final four lines set the x and y position of our new line movie clip, and set its X Scale to NewX-/:OldX and its Y Scale to NewY-/:OldY.
Bear of little brain that I am, I originally thought it was necessary to use a special scaling trick to create a line that doesn't get thicker when you scale it. However I've since had it pointed out to me (by Dan Wright -- thanks Dan) that you can achieve the same result with a hairline (the one marked 'H' in the drop-down list of line widths). Colour me stupid...
So that's about it. There are a few more things you need to do to get it working, but I'll leave you to dig around in the .fla file and find those out for yourself -- there's nothing very complicated.
Good luck!
All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.