VE Exporter UI Introduction

Update time : 2019-10-28 17:17:26

VE Exporter\'s interface contains 4 main panels.

1. Asset Panel

Asset panel lists all the asset files used in current template design.
You can select and preview each asset file. You can also mark certain files editable for users, set ui key for each asset file, set editor group for each asset file or add ui data to each asset file etc.

1. UI key
   UI key is nothing but a string. You can set a unique ui key for each asset file.
   Developers can use ui key to locate certain asset file and make changes to the asset file.
   UI key is not strictly required, you can set ui key is your product requires to make custom changes to certain asset file.

2. UI Extra data
   UI extra data is also a string. You can set extra data for each asset file. UI extra data is used to store custom product logic related data.
   For example, if you add a timestamp layer in your template, and want to change its content to current date time automatically when user modify the template, then you can set the ui extra data for the text asset to "current date", then developer can check for that extra data, then replace the content with current date automatically.
   UI extra data is not strictly required, you can set ui extra data if your need to use it.

3. Editable Asset
   A template contains a lot of asset files, by default, VE marks all the asset files non-editable to users.
   If you users to change certain asset file, you can mark them editable by right click the asset file and set it to editable image or editable text.

4. Editor group
   By default, if you set multiple asset files editable, each asset will has its own editor group, when users edit those file in apps or webpages, users can only edit one asset at a time.
   But you can move multiple asset files to the same group, so user can modify those asset files at the same time if necessary.

2. Preview Panel

Preview panel can be used to preview each asset file or each editor group. You can also set editor settings for each editable asset file in preview panel.

1. Preview asset files
   When you select an asset file from the asset list, you can preview its content and file infos in preview panel.

2. Change editor settings for editable asset file
   If you select an editable asset file from the asset list, you can preview its editor group and change its editor settings in the preview panel.

• Preview editor group
  When you select an editable asset file, the preview panel will change to editor group preview mode.
  At the left side, it\'s the editable asset file list. You can view all editable asset files in the same editor group. You can drag to change their display order, select each asset file and change its editor settings.
  In the middle is the editor group preview area. You can preview the editor which users will see when they are editing current asset file in apps or webpages.
  At the right side is the editable asset file editor settings panel, you can use it to change how the editable asset should be displayed in the editor.

• Set editable image editor settings
  If you select an editable image, at the right side, you can change its editor settings.
  First, you can set the position, scale and rotation of the asset file in the editor group by load those properties form a select After Effects layer.
  Secondly, you can choose wether you allow users to replace this asset with a image file or a video file or both.
  Then you can set the clickable area for the asset file. When users click or touch that area in the editor in apps or webpages, it will trigger the editor to prompt user to select a asset file to replace that asset.
  You can also set an accessory image for current editable image. An accessory image is nothing but an image that will display in the editor when users editing this editable image. Accessory image can give users a better idea about how the editable image is displayed in the result, make the editor more intuitive to users.

• Set editable text editor settings
  If you select and editable text, at the right side, you can change its editor settings.
  You can set the font, default text content, max input character counts, font size, text fill color stroke color and alignment etc.
  You can also set accessory image for text asset.

• Set editor group settings
  You can also set the size of the editor group. By default, the editor group has the same size as the main composition, you can adjust it according to the editable asset files in the group.

3. Layer Explorer Panel

At the top of layer explorer panel, you have 5 buttons.

• Load comp
  Load the main composition you want to export from After Effects.

• Save template data
  Save your template exporting progress incase you might need to export current project again later.

• Template validation
  Validate current project to check wether it uses any feathers unsupported by VE.

• Preview result
  Preview the template using VE rendering engine to check wether the rendering result is correct.

• Export template
  Export the template to VE template file.

Layer explorer panel also displays all the compositions and layers in current project.
Compositions and layers are displayed the same way as After Effects, you can navigate to check. VE will skip any unsupported layer, they wont be displayed in the layer explorer.
You can also set the ui key and ui extra data for each layer so that developers can use them to locate certain layer and act according to their extra data.

4. Extra Setting Panel

At the right side of VE Exporter, it\'s the extra settings panel. You can add screenshot frame indices for the template and set the background music file for the template.

• Add screenshot frame indices
  Some product might need to take screen shots of the result template video. Designers can add screenshot frame index data to VE template.
  Developers can use those data to take screenshots of the video.

• Add background music file
  For performance reason, VE only allow designers to add one default audio file to VE template(users can change it or add more through SDK). So if you have multiple audio tracks in your project, you need to pre-render them as one audio file and add it to template by click the "Add background music" button.