# Image Sequence Button Animation

## Overview

This simple button animation uses the [**Image Sequence**](https://docs.incari.com/incari-studio/2021.4/4-methods-of-animation#3.-image-sequence) 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.

![Unpressed state (frame 0).](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-192bee573a83a1be09cd67532f94bce5ffddd098%2Fdemoimgsq-unpressed.png?alt=media)

![Half-pressed state (frame 5).](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-8715094e0926fb1bc8c9c242de19b1ec9518e1fd%2Fdemoimgsq-halfpressed.png?alt=media)

![Fully pressed state (frame 10).](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-7ebe65e84cdf624c48e66a06e96950470c4c39cc%2Fdemoimgsq-fullypressed.png?alt=media)

## Image Sequences

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 [**Nodes**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence), 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 [**Image Sequence Editor**](https://docs.incari.com/incari-studio/2021.4/modules/image-sequence-editor) 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 [**Asset Manager**](https://docs.incari.com/incari-studio/2021.4/modules/asset-manager) and select "Create Asset > Image Sequence". Then double-click it to open the [**Image Sequence Editor**](https://docs.incari.com/incari-studio/2021.4/modules/image-sequence-editor), drag the images into it directly from the [**Asset Manager**](https://docs.incari.com/incari-studio/2021.4/modules/asset-manager), and then click the save icon to save it.

![Image Sequence Editor.](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-d549465af96b77af1fc74e22624ce9303c78e23f%2Fdemoimgsq-imagesequenceeditor.png?alt=media)

## Logic

![Root Logic.](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-b8ed35e1a2f22e227da276fc3381502d03031f7b%2Fdemoimgsq-rootlogic.png?alt=media)

![Stop Image Sequence Custom Function.](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-296fc1b5e6f9a1774aaaf403b81f909184d9cafa%2Fdemoimgsq-stopimagefunction.png?alt=media)

## All Nodes

This **Demo Project** uses a combination of [**Event Nodes**](https://docs.incari.com/incari-studio/2021.4/toolbox/events), an **Object Node**, [**ImageSequence Nodes**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence), and a [**Custom Function Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/functions) to make the button animation function as desired.

* [**Event Nodes**](https://docs.incari.com/incari-studio/2021.4/toolbox/events)
  * [**On Mouse Enter**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-enter)
  * [**On Mouse Leave**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-leave)
  * [**On Mouse Button Down**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-button-down)
  * [**On Mouse Button Up**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-button-up)
* **Object Node**
  * **ImageSequence Object Node 'Button'**
* [**Custom Function Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/functions)
  * **'Stop Image Sequence'**
* [**ImageSequence Nodes**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence)
  * [**Play ImageSequence**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/playimagesequence)
  * [**Stop ImageSequence**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/stopimagesequence)
  * [**Get Current ImageSequenceFrame**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/getcurrentimagesequenceframe)

## Logic Groups

There are four groups of **Logic** in the **Project**, each triggered by one of the four [**Event Nodes**](https://docs.incari.com/incari-studio/2021.4/toolbox/events) used: [**On Mouse Enter**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-enter), [**On Mouse Leave**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-leave), [**On Mouse Button Down**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-button-down), and [**On Mouse Button Up**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-button-up).

The only difference between the groups is the [**Event Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/events) that triggers them and the [**Attributes**](https://docs.incari.com/incari-studio/2021.4/getting-started/attributes) of the [**Play ImageSequence Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/playimagesequence) at the end.

We will use the green Group **'On Mouse Enter'** to explain how the **Logic** of each group functions.

## 'On Mouse Enter' Group

![On Mouse Enter.](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-95f89dda86b81c0347eba7ba203e0f29a5478abb%2Fdemoimgsq-onmouseenter.png?alt=media)

## On Mouse Enter Event Node

The first **Node** in the **Logic** is the [**On Mouse Enter Event** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-enter). This means that when the mouse enters the area of the designated **Object**, the [**Pulse**](https://docs.incari.com/incari-studio/2021.4/modules/logic-editor#pulse) is fired. In this case, the **Object** designated in the **Node** [**Attributes**](https://docs.incari.com/incari-studio/2021.4/getting-started/attributes) is the **Button ImageSequence Sprite** **Object**. You can designate an **Object** by dragging the **Object** from the [**Scene Outliner**](https://docs.incari.com/incari-studio/2021.4/modules/scene-outliner) into the **Node Attributes** of the **Event Node**.

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-f51518ba9381414e86cec9e632bc6f5603e0a167%2Fdemoimgsq-onmouseenterattr.png?alt=media)

## Custom Function Node

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-24d5fbc446560ac12826e507a953f0601f31bbb9%2Fdemoimgsq-customfunctionnode.png?alt=media)

The next **Node** in the **Logic** is the [**Custom Function** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/functions). 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 [**Get Current ImageSequence Frame** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/getcurrentimagesequenceframe), stops the **Image Sequence** with a [**Stop ImageSequence** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/stopimagesequence), 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 [**Stop ImageSequence** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/stopimagesequence) 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 [**Play ImageSequence** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/playimagesequence), which will come next directly after the [**Custom Function** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/functions).

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 [**Play imageSequence** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/playimagesequence). 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 [**Custom Function**](https://docs.incari.com/incari-studio/2021.4/toolbox/functions), the animation may jump instead of always smoothly moving through the frames in the correct order.

![Play ImageSequence Node Attributes](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-43907d53e890bacdbc92a7316809e243c7c0bdf6%2Fdemoimgsq-playimageattr.png?alt=media)

## Play ImageSequence Node

The last **Node** in each of the groups is the [**Play ImageSequence** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/playimagesequence). While the same **Node** is used in each group, the [**Attributes**](https://docs.incari.com/incari-studio/2021.4/getting-started/attributes) are set differently for each event, because a different section and direction of the **Image Sequence** will be designated for each event.

For the [**On Mouse Enter**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-enter) event, we want the button to go from an unpressed button to a half-pressed button. This means that in the [**Attributes**](https://docs.incari.com/incari-studio/2021.4/getting-started/attributes) of the [**Play ImageSequence** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/incari/imagesequence/playimagesequence), 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)`.

## 'On Mouse Leave' Group

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-c1de40b999dbd8694b7fe827a754720b0bc5394d%2Fdemoimgsq-onmouseleave.png?alt=media)

For the **'On Mouse Exit'** group, we trigger the **Logic** with the [**On Mouse Leave Event** **Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-leave). 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)`.

![Play ImageSequence Node for Mouse Leave](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-8ffadd9d4653e434b64e5d8aec05c2851c79e7bc%2Fdemoimgsq-playonmouseleave.png?alt=media)

## 'On Mouse Press' Group

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-26a141c53874411aaf25bac356e8a52cd683b349%2Fdemoimgsq-onmousepress.png?alt=media)

For the **'On Mouse Down'** group, we trigger the **Logic** with the [**On Mouse Button Down** **Event Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-button-down). 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.

## 'On Mouse Release' Group

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-e6d82ed3b5e53ca9e16347e5cdb70f2f6f0d97dd%2Fdemoimgsq-onmouserelease.png?alt=media)

For the **'On Mouse Up'** group, we trigger the **Logic** with the [**On Mouse Button Up** **Event Node**](https://docs.incari.com/incari-studio/2021.4/toolbox/events/mouse/on-mouse-button-up). Here, the **Image Sequence** will show the button going fully back up to the unpressed state when the mouse button is released back up. 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.