The following graphic provides an initial overview of the various sections in the composer user interface:

  1. You can directly review your content using the preview feature. To that end, various preview options are available, which you can select by long-pressing the buttons:
    • Preview    
      A quick preview in which the composer of a native device is simulated.
    • Device    
      This is a developer option that requires special settings in the app.
    • Web    
      The composer can export your content as HTML5. This option allows you to view your content as HTML5 export to any browser.

  2. Using the Sync button, you can upload directly to Purple DS Manager. You can post the final approval for content for the app in Purple DS Manager. More information on sync workflow
  3. The    toolbar    with the following tools:
    • Select elements 
    • Create text frame
    • Create a rectangle
    • Create image element
    • Create video element (see     video files    )
    • Create web-view element (see    Embedding HTML    )
    • Create touch area (see     Touch Area    )

  4. The Inspector is also used to display and edit element properties such as position, size, color, rotation, etc., as well as events and extended properties such as pop-ups, video controls, etc. are configured here. You must select an element on the stage to display all the options for this element in the inspector
  5. The Page List provides an overview of all the pages in your document. In the Page Info (list icon), you can edit the settings for the table of contentsIn the page settings (gearwheel icon), you can define the page and content size, content fit strategiesscrollingzooming, and background color for the pages. On the lower end of the page, you can delete the selected page using the "-" icon and add new pages using the "+" icon. The last icon creates a copy of the currently selected page with all its content
  6. On the Stage, the workplace, you can place elements and define interactions and animations
  7. All elements placed on the stage will be show in the Layer List (bottom left). Elements that are higher in the list appear above the elements that are lower on the stage
  8. The Timeline is used for keyframe animation, the animation of elements with the help of keyframes

You can find our video tutorials for the composer on YouTube: 

I Purple DS - Purple DS Composer tutorial

Tutorial | Purple DS Composer - Animations with Compositions