Nevron Diagram for .NET makes it easy to create animated diagrams in the widely spread flash format. You can use 4 types of animations:
- Fade - changes the transparency of an object over time.
- Color - changes the color of an object over time.
- Move - moves an object from one point to another.
- Rotate - rotates an object from a given angle to another.
- Scale - scales an object from one size to another.
You can mix several animations together in order to achieve complex animation effects. All animations share some common properties that are used to specify their behavior:
- StartTime - determines the start time of the animation (in seconds after the beginning of the clip).
- Duration - determines how many seconds the animation will play.
- Start / End state - each animation has a start and end state which determine how the first and the last frame of the animation will look. All other frames states are generated by means of interpolation.
- AnchorX, AnchorY - the rotate and scale animations possess these properties which determine the anchor point (also known as the pin point) of the object they are applied on. By default they have a value of 0.5 which means that the pin point is the center of the shape.
For example if we have a Scale animation with StartScale = (1, 1) and EndScale = (5, 5) applied on a rectangle with size 100 x 60 pixels then the rectangle will have size 100 x 60 pixels in the first frame of the animation and size 500 x 300 pixels in the last frame of the animation.
To illustrate the usage of the animations styles let's have a look at a simple example:
C# |
Copy Code
|
document.Width = 400;
document.Height = 500;
NUmlShape shape = new NUmlShape(198, 250, 1, 1);
document.ActiveLayer.AddChild(shape);
shape.InitFromType(typeof(NPathShape));
// Create a rotate animation
NRotateAnimation rotate = new NRotateAnimation(3);
rotate.EndAngle = 360;
// Create a scale animation
NScaleAnimation scale = new NScaleAnimation(3);
scale.EndScale = new NPointF(3, 3);
// Create an animation style for the shape and add the 2 animations to it
shape.Style.AnimationsStyle = new NAnimationsStyle();
shape.Style.AnimationsStyle.Animations.Add(scale);
shape.Style.AnimationsStyle.Animations.Add(rotate);
|
Visual Basic |
Copy Code
|
document.Width = 400
document.Height = 500
Dim shape As NUmlShape = New NUmlShape(198, 250, 1, 1)
document.ActiveLayer.AddChild(shape)
shape.InitFromType(GetType(NPathShape))
' Create a rotate animation
Dim rotate As NRotateAnimation = New NRotateAnimation(3)
rotate.EndAngle = 360
' Create a scale animation
Dim scale As NScaleAnimation = New NScaleAnimation(3)
scale.EndScale = New NPointF(3, 3)
' Create an animation style for the shape and add the 2 animations to it
shape.Style.AnimationsStyle = New NAnimationsStyle()
shape.Style.AnimationsStyle.Animations.Add(scale)
shape.Style.AnimationsStyle.Animations.Add(rotate)
|
When ready setting the animations you can use the flash exporter to export the diagram to a flash file:
C# |
Copy Code
|
NFlashExporter flashExporter = new NFlashExporter(document);
string fileName = Path.Combine(Application.StartupPath, "test.swf");
flashExporter.SaveToFile(fileName);
|
Visual Basic |
Copy Code
|
Dim flashExporter As NFlashExporter = New NFlashExporter(document)
Dim fileName As string = Path.Combine(Application.StartupPath, "test.swf")
flashExporter.SaveToFile(fileName)
|
The flash exporter also allows you to specify the image format to be used for the images embedded in the flash movie (PNG and JPEG image formats are supported), as well as the number of frames per second. More frames lead to smoother animations but also a larger and computationally heavier flash file. The default frame rate is 24 frames per second.
The code above will result in the following flash animation: