Getting Started: Adjusting the layout

The final step is to adjust the position of buttons and perhaps add some new viewer objects to our design. This is all done by modifying the layout.xml file.

All buttons into a box

Objects, such as buttons, can be placed individually in the viewer space. But when you start having objects, it makes sense to group them for easier adjustment. This is done by moving the objects inside a box container.

Open the layout.xml file in a text or XML editor, and replace all the buttons with this code:

<box direction="horizontal" horizontalCenter="0" top="10">
   <button action="pagePrevious"
      upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down"
      disabledState="#PreviousButton_disabled" />
   <button action="index"
      upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down" />
   <button action="pageNext"
      upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down"
      disabledState="#NextButton_disabled" />
</box>

This places a horizontal box containing the buttons 10 px. from the top and centered horizontally.

Upload the modified layout.xml file to your website and reload the Viewer to see the changes.

Adding a page number

Let's add a page number control.

Add the below code to the layout.xml file:

<pageNumber right="20" top="20" />

This positions the control 20 px. from the right and 20 px. from the top.

Add a fullscreen button

Let's add a button for switching the viewer to full-screen mode. As we haven't created any graphics for this button yet, let's open Flash and create one.

Open the skins.fla file in Flash

Copy one of the existing button folders, and rename the four new movieclips with a Fullscreen prefix (NextButton_up becomes FullscreenButton_up). Remember to rename the export name also.
Note: You don't have to follow this file or folder structure, although it is recommended.

Change the design of the four new Fullscreen movie clips anyway you like.

Create a new skins.swf and upload it to your website.

Back to editing the layout.xml.
We'll place the new fullscreen button just before our box component:

Add the code below to the layout.xml file just before the box container.

  <button action="fullScreen" horizontalCenter="-100" top="10"
    upState="#FullscreenButton_up" overState="#FullscreenButton_over" downState="#FullscreenButton_down" />

When you've uploaded the new layout.xml file, the new Fullscreen button should appear. Clicking on the button will take you into full-screen mode.

Add a dock

Finally, let's add a navigation dock at the bottom.

Add this code to the layout.xml file.

<dropp left="0" top="35" right="0" bottom="80" />
<dock left="0" bottom="10" right="0" />

The final result should look like this. Looks pretty good, huh

Well, that's it for this guide!
We hope that it has given you a taste of the many ways you can customize Issuu's Viewer.

Want more?

 

Overview