In the previous recipe, we allowed the user to navigate through but we didn't animate the transitions, so it looks unprofessional and clunky. Animations also help the users grasp what is happening. This recipe is going to show how to animate a relational network.
Open the files downloaded from the Packt Publishing website for Chapter 8 | Recipe 5 to follow along.
The following are the steps required to animate a relational network:
In
NodeVisual.as, remove the functionaddLink.Still in
NodeVisual, add the function_updateLine:private function _updateLine():void { _link.graphics.clear(); _link.graphics.lineStyle(3, _color, 0.8); _link.graphics.lineTo( -x, -y); }Add the
animateInfunction:public function animateIn():void { _targetX = x; x = 0; _targetY = y; y = 0; TweenLite.to(this, 0.5, {x:_targetX, y:_targetY, onUpdate:_updateLine, ease:Back.easeOut } ); }Also add the public function
animateOut:public function animateOut...