This is the starting point for learning about scripting in Radi.
What you'll find below are mostly "scripting recipes". Instead of an trying to cover all the topics from fundamentals on up, this document will demonstrate some essential techniques using practical examples.
Do you have a topic in mind that really ought to be covered here? Please send email to pauli (at) lacquer (dot) fi, and I'll do my best to answer.
How scripts relate to events
There are two places where event scripts can be attached in Radi:
Top-level elements. Any top-level element (Canvas, Video, Block, etc.) can contain scripts to handle interactive events like user mouse clicks.
Timeline events. These are events that occur on the timeline. You can create any number of them as needed. A timeline event is always associated with a specific frame, and the event script is called when playback enters that frame.
This illustration shows where these event scripts can be edited in the user interface.
Redirecting to another website
Pausing the timeline
Scripts can access the current Radi document to control its playback and access its content, for example layer data. This access is provided to event scripts using an object called simply 'radi', which has a number of methods that event scripts can call.
The 'radi' object is provided to element event scripts as a property of the event object, i.e. event.radi. To stop playback, you would call the stop method like this:
To resume playback, you would similarly call: event.radi.play()
Moving to a different frame
Scripts can jump to a different frame on the timeline. A common use for this feature is to place independent animation sequences on the same timeline. When one sequence ends, it will pause the timeline and wait for some user input. An event script will then jump to a different frame and restart playback.
Jumping to another frame works very similarly to the stop/play example given above: event.radi.goToFrame(frameNumber)
The following is a slightly more complex example of an event script. The timeline is moved to a different frame depending on whether the user clicks on the left or right side of a canvas element. This is accomplished by checking the event.offsetX property, which gives the horizontal mouse position (X coordinate) within the element. There is naturally also an event.offsetY property that you can use to read the vertical position.
Because this script is longer than one line, we should place it in the scene root object rather than putting it directly in the Inspector. This is good practice because it ensures that all your longer scripts can be found in one place. The scene root is an object that you can access everywhere in your Radi document via env.scene and it's designed for storing custom scripts only. The event script will simply call the method in the scene root:
The method looks like this -- the use of event.offsetX to determine where the user has clicked:
The name of our custom method is canvasClicked. This could be anything. In a real application you'd probably want to use some more descriptive name that relates to your content.
In the Script Editor it's easy to tell what the this object refers to: it's written just above the editing area ("Displaying script for...").