<?xml version="1.0" encoding="utf-8"?>
  <!--
  

/////////////////////////////////////////////////////////////////////////

  //
  // Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
  // All Rights Reserved.
  // The following is Sample Code and is subject to all restrictions on such code
  // as contained in the End User License Agreement accompanying this product.
  // If you have received this file from a source other than Adobe,
  // then your use, modification, or distribution of it requires
  // the prior written permission of Adobe.
  //
  

/////////////////////////////////////////////////////////////////////////

  -->
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" 
          width="100%" height="100%" initialize="loadResources()"
          show="onShow(event)" 
          hide="onHide(event)"
          verticalScrollPolicy="off" 
          horizontalScrollPolicy="off"
          keyDown="keyDownStateChange(event)"
          implements="mx.managers.IFocusManagerComponent"
          creationComplete="focusManager.setFocus(this)">
          
          <mx:Metadata>
                  [Event("thumbnailView")]
                  [Event("carouselView")]
          </mx:Metadata>        
          
          <mx:Script>
                  <![CDATA[
                      //import samples.photoviewer.Photo;
                          //import samples.photoviewer.Gallery;
                          import mx.events.FlexEvent;
                          import flash.utils.Timer;
                          import mx.resources.*;
                          
                          [Embed(source="local/assets/viewer/icon_pause.png")]
                          private const ICON_PAUSE:Class;
                          
                          [Embed(source="local/assets/viewer/icon_play.png")]
                          private const ICON_PLAY:Class;
                  
                          [ResourceBundle("strings")]
                          [Bindable]
                          private var stringResources:ResourceBundle;
                          [Bindable]
                          private var listViewtooltip:String;
                          [Bindable]
                          private var visualListTooltip:String;
                  
                          private function loadResources():void
                          {
                                  listViewtooltip = stringResources.getString("listViewtooltipKey");
                                  visualListTooltip = stringResources.getString("visualListTooltipKey");
                          }
  
                          [Bindable]
                          public var gallery:sample_Gallery;
                          
                          [Bindable]
                          private var currentPhoto:sample_Photo;
                          
                          private var slideshowTimer:Timer;
                          private var controlsTimer:Timer;
                          
                          override protected function childrenCreated():void
                          {
                              super.childrenCreated();
                              slideshowTimer = new Timer(5000, 0);
                              slideshowTimer.addEventListener(TimerEvent.TIMER, onShowNext);
                                  controlsTimer = new Timer(3000, 0);
                                  controlsTimer.addEventListener(TimerEvent.TIMER, onControlsTimeOut);
                      }
                          
                          private function onComplete():void
                          {
                                  // If Accessibility is set (Screen Reader is active) then, does not hide the controls when image changes
                                  // Controls can be made hidden only by pressing up arrow key
                                  if(!Accessibility.active)
                                  {
                                          currentState = '';
                                  }
                              controlTransition.effect.end();
                          }
                          
                          //when down arrow is pressed, controls are shown
                          //when up arrow is pressed, controls are hidden
                          private function keyDownStateChange(event:KeyboardEvent):void {
                                  if (event.keyCode == 40) 
                                  {
                                          currentState = "showcontrols";
                                  } 
                                  else if (event.keyCode == 38) 
                                  {
                                          currentState = '';
                                  }
                                                  
                          }
                          
                          private function onShow(event:FlexEvent):void
                          {
                                  slideshowTimer.start();
                          }
                          
                          private function onHide(event:FlexEvent):void
                          {
                                  slideshowTimer.stop();
                                  playOrPause.setStyle("icon", ICON_PAUSE);
                          }
                          
                          private function onShowNext(event:TimerEvent):void
                          {
                                  if (controlsTimer != null && controlsTimer.running == true)
                                          controlsTimer.stop();
                                          
                                  gallery.selected = (gallery.selected + 1) % gallery.photos.length; //easy way to keep a cycle going
                          }
                          
                          private function onSlideshowPlayOrPause(event:MouseEvent):void
                          {
                                  if (slideshowTimer.running == true)
                                  {
                                          slideshowTimer.stop();
                                          playOrPause.setStyle("icon", ICON_PLAY);
                                  } 
                                  else
                                  {
                                          playOrPause.setStyle("icon", ICON_PAUSE);
                                          slideshowTimer.start();
                                  }
                          }
                          
                          private function onControlsTimeOut(event:TimerEvent):void
                          {
                                  controlsTimer.stop();
                                  currentState="";
                          }
                          
                          private function onRollOver(event:MouseEvent):void
                          {
                              //we only want to adjust the state if we're coming in from the outside
                              if (event.relatedObject == parentDocument)
                              {
                                  updateControlWidths();
                              currentState = "showcontrols";
                                      controlsTimer.start();
                          }
                  else if (event.target == bottomControl)
                  {
                      //when mouse is in the bottom control bar leave everything up
                      controlsTimer.stop();
                  }
                          }
                          
                          private function onRollOut(event:MouseEvent):void
                          {
                              //we only want to adjust the state if we're leaving to the outside
                              if (event.relatedObject == parentDocument)
                              {
                                  controlsTimer.stop();
                      currentState = "";                                    
                              }
                              else if (event.target == bottomControl)
                              {
                                  //if we rolled out of the bottom control but stayed in 
                                  //the image restart the timer to hide it
                                  controlsTimer.start();
                              }
                          }
                          
                          private function onSliderChange():void
                          {
                              gallery.selected = photoSlider.value - 1;
                              if (slideshowTimer.running)
                              {
                                  slideshowTimer.stop();
                                  slideshowTimer.start();
                              }
                          }
                          
                          private function updateControlWidths():void
                          {
                                  topControl.width = photoView.contentWidth;
                                  bottomControl.width = photoView.contentWidth;
                                  //must validate the canvas to have the centering algorithm execute immediately
                                  //otherwise when the controls move in you'll see them offset incorrectly
                                  invalidateDisplayList();
                                  validateNow(); 
                          }
                  ]]>
          </mx:Script>
          
          <mx:Binding source="gallery.photos.getItemAt(gallery.selected) as sample_Photo" 
          destination="currentPhoto" />
      <mx:Binding source="gallery.selected + 1" destination="photoSlider.value" />
                          
          <mx:Image id="photoView" source="../assets/gallery/{currentPhoto.source}"
                   width="100%" height="100%" 
                   rollOver="onRollOver(event)"
                   rollOut="onRollOut(event)"
                   complete="onComplete()"
                   completeEffect="Fade"
                   effectEnd="updateControlWidths()"
                   verticalAlign="center" horizontalAlign="middle"/>
          
          <!-- controls go below the image in MXML so that they're at a higher depth -->
          <mx:VBox id="topControl" 
                  top="-55" height="55" width="300"
                  styleName="slideshowControlBar"
                  rollOut="onRollOut(event)"
                    horizontalCenter="0" 
                    verticalGap="0" 
                  horizontalAlign="center"
                   verticalScrollPolicy="off"
                   horizontalScrollPolicy="off"
                   includeInLayout="false">
                  
                  <mx:Text id="photodescription" 
                      text="{currentPhoto.description}"
                          styleName="photoDescription"
                          textAlign="center" 
                          width="100%" height="100%"/>
                  
                  <mx:Label id="photoname" 
                      text="{currentPhoto.name}"
                          styleName="photoName" 
                          textAlign="center" 
                          width="100%"/>
          
          </mx:VBox>
  
                   
     <mx:Canvas id="bottomControl" 
                  height="50" bottom="-50" horizontalCenter="0"
                  styleName="slideshowControlBar"
                  rollOver="onRollOver(event)"
                  rollOut="onRollOut(event)"
                  includeInLayout="false">
                  
                  <mx:HSlider id="photoSlider" dataTipPlacement="top"
                      change="onSliderChange()" 
                          horizontalCenter="-10" verticalCenter="0" width="230" 
                          minimum="1" maximum="{gallery.photos.length}"
                          dataTipPrecision="0" 
                          snapInterval="1" thumbCount="1"/>
                          
                  <!-- 
                          This is a workaround. We're supposed to use data binding 
                          here for the image source of the NavButton:
                          
                          <NavButton source="{ICON_PAUSE}".../>
                          
                          there's however a bug associated with the negative constraint
                          of the bottom control that prevents this button imgae 
                          from being visible upon activation of the bottom control.
                  -->        
                  <viewer_NavButton icon="@Embed('local/assets/viewer/icon_pause.png')" 
                          id="playOrPause"
                          horizontalCenter="-150" verticalCenter="0"
                      click="onSlideshowPlayOrPause(event)" />
                                                              
                  <viewer_NavButton icon="@Embed('local/assets/viewer/icon_list.png')" 
                          horizontalCenter="135" verticalCenter="0"
                      toolTip="{listViewtooltip}"
                      click="dispatchEvent(new Event('thumbnailView'))" />
                                                              
                  <viewer_NavButton icon="@Embed('local/assets/viewer/icon_carousel.png')" 
                          horizontalCenter="165" verticalCenter="0"
                      toolTip="{visualListTooltip}"
                      click="dispatchEvent(new Event('carouselView'))" />
                          
          </mx:Canvas>
          
          <mx:states>
                  <mx:State name="showcontrols">
                          <mx:SetStyle target="{topControl}" name="top" value="0" />
                          <mx:SetStyle target="{bottomControl}" name="bottom" value="0" />
                  </mx:State>
          </mx:states>        
          
          <mx:transitions>
          <mx:Transition id="controlTransition" fromState="*" toState="*">
              <mx:Parallel>
                  <mx:Move target="{topControl}"/>
                  <mx:Move target="{bottomControl}"/>
              </mx:Parallel>
          </mx:Transition>
          </mx:transitions>
           
  </mx:Canvas>
  

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008