I have imported a lot of paths from an Adobe Illustrator document right into a flash file. The paths exists as Drawing Objects inside the scene. Using pure actionscript, how can I move a symbol following each of the lines, without using predefined Motion Guides.
EDIT: I’ve attached the Flash file, full of drawing objects.
http://rapidshare.com/files/406497264/pather.fla.html
The question is: Are these drawing objects accessible through AS3 or I should convert them to symbols / whatever format necessary. And please give some AS examples.
Thanks!
Nice question +1
I’ve seen the fla at work, don’t have cs5 home, but I understand what you’re trying to achieve.
My approaches were these:
Since Flash CS4 you can copy a path, and paste it onto a Motion Tween. This will work similar to the Classic Tween’s Motion Guide feature. There are quite a few problems with this:
the target is animating, you have no actionscript control over it. You can set a timer
for the duration of the AnimationFactory’s motion, but it gets to cumbersome.
Obviously this is a no-no.
Using JSFL to traverse the paths inside the IDE:
I stumbled upon this very handy jsfl script by ericlin which traverses all shapes selected on stage. If you select your paths and run the script(you can just double click the jsfl file), you will get the parsed coordinates.
I did a simple test using TweenLite:
*Note:*The ptArray isn’t shown here because it would waste too much space.
The result isn’t that great though. You can have a look at the fla to see what I mean.
The jsfl script could be altered, but I saw you emphasised actionscript usage, so this is a no no as well.
Claus Wahlers developed an amazing as3 library called as3swf which allows flash/flex developers to decompile swfs at runtime. Here is an awesome article explaining
the ins and outs of shapes inside swfs. There are quite a few exporters already written.
I just duplicated the AS3ShapeExporter and changed the as3 draw commands to TweenLite code. Basically I replaced moveTo with a fast tween to position, lineTo, to a regular tween and curveTo with a bezier tween. Tween Lite’s BezierPlugin luckily used quadratic bezier, just like curveTo does.
Here is the code you will need to paste inside the fla that holds the shapes:
Basically I load the swf, once it’s ready, I pass it’s bytes to as3swf and use the AS3ShapeTweenLiteExporter to parse shape tags and spit out actionscript.
The 3 paramaters I pass to the constructor are : the swf instance, a name for the tween target and a time for each tween.
Here’s how my hacked together class looks like:
Once you download as3swf, you need to save this class in the exporter’s package.
Here is the result. You can download its fla and also the fla for that generated the code.
This is a pure actionscript version and has decent result.
The animation looks jerky because it has uses the same amount of time to tween for each of the line segments. some are shorter while others are longer. You could store the previous position and use it with the current position to calculate the distance, and based on that generate a decent for each TweenLite instance.
Also feel free to modify that class any way you need(say you want to use a Timer instead, etc.)
Update
I had time to tinker with this a bit more.
I changed the exporter a bit, now it also expects a maximum distance for your target object to travel. That will be either the width or height of the selection(all the lines), depending on which one is larger(width vs height). The previous x and y values are stored
and used to calculate the distance, then that distance is divided by the maximum distance to travel. This in turn is used to scale the time on each tween. Also, I’ve set the easing to Linear, because the default(Quad.easeOut) added to the jitter. The timing isn’t very accurate, but looks a bit better. Updated fla’s here and here
The updated timeline code:
the updated exporter:
Again, feel free to tinker.
UPDATE 2:
Ok, Here’s yet another method…
Since Illustrator CS4, you can save graphics as FXG via File > Save a Copy > select FXG filetype
Here’s the fxg file I used.
Japan’s done it again 🙂
The amazing Lib Spark contains an FXG Parser. There is also an SVGParser, but for now I’ve only played with fxg.
So the first step is to download the library:
You might be fine using the sample, since you use Flash CS5. The parser uses TLF for text. I didn’t bother to download the whole flex4 sdk to get the swc and setup. I just commented out the Text parser since we’re concerned with paths. The commented out class is at the bottom.
The library contains a Path parser which is cloned and modified to get some animation code: PathTween.as
You might recognize some of the variables from the as3swf classes.
Here are some explanation for some of the variables I added:
Also, I’ve done a quickfix, added a default winding, since sometimes, the winding attribute might be missing from the .fxg file and that breaks the parser.
In order to use you need to make a minor change to FxgFactory.as so it uses the PathTween parser instead of the default Path class.
becomes:
Finally, some basic timeline code that uses all these:
This is fairly simple:
Then I opened up a fresh fla file and:
You can see the result and get the fla.
So far, as3swf is cool once you’ve got the fla ready with pasted illustrator paths,
could be faster since as3swf works with bytes.
What I like about the FXG approach:
graphics into an fla, you just save a
copy as FXG. You can use one fla to
generate all the code you need, just
change the path to the fxg file you
want to animate.
and other curves are broken into lineTo commands which even out the animation a bit.
This actually got fun, with individual timelines, so I made yet another copy that draws some
cheesy trails into a bitmap data.
Here‘s the PathTweenTracer class, like the previous, place this in the parser package.
Again, the PARSERS constant needs to be updated inside FxgFactory:
The timeline code is pretty much the same.
The result looks nice (source)
Here are some screenshots of the generated animation:
Commented out TextGraphic.as
The FXG approach would fit the question better(‘Using pure actionscript, how can I move a symbol following each of the lines, without using predefined Motion Guides ?’)
As for the nested question(‘Are these drawing objects accessible through AS3 or I should convert them to symbols / whatever format necessary ?’ ) :
As @Casey mentioned, you cannot access the graphics once they’re set. Using the updated Graphics API you can copy graphics from one Graphics instance into another, but that doesn’t expose the commands. I remember Tink had something way before Flash Player 10, but I don’t know what’s the progress on that.
HTH