Image Sequence Button Animation
Last updated
Was this helpful?
Last updated
Was this helpful?
This simple button animation uses the feature to create an interactive, animated button. When the mouse hovers over the button, the button animates to a half-pressed state. When the mouse moves off of the button, the button returns to the original unpressed state. When the mouse is pressed, the button animates to a fully pressed state and returns to the original unpressed state upon release.
Object Node
ImageSequence Object Node 'Button'
'Stop Image Sequence'
We will use the green Group 'On Mouse Enter' to explain how the Logic of each group functions.
Although Incari's built-in tools are powerful, there are many use cases where the desired effect can't be achieved using Incari alone. In this case, it often makes more sense to create animations in dedicated animation software. Most tools, such as Adobe After Effects, provide an easy way of exporting an animation as an Image Sequence, most commonly in the .png file format. By using Incari's Image Sequence Object and , we can take these frames and combine them with Incari's Logic system.
Files of the .incseq type are Image Sequences. To open the file, simply double-click it and the will open. Here you can see all of the images of the sequence arranged in order.
To create this type of file, simply right-click in the and select "Create Asset > Image Sequence". Then double-click it to open the , drag the images into it directly from the , and then click the save icon to save it.
This Demo Project uses a combination of , an Object Node, , and a to make the button animation function as desired.
There are four groups of Logic in the Project, each triggered by one of the four used: , , , and .
The two differences between the groups are the that triggers them and the of the at the end.
The first Node in the Logic is the . This means that when the mouse enters the area of the designated Object, the is fired. In this case, the Object designated in the Node is the Button ImageSequence Sprite Object. You can designate an Object by dragging the Object from the into the Node Attributes of the Event Node.
The next Node in the Logic is the . This Function takes the input of the Image Sequence Sprite Object ('Button') as an Object ID, gets the current frame of the Image Sequence with the , stops the Image Sequence with a , and outputs the last shown frame of the Image Sequence before it was stopped.
It is important to save the last shown frame of the Image Sequence before the Image Sequence is stopped, because the resets the current frame of the Image Sequence back to the first frame of the Image Sequence. This last shown frame will be used as the new starting frame for the , which will come next directly after the .
Without using the last shown frame as the new starting frame, the Image Sequence always plays from the beginning (the original starting frame set in the ). This is not ideal if the button has been clicked too fast or the mouse has gone in and out of the object area faster than the time it takes for the Image Sequence animation to play through fully. Without this , the animation may jump instead of always smoothly moving through the frames in the correct order.
The last Node in each of the groups is the . While the same Node is used in each group, the are set differently for each event because a different section and direction of the Image Sequence will be designated for each event.
For the event, we want the button to go from an unpressed button to a half-pressed button. This means that in the of the , we should set the starting frame to be 0 (unpressed state) and the end frame to be 5 (half-pressed state). Since we have 11 total frames in the Image Sequence, frame 5 is half-way through the frames. The PlayDirection should be set to Forward so the frames show in ascending order: (0,1,2,3,4,5).
For the 'On Mouse Exit' group, we trigger the Logic with the . Here, the Image Sequence will show the button returning to the unpressed state from the half-pressed state it is currently in. The same start and end frame from the 'On Mouse Enter' group are used, but this time the PlayDirection is set to Backward so it plays in descending order: (5,4,3,2,1,0).
For the 'On Mouse Down' group, we trigger the Logic with the . Here, the Image Sequence will show the button going to the fully pressed state when the mouse button is pressed down. This time, the starting frame is set to 0 (unpressed state) and the end frame is set to 10 (fully pressed state). The PlayDirection is set to Forward. Remember that the start frame will not actually start at 0 and will always start from the last current frame. Since the mouse must enter the area of the button to click it, the starting frame will likely be set to 5 by the Logic while the project is playing.
For the 'On Mouse Up' group, we trigger the Logic with the . Here, the Image Sequence will show the button going fully back up to the unpressed state when the mouse button is released. The starting frame is also set to 0 and the end frame is set to 10, but this time the PlayDirection is set to Backward. Remember that the start frame will not actually reach the last frame of 0 if the mouse is still hovering over the button.
