Animation Loop-Template content creation Tutorial

#Content Editor #Content Creation #Basic difficulty

Comparison Showcase

Let's first take a look at the before and after comparison of Template content creation：

Before VS After

Summary of Iteration Content

The main modifications after template iteration are focused on the following aspects:

1.Scenes and Assets

1）Asset Replacement: Replaced videos/audios/images/texts.

2）Scene Addition: The original template had only one scene, but after iteration, a new "Scene 2" was added as the end page.

3）Asset Addition: Scene 1 ——warning images,help text, and help sound effects. Scene 2——images and texts.

2.Animations and Effects

1）Animation Optimization: Replaced the finger animation and adjusted parameters accordingly.

2）Animation Addition: Added corresponding animations for the newly added assets.

3.Event Settings

1）Event Optimization: Copied the entire "Press" event from Scene 1 to Scene 2 as scene event. Modified the response event of the "Press" event in Scene 1 to "Redirect to the next scene" and "Pause playing help sound effect."

2）Event Addition: Added a event "Redirect to app store" for the download button in Scene 2.

4.Language Translation

Translated the modified and newly added English text into Chinese while fine-tuning the formatting.

5.Landscape Adaptation

Made layout adjustments for each scene to ensure landscape compatibility.

Detailed Explanation of Iteration Content

Next, we will provide a detailed illustration of each step.

1.Scenes and Assets

Tips: Before starting the adjustments, it is recommended to upload all new assets to the "Project Assets" for easier replacement or addition of assets later on.

1）Asset Replacement

The main assets to be replaced include: background image, background music, video, sound effects, finger image (pesticides), instructional text, logo, and download button.

• Select the asset layer that needs to be replaced, click on the "Replace" button on the right side to open the asset library dialog box.

• In the "Project Assets" section, select the asset you want to replace and click the "+" button to complete the replacement.

• For text, you can directly select the text layer and make modifications in the text box on the right side.

• After adjusting the text content and style, you can also click the "Apply to Other Languages" button, making it more convenient and efficient when adjusting the styles for other languages later on.

2）Scene Addition

Right-click on the scene thumbnail and select "Create new Scene" or simply click the "+" button to add a new scene under the current scene.

3）Asset Addition

Scene 1: Warning image, help text, help sound effect.

Scene 2: Logo, download button.

• Click to open the "Project Assets" window and add the required assets.

• Adjust the position and size of the assets.

• Note: When adding new assets, pay attention to whether screen adaptation needs to be adjusted (default is centered). If necessary, you can make the adaptations while adjusting the assets.

2.Animations and Effects

1）Animation Optimization

Replace the finger (pesticides) animation with "Scale Easing" instead of "Displacement Easing", and adjust the position and parameters. The parameter settings are as follows:

2）Animation Addition

2-1）Add an animation "Emphasize - Flash" to a warning image, the parameter settings are as follows:

After completing the settings, we click on the "Copy" button and paste the flash animation onto the other three warning images. To do this, hold down the Ctrl key (Command key for Apple computers), select the layers of the other three images, and click on the "Paste - Paste the Layer Animation Only" option at the top.

2-2）Add an animation "Displacement Easing" to help text, the parameter settings are as follows:

2-3）Add an animation "Scale Easing" to the download button on the end page. The parameter settings are as follows:

3.Events Settings

1）Event Optimization

1-1) Copy the entire "Press" layer event from Scene 1 to Scene 2 as scene event.

1-2)Modify the response event of the "Press" layer event in Scene 1 to "Redirect to next scene" and add the response event "Pause playing help sound effect."

2）Event Addition

Add the event "Press - Redirect to app store" for the download button in Scene 2.

4.Language Translation

• Click on "Global Settings" and click on the brush icon next to "Default Language" to open the language translation window.

• Select the target language as Chinese and check all the text boxes. Click on the "Translate (Beta)" button for automatic translation.

• If you are not satisfied with the translation result, you can make manual adjustments directly in the text boxes.

• After all adjustments, click on "Confirm" to apply the multilingual translation.

• Next, switch to the Chinese version for preview and make minor adjustments to the style of the Chinese text.

5.Landscape Adaptation

• Note: After completing the vertical adjustments for each scene, it is necessary to perform landscape adaptation (You can use the "Reuse vertical screen position configuration" button frequently).

• Also, pay attention to whether the screen adaptation settings for each layer are correct in landscape mode.

6.Overall Preview

After completing the entire production, you can perform an overall preview for different device models, languages, and orientations (portrait and landscape).

Demo Screen Recording

Note: This video is a demonstration recording of the tutorial mentioned above. It includes only visual content and does not have audio narration.

The video provides a detailed record of the iterative process of Template content creation. The demonstration speed has not been adjusted significantly, allowing you to follow along with the video step by step. If you are already familiar with a particular step, you can skip it as needed.