User Tools

Site Tools


albumviewer

AlbumViewer

The AlbumViewer component is primarily meant to display an Album element and its associated meta-data.

A viewer holding an album element partway between a horizontal scroll of pictures
AlbumViewer screenshot

Characteristic

Definition
Type Interactive Display Object
Category Component
Scope Local
Position *
Parents Container
Children Images, buttons
Gestures *
Requirements none
Children Images, buttons
Gestures *
Requirements none

Attribute

Type

Description
album object reference the Album element

See Also: Display Attributes

<AlbumViewer id="album-viewer-1" front="#album_demo" back="#album_info" x="650" y="180" rotation="10">
    <Album id="album_demo" class="album_element" targetParent="false" mouseChildren="true">
        <Image id="img1" src="images/USS_Macon_over_Manhattan.png" width="500" height="300" />
        <Image id="img1" src="images/wb3.jpg" width="500" height="300" />
    </Album>

    <!-- Info panel container (back). -->
    <TouchContainer id="album_info" class="info_container" visible="false" targetParent="true" mouseChildren="false" >
        <Graphic color="0x6699FF" alpha="0.6" lineStroke="0" class="info_bg" shape="rectangle"/>               
        <Text id="title" class="title" border="false" selectable="false" text="The Gare Montparnasse"/>                        
        <Text id="description" x="10" width="580" wordWrap="true" color="0xFFFFFF" class="info_description" selectable="false" text="The Gare Montparnasse became famous for the derailment on 22 October 1895 of the Granville–Paris Express, which overran the buffer stop."/>                             
    </TouchContainer>

    <!-- This is just the frame for the whole viewer. Thick frames are very useful for objects with context-specific touch, as it gives a touchable border. The AlbumViewer does not have context specific touch, so feel free to style it however you like. -->
    <TouchContainer id="frame-c" class="frame_container" visible="true" targetParent="true" mouseChildren="false">
        <Frame frameColor="0x999999" frameAlpha="0.3" frameThickness="30" frameShape="rectangle" class="frame_element"/>
    </TouchContainer>

    <!-- Here is where the menu is structured.-->
    <Menu id="menu-1" class="menu_container" x="0" y="0" alpha="0.6" position="bottomRight" paddingLeft="0" paddingBottom="-50" paddingRight="20" autoHide="true" visible="false">
        <Button id="info-btn" class="info_btn" dispatch="down:info" hit="info-hit" initial="info-up" down="info-down" up="info-up" out="info-up">
            <Container id="info-up">
                <Graphic alpha="1" shape="circle" radius="20" lineStroke="1.5" color="0x282E33" />     
                <SWF alpha="1" x="15" y="8" color="0xFFFFFF" scale="1.6" classRef="org.openexhibits.assets.Info" />
            </Container>
            <Container id="info-down">
                <Graphic id="info-bg-down" shape="circle" radius="20" lineStroke="1.5" color="0x495E67" />     
                <SWF alpha="1" x="15" y="8" color="0xCCCCCC" scale="1.6" classRef="org.openexhibits.assets.Info" />
            </Container>       
            <Container id="info-hit">
                <Graphic id="info-hit-bg" shape="circle" radius="20" color="0x666666" alpha="0" />
            </Container>
        </Button>
        <Button id="close-btn" class="close_btn" dispatch="down:close" hit="close-hit" initial="close-up" down="close-down" up="close-up" out="close-up">
            <Container id="close-up" class="up" >
                <Graphic alpha="1" shape="circle" radius="20" lineStroke="1.5" color="0x282E33" />     
                <SWF alpha="1" x="11" y="11" color="0xFFFFFF" scale="1.6" classRef="org.openexhibits.assets.Close"/>
            </Container>
            <Container id="close-down" class="down">
                <Graphic alpha="1" shape="circle" radius="20" lineStroke="1.5" color="0x495E67" />     
                <SWF alpha="1" x="11" y="11" color="0xCCCCCC" scale="1.6" classRef="org.openexhibits.assets.Close" />
            </Container>   
            <Container id="close-hit" class="hit">
                <Graphic id="close-hit-bg" shape="circle" radius="20" alpha="0" />
            </Container>
        </Button>
    </Menu>
    <GestureList>
        <Gesture ref="n-drag" gestureOn="true"/>
        <Gesture ref="n-scale" gestureOn="true"/>
        <Gesture ref="n-rotate" gestureOn="true"/>
   </GestureList>
</AlbumViewer>
albumviewer.txt · Last modified: 2015/09/18 12:11 by glass