Sequence Frame Animation Editor
Overview
The Sequence Frame Animation Editor can be used to create and edit Frame By Frame Animations.
| No. | Panel | Description |
|---|---|---|
| 1 | Top Toolbar | Provide loading, adding, deleting, saving and playing sequence frame animations, opening the resource directory and other related functions. |
| 2 | Animation List Panel | Display different sequence frame animations. |
| 3 | Frame List Panel | Display all frames in a sequence frame animation, and the sequence frames can be edited in the Frame List. |
| 4 | Frame Animation Properties Panel | Used to edit each property of the sequence frame animation. |
| 5 | Animation Preview Panel | Used to preview the effect of the selected sequence frame animation. |
| 6 | Frame Preview Panel | Used to preview the selected single sequence frame. |
Toolbar
| Button | Description |
|---|---|
 | Load And Save |
 | Add Animation |
 | Delete Animation |
 | Preview Animation |
 | Open Folder Location Open the directory where the animation configuration file is located in the System Explorer. |
Sequence Frame Animation Properties
| Property | Description |
|---|---|
| Name | Name of the animation. |
| Message Prompt | Information used to define the animation. |
| Is Png | When Is Png is enabled, each selected image (.dds/.png) will be read in Png format, and the scaling will be distorted. |
| Is Dynamic Create | When Is Dynamic Create is enabled, the generated animation is read when viewing the animation. Otherwise, it is read when starting the Editor. |
Note: After editing the properties, the modified properties need to be saved before they take effect.
Opening the Sequence Frame Animation Editor
In the UI Editor, click Tool -> Sequence Frame Animation Editor to open the Sequence Frame Animation Editor(to open the UI Editor, please refer to Opening the UI Editor in the documentation UI Editor).
The Sequence Frame Animation Editor:
Adding Sequence Frame Animations
In the Sequence Frame Animation Editor, click the Add Animation button on top to add a new animation.
| Property | Description |
|---|---|
| Duration | Used to preset the duration of each frame of the new animation uniformly. |
| Path | Used to select the sequence frame images that make up the animation. |
| Name | Name of the animation. |
| Message Prompt | Information used to define the animation. |
| Is Png | When Is Png is enabled, each selected image (.dds/.png) will be read in Png format, and the scaling will be distorted. |
| Is Dynamic Create | When Is Dynamic Create is enabled, the generated animation is read when viewing the animation. Otherwise, it is read when starting the Editor. |
Set the duration of each frame of the animation to be added in Duration of the pop-up window. If you don't set the Duration, then the Duration of each frame will be 30ms by default. Then select the sequence frame images (.dds/.png) that make up the animation in Path. Multiple images can be selected at one time. Last, select a folder in Resource Directory and click the OK button to add all images in that folder.
After adding:
Note: If you don't want to add all the resources in the folder, you can select a folder in the File Browser window, hold down the Ctrl key and left-click to select the needed images on the right of the window, then click the OK button to finish adding. The order of the frames in the final animation is the order in which the images are selected.
After adding:
At this point, the duration of each sequence frame can also be modified separately in Duration(ms).
Enter the animation's name in Name, enter the animation's related information in Message Prompt, check Is Dynamic Create, and click the OK button to finish adding.
The newly added animation can be seen in the Animation List, select it and the animation effect cannot be previewed in the Animation Preview window. This is because the operation of the Editor will not be immediately saved to the configuration file of the sequence frame animation, and the new configuration is not read into memory. So after adding the animation, you need to click the Save button to save the changes and let the Editor read the relevant configuration file again. At this point, select the animation again, and the animation effect will be seen in the Animation Preview window.
The preview effect:
Deleting Sequence Frame Animations
Select the animation to be deleted in the Animation List, then click the Delete Animation button on top to finish the deletion. After deleting an animation, the sequence frames in the Frame List, Sequence Frame Animation Properties, Animation Preview and Frame Preview will all be emptied.
Previewing Sequence Frame Animations
The effect of the selected animation can be viewed in the Animation Preview panel.
However, the original resolution of the animation previewed in the Animation Preview panel is changed. To preview the animation with its original resolution, use the following way.
Select the animation to be previewed in the Animation List, then click the Preview Animation button on top, and you can preview the animation with its original resolution in the pop-up Preview window. Or double-click the animation in the Animation List to open the Preview window for previewing.
Editing Sequence Frames
To add another sequence frame to an added animation, first select the animation in the Animation List, then select a frame in the Frame List, right-click it to open the Shortcut Menu, and insert a frame before or after that frame.
| Menu Item | Description |
|---|---|
| Add To Previous Line | Insert a frame before the selected frame. |
| Add To Next Line | Insert a frame after the selected frame. |
| Remove | Delete the selected frame. |
After clicking Add To Previous Line or Add To Next Line, select a image in Path of the pop-up window and click the OK button. Enter the duration of the frame in Duration and click the OK button to finish the insertion.
After inserting the frame:
To delete one of the frames, select the frame to be deleted in the Frame List, right-click it to open the Shortcut Menu, and click Remove to finish the deletion.
Note:
If all frames in an animation are deleted, it means the animation is also deleted.
After editing the Frame List, the edits need to be saved before they take effect.
Viewing Sequence Frame Animation Configuration Files
In the Sequence Frame Animation Editor, click the Open Folder Location button on top to enter the directory where the configuration file (imageanimations.xml) is located in the System Explorer.
