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.
- 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.
- A little pop-up menu will appear in the scene. Select
Insert as a collection.
- 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.
- 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.
- 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.)
- 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.
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.
- 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.)
- 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 ->
- 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
- 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.
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.
- 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
- 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
- Click the menu item File -> Save to preserve all this effort you've put into the tutorial so far.
- 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.
- Change the container from Pinnable to
Free to remove the pin button,unnecessary with the
- 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
- Your final layout should look something like the following:
- 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.
- 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)