Working with Components and the Components Library

An explanation of the most common components you’ll use while designing screens for apps.

Document4.png

Components

Components are visible and interactive elements used in an application. Designers create these elements in After Effects using structural guidelines and constraints so that when exported from AE and imported into You.i Engine they align with the corresponding C++ View classes that implement them at application runtime.

The Component Library saves you from creating these components from scratch and the Properties Panel enables you to customize a component's look and visual behaviour specifically as it relates to this alignment with You.i Engine View classes.

 

Lists

By parenting items in a list composition to a null object called ListRoot you can create a scrolling list. A list can have an infinite amount of list items that are created dynamically based on the list items in the comp. Lists can scroll horizontally or vertically.

 

Buttons

Buttons are the main method of input for users of an app. There are different types of button and each has unique animations it can play when activated. For example, a push button will play a press animation when pressed, followed by a release animation when it is released. A toggle button will remain in a toggled-on state until pressed again. The buttons used for touch screen devices differ from 10ft because the unique user interactions require different feedback.

 

Images

When we want to place a dynamic image in a composition we use an image component. Within the image component there is a solid named image-node which dictates the size and placement the image will have when it is populated.

 

Text Editing

Many apps need the user to enter textual information for login or search.

 

Loaders

Most apps have some kind of loader animation to show the user that content is being populated or the app is processing their actions. Within the loader comp there is an animation marker called Loop that is played continuously as the app loads.

 

Video Player

What would a TVE app be without one. Playback controls, progress/scrubbing bar, and of course displaying video.

 

Component Library

A custom After Effects (AE) panel that provides a user interface to a library of the components supported by You.i Engine and customized, customer-project-specific extended components.

Show the panel by selecting You.i Library.jsx from the AE Window menu.

The panel can be then docked like any other AE panel.

By default the panel shows the components in the Built-in library, those that ship with You.i Engine SDK. 

Select a component and click the add icon (bottom left) to add the component to the composition panel.

There are two other types of libraries supported by the libraries panel: a project library and a user library. By default these are empty. You can switch between the libraries by clicking on the library name to display a dropdown menu:

With either of the project or user libraries selected, you can add the selected composition to the library by clicking the Add icon (bottom middle of the panel). If one of these libraries contains one or more items, an item can be deleted from the library using the Delete icon (bottom right of the panel). 

The project library is intended to enable team members working on the same project to share components. Once an item has been added to the project library, the library is shared with other team members via the team's revision control workflow. For example, many teams use git as a revision control system. After updating the project library with a new custom button, the designer then commits her files to git. When other team members fetch the latest project files from git and open in After Effects they will automatically see the project library updated with the new item.

The user library is for personal use and the underlying component files are not intended to be under project revision control. To make use of the user library you must tell the You.i Engine AE Plug-in where to store it locally. Do this by clicking the "Link a local user library" icon to the right of the User Library (tool tip shown in the screenshot below) and choosing a directory on your computer.