A quick tour of Composer

IntuiFace Composer is the authoring tool for creating your interactive experiences. With Composer you can design all aspects of your experience withouth writing any line of code. Visit our Community to find user ideas, or take a look at our free Experience Samples for inspiration. For more details about using Composer, you can also subscribe to our free webinar sessions.

Let's get our tour started !

Table of Contents

    The Composer window

    Composer.jpg

    The Composer window has the following layout:

    1. Menu bar

    2. Assets Panel

    3. Collections Panel

    4. Design Accelerators Panel

    5. Interface Assets Panel

    6. Content Library

    7. Scene Structure

    8. Scenes List

    9. Scene

    10. Properties Panel

    11. Triggers and Actions Panel

    1. Menu bar

    The menu bar contains different menus and options you can use when you create your experiences. It also allows you to save, publish your experiences but also access the project settings and help items.

    Top of page

    2. Assets Panel

    This panel allows you to add assets, to your interactive experience.
    This panel can be accessed by clicking on the Assets Icon in the panel ribbon or by doing Alt + A on your keyboard.

    Assets-panel-icon.png

    Assets are listed in 4 categories:

    1. Media: Image, Video, Webcam, Document, Web Browser, Flash Animation, 3D Model, Audio, Deep Zoom Image
    2. Text: Simple Text, Rich Text, Text Input
    3. Interactive Assets: Button, Toggle Button, Linear Gauge
    4. Shapes: Ellipse, Rectangle

    Clicking an item button add into into the scene.

    NOTE:

    • Assets can also be added by right-clicking on the scene and selecting "Insert"

    Top of page

    3. Collections Panel

    This panel allows you to add collections, to your interactive experience.
    This panel can be accessed by clicking on the Collections Icon in the panel ribbon or by clicking Alt + C on your keyboard.

    Collections-panel-icon.png

    Collections are listed in 3 categories:

    1. Layout Collections: Group, Pinboard
    2. Ordered Collections: Asset grid, Asset flow, Carousel, Helix, Flip chart, Slide show, Circular panel
    3. Dimensional Collections: Map, Timeline
    • Collections can also be added by right-clicking on the scene and selecting "Insert"

    Top of page

    4. Design Accelerators Panel

    The Design Accelerators panel lists all prebuilt assets, collections and spaces available for insertion in your experience. This panel can be accessed by clicking on the Design Accelerator Icon in the panel ribbon or by clicking Alt + D on your keyboard.

    DA-panel-icon.png

    • Use the horizontal slider to control the display size of Design Accelerator options as you browse the content of each bundle
    • Use the "Get More Accelerators" buttton to view a list of additional, downloadable Design Accelerator bundles.
    • Use the gear-shaped Options button to expand/collapse the displays of al downloaded bundles and to open the folder on your PC containing all downloaded bundles

    Top of page

    5. Interface Assets Panel

    Interface Assets (IA) enables IntuiFace experiences to access external data, business logic or devices.
    This panel can be accessed by clicking on the Interface Assets Icon in the panel ribbon or by clicking Alt + I on your keyboard.

    IA-panel-icon.png

    Here you can insert Off-the shelf IAs provided by IntuiLab or have access to the Interface Assets present in your project.

    Top of page

    6. Content Library

    The Content Library lists all available graphic and auditory media.

    This panel can be accessed by clicking on the Content Library Icon in the panel ribbon or by clicking Alt + L on your keyboard.

    Content-Library-Panel-icon.png

    • Use the + button at the top of the Content Library panel to import new content for your interactive experience.
      Graphic media can also be added to the scene or Content Library by dragging-and-dropping them from within File Explorer.
      Use the Sort/Filter button to change the way content is displayed in the Content Library.

    Top of page

    7. Scene Structure

    The Scene Structure panel contains details about the content of the currently selected space (layers, assets, collections.
    This panel can be accessed by clicking on the Scene Structure Icon in the panel ribbon or by clicking Alt + S on your keyboard.

    Scene-Structure-panel-icon.png

    Selecting an item in the Scene Structure panel:

    Use the lock symbol to the left of each item to toggle whether the item can be selected and manipulated in the scene. This lock capability can be very helpful when you want to prevent others from modifying your experiences.

    Top of page

    8. Scenes List

    The Scenes List shows how your experience is organized into [scenes and sequences][]. The order of scenes has no direct relationship to the order experienced by your users as your design determines navigation options.

    Selecting a scene in the Scenes List displays:

    To [add a new scene or sequence][], use the Add A Scene button at the bottom of the Scenes Lists Panel.
    To remove spaces and sequences, right-click on it and select "Delete".
    Double-click on the name of a scene or sequence to change it.
    Drag-and-drop scenes and sequences to reorder them.

    Top of page

    9. Scene

    The scene is where you create your experiences.

    Add assets and collections to the scene to provide content for your users and allow them to interact with your interactive experience
    Select another scene in the Scenes List to work on a different space.

    Click the PLAY button at the top of the blue strop or hit the <F5> key on your keyboard to run your interactive experience and see your experience as your users will see them. Click the Escape button on your keyboard to exit Play Mode.

    Top of page

    10. Properties panel

    The Properties panel shows the properties of the currently selected item in the Scene Structure panel or in the scene. This panel can be accessed by clicking on the Properties Icon in the panel ribbon or by clicking Alt + P on your keyboard.

    Properties-panel-icon.png

    You can modify some properties (position, size, orientation) by selecting items and manipulating them directly in the scene. You can

    • drag the item to a new location
    • adjust the item's square-shaped handles to change its dimensions
    • rotate the round-shaped handle to change the rotation of the item

    All assets and collections have additional properties you can display by clicking the Show All Properties button on the left-hand side of the Properties panel.

    Top of page

    11. Triggers and Actions Panel

    The Triggers and Actions panel captures all of the when/then relationships you use to create responsive and engaging experiences. This panel can be accessed by clicking on the Triggers and Actions Icon in the panel ribbon r or by clicking Alt + T on your keyboard.

    TA-panel-icon.png

    Amongst the 100+ triggers in IntuiFace you will find:

    • When a button is pushed
    • When a timer reaches 0
    • When a number is entered
    • When an image is selected
    • When a video reaches a specific timestamp

    The results of those triggers are actions and IntuiFace has more than 100 of those as well. Examples include:

    • Move an image across the screen
    • Rewind a video
    • Navigate to a new scene
    • Zoom in on a specific map coordinate
    • Send an email

    See this article for more information about triggers and actions.

    Top of page

    12. Backup and Auto-Save

    Composer will auto-save your work!

    Manipulating elements on the scene, adding assets, triggers, actions or setting properties, in other words performing any changes to your experience, will trigger an auto save mechanism.

    Composer will auto save your work every minute.

    There is also a backup file that is created in case anything goes wrong with your experience.

    Top of page