Description
The Linear Converter Interface Asset enables you to convert a numeric value located within an input range into a value located within an output range. (For example, converting Celsius into Fahrenheit.) This is achieved through the use of a linear equation. Thankfully, Intuiface does the math for you! Just provide two conversion examples. These two examples are equivalent to two points on the line representing the linear equation.
You will find usage samples below.
How to find the correct properties
To create an animation where an image (at the bottom) is aligned with another one (at the top) with the left edge of screen, but reaches the right edge of the screen when the top image only reaches the scene center, let's take 2 “pictures/keyframe” of that animation. These will be the A & B points used to compute the linear converter properties.
Point A: We want the 2 images aligned with the left edge of the scene. The X property equals 191px for both images, for both input and output.
Point B: We want the bottom image to be aligned with the right edge of the screen when the top image reaches the scene center. The output will be 1729px when the input is 960px.
Let’s put these values in the linear converter properties.
Here’s the result within Composer. The bottom image follows the top image with a linear interpolation rule.
Properties, Triggers & Actions
Properties
- Sample Input A: input value for the first conversion
- Sample Output A: output value for the first conversion
- Sample Input B: input value for the second conversion
- Sample Output B: output value for the second conversion
- Input: the value you want to convert. You can either set it through a Set Property action or bind it to some dynamic data (ex: the X property of a moving image)
The property below is a read-only property, thus only visible through a binding
- Output: the converted value.
Triggers
Linear Converter
- Value Changed: raised when the converted value has changed
Comparators
Those conditional triggers will be raised when the converted value has changed and the condition is true.
- Number equals...
- Number greater than or equal...
- Number greater than...
- Number less than or equal...
- Number less than...
- Number does not equals...
Usage samples
Convert a value into a percentage
- Sample Input A: 0
- Sample Output A: 0
- Sample Input B: 100
- Sample Output B: 1
This will divide your input by 100.
Convert Celsius into Fahrenheit
- Sample Input A: 0
- Sample Output A: 32
- Sample Input B: 20
- Sample Output B: 68
Because 0°C = 32°F and 20°C = 68°F, this convert will convert your Celsius degrees into Fahrenheit.
You just have to invert inputs and outputs to have a Fahrenheit to Celsius converter.
Create a parallax effect when moving an image.
- Sample Input A: 0
- Sample Output A: - 400
- Sample Input B: 1920
- Sample Output B: 2320
Create 2 images:
- Bind the Input property of your converter to the X property of Image 1, the one moved by the user, on the front layer
- Bind the X property of your Image 2, in the back layer, to the Output property of the converter
When you move your Image 1, its X property will be processed by the converter and the Output value will be used by Image 2. The background image will move faster than the foreground image.
Play with the Output parameters to adjust the speed / difference of movement.
Comments
0 comments
Article is closed for comments.