DuoPath is a freeware JavaScript application for making DHTML path animation for Netscape 4.0 and Internet Explorer 4.0. DuoPath is intended to be used along with the technique shown in the Path Animation lesson - it'll explain the concepts of how DuoPath can be used for your own purposes.
First of all, launch DuoPath and follow this lesson and switch between the windows to understand what I'm talking about.
Launch DuoPath 1.12
Warning: DuoPath will take a little while to initialize so don't be alarmed if your browser seems to do nothing for 10 seconds or so - just be patient and it should load up eventually. Although DuoPath does work in Internet Explorer 4.0, I highly recommend using Netscape 4.0 because it's much faster.
DuoPath is included along with the tutorial when you download it.
Version 1.12: Oct 15. 1999
Again updated the output, now requires you to manually include the dynlayer.js and path.js files from the DynAPI
Version 1.11:
Updated the output of DuoPath to coincide with my updated DynLayer and Path Objects.
Version 1.1:
DuoPath 1.1 is basically the same as 1.0 but with a few enhacements:
I think DuoPath is simple enough to use that you'll understand how to use it almost immediately. The basic idea is you click around the screen plotting new points for your path. Once you're done you can generate the HTML to create a simple demo using your path. I'll do a quick summary of how to use the features in case something seems a little odd.
Edit Mode: - controls the points in your path
Notes:
Inserting a point is not the same as making a new point. A new point is appended to the end of the path. Inserting a point puts another point between 2 points already in the path. You first have to click the point that comes after the point you are inserting. This will attach a point to the cursor, then you click again to drop that point into the path.
For the line mode, first click where you want the line to begin. Then click again for where you want the line to end. A dialog will pop up and ask how many pixels apart the points will be spaced, then it'll insert them for you.
If you're not going to take my advice and use Netscape, then you will have to be aware that in IE when you click on the scrollbars it will insert a point if you are in "New" or "Line" mode. I guess IE thinks that the scrollbars are part of the document for some reason. To avoid putting points where you don't want them just go into one of the other modes before scrolling.
Curve mode allows you to draw a perfectly smooth curve of points based on just a few control points which you must define.
The curve tools:
You work with curve points just as you would the normal path points. However, once you put down 4 curve points DuoPath will draw in a series of path points based on where your curve points are. As you continue to add more curve points it will redraw the curve accordingly. The curve points (in purple) are used to influence how the curve bends. You can move the curve points and reshape the curve to your liking.
The curve tools should be self-explanitory except for "Path Points" - that's to determine how many actual path points get put into your curve. A higher number means there will be more points in the curve and therefore the animation will move smoother and slower.
Here's a "before" shot of some points labeled in the order they were clicked:
The first 3 points won't do anything, but once the forth one is down it'll draw the curve for you:
By positioning the curve points closer or farther apart you can create an acceleration effect. The picture below shows a path that will start off slow and speed up as it swooshes away:
Inputing Points:
This is a way to work on a path that you created earlier, and want to edit some more. 2 dialog boxes will appear, the first asking for the x values, and the second for the y values. You have to manually cut and paste the numbers from your previous path into these dialogs. To demonstrate this feature just copy the first line of numbers below (including the commas) by putting your cursor in front of the first number. Then hold shift and press the END key. Then copy the numbers (Ctrl-C, depending on your platform). Then switch to DuoPath and in the Input Points dialog paste the numbers in (Ctrl-V). Then hit "Okay" and do the same for the y values (the second row of numbers). DuoPath will then draw out all the points and you can continue editing them.
Preview
The preview mode is pretty cool. You can instantly see what your animation is going to look like by playing the animation right inside DuoPath. You can change characteristics of the animation - whether it loops or not, or change the speed of repetition.
Generate HTML
With a simple click and a few options to set you can have all the path animation code generated for you on the fly. It has options for setting the speed, the name of the object and so on. The code is basically the same as shown in the Path Animation lesson but can also contain links for playing, pausing, and stopping the animation - just as in DuoPath's preview mode. Remember that by no means you have to use this code, you can still just take the co-ordinates themselves and do whatever else you want with them.
Other Tips:
Don't hesitate to make tons and tons of points. It makes the animation smoother and DuoPath is designed so that there's no limit to how many points you can have. Every 100 points you lay down it'll refresh itself to hold more - don't worry, all your points will remain in tact.
Also if DuoPath ever messes up - like a error occurs or something - you can at anytime reload the workarea frame and it should correct the problem.
| Home | Next Lesson: Mouse Events |