Two-slides Interactive Videos-Template content creation Tutorial
#Content Editor #Content Creation #Basic difficulty
Last updated
#Content Editor #Content Creation #Basic difficulty
Last updated
Let's first take a look at the before and after comparison of Template content creation：
VS
The main modifications after template iteration are focused on the following aspects:
1）Asset Replacement: Replaced videos/audios/images/texts.
2）Asset Hiding: Hid or deleted unnecessary assets, including instructional text groups and guide line.
3）Scene Addition: The original template had only one scene, but after iteration, a new "Scene 2" was added as the end page.
4）Asset Addition: Global scene——product name text.Scene 1 ——amount panel, particle effects. Scene 2——reward panel, two download buttons.
1）Animation Optimization: Deleted and replaced finger animation and adjusted parameters.
2）Animation Addition: Added corresponding animations to the newly added assets, including amount text and download buttons.
1）Event Optimization: Copied the entire "Press" event from interactive area 2 of Scene 1 to Scene 2 as scene event. Modified the response event of the "Press" event in Scene 1 to "Redirect to app store" and "Redirect to the next scene" .
2）Event Addition: Added response events for Scene 1 video "Ending time"："Display particle effect" and "Play text animation from the beginning." Added event "Redirect to app store" for the download buttons in Scene 2.
Translated the modified and newly added English text into Chinese while fine-tuning the formatting.
Made layout adjustments for each scene to ensure landscape compatibility.
Next, we will provide a detailed illustration of each step.
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.
The main assets to be replaced include:Background image/background music/video/sound effects/finger image/logo/download button/disclaimer.
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.
In this case, since the prepared video assets already include an indication of "RAFFLE" , the original instructional text in the template is not needed. The guide line is also unnecessary during the iteration process and can be hidden or deleted.
In this case, we want the settlement screen in Scene 2 to be placed on top of the gameplay screen. Therefore, we can use the "Duplicate the Scene" feature to preserve the gameplay screen and then add new assets to complete the quick production of Scene 2. After duplicating, we can delete the unnecessary layers.
Also, in the "Scene setting" of Scene 2, we choose to set the global scene to be placed at the bottom layer of the scene.
Global Scene: Product name
Scene 1: Amount Panel/Amount Text/Cash Out Button/Coin Particle Effect.
Scene 2: Mask/Raffle Image/Reward Panel/Reward Item Image/Reward Text/Download Button*2/Scattered Light Particle Effect.
Click to open the "Project Assets" window and add the required assets.
Adjust the position and size of each asset, and group similar assets together.
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.
In this case, we need to create a click effect for the finger. Therefore, we will replace the "Spin Easing" animation with the "Scale Easing" animation and delete the unnecessary "Alpha Easing" and "Displacement Easing" animations. We will then readjust the position and parameters. The parameter settings are as follows:
2-1）Add an animation "Exit - FadeOut" to the text "$ 0" and turn off automatic playback.The parameter settings are as follows:
2-2）Add an animation "Approach - FadeIn" to the text "$ 999" and turn off automatic playback.The parameter settings are as follows:
2-3）Add an animation "Scale Easing" to download button1 on the end page. The parameter settings are as follows:
After adjusting the animations, we proceed to add and adjust the particle effects.
3-1) Coin Burst Effect
Scene 1: Click on "Asset Library" to open the asset library window. Under the particle category, add the desired particle effect.
After making simple adjustments to the position and parameters of the particles, we hide them. We will trigger the display of the particles later using events.
3-2) Scattering Light Effect
Scene 2: Click on "Asset Library" to open the asset library window. Under the particle category, add the desired particle effect.
Make simple adjustments to the position and parameters of the particles. Drag the particle layer below the reward panel layer to display it as a background effect.
1-1) Copy the entire "Press" layer event from interactive area 2 of Scene 1 to Scene 2 as scene event. (You can add a response event of "play click sound effect" in Scene 2 as needed)
1-2)Modify the response event of "press" in interactive area 2 of scene 1 to"Redirect to app store" and "Redirect to next scene".
2-1）Add response events to the event "Ending time" of Scene1's video: "Display particle effect" and "Play text fade in and out animation from the beginning";
Add a response event of "execution delay of 1.5s" and drag it before the original response events of Show hand guidance and interactive area 2 (ensuring that the instructional prompts appear after the video playback is complete and can be clicked again).
2-2）Add a interactive area to cash out button in Scene 1 and add the event "Press - Redirect to app store".
2-3)Add the event "Press - Redirect to app store" for the download buttons in Scene 2.
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.
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.
After completing the entire production, you can perform an overall preview for different device models, languages, and orientations (portrait and landscape).
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.
