Tutorial Part Three: Complete the Design of Your First Space

You've added an image and are starting to feel a little confident. (Ever see one of those multi-touch demo apps with a wall of images you can manipulate? Now you know how to build something like that with Composer in about ten seconds.) In this section you will work with a variety of asset types - don't limit yourself to images! - and begin to put together something visually engaging.

  1. Create a collection of images.
    • Left-click the first Tim Burton image in the Content Library and then press the Shift button on your keyboard while left-clicking the fourth image. The goal is to highlight all four images. Now left-click-and-drag all four images into the scene.

      Step_3_-_1.jpg
    • A little pop-up menu will appear in the scene. Select Insert as a collection.

      Step_3_-_2.jpg
    • You should now see a collection of four images displayed using the default Asset Grid layout. Composer has multiple collection layout formats to choose from.
  2. Modify the collection.
    • Change the collection to a Slide Show by left-clicking the Collection Type button at the top of the Properties panel. Select Slide Show. (If you don't see the Collection Type button in the Properties panel, make sure the collection you just created is selected in the scene.)

      Step_3_-_3.jpg
    • Using the Properties panel, resize the Slide Show to a Width of 245 and a Height of 330 and to move its center point to X=350 and Y=400.

      Step_3_-_4.jpg
      There is nothing magical about these numbers, they just happen to represent the most appealing size and position when we created this experience. The same goes for future width, height and position specifications in this tutorial.
  3. Add a title to the space.
    • Left-click an empty part of the space to remove focus from the collection you just modified.
    • Left-click the Simple Text asset button in the Assets panel or right click on the scene and select the menu item Insert -> Assets -> Simple Text.

      Step_3_-_5.jpg
    • Using your mouse, drag this text to some open space above the Slide Show collection.
    • In the scene itself, double-click the default text "Text" - which currently has a black font and thus is hard to see - and replace it with the word "Biography".
    • Using the Properties Panel, adjust the Font Color to a shade of white and adjust Font Size to 70. Increase the size of the Simple Text asset if necessary.

      BeforeAlignment.jpg
    • Click the Slide Show collection then hold down the Shift key on your keyboard as you click the Simple Text asset. You have now multi-selected these two assets.


    • At the top of Composer you should now see the alignment and distribution icons appear. Click the left-most alignment icon to align the left side of the Slide Show and Simple Text.

      Step_3_-_6.jpg
      You can also drag the Simple Text asset with your mouse and eyeball the alignment; a blue alignment line will appear when alignment is achieved.
  4. Add a quote.
    • Left-click somewhere in a blank part of this scene and then add a new Text asset.
    • Replace the default text with “"One person's craziness is another person's reality."
    • Using the Properties panel, change the Font Color to a shade of white and the Font to "Baskerville Old Face" (or any other font you enjoy).
    • Resize this Text asset to a Width of 330 and a Height of 170.
    • Align the top edge of this quote with the top of the Slide Show collection.


  5. Add a video.
    • Drag in the video from the Content Library and place it below the Slide Show and quote.
    • Resize the video to a Width of 520 and a Height of 290 and then align it with the left edge of the Slide Show collection.



    • Right-click the video and select Show properties.
    • In the Behavior category, check Autoplay.
    • In the Appearance category, check Show Timeline.

      Step_3_-_7.jpg
    • Click the menu item File -> Save to preserve all this effort you've put into the tutorial so far.
  6. Add a document.
    • Drag in the pdf document from the Content Library.
    • Resize the document to a Width of 845 and a Height of 600 and then align its bottom with the bottom of the video.
    • In the Properties panel, change the document style from Horizontal Scroll to Book by clicking the style button.

      Step_3_-_8.jpg
    • Change the container from Pinnable to Free to remove the pin button,unnecessary with the Book style.

      Step_3_-_9.jpg
    • In the Appearance category, in the Controls subcategory, uncheck Show controls.
    • In the "Appearance" category, in the Cover style subcategory, change settings to:
      • Change Fill color to light red
      • Change Radius to 0
      • Check Flat
  7. Your final layout should look something like the following:

    Step_3_-_11.jpg


  8. Press the Play button and put your good work to the test. Flip the images. Turn pages in the book. Run your video.

Head on over to Part Four of this tutorial.


tender-previous.png


tender-next.png