Property Elements: anchor

anchor specifies an anchor point.

Anchor points are points in the layout that objects may be anchored to. An anchor point may be defined by specifying the x, y, or both x and y attributes.

Attributes

name Description
name Specifies the name of the anchor point
x Specifies the x co-ordinate of the anchor point
y Specifies the y co-ordinate of the anchor point

Example

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#111111">
 
 <skin source="skins.swf"/>
 
 <anchor name="a1" x="200" y="50"/>
 
 <button action="pagePrevious" upState="#PagePreviousButton_up"
   right="#a1" top="#a1"/>
 <button action="pageNext" upState="#PageNextButton_up"
   left="#a1" top="#a1"/>
 
 ...
 
</viewer>

In the example above, anchor point a1 is defined to be at 200 px. on the x axis and 50 px. on the y axis. The pagePrevious and pageNext buttons are then anchored to either side of a1 horizontally and below a1 vertically.

 

Anchor points may be combined with offsets:

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#111111">
 
 <skin source="skins.swf"/>
 
 <anchor name="a1" x="200" y="50"/>
 
 <button action="pagePrevious" upState="#PagePreviousButton_up"
   right="#a1:-5" top="#a1"/>
 <button action="pageNext" upState="#PageNextButton_up"
   left="#a1:5" top="#a1"/>
 
 ...
 
</viewer>

In the example above, the pagePrevious and pageNext buttons are anchored to either side of anchor point a1 horizontally but offset by 5 px. on either side.

 

Anchor points may be anchored to other anchor points:

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#111111">
 
 <skin source="skins.swf"/>
 
 <anchor name="a1" x="200" y="50"/>
 <anchor name="a2" y="#a1:10"/>
 
 <button action="pagePrevious" upState="#PagePreviousButton_up"
   right="#a1:-25" top="#a1"/>
 <button action="index" upState="#IndexButton_up"
   horizontalCenter="#a1" top="#a2"/>
 <button action="pageNext" upState="#PageNextButton_up"
   left="#a1:25" top="#a1"/>
 
 ...
 
</viewer>

In the example above, the index button is anchored to anchor point a2, which is a 10 px. offset below a1.

^ and $ are special anchor points representing the top-left and bottom-right points of the container.

 

Anchor points may be anchored to other anchor points:

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#111111">
 
 <skin source="skins.swf"/>
 
 <image source="#Logo" right="#$:-10" top="^:10"/>
 
 ...
 
</viewer>

In the example above, the logo image is positioned at 10 px. from the right edge of the Viewer and 8 px. from the top edge of the Viewer. This is, in effect, equivalent to setting the values of the right and top attributes to 10 and 8, respectively; however, anchor points allow for more complex layouts.

Additionally, the Viewer comes with certain predefined anchors that may be used to create even more flexible layouts.

 

Contents