Older versions (leaves this page)

Properties Panel

The Properties panel lets you modify layouts and define behaviors in AE. It is an excellent tool for setting dynamic content, aligning content and controlling interactive features.

With the Properties panel, you can set properties at the composition level, affecting all layers in the composition, and at the individual layer level. The following figures show you how to access each.

Screen capture of the You.i Properties panel showing composition properties are accessed by the filmstrip button at the top left.

The same screen capture, now showing layer properties are accessed by the stacked layers button on at the top right.

Composition Properties

By default, property changes affect whatever composition you currently have open and selected. Pay attention to the composition name in the Properties panel—this is the composition to which you are applying property changes.

Composition properties are grouped according to:

To modify composition properties:

  • In the Project panel, double click the composition you want to work with.
  • Ensure the Composition tab in the Properties panel is selected.
  • Modify the property.

Layer Properties

By default, property changes affect whichever layer you currently have open and selected.

Layer properties are grouped according to:

Layer properties include:

Screen capture of the You.i Properties panel showing the layer properties section.

Events: You can choose to have the layer receive events, such as touch input, or have events “go through” the layer. To have the layer receive events, enable the check box.

  • Placeholder: You can mark the layer as a placeholder. Placeholder layers get exported but do not get created at runtime.
  • Magnetic: You can mark the layer as magnetic. When magnets are enabled, items in a scrolling view or a list view snap to a position as the view is scrolled.

To modify layer properties:

  1. In the Project panel, double-click the composition you want to work with.
  2. In the Timeline panel, select the layer you want to work with.
  3. Ensure the Layer tab in the Properties panel is selected.
  4. Modify the property.

Composition Type and Subtype

The composition type defines the behavior of the selected composition. It applies software classes to the component in the library. For more details, see Classes.

Types can have subtypes. For example, Push is a subtype of Button.

Buttons are the most common components. A button can be created by appropriate class assignment.

Screen capture of the You.i Properties panel selecting Button as the composition type.

Screen capture of the You.i Properties panel with push selected as the button subtype.

Types and Subtypes

Each section below explains the types and subtypes of the compositions available with the AE plugin.

Bar

Can have the following subtypes:

  • Scroll Bar:
    • Used for displaying scrolling context to the user
    • Default class: CYIScrollBarView
  • Progress Bar:
    • Used to display context of percentage (for example, 20% of 60 minutes played)
    • Default class: CYIProgressBarView

Button

Can have the following subtypes:

  • Push:
    • Interactive component that dispatches events, requires user-interaction
    • Push buttons that interact with remote controls require interaction markers for ‘FocusIn’ , ‘FocusOut’ and ‘Press’
    • Push buttons for a touch device require the ‘Press’ marker
    • Default class: CYIPushButtonView
  • Toggle:
    • Operates in the same way as normal buttons, but with additional On/Off states
    • Toggle buttons that interact with remote controls require interaction markers for ‘FocusIn’, ‘FocusOut’, ‘Press’, ‘Toggle-On’, ‘FocusIn-Checked’, ‘FocusOut-Checked’, ‘Press-Checked’, ‘Toggle-Off’, ‘Disable’ and ‘Disable-Checked’
    • Toggle buttons for a touch device require interaction markers for ‘Press’, ‘Toggle-On’, ‘Press-Checked’, and ‘Toggle-Off’
    • Default class: CYIToggleButtonView

Container

Compositions that ‘contain’ layers or other compositions. Similar to a ‘div’’ in web development, or a ‘MovieClip’ in Flash.

Can have the following subtypes:

  • Regular:
    • Class: none
  • Scrolling:
    • Allows users to scroll and pan through content inside
    • Default class: CYIScrollingView
  • Radio Group:
    • Contains toggled buttons ensuring only one of them is on at any given time
    • Default class: CYIRadioGroupView
  • Drawer:
    • Usually located at the edges of the screen, making it possible for the user to swipe to open and close
    • Default class: CYIDrawerView
  • Stack:
    • Allows the display of only one child view at a time
    • Default class: CYIStackView
  • Focus Zone:
    • Allows you to control how focus is assigned via setting an entryModeDefault class: CYIFocusZoneView

