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 has the following layout:
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.
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 are listed in 4 categories:
- Media: Image, Video, Webcam, Document, Web Browser, Flash
Animation, 3D Model, Audio, Deep Zoom Image
- Text: Simple Text, Rich Text, Text Input
- Interactive Assets: Button, Toggle Button, Linear
- Shapes: Ellipse, Rectangle
Clicking an item button add into into the scene.
- Assets can also be added by right-clicking on the scene and selecting "Insert"
This panel allows you to add collections, to your interactive
This panel can be accessed by clicking on the Collections Icon in the panel ribbon or by clicking Alt + C on your keyboard.
Collections are listed in 3 categories:
- Layout Collections: Group, Pinboard
- Ordered Collections: Asset grid, Asset flow, Carousel, Helix,
Flip chart, Slide show, Circular panel
- Dimensional Collections: Map, Timeline
- Collections can also be added by right-clicking on the scene and selecting "Insert"
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.
- 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
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.
Here you can insert Off-the shelf IAs provided by IntuiLab or have access to the Interface Assets present in your project.
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.
- 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.
The Scene Structure panel contains details about the content of
the currently selected space (layers,
assets, collections, controls).
This panel can be accessed by clicking on the Scene Structure Icon in the panel ribbon or by clicking Alt + S on your keyboard.
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.
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:
- the content of the scene (assets, collections, controls) in the scene
- details of the content of the scene (layers, assets, collections, controls) in the Scene Structure panel
- the properties of the space in the Properties panel
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.
The scene is where you create your experiences.
Add assets, collections and controls to the scene to provide content for
your users and allow them to interact with your interactive
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.
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.
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
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.
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.
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.
- Tip of the Month: Getting Answers To Your IntuiFace Questions
- Tip of the Month: Little Known Features of IntuiFace
- Tip of the Month: Experience Design Choices to Optimize Performance
- Tip of the Month: Using Out-of-the-Box Interface Assets to Incorporate Real-time Information
- Tip of the Month: Use Design Accelerators to Improve Appearance and Functionality
- View all (6 more)