1

I have a network graph visualization generated using Gephi containing many nodes and edges. I need to produce an animation of a camera (or moving movieclip) to "flythrough" the network along the path of the bezier curves, visiting each (not necessarily every) node at random. I've made a quick animation of what this would look like.

How can I achieve this programmatically through AS3 or Processing or using mbostock D3 javascript library on github?

My attempt in AS3 so far has been to convert an SVG produced by gephi into AS3 code using Miller H. Borges Medeiros' tool then try to adapt a bezier tweening library such as Zeh Fernando's example but I'm having difficulty.

Medeiros' converter is splitting quadratic beziers into 4 separate quadratic beziers, and I'm not sure how to transform flash's curveTo Method into an array of bezier points as in Fernando's code.

Then there is the problem of animating the camera through only those nodes which are connected to eachother.

Any ideas? Thank you for your help with this!!..

Edan
  • 593
  • 1
  • 8
  • 23

1 Answers1

1

I haven't used Gephi before, but I did answer a similar question before. The task was to animate objects on paths exported from Illustrator. My solution was to use FXG and the LibSpark as3 FXGParser and costumize a class of the library to export path coordinates as TweenLite tweens.

This can apply/be adapted to your example, but probably with using the SvgParser:

svn export http://www.libspark.org/svn/as3/SvgParser

I prefer TweenLite as it's more up to date (Tweener isn't being developed anymore). Still if you prefer Tweener, the same principle apply as both tweening libraries use quadratic bezier curves for path animation. You can find out more about Tweener path animation here. If it helps, wonderfl has another example.

As long as you've got the curve coordinates (you mentioned that you can draw using curveTo), you can also tween on those curves.

Community
  • 1
  • 1
George Profenza
  • 50,687
  • 19
  • 144
  • 218
  • Thanks George! that's exactly what I was after. But I have used the AS3SWF method example from your previous posts and the tweening does not exactly match the paths on all curves. The ball deviates a little in some sections, and this ocurrs only when the paths are large. Here is [my test](http://www.xime.com.au/graph-animation/AS3SWF.swf). I'm simply moving the path instead of the ball. Any thoughts? Also, I was wondering how the paths could be parsed in the correct order, so that there are no sudden jumps from one node to another distant unconnected one? – Edan Nov 13 '11 at 06:49
  • Hey, that's great progress ! I don't fully understand the order in which ShapeTags are parsed by AS3SWF, which is why I suggested having a look at SvgParser (maybe modify [Path.as](http://www.libspark.org/browser/as3/SvgParser/trunk/src/svgparser/parser/Path.as) so it generates some Tweener/TweenLite code based on drawing commands (MOVE_TO - tween to, CURVE_TO - bezier to, etc.). There is a Sample.as to start with, but it will help to go deeper to Path.as and trace/debug the shape to see the order in which your curves are being parsed. I imagine it will be handy to store those somehow... – George Profenza Nov 13 '11 at 10:25
  • ...to tween say from nodeA to nodeB (where ever those might be) – George Profenza Nov 13 '11 at 10:25
  • btw, could you post the svg of that graph please ? – George Profenza Nov 13 '11 at 19:43
  • Here is the SVG file http://www.xime.com.au/graph-animation/network.svg I'm not too confident in modifying the SvgParser code, but I will see how I go... – Edan Nov 14 '11 at 04:53