Image

Dynamic image, used to load remote images from a server. Composition must contain a solid named ImageNode. Has no subtypes.

Default class: NetworkImageView

Text Edit

Can have the following subtypes:

  • Regular:
    • Text that the user can edit
    • Default class: CYITextEditView
  • Protected:
    • Input text for passwords (obscures input text)
    • Default Class: CYIPasswordTextEditView

Following types on inputs can be used with CYITextEditView:

  • Text: Displays a keyboard with a full character set and typical QWERTY layout
  • Telephone Number: Displays a keyboard specialized for entering phone numbers.
  • Number: Displays a keyboard specialized for entering numbers.
  • E-mail: Displays a keyboard specialized for entering email addresses.
  • URI: Displays a keyboard specialized for entering URIs

List

Can have the following subtypes:

  • Regular:
    • Dynamic content repeated in a horizontal or vertical manner according to a template or by using placeholders
    • Default class: CYIListView
  • Page Indicator:
    • Used to indicate the current page and the total number of pages of data retrieved from the source
    • Requires an object named PageItem
    • Has dependencies on particular timeline markers. For details, see CYIPageIndicatorView Class Reference.
    • Default class: CYIPageIndicatorView
  • Scrolling Text:
    • Implements a list of scrolling text blocks according to a template. Each block of text is a separate view that is dynamically streamed in and out as needed to improve performance. The list can be resized.
    • The template’s composition must include a text node named ‘Placeholder-Text’.
    • The TextNode composition must be identified as a Placeholder in the You.i Properties Panel.
    • Optionally, identify your background layer by selecting “use this layer as a background” in the You.i Properties Panel.
    • Optionally, specify a layout (e.g., stack layout) for your ScrollingTextView via the You.i Properties Panel.
    • Optionally, modify your TextNode composition to specify a layout (e.g., Stack) and the height constraint “fit its contents” (otherwise, your composition won’t automatically resize).
    • Default class: CYIScrollingTextView

Loader

Indicates loading activity to the user. Requires a ‘Loop’ interaction marker. Has no subtypes.

Default class: CYIActivityIndicatorView

Screen

Composition for a screen of content. Has no subtypes.

Default class: CYIScreenView

Video Surface

Composition for the screen of the video player. Has no subtypes.

Default class: CYIVideoSurfaceView

PlatformView

Creates a placeholder for the PlatformView with text and background.

Default class: CYIPlatformView

WebView

Creates a placeholder for the WebView with background and text.

Default class: CYIWebView

Classes

Developers use classes to enable components to work as you’ve designed. Each component has an equivalent class. Use the Comments field in the Project panel to display what classes are being used. Use the Properties panel to set which classes are being used.

Screen capture of After Effect Project Panel, showing how to set class names in component comments.

For more details about classes, see You.i Platform API Reference.

Custom Classes

Components from the You.i Library panel are tied to underlying software classes used by the You.i TV code. The information in Composition Type and Subtype shows the default classes that are associated with each composition type and subtype. For example, a composition of type Image is associated with class CLIImageView by default. However, the Properties panel lets you associate your own custom class to any composition type and subtype.

To associate your own custom class:

  1. Select the field below the drop-down lists that specify the composition type and subtype.
  2. Provide the name of the custom class in the field beside the checkbox. The following image changes the class associated with an Image composition from CYIImageView to NetworkImageView.

Screen capture of the You.i Properties Panel in After effects, showing where to set a custom class for a component.

Clipping Property

By default, compositions do NOT clip content to their boundaries. Lists, however, do clip by default.

Screen capture of the You.i Properties Panel in After effects, showing where to set clipping for a composition.

Access the Clipping property under the Composition properties.

Possible settings include:

  • Default: Use the default setting
  • Clipping on: Content is clipped to the dimensions of the container
  • Clipping off: Content is not clipped