UI Key Features

Update time : 2020-11-30 09:32:46

What Kind of Features Can Be Achieved By UI Key?

What if designer wants to find and replace asset or layer quickly, is there any shortcut instead of finding specific contents by clicking the assets from head to toe? That is why UI Key existing.

When designer uses VE Exporter to export templates, he/she is allowed to add UI Keys to specific assets or layers so he/she can find, edit or replace the contents based on needs. UI Key is composed of capital or lowercase letters, numbers and symbols such as . , _ - / * & etc.

But there are two important points designer needs to note. One is the UI Key added to asset should not be duplicated in the same composition, and another is the UI Key added to layer of each composition must be different from each other. However, UI Key could be duplicated and added to layers in different compositions.

So what are the functions of UI Key?

• Mark and differentiate contents by UI Key. The nature of UI Key is to mark and differentiate assets or layers, so when rendering template, designer can find and modify the specific assets or layers based on the added UI Key.

• Find and edit the contents with interfaces by interfaces. The properties of UI Key will be shown somewhere in VE Exporter and can be set at the time when designer exports the template via VE Exporter. And related interfaces are provided for developer in SDK so as to find the layers and asset files.

Before putting UI Key into practice, there are two points designer needs to differentiate and note.

• The difference between asset UI key and layer UI key

  To understand the difference between asset UI key and layer UI key, designer or user had better to master the relashionship between asset and layer first.

  What is asset? It refers to the images, videos or texts etc that designer or user offers when making template.

  So what is layer? It is a place used to display the objects to be rendered such as asset, effect, and animation etc.

  Generally, a layer is required in order to display an asset, and meanwhile, multiple effects and animations can be added to this layer so as to enrich video products. The same asset can be added to different layers as displayed object.

  Based on this relashionship, different effects will be generated when using UI Key to mark asset and layer.

  When designer uses UI Key to mark and replace specific asset, all the assets in different layers will be found and replaced.

  But when designer uses UI Key to mark and replace specific layer, only all the contents in the layer will be replaced, and other assets, effects, or animations in different layers can not be changed at all.

• Tips when adding UI key to text layer

  One thing needs to be noted that it is the image asset that can be added to text layer with VE Exporter. Designer should draw the text contents as an image first in VE Exporter with SDK, and then find and replace assets on layer with the drawn text image.

  If designer wants to add UI Key to text layer, and allows user to modify the layer through the UI Key, he/she should set text styles such as text fonts, character size, text stroke etc, enable the editable property and export, which will give user an access to edit the text proprties.

And there are two methods are supported to find the assets based on UI Key in SDK.

• One is complete match.

  For example, if a designer sets "title" as the UI Key for a layer, and wants to find the layer with SDK by complete match, he/she should input full "title" and hence the layer can be found. Otherwise, any spelling, capital or lowercase, symbol and length mismatch will be failed to find the layer.

• Another is prefix match.

  It allows designer or developer to find the marked layer based on the prefix setting in the UI Key. For example, if a designer sets "dtext1" as the UI Key for a layer and "dtext2" as the UI Key for another layer, when he/she finds the assets by the prefix "dtext", the two layers with tags of "dtext1" and "dtext2" will be found; but if he/she finds the assets by the prefix "dtext1", only the layer with UI Key "dtext1" will be found. When the layers (or assets) are found, designer can set about modifying them.

So what secenarios does the UI Key apply to?

• Add subtitles to the video automatically.

  Let\'s presume a user needs to add his/her name to the end of video rendered from template as subtitle, and it will be achieved by UI Key automatically. Then how does this work?

  First, designer adds a text layer to the appropriate time and position in the template, and set the text style or text animation on the layer as video subtitle. Then, when exporting the template, designer adds UI Key to the text layer, such as "user_name", and then enable editable property. Last, after loading the template, designer can find the layer with "user_name" as its UI Key, and then replace the content of the layer with the user\'s name.

• Add subtitle to image in Dynamic template.

  In dynamic template, the assets that are imported via the standard interfaces will be shown and used as the main assets, and when using the template to generate video, it will be created according to the main assets.

  However, there is no way to know which animation segment an image or a video correspods before rendering. If that\'s the case, how to change the additional assets of main assets, such as the image or sutitle or sticker etc? So it is time for UI Key to come into play.

  Mark method 1:

  First, add text layer or other layer to the user\'s assets in animation segment, and then mark the layers or other contents by UI Key. In this way, the relashionship between the main and the additional assets will be established.

  For example, mark the source layer where the user asset is stored in an animation segment in the format of dimg + index number such as dimg1, dimg2, dimg3....

  If there is only one asset in the segment, set dimg1 as the UI Key in the source layer where the asset exists. But if there are two layers in the segment, set dimg1 as UI Key for one layer, and dimg 2 for another.

  Then one more thing needs to be done is establishing the relashionship between the main and the additional assets.

  For example, designer can set the UI Key for the related text layer, which every image corresponds, in the format of dtext + the index number of source layer + . + index number.

  Let’s move to an assumption. There are two source layers in a segment, and each layer contains two text layers as the additional assets respectively.

  Designer set the dimg 1 as UI Key for the first source layer, dtext 1.1 for one additional text layer and dtext 1.2 for another.

  Then set the dimg 2 as UI Key for the second source layer, dtext 2.1 for one additional text layer and dtext 2.2 for another.

  In this way, the relationship between the main and the addtional assets is born.

  With the relationship, SDK enables designer to locate the main asset, find and replace its additional asset based on the UI Key.

  And please refer to the corresponding technical and designer documents to get more details about this interface feature.

  Mark method 2：

  The method above is a good way for designer to add image or text, but it needs more appointments for communication between designer and developer, which is time consuming. In order to solve this situation, we provide a saving-time mark method.

  Let\'s go to another assumption. There are two source layers needed to be marked in a segment, and each of them contains three text or image layers. Then designer can set to_replace as the UI Key for the first source layer, which can not be sarted with dimg, and set replace_to as the UI Key for the second source layer. Note that the UI Key can not be duplicated in the same segment.

  Sequentially mark the additional assets of the source layer (images or texts) in the format of to_replace.index number. For example, as for the first source layer, set to_replace.1 as the UI Key for its first additional layer, to_replace.2 for its second additional layer, and to_replace.3 for its third additional layer.

  As for the second source layer, set replace_to.1 as the UI Key for its first additional layer, to_replace.2 for its second additional layer, and replace_to.3 for the third additional layer.

  In this way, designer can mark the assets with no necessity to inform the developer what the UI Key is.

  This method can work only in cooperation with SetReplaceableJson method. Please refer to ReplaceableJson Guide to get more details about asset replacement.