Tutorial Part One: Create a New Experience

Let's start at the beginning, running IntuiFace Composer and then creating and prepping a new experience. NOTE: Instructions for downloading the images, videos and additional content used in this tutorial can be found here.

Composer is a what-you-see-is-what-you-get editor - aka WYSIWYG, pronounced "wih-zee-wig" - which means your final interactive experience will look exactly like it does when you build it. Composer embeds what we call Player so you can "play" your experiences for the purposes of testing. When your experience is finished and ready for deployment, all you need are the project files and a stand-alone Player.

  1. Run Composer.
    • Using its desktop icon - or the Start menu (Windows 7) / Start screen (Windows 8) - run IntuiFace Composer.
    • If this is your first time running Composer, feel free to watch the introductory "IntuiFace Composer in 90 Seconds" video. You can also watch this video later by running it from within Composer's Help menu.
  2. Create a new experience.
    • You are now looking at what we call the Experiences panel. On the New tab, select the very first option, the one titled "Start from blank".
    • Give your project the name Director of the Week - Tim Burton.
    • Click Browse to specify where you want this project to be saved.
    • For Display Size leave the default set to W: 1920px H: 1080px as the interactive experience you are about to recreate was devised for a display of these dimensions. Not coincidentally, this is the typical size of a Windows PC touchscreen display. For your own projects, be sure to specify the correct screen dimensions to ensure Composer presents you with the appropriate amount of design space.
    • Click OK.

      Step_1-1.jpg
  3. Rename the first space in this experience.
    • Look for the Scenes panel in the center of the blue ribbon at the top of Composer. This panel is used to list each scene - think of them as slides - in your experience. As this is a new experience, there is only one scene. The first scene we will build will contain biographical information for Tim Burton so let's rename this scene to “Biography”.
    • Double-click the name Scene 1 in the Scenes panel and then type the word "Biography" followed by the Enter or Tab key on your keyboard. Good - you've just changed the name!

      Step_1-2.jpg
  4. Add a background image.
    • Right-click an empty part of the scene to show a contextual menu.
    • Click on Set image background

      Step_1-0.jpg
    • Select the "Browse to image" option.

      Step_1-02.jpg
    • Browse to the folder you downloaded and unzipped at the beginning of this tutorial. Inside that folder is a folder named 0 - All Spaces. Open that folder as well.
    • Select the image named "Background.png" and open it.

      BackgroundOnly.jpg

You are now ready for Part Two of this tutorial.


tender-next.png