ActorComponent

Search…
ActorComponent
An ActorArtboard's hierarchy is composed of components. The base class for these components is ActorComponent.
This is the manual for the old version of Rive (formerly Flare). Visit the Help Center for the new Rive here.
At its most basic level a component has a name and a parent (another component which it is somehow related to). Parent/child relationships vary depending on the context and type of the parent and child. For example, ActorNode uses parent/child relationship to created nested transform spaces. ActorFill and ActorStroke are parented to an ActorShape which they respectively fill and stroke. 
Bones
implements ActorBone extends ActorBoneBase​
Bones can be accessed at runtime, and you can modify the rotation of a bone using Radians and scale of a bone on the 'x' and 'y'.  The position of a bone is inherited from its parent.  You can access or store a reference to a named bone of an Actor.
Flutter Sample
Swift Sample
React Sample
JS Sample
C++ Sample
1
import 'package:flare_dart/actor_bone.dart';
2
...
3
{
4
    ActorBone myBone = artboard.getNode("myBoneString") as ActorBone;
5
}
Copied!
1
let boneNode = artboard?.getNod(name: "Bone") as? ActorBoneBase
2
print(boneNode?.length as Any)
3
       
Copied!
1
import ActorBone from 'flare-react/dependencies/Flare-JS/source/ActorBone.js';
2
​
3
constructor()
4
  {
5
    super();
6
    
7
    this._MyBone = new ActorBone();
8
  }
9
initialize(artboard)
10
  {
11
    this._MyBone = artboard.getNode("Bone");
12
  }
Copied!
1
FlareExample.prototype.setActor = function(actor)
2
	{		
3
		if(this._ActorInstance)
4
		{
5
			this._ActorInstance.dispose(this._Graphics);
6
		}
7
		const actorInstance = actor.makeInstance();
8
		actorInstance.initialize(this._Graphics);
9
		
10
		this._Actor = actor;
11
		this._ActorInstance = actorInstance;
12
​
13
		if(actorInstance)
14
		{
15
			actorInstance.initialize(this._Graphics);			
16
​
17
			this._MyBone = actorInstance.getNode("Bone");
18
			console.log(this._MyBone.length); 
19
			console.log(this._MyBone.rotation); 
20
			console.log(this._MyBone.scaleX); 
21
			console.log(this._MyBone.scaleY); 
22
				
23
		}
24
	};
Copied!
1
...
2
​
3
#include "flare/actor_bone.hpp"
4
...
5
...
6
flare::ActorBone* bone = static_cast<flare::ActorBone*>(artboard->component("BoneString"));
7
printf("node's length %f\n", bone->length());
8
...
Copied!
​
Nodes
implements ActorNode class
Each node in the hierarchy can be manipulated at runtime freely of the parent. You can modify the position of a node using a 2d Vector or rotation using Radians.  You can access or store a reference to a named node of an Actor.
Flutter Sample
Swift Sample
React Sample
JS Sample
C++ Sample
1
import 'package:flare_flutter/flare_actor.dart';
2
import 'package:flare_flutter/flare_controller.dart';
3
...
4
{
5
    ActorNode myNode = artboard.getNode("myNodeString");
6
}
Copied!
1
 let myNode = artboard?.getNode(name: "Node")
Copied!
1
import FlareComponent from 'flare-react';
2
​
3
 initialize(artboard)
4
 {
5
    this._MyNode = this._Artboard.getNode("nodeString");
6
 }
Copied!
1
FlareExample.prototype.setActor = function(actor)
2
	{
3
		if(this._ActorInstance)
4
		{
5
			this._ActorInstance.dispose(this._Graphics);
6
		}
7
		const actorInstance = actor.makeInstance();
8
		actorInstance.initialize(this._Graphics);
9
		
10
		this._ActorInstance = actorInstance;
11
​
12
		if(actorInstance)
13
		{
14
			actorInstance.initialize(this._Graphics);			
15
​
16
			this._MyNode = actorInstance.getNode("NodeString");
17
			console.log(this._MyBone.length); 
18
			console.log(this._MyBone.rotation); 
19
			console.log(this._MyBone.scaleX); 
20
			console.log(this._MyBone.scaleY); 
21
				
22
		}
23
	};
Copied!
1
...
2
flare::ActorNode* myNode = static_cast<flare::ActorNode*>(artboard->component("NodeStrin"));
3
...
Copied!
​
Solo Nodes
implements ActorNodeSolo class
Solo Nodes are children of bones or nodes that can be toggled on one at a time.  One example use case could be different hairstyles being toggled on an avatar.  Access solo nodes by getting a reference to them first, then you can modify which index in the array is active.
Flutter Sample
Swift Sample
React Sample
JS Sample
C++ Sample
1
import 'package:flare_dart/actor_node_solo.dart';
2
...
3
{
4
    ActorNodeSolo solo = _artboard.getNode("Solo_Name") as ActorNodeSolo;
5
    solo.setActiveChildIndex(1);
6
}
Copied!
1
 soloNode = artboard?.getNode(name: "SoloNode") as? ActorNodeSolo
2
 soloNode?.setActiveChildIndex(1)
3
 print(soloNode?.activeChildIndex)
4
       
Copied!
1
import ActorNodeSolo from 'flare-react/dependencies/Flare-JS/source/ActorNodeSolo.js';
2
constructor()
3
{
4
    super();
5
   
6
    this._SoloNode = new ActorNodeSolo();  
7
 }
8
 
9
 initialize(artboard)
10
  {
11
      this._SoloNode = artboard.getNode("soloString");
12
      this._SoloNode.setActiveChildIndex(1);
13
  }
Copied!
1
this._SoloNode = this._ActorInstance.getNode("Solo");
2
this._SoloNode.setActiveChildIndex(1);
3
	
Copied!
1
#include "flare/actor_node_solo.hpp"
2
...
3
	flare::ActorNodeSolo* soloNode = static_cast<flare::ActorNodeSolo*>(artboard->component("Mustache_Solo"));
4
	soloNode->setActiveChildIndex(3);
5
	printf("node's active child %d\n", soloNode->activeChildIndex());
6
	...
Copied!
Custom Properties
implements PropertyTypes Class
Custom Properties are variables (boolean, integer, float or string) set within an animation that can be read at runtime.  For example, you can set a boolean in a frame of your animation and it will be read in code via a listener when the animation reaches that point in the timeline.  One example use case could be to fire off a sound effect for a certain frame within an animation. 
Flutter Sample
Swift Sample
React Sample
JS Sample
C++ Sample
1
...coming soon...
Copied!
1
...coming soon...
Copied!
1
​
2
import CustomProperty from 'flare-react/dependencies/Flare-JS/source/CustomProperty.js';
3
​
4
initialize(artboard)
5
{
6
    this._MyNode = artboard.getNode("customPropertyNode");
7
}
8
advance(artboard, elapsed)
9
{
10
 for (let props in this._MyNode._CustomProperties)
11
    {      
12
      switch (this._MyNode._CustomProperties[props]._Name)
13
      {
14
         
15
        case "happy_sound":
16
          ///play our sound when the custom property changes
17
          if (this._MyNode._CustomProperties[props]._Value === true){
18
            //do something
19
          }
20
          break;
21
      
22
      }
23
     
24
    }
25
}
Copied!
1
function _Advance(_This)
2
{
3
	...
4
	
5
	if (_This._MyNode)
6
		{
7
			
8
			for (let props in _This._MyNode._CustomProperties)
9
			{
10
				
11
				switch (_This._MyNode._CustomProperties[props]._Name)
12
				{
13
​
14
					case "happy_sound":
15
						///play our sound when the custom property changes
16
						if (_This._MyNode._CustomProperties[props]._Value === true)
17
						{
18
							console.log("hey yay");
19
						}
20
						break;
21
​
22
				}
23
​
24
			}
25
		}
26
​
27
	...
28
	
29
}
30
	FlareExample.prototype.setActor = function(actor)
31
{
32
...
33
	this._MyNode = actorInstance.getNode("Scale Node_Special Property");
34
...
35
}
Copied!
1
...
2
flare::ActorNode* cpNode = static_cast<flare::ActorNode*>(artboard->component("Property"));
3
flare::CustomBooleanProperty* customProp = cpNode->getCustomBooleanProperty("Prop_String");
4
 ...
Copied!
Events
implements ActorEvent class
You can trigger Events with a keyframe during your animation, which can run any custom code at runtime.  Events can be attached to any object (this can be used to provide extra context along with Custom Properties).
Flutter Sample
Swift Sample
React Sample
JS Sample
C++ Sample
1
import 'package:flare_flutter/flare_actor.dart';
2
import 'package:flare_flutter/flare_controller.dart';
3
import 'package:flare_flutter/flare.dart';
4
...
5
ActorAnimation _actorAnimation ;
6
void initialize(FlutterActorArtboard artboard) {
7
    ///need to get the animation that has the trigger
8
    _actorAnimation = artboard.getAnimation("animationWithTrigger");
9
}
10
 bool advance(FlutterActorArtboard artboard, double elapsed) {
11
     List<AnimationEventArgs> _animationEvents = [];
12
 ...
13
     for (int i = 0; i < _animationLayers.length; i++) {
14
     ...
15
     FlareAnimationLayer layer = _animationLayers[i];
16
​
17
     
18
     _actorAnimation.triggerEvents(artboard.components, currLayerAnim, layer.time, _animationEvents);
19
     
20
      for(var event in _animationEvents)
21
      {
22
        switch (event.name)
23
        {
24
          case "Trigger Name":
25
          //Event is Triggered
26
            break;
27
        }
28
      }
29
      ...
30
     }
31
 }
Copied!
1
...
2
    override open func advanceControls(by elapsed: Double) -> Bool {
3
    
4
        var arrayEvent =  Array<AnimationEventArgs>()
5
        
6
        for i in 0..<controlLayers.count {
7
        ...
8
         currentAnimTime = layer.time;
9
           
10
       // EVENT TEST:
11
        if(animation == nil)
12
        {
13
            animation = artboard.getAnimation(name: "Mustache_New")
14
        }
15
                   
16
        animation?.triggerEvents(components: artboard.components! as! Array<ActorComponent>, fromTime: currentAnimTime, toTime: layer.time, triggerEvents: &arrayEvent)
17
                  
18
        for i in 0 ..< arrayEvent.count {
19
            print(arrayEvent[i].name)
20
            if(arrayEvent[i].name == "Event"){
21
                //do something
22
            }
23
        }
24
        .....
25
        
26
        }
27
    }
28
...
Copied!
1
initialize(artboard)
2
  {
3
    this._ProgressTracker = artboard.getAnimation("animationWithTrigger");
4
  }
5
  
6
  advance(artboard, elapsed)
7
  {
8
    var _animationEvents = [];
9
    
10
    var _currLayerAnim = this._SmileTime;
11
​
12
    this._SmileTime += elapsed * 1;
13
     
14
    this._ProgressTracker.triggerEvents(artboard._Components, _currLayerAnim, this._SmileTime, _animationEvents);
15
    
16
    for (let event in _animationEvents)
17
    {
18
      switch (_animationEvents[event].name)
19
      {
20
        case "Event":
21
          ///play our sound when the event happens
22
         
23
          break;
24
      }
25
    }
26
    
27
    return true;
28
  }
Copied!
1
 
2
function _Advance(_This)
3
	{
4
	...
5
	const actor = _This._ActorInstance;
6
	...
7
	if (actor)
8
		{
9
			if (_This._ProgressTracker)
10
			{
11
				_This._ProgressTracker.triggerEvents(actor._Components, _currLayerAnim, _This._SmileTime, _animationEvents);
12
				
13
			}
14
		}
15
​
16
		for (let event in _animationEvents)
17
		{
18
			//console.log(_animationEvents[event]);
19
			switch (_animationEvents[event].name)
20
			{
21
				case "Event":
22
					///play our sound when the event happens
23
					_This._Song.play();
24
					break;
25
			}
26
		}
27
		
28
}
29
FlareExample.prototype.setActor = function(actor)
30
{
31
...
32
  this._ProgressTracker = actorInstance.getAnimation("Animation");
33
...
34
}
Copied!
1
 ...
2
int main()
3
{
4
   flare::ActorAnimation* eventAnimation = artboard->animation("Mustache_New");
5
   eventAnimation->triggerEvents(artboard,currLayerAnim, animationTime, events);
6
 }
7
 ...  
Copied!
Constraints
implements ActorConstraint class 
You can trigger Constraints with a keyframe during your animation, which can run any custom code at runtime.  Constraints can be attached to any object.
Rive Runtimes - Previous
ActorAnimation
Next - Rive Runtimes
Custom Flutter Widgets
Last modified 6mo ago
Copy link
Contents