Tracking Forums, Newsgroups, Maling Lists
Home Scripts Tutorials Tracker Forums
  Advanced Search
  HOME    TRACKER    Flash




Thmbnail Menu - Arrow Keys



I'm experiencing some funky behavior with the the arrow key events in my scrolling thumbnail menu. Please Help!Here's the situation:I have a grid-thumbnail menu; we'll call it Movie-A. When a thumbnail is clicked in Movie-A, it launches a scrolling thumbnail menu (Adapted from Todd Lajoie's project) ; we'll call this Movie-B. I have a key-listener event in Movie-B that allows the user to go to the next and previous item in the list when the left or right arrow keys are pressed on the keyboard. When Movie-B is first loaded the arrows keys work great, but when I jump back and forth from Movie-A to Movie-B the arrow keys start skipping menu items and is no longer consecutive. Code for Movie-A:I use "main.swf" (Movie-A) to load the "submenu.swf" (Movie-B) when an icon is pressed. I use a for-loop to find all nodes in the XML list, which contains the path to the Movie-B. When a thumbnail from the grid is pressed Movie-B is loaded and Movie-A is unloaded.Code: this.importXML = new XML();this.importXML.ignoreWhite = true;this.importXML.onLoad = function(success) {   if (success) {      // pointer to the root node      var root = this.firstChild;      // fill in the multi-dimensional menu array      menuA = new Array();      _parent.landscapeTotal = 0;      _parent.macroTotal = 0;      _parent.wildlifeTotal = 0;      _parent.fishingTotal = 0;      for (var i = root.firstChild; i != null; i=i.nextSibling) {         menuA[menuA.length] = [i.attributes.category, i.attributes.image, i.attributes.link];         //Tally up each category         switch (i.attributes.category) {         case "pc" :            _parent.landscapeTotal++;            break;         case "cn" :            _parent.macroTotal++;            break;         case "cc" :            _parent.wildlifeTotal++;            break;         case "mu" :            _parent.fishingTotal++;            break;         }      }      _parent.visibleItems = menuA.length;      //trace(_root.visibleItems)      //Once the XML is loaded, build the bottom menu      buildMenu();      //_root.bounce("_alpha", 100, allenLundLogo, 10, 0);   } else {      trace("ERROR loading xml");   }};this.importXML.load("gallery.xml");//Turn off controls in the beginning//Functions to build the main menufunction buildMenu() {   //The number of menu elements in the menuA array   menuLength = menuA.length;   //Spacer between elements   menuSpacer = 5;   //Starting pos for each element   startX = 0;   startY = 0;   menuCounter = 1;   menuRow = 0;   //Build the main menu   for (var i = 0; i<menuLength; i++) {      //menuCounter for layout      menuCounter++;      //attach an element for each menu item      this.attachMovie("element", "e"+i, i);      e = this["e"+i];      e._alpha = 0;      e.category = menuA[i][0];      e.image = menuA[i][1];      e.link = menuA[i][2];      e._x = startX;      e._y = startY;      //Reposition the startX and startY after every 10        if (menuCounter>10) {         menuRow++;         menuCounter = 1;         startX = 0;         startY = (e._height+menuSpacer)*menuRow;      } else {         startX += e._width+menuSpacer;      }      e.elementButton.onRollOver = function() {         if (_parent.galleryActive == 1) {            this.useHandCursor = true;            i++;            this._parent.swapDepths(i);            this.useHandCursor = true;            _root.bounce("_width", 125, this._parent.preview, 2, 0);            _root.bounce("_height", 85, this._parent.preview, 2, 0);            _root.bounce("_x", -20, this._parent.preview, 2, 0);            _root.bounce("_y", -13, this._parent.preview, 2, 0);         } else {            this.useHandCursor = false;         }      };      e.elementButton.onRollOut = function() {         if (_parent.galleryActive == 1) {            this._parent.gotoAndPlay("menuOut");            _root.bounce("_width", 85, this._parent.preview, 5, 0);            _root.bounce("_height", 60, this._parent.preview, 5, 0);            _root.bounce("_x", 0, this._parent.preview, 5, 0);            _root.bounce("_y", 0, this._parent.preview, 5, 0);         }      };                  e.elementButton.onPress = function() {         if (_parent.galleryActive == 1) {            _root.bounce("_width", 85, this._parent.preview, 5, 0);            _root.bounce("_height", 60, this._parent.preview, 5, 0);            _root.bounce("_x", 0, this._parent.preview, 5, 0);            _root.bounce("_y", 0, this._parent.preview, 5, 0);            //Call the link from xml            trace("Load Movie from XML :" + this._parent.link);                        _parent.menuAction.text = this._parent.link +" called...";                        _root.loadMovie(this._parent.link);            _root.main.unloadMovie();            trace("unload main");         }      };      //When the last menu element is added, trigger the fade function      if (i == (menuLength-1)) {         fadeCount = 0;      }   }}callLoadElements = function () {   loadElementsInt = setInterval(loadElements, 50);};//function to load the elementsloadElements = function () {   if (_parent.galleryLoaded == menuLength) {      clearInterval(loadElementsInt);      //_parent.loaderText.text = "Loading menu "+_parent.galleryLoaded+"/"+menuLength;      _parent.loaderText.text = "Loading ...";      _root.bounce("_alpha", 0, _parent.loaderText, 10, 0);      checkLoadFadeInt = setInterval(checkLoadFade, 10);   } else {      //_parent.loaderText.text = "Loading menu "+_parent.galleryLoaded+"/"+menuLength;      _parent.loaderText.text = "Loading ...";   }};checkLoadFade = function () {   if (_parent.loaderText._alpha == 0) {      _parent.loaderText.text = "";      clearInterval(checkLoadFadeInt);      _parent.updateLocations();      fadeElements();   }};//Function to fade in the elementsfadeElements = function () {   callFadeInt = setInterval(callFade, 20);};function callFade() {   if (fadeCount<>menuLength) {      _root.bounce("_alpha", 100, _parent.gallery["e"+fadeCount], 20, 0);      fadeCount++;   } else {      //Activate the menu and load the first bg      clearInterval(callFadeInt);      checkLastFadeInt = setInterval(checkLastFade, 20);   }}checkLastFade = function () {   if (_parent.gallery["e"+(fadeCount-1)]._alpha>50) {      clearInterval(checkLastFadeInt);      _root.bounce("_alpha", 100, _parent.botMenu, 10, 0);      _parent.galleryActive = 1;   }};callLoadElements();Code for Movie-B:Code:     //http://home.comcast.net/~tlajoie/flash/dyn_panel/dyn_panel.html    import mx.transitions.Tween;//Import Tweening Package    import mx.transitions.easing.*;//Import Easing Package for Tweening    var home:MovieClip = this;// Use "home" instead of "_root" for main timline    var stageW:Number = Stage.width;//Set variable "stageW" to Stage Width    var stageH:Number = Stage.height;//Set variable "stageH" to Stage Height    /* Initial Panel Setup    *    * The default values put into these variabls will create a verticle panel that is aligned to the left    * side of the stage sized to center vertically on the stage. It will size to fit the stage but toes not    * respond to stage.resize commands. You can change the values and forumulas to meet your needs.    * The mask for the panel will extend beyond the panel the same amount as the spacing between thumbnails.    * or the distance of the hPad or vPad variables if that gets too close to the edge    */    var panelType = "fullBottomH";//"fullLeftV"   = Verticle panel on Left edge of stage, full size centered                          //"fullRightV"  = Verticle panel on Right edge of stage full size centered                          //"fullTopH"    = Horizontal panel on Top edge of stage full size centered                          //"fullBottomH" = Horizontal panel on bottom edge of stage full size centered                          //"fixedV"      = Verticle fixed size and location                          //"fixedH"      = Horizontal fixed size and location    var maxThumbSide:Number = 100;//maximum pixel dimension for thumbnails, larger images will be reduce    var padding:Number = 5;//# of pixels between thumbnails and around panel    var speed:Number = 50;//scrolling speed. Larger = Slower    //***  Variables for FULL SIZE PANEL ONLY ***    var hPad:Number = 10;//distance panel stops away from the sides of the stage    var vPad:Number = 10;//distance panel stops away from the top & bottom of the stage    //***  variables for FIXED SIZE/LOCATION PANEL ONLY ***    var panelL:Number = 10;//pixel location for left side of panel    var panelT:Number = 10;//pixel location for top of panel    var panelH:Number = 400;//Height of panel    var panelW:Number = 100;//Width of panel    var fullCenterX:Number = 400;//Horizontal Center point of full clip    var fullCenterY:Number = 400;//Vertical Center point of full clip    // if panel width or height extends outside of the stage it will be resized to fit in the stage minus the pad amount    var x:XML = new XML ();//Create New XML Object    x.ignoreWhite = true;//Set ignoreWhite Property    var fullURL:Array = new Array;//Create Array to hold URLs of full images    var thumbURL:Array = new Array;//Create Array to hold URLs of thumbnail images    var thumbClips:Array = new Array;//Create Array to hold thumbnail button clips, used to disable, enable, and remove thumbnails    var counter:Number = 0;//Variable for sequential loading of thumbnail images    var panelHomeX:Number;//Variable to hold lowest position of scrolling panel for _x property    var panelHomeY:Number;//Variable to hold lowest position of scrolling panel for _y property    var newHolder:MovieClip;//Variable to hold newly loaded image clip to fade in    var oldHolder:MovieClip;//Variable to hold peviously loaded image clip to fade out and remove    var whoIsOn:Number = 9999999;//Variable to keep track of which full image is currently displayed, Set to large number so first full image will load    var keyListener:Object = new Object();//Variable for arrow key navigation    fscommand("fullscreen", "true");    Stage.showMenu = false;    Stage.scaleMode = "noScale";    x.onLoad = function(){        var photos:Array = this.firstChild.childNodes;       for (i=0;i<photos.length;i++) {          fullURL.push(photos[i].attributes.urls);          thumbURL.push(photos[i].attributes.thumbs);       }       makePanel();    }    x.load ("list.xml");    function makePanel() {//this function creates the panel clip and mask       thumbClips = new Array;//Clears thumbClips array if it already has info in it       home.createEmptyMovieClip("theMask", home.getNextHighestDepth());//Creates mask clip       home.createEmptyMovieClip("thePanel", home.getNextHighestDepth());//Creates panel clip       home.createTextField("loadText",home.getNextHighestDepth(),(stageW/2),(stageH/2),200,100);//Creates text field to display thumbnail progress, centered on the stage       loadText.text = "Loading";//Puts starting text in text field       loadThumbs(counter);//Calls function to load thumbnails with "counter" variable    }    function loadThumbs(who) {//This function creates thumbnail clip and calls MovieClipLoader to load thumbnail image       loadText.text = "Loading Thumbnail # "+(counter+1)+" of "+thumbURL.length;//Updates loading text field with current thumbnail number and total number       var z = thePanel.createEmptyMovieClip("tClip"+who, thePanel.getNextHighestDepth());//Creates thumbnail clip inside panel clip and assigns to temp variable "z"       z._alpha = 0;//Sets clip's alpha to 0 so it can be faded in after it is loaded       thumbMcl.loadClip(thumbURL[who], z);//Calls thumnail's MovieClipLoader to load image from array into the "z" clip    }    var thumbMcl:MovieClipLoader = new MovieClipLoader();//Creates thumbnail's MovieClipLoader Object    var tMclListener:Object = new Object();//Creates listener for thumbnail's MovieClipLoader    thumbMcl.addListener(tMclListener); //Registers listener with MovieClipLoader    tMclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {//Function runs during loading of thumbnail       loadText.text = "Loading Thumbnail # "+(counter+1)+" of "+thumbURL.length+" = "+Math.round((bytesLoaded/bytesTotal)*100)+"%";//Updates loading text field with percentage loaded    }    tMclListener.onLoadInit = function(targetClip:MovieClip) { //This function runs when a thumbnail image has been fully loaded       if (targetClip._width > maxThumbSide) {//Checks if thumbnail image is wider than Maximum size          targetClip._width = maxThumbSide;//If so it resizes width to the Maximum size          targetClip._yscale = targetClip._xscale;//Matches height scaling to width scaling       }       if (targetClip._height > maxThumbSide) {//Checks if thumbnail image is taller than Maximum size          targetClip._height = maxThumbSide;//If so it resizes height to Maximum size          targetClip._xscale = targetClip._yscale;//Matches width scaling to height scaling       }          if (counter == 0 ) {//Checks if the current thumbnail is the first one and if so positions it in the first location          if (panelType == "fullRightV" || panelType == "fullLeftV" || panelType == "fixedV") {//Checks for vertical panel layouts             if (targetClip._width < maxThumbSide) {//Checks if thumbnail width is less than Maximum size                targetClip._x = (maxThumbSide-targetClip._width)/2;//If so center thumbnail in panel width             }             targetClip._y = padding;          } else if (panelType == "fullTopH" || panelType == "fullBottomH" || panelType == "fixedH") {//Checks for horizontal panel layouts             if (targetClip._height < maxThumbSide) {//Checks if thumbnail height is less than Maximum size                targetClip._y = (maxThumbSide - targetClip._height)/2;//If so center thumbnail in panel height             }                targetClip._x = padding;//Position first thumbnail in first position          }       } else {//For all other thumbnails, add them to the proper end of the panel basedon layout          if (panelType == "fullRightV" || panelType == "fullLeftV" || panelType == "fixedV") {//Checks for vertical panel layouts             if (targetClip._width < maxThumbSide) {//Checks if thumbnail width is less than Maximum size                targetClip._x = (maxThumbSide-targetClip._width)/2;//If so center thumbnail in panel width             }             targetClip._y = thePanel._height + padding;//Positions thumnail at the bottom of the panel plus the padding value between thumbnails          } else if (panelType == "fullTopH" || panelType == "fullBottomH" || panelType == "fixedH") {//Checks for Horizontal panel layouts             if (targetClip._height < maxThumbSide) {//Checks if thumbnail height is less than Maximum size                targetClip._y = (maxThumbSide - targetClip._height)/2;//If so center the thumbnail in panel height             }                targetClip._x = thePanel._width + padding;//Position thumbnail at right edge of panel plus padding value between thumbnails          }       }       targetClip.numb = counter;//Add numb property to target clip to store index number of thumnail       targetClip.onRollOver = function () {//onRollOver function for thumbnail          this._alpha = 100;//Set alpha to 100 for highlight       }       targetClip.onRollOut = targetClip.onReleaseOutside = function () {//onRollOut and onReleaseOutside function for thumbnail          this._alpha = 75;//Set alpha to 75%, default value       }       targetClip.onPress = function () {//onPress function for thumnail          this._alpha = 50;//Set alpha to 50% to indicate thumbnail being clicked       }       targetClip.onRelease  = function () {//onRelease function for thumbnail          loadFull(this.numb);//Call function to load full image       }                     var tw01:Tween = new Tween(targetClip, "_alpha", Strong.easeOut, targetClip._alpha, 75, 3, true);//Fade in thumbnail after it's loaded       thumbClips.push(targetClip);//Add currently loaded thumbnail to the "thumbClips" array       targetClip.enabled = false;//Disable thumbnail so it can't be clicked till all are loaded       sizePanel();//Call function to size and postion the panel and mask based on new sizes       counter++;//Increment counter variable       if (counter < thumbURL.length) {//Check that counter varaible is still within range of the array          loadThumbs(counter);//Calls function to load thumbnails with "counter" variable       } else {//This runs if all thumbnails have been loaded          loadFull(0);//Load first full Image          thePanel.onRollOver = panelOver;//Set panel's onRollOver function to panelOver for scrolling          loadText.removeTextField();//Remove Loading text field, it's not needed any more       }    }    function sizePanel() {//This function sizes and positions the panel based on the layout type       switch(panelType) {          case "fullLeftV" : //Left and Top panels are postioned to upper left based on the hPad and vPad variables          case "fullTopH" :             thePanel._x = hPad;             thePanel._y = vPad;             break;          case "fullRightV" : //Right panel is positioned  to upper right based on clip sizes and hPad and vPad variable             thePanel._x = stageW - maxThumbSide - hPad;//X location is Stage Width minus the maximum thumbnail size minus the hPad amount             thePanel._y = vPad;             break;          case "fullBottomH" : //Bottom panel is positioned  to lower left based on clip sizes and hPad and vPad variable             thePanel._x = hPad             thePanel._y = stageH - maxThumbSide - vPad;//Y location is Stage Height minus the maximum thumbnail size minus the hPad and vPad amount             break;          case "fixedV" : //Fixed panels are positioned based on the variable delared at the top of the code          case "fixedH" :             thePanel._x = panelL;             thePanel._y = panelT;             break;       }       panelHomeX = thePanel._x;//Register the lowest X scrolling position for the panel to the panelHomeX variable       panelHomeY = thePanel._y;//Register the lowest y scrolling position for the panel to the panelHomey variable       theMask._x = thePanel._x - padding;//Position the mask based on the panel location minus the padding value       theMask._y = thePanel._y - padding;       if (panelType == "fixedH" || panelType == "fixedV") {//for Fixed Panel layouts          w = panelW +(padding * 2);//Set "w" variable to the width of the panel + padding value on either side          h = panelH+(padding*2);//Set "h" variable to the height of the panel + padding value on either side          if (w >= stageW - panelL - padding ) {//Check if mask would exceed the Stage Width             w = stageW - panelL - padding;//If so set to size to stop padding distance from edge of Stage          }          if (h >= stageH - panelT - padding ) {//Check if mask would exceed the Stage Height             h =stageH - panelT - padding;//If so set to size to stop padding distance from edge of Stage          }       } else {//for full screen layouts          w = thePanel._width + (hPad);//Set "w" variable to the width of the panel + hPad value          h = thePanel._height + (vPad);//Set "h" variable to the height of the panel + hPad value          if (h >= (stageH - (vPad))) {//Check if mask would exceed the Stage Height             h = stageH - (vPad);//If so set to size to stop vPad distance from edge of Stage          }          if (w >= stageW - (hPad)) {//Check if mask would exceed the Stage Width             w = stageW - (hPad);//If so set to size to stop hPad distance from edge of Stage          }       }       if (w<maxThumbSide+(padding*2)) {//Checks if mask is less than Maximum thumbnail width          w = maxThumbSide+(padding*2);//if so set it to the Maximum thumbnail width plus padding on either side       }       if (h < maxThumbSide+(padding*2)) {//Checks if mask is less than Maximum thumbnail height          h = maxThumbSide+(padding*2);//if so set it to the Maximum thumbnail heiht plus padding on either side       }       theMask.clear;//Clears any previously drawn objects in the mask clip       theMask.beginFill(0x0000FF);//begin fill for Mask clip       theMask.lineTo(w, 0);//Draw Mask to "w" and "h" values just determined       theMask.lineTo(w, h);       theMask.lineTo(0, h);       theMask.lineTo(0, 0);       theMask.endFill();//Stop drawing Mask clip       thePanel.setMask("theMask");//reset masking property for panel with new maks    }    function panelOver() {//Function for onRollOver of scrolling panel       this.onEnterFrame = scrollPanel;//Start onEnterFrame to scroll the panel clip and watch for mouse to roll out of panel area       delete this.onRollOver;//Delete the onRollOver of panel so thumbnail button actions will work    }    function scrollPanel() {//Function to scroll the panel and watch for mouse to roll out of panel area       var c = theMask.getBounds(home.theMask);//register the boundaries of the mask clip to the "c" variable       if (home.theMask._xmouse<c.xMin||home.theMask._xmouse>c.xMax||home.theMask._ymouse<c.yMin||home.theMask._ymouse>c.yMax) {//check if current mouse position is outside boundaries of mask.          this.onRollOver = panelOver;//reinstate the onRollOver of the panel clip for future panel control          delete this.onEnterFrame;//Delete onEnterFrame function running panel scrolling functions       }       var yDist = home.theMask._ymouse - (theMask._height/2); //set "yDist" variable to the mouse's distance from the center of the panel       var xDist = home.theMask._xmouse - (theMask._width/2); //set "xDist" variable to the mouse's distance from the center of the panel       if ( panelType == "fullLeftV" || panelType == "fullRightV" || panelType == "fixedV" ) {//for Vertical panel layouts          thePanel._y += -yDist/speed;//Move panel's Y property the distance based on the Speed variable and distance just determined          if (thePanel._y > panelHomeY) {//Test if panel has moved beyond minimum scrolling location             thePanel._y = panelHomeY;//if so reposition to minimum scrolling location          }          if (thePanel._y < panelHomeY - (thePanel._height - theMask._height + (padding*2))) {//Test if panel has moved beyond maximum scrolling location             thePanel._y = panelHomeY - (thePanel._height - theMask._height + (padding*2));//if so reposition to maximum scrolling location          }       }       if ( panelType == "fullTopH" || panelType == "fullBottomH" || panelType == "fixedH" ) {          thePanel._x += -xDist/speed;//Move panel's X property the distance based on the Speed variable and distance just determined          if (thePanel._x > panelHomeX) {//Test if panel has moved beyond minimum scrolling location             thePanel._x = panelHomeX;//if so reposition to minimum scrolling location          }          if (thePanel._x < panelHomeX - (thePanel._width - theMask._width + (padding*2))) {//Test if panel has moved beyond maximum scrolling location             thePanel._x = panelHomeX - (thePanel._width - theMask._width + (padding*2));//if so reposition to maximum scrolling location          }       }    }    function loadFull(who) {//Function to load full image       if (who <> whoIsOn) {//Be sure we aren't loading the same image that is already loaded          whoIsOn = who;//Set "whoIsOn" to value of the new image to load          disableButtons();//Disable buttons while new image is loaded          oldHolder = newHolder;//Register previous clip with oldHolder variable so it can be removed after new image is loaded          newHolder = home.createEmptyMovieClip("hold"+who, home.getNextHighestDepth());//Create new clip to hold image          subHolder = newHolder.createEmptyMovieClip("sHolder", newHolder.getNextHighestDepth());//Create sub-clip so image can be centerd in main clip          newHolder._alpha = 0;//set alpha of new clip to 0 so it can be fadedin once it's loaded          thePanel.swapDepths(home.getNextHighestDepth());//Move panel above new clip          if (panelType == "fullLeftV") {//position new clip based on panel layout taking into account where the panel is             newHolder._x = (stageW/2)+(thePanel._width/2);             newHolder._y = (stageH/2);          }          if (panelType == "fullRightV") {             newHolder._x = (stageW/2)-(thePanel._width/2);             newHolder._y = (stageH/2);          }          if (panelType == "fullTopH") {             newHolder._x = (stageW/2);             newHolder._y = (stageH/2)+(thePanel._height/2);          }          if (panelType == "fullBottomH") {             newHolder._x = (stageW/2);             newHolder._y = (stageH/2)-(thePanel._height/2);          }          if (panelType == "fixedH" || panelType == "fixedV") {//for Fixed layouts, set location based on variables declared at beginning of code             newHolder._x = fullCenterX;             newHolder._y = fullCenterY;          }          newHolder._xscale = newHolder._yscale = 200;//Set new clip to 200% size for entrance animation          mainMcl.loadClip(fullURL[who], subHolder);//Call main MovieClipLoader to load full image to subHolder clip       }    }    var mainMcl:MovieClipLoader = new MovieClipLoader();//Create Main MovieClipLoader    var mainMclListener:Object = new Object();//Create listener for Main MovieClipLoader    mainMcl.addListener(mainMclListener); //register Main listener with Main MovieClipLoader    mainMclListener.onLoadInit = function(targetClip:MovieClip) {//Function runs once full image is loaded       targetClip._x = -targetClip._width/2;//Center loaded image on holder's registration point       targetClip._y = -targetClip._height/2;       var tw02:Tween = new Tween(newHolder, "_xscale", Strong.easeOut, newHolder._xscale, 100, 2, true);//Animate full image scaling from 200 to 100 %       var tw03:Tween = new Tween(newHolder, "_yscale", Strong.easeOut, newHolder._yscale, 100, 2, true);       var tw04:Tween = new Tween(newHolder, "_alpha", Strong.easeOut, newHolder._alpha, 100, 3, true);//Fade full image in       tw02.onMotionFinished = function() {//Functionn runs after intro animation          enableButtons();//Enable thumbnail buttons so new images can be loaded       }       var tw05:Tween = new Tween(oldHolder, "_alpha", Strong.easeIn, oldHolder._alpha, 0, 1, true);//Fade out old image       tw05.onMotionFinished = function() {//Function runs when old image has finished fading out          removeMovieClip(oldHolder);//Delete old image       }    }    function disableButtons() {//Function disables thumbnails during full image loading       for (q=0;q<thumbClips.length;q++) {//For loop to cycle through all the entries in the "thumbClips" Array          thumbClips[q].enabled = false;//Disable the thumbnail clip          if (q <> whoIsOn ) {//Check to see if current index is the thumbnail for the newly loaded image             thumbClips[q]._alpha = 75;//For all other thumbnails set alpha to default value of 75%          } else {             thumbClips[q]._alpha = 25;//For thumbnail of newly loaded image, set alpha to 25 to indicate which is active          }       }    }    function enableButtons() {//Function enables thumbnails after full image has loaded       for (r=0;r<thumbClips.length;r++) {//For loop to cycle through all the entries in the "thumbClips" Array          if (r <> whoIsOn ) {//Check to be sure thumbnail index is not the newly loaded image             thumbClips[r].enabled = true;//Enable thumbnail clips other than the currently loaded image          }       }    }    var stageL:Object = new Object;//Create Listener for Stage    Stage.addListener(stageL);//Register Listener to Stage for resizing    stageL.onResize = sizeIt;//When Stage gets resized, run the sizeIt function    function sizeIt() {//Runs when Stage is resized       stageW = Stage.width;//Hold new Stage width in stageW variable       stageH = Stage.height;//Hold new Stage height in stageH variable       if (panelType == "fullLeftV") {//position new clip based on panel layout taking into account where the panel is          newHolder._x = (stageW/2)+(thePanel._width/2);          newHolder._y = (stageH/2);       }       if (panelType == "fullRightV") {          newHolder._x = (stageW/2)-(thePanel._width/2);          newHolder._y = (stageH/2);       }       if (panelType == "fullTopH") {          newHolder._x = (stageW/2);          newHolder._y = (stageH/2)+(thePanel._height/2);       }       if (panelType == "fullBottomH") {          newHolder._x = (stageW/2);          newHolder._y = (stageH/2)-(thePanel._height/2);       }       if (panelType == "fixedH" || panelType == "fixedV") {          newHolder._x = fullCenterX;          newHolder._y = fullCenterY;       }       sizePanel();//Call sizePanel function to resize panel based on the new stage size    }    //Next Image function        function nextImage () {             z = whoIsOn+1;            loadFull(z);        }           //Previous Image function        function prevImage () {             z = whoIsOn-1;            loadFull(z);        }    //key listener    keyListener.onKeyDown = function() {              if (Key.isDown(Key.RIGHT)) {                 nextImage();              trace("Load Next Image :" + whoIsOn);              }                                        else if (Key.isDown(Key.LEFT)) {                 prevImage();              trace("Load Previous Image :" + whoIsOn);              }                      };    Key.addListener(keyListener);           //END key listener    btn_logo.onRelease = function () {        _root.unloadMovie();       trace("unload submenu.swf");       _root.loadMovie("main.swf");       trace("load main.swf");           };



Actionscript 3.0
Posted on: Wed Jun 13, 2007 6:31 pm


View Complete Forum Thread with Replies

See Related Forum Messages: Follow the Links Below to View Complete Thread

Navigate Thumbnail Menu With Arrow Keys
I am working with the Scrolling Thumbnail Panel code found in this forum (by Todd Lajoie) and I'm trying to extend its functionality just slightly. Any Ideas?

Objective:
Use the the left and right arrows keys to navigate to each consecutive image in the thumbnail menu.

Problem:
I can only load in one static value from the XML list and I want to be able to continue to load each consecutive picture by pressing the right arrow key. The code is below. I added the key listener around line 133, but it needs to be morphed some how in order to load in a dynamic value from the XML. If we could figure this out that would be hot!

XML:
Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<slideshow>
<photo thumbs="tn/PR1.jpg"   urls="lg/PR1.jpg"  />
<photo thumbs="tn/PR2.jpg"   urls="lg/PR2.jpg"  />
<photo thumbs="tn/PR3.jpg"   urls="lg/PR3.jpg"  />
<photo thumbs="tn/PR4.jpg"   urls="lg/PR4.jpg"  />
<photo thumbs="tn/PR5.jpg"   urls="lg/PR5.jpg"  />
<photo thumbs="tn/PR6.jpg"   urls="lg/PR6.jpg"  />
<photo thumbs="tn/PR7.jpg"   urls="lg/PR7.jpg"  />
<photo thumbs="tn/PR8.jpg"   urls="lg/PR8.jpg"  />
<photo thumbs="tn/PR9.jpg"   urls="lg/PR9.jpg"  />
<photo thumbs="tn/PR10.jpg"   urls="lg/PR10.jpg"  />
<photo thumbs="tn/PR11.jpg"   urls="lg/PR11.jpg"  />
<photo thumbs="tn/PR12.jpg"   urls="lg/PR12.jpg"  />
<photo thumbs="tn/PR13.jpg"   urls="lg/PR13.jpg"  />
<photo thumbs="tn/PR14.jpg"   urls="lg/PR14.jpg"  />

</slideshow>


AS:
Code:

//http://home.comcast.net/~tlajoie/flash/dyn_panel/dyn_panel.html
import mx.transitions.Tween;//Import Tweening Package
import mx.transitions.easing.*;//Import Easing Package for Tweening
var home:MovieClip = this;// Use "home" instead of "_root" for main timline
var stageW:Number = Stage.width;//Set variable "stageW" to Stage Width
var stageH:Number = Stage.height;//Set variable "stageH" to Stage Height
/* Initial Panel Setup
*
* The default values put into these variabls will create a verticle panel that is aligned to the left
* side of the stage sized to center vertically on the stage. It will size to fit the stage but toes not
* respond to stage.resize commands. You can change the values and forumulas to meet your needs.
* The mask for the panel will extend beyond the panel the same amount as the spacing between thumbnails.
* or the distance of the hPad or vPad variables if that gets too close to the edge
*/
var panelType = "fullBottomH";//"fullLeftV"   = Verticle panel on Left edge of stage, full size centered
                      //"fullRightV"  = Verticle panel on Right edge of stage full size centered
                      //"fullTopH"    = Horizontal panel on Top edge of stage full size centered
                      //"fullBottomH" = Horizontal panel on bottom edge of stage full size centered
                      //"fixedV"      = Verticle fixed size and location
                      //"fixedH"      = Horizontal fixed size and location
var maxThumbSide:Number = 100;//maximum pixel dimension for thumbnails, larger images will be reduce
var padding:Number = 5;//# of pixels between thumbnails and around panel
var speed:Number = 50;//scrolling speed. Larger = Slower

//***  Variables for FULL SIZE PANEL ONLY ***
var hPad:Number = 10;//distance panel stops away from the sides of the stage
var vPad:Number = 10;//distance panel stops away from the top & bottom of the stage

//***  variables for FIXED SIZE/LOCATION PANEL ONLY ***
var panelL:Number = 10;//pixel location for left side of panel
var panelT:Number = 10;//pixel location for top of panel
var panelH:Number = 400;//Height of panel
var panelW:Number = 100;//Width of panel
var fullCenterX:Number = 400;//Horizontal Center point of full clip
var fullCenterY:Number = 400;//Vertical Center point of full clip
// if panel width or height extends outside of the stage it will be resized to fit in the stage minus the pad amount

var x:XML = new XML ();//Create New XML Object
x.ignoreWhite = true;//Set ignoreWhite Property
var fullURL:Array = new Array;//Create Array to hold URLs of full images
var thumbURL:Array = new Array;//Create Array to hold URLs of thumbnail images
var thumbClips:Array = new Array;//Create Array to hold thumbnail button clips, used to disable, enable, and remove thumbnails
var counter:Number = 0;//Variable for sequential loading of thumbnail images
var panelHomeX:Number;//Variable to hold lowest position of scrolling panel for _x property
var panelHomeY:Number;//Variable to hold lowest position of scrolling panel for _y property
var newHolder:MovieClip;//Variable to hold newly loaded image clip to fade in
var oldHolder:MovieClip;//Variable to hold peviously loaded image clip to fade out and remove
var whoIsOn:Number = 9999999;//Variable to keep track of which full image is currently displayed, Set to large number so first full image will load
var keyListener:Object = new Object();//Variable for arrow key navigation

x.onLoad = function(){
    var photos:Array = this.firstChild.childNodes;
   for (i=0;i<photos.length;i++) {
      fullURL.push(photos[i].attributes.urls);
      thumbURL.push(photos[i].attributes.thumbs);
   }
   makePanel();
}

x.load ("list.xml");

function makePanel() {//this function creates the panel clip and mask
   thumbClips = new Array;//Clears thumbClips array if it already has info in it
   home.createEmptyMovieClip("theMask", home.getNextHighestDepth());//Creates mask clip
   home.createEmptyMovieClip("thePanel", home.getNextHighestDepth());//Creates panel clip
   home.createTextField("loadText",home.getNextHighestDepth(),(stageW/2),(stageH/2),200,100);//Creates text field to display thumbnail progress, centered on the stage
   loadText.text = "Loading";//Puts starting text in text field
   loadThumbs(counter);//Calls function to load thumbnails with "counter" variable
}

function loadThumbs(who) {//This function creates thumbnail clip and calls MovieClipLoader to load thumbnail image
   loadText.text = "Loading Thumbnail # "+(counter+1)+" of "+thumbURL.length;//Updates loading text field with current thumbnail number and total number
   var z = thePanel.createEmptyMovieClip("tClip"+who, thePanel.getNextHighestDepth());//Creates thumbnail clip inside panel clip and assigns to temp variable "z"
   z._alpha = 0;//Sets clip's alpha to 0 so it can be faded in after it is loaded
   thumbMcl.loadClip(thumbURL[who], z);//Calls thumnail's MovieClipLoader to load image from array into the "z" clip
}

var thumbMcl:MovieClipLoader = new MovieClipLoader();//Creates thumbnail's MovieClipLoader Object
var tMclListener:Object = new Object();//Creates listener for thumbnail's MovieClipLoader
thumbMcl.addListener(tMclListener); //Registers listener with MovieClipLoader

tMclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {//Function runs during loading of thumbnail
   loadText.text = "Loading Thumbnail # "+(counter+1)+" of "+thumbURL.length+" = "+Math.round((bytesLoaded/bytesTotal)*100)+"%";//Updates loading text field with percentage loaded
}

tMclListener.onLoadInit = function(targetClip:MovieClip) { //This function runs when a thumbnail image has been fully loaded
   if (targetClip._width > maxThumbSide) {//Checks if thumbnail image is wider than Maximum size
      targetClip._width = maxThumbSide;//If so it resizes width to the Maximum size
      targetClip._yscale = targetClip._xscale;//Matches height scaling to width scaling
   }
   if (targetClip._height > maxThumbSide) {//Checks if thumbnail image is taller than Maximum size
      targetClip._height = maxThumbSide;//If so it resizes height to Maximum size
      targetClip._xscale = targetClip._yscale;//Matches width scaling to height scaling
   }   
   if (counter == 0 ) {//Checks if the current thumbnail is the first one and if so positions it in the first location
      if (panelType == "fullRightV" || panelType == "fullLeftV" || panelType == "fixedV") {//Checks for vertical panel layouts
         if (targetClip._width < maxThumbSide) {//Checks if thumbnail width is less than Maximum size
            targetClip._x = (maxThumbSide-targetClip._width)/2;//If so center thumbnail in panel width
         }
         targetClip._y = padding;
      } else if (panelType == "fullTopH" || panelType == "fullBottomH" || panelType == "fixedH") {//Checks for horizontal panel layouts
         if (targetClip._height < maxThumbSide) {//Checks if thumbnail height is less than Maximum size
            targetClip._y = (maxThumbSide - targetClip._height)/2;//If so center thumbnail in panel height
         }   
         targetClip._x = padding;//Position first thumbnail in first position
      }
   } else {//For all other thumbnails, add them to the proper end of the panel basedon layout
      if (panelType == "fullRightV" || panelType == "fullLeftV" || panelType == "fixedV") {//Checks for vertical panel layouts
         if (targetClip._width < maxThumbSide) {//Checks if thumbnail width is less than Maximum size
            targetClip._x = (maxThumbSide-targetClip._width)/2;//If so center thumbnail in panel width
         }
         targetClip._y = thePanel._height + padding;//Positions thumnail at the bottom of the panel plus the padding value between thumbnails
      } else if (panelType == "fullTopH" || panelType == "fullBottomH" || panelType == "fixedH") {//Checks for Horizontal panel layouts
         if (targetClip._height < maxThumbSide) {//Checks if thumbnail height is less than Maximum size
            targetClip._y = (maxThumbSide - targetClip._height)/2;//If so center the thumbnail in panel height
         }   
         targetClip._x = thePanel._width + padding;//Position thumbnail at right edge of panel plus padding value between thumbnails
      }
   }
   targetClip.numb = counter;//Add numb property to target clip to store index number of thumnail
   targetClip.onRollOver = function () {//onRollOver function for thumbnail
      this._alpha = 100;//Set alpha to 100 for highlight
   }
   targetClip.onRollOut = targetClip.onReleaseOutside = function () {//onRollOut and onReleaseOutside function for thumbnail
      this._alpha = 75;//Set alpha to 75%, default value
   }
   targetClip.onPress = function () {//onPress function for thumnail
      this._alpha = 50;//Set alpha to 50% to indicate thumbnail being clicked
   }
   targetClip.onRelease  = function () {//onRelease function for thumbnail
      loadFull(this.numb);//Call function to load full image
   }
   //key listener
   keyListener.onKeyDown = function() {
      if (Key.isDown(Key.RIGHT)) {
         loadFull(2); }
      else if (Key.isDown(Key.LEFT)) {
         loadFull(1); }
   
   };
   Key.addListener(keyListener);
   //END key listener
   
   var tw01:Tween = new Tween(targetClip, "_alpha", Strong.easeOut, targetClip._alpha, 75, 3, true);//Fade in thumbnail after it's loaded
   thumbClips.push(targetClip);//Add currently loaded thumbnail to the "thumbClips" array
   targetClip.enabled = false;//Disable thumbnail so it can't be clicked till all are loaded
   sizePanel();//Call function to size and postion the panel and mask based on new sizes
   counter++;//Increment counter variable
   if (counter < thumbURL.length) {//Check that counter varaible is still within range of the array
      loadThumbs(counter);//Calls function to load thumbnails with "counter" variable
   } else {//This runs if all thumbnails have been loaded
      loadFull(0);//Load first full Image
      thePanel.onRollOver = panelOver;//Set panel's onRollOver function to panelOver for scrolling
      loadText.removeTextField();//Remove Loading text field, it's not needed any more
   }
}

function sizePanel() {//This function sizes and positions the panel based on the layout type
   switch(panelType) {
      case "fullLeftV" : //Left and Top panels are postioned to upper left based on the hPad and vPad variables
      case "fullTopH" :
         thePanel._x = hPad;
         thePanel._y = vPad;
         break;
      case "fullRightV" : //Right panel is positioned  to upper right based on clip sizes and hPad and vPad variable
         thePanel._x = stageW - maxThumbSide - hPad;//X location is Stage Width minus the maximum thumbnail size minus the hPad amount
         thePanel._y = vPad;
         break;
      case "fullBottomH" : //Bottom panel is positioned  to lower left based on clip sizes and hPad and vPad variable
         thePanel._x = hPad
         thePanel._y = stageH - maxThumbSide - vPad;//Y location is Stage Height minus the maximum thumbnail size minus the hPad and vPad amount
         break;
      case "fixedV" : //Fixed panels are positioned based on the variable delared at the top of the code
      case "fixedH" :
         thePanel._x = panelL;
         thePanel._y = panelT;
         break;
   }
   panelHomeX = thePanel._x;//Register the lowest X scrolling position for the panel to the panelHomeX variable
   panelHomeY = thePanel._y;//Register the lowest y scrolling position for the panel to the panelHomey variable
   theMask._x = thePanel._x - padding;//Position the mask based on the panel location minus the padding value
   theMask._y = thePanel._y - padding;
   if (panelType == "fixedH" || panelType == "fixedV") {//for Fixed Panel layouts
      w = panelW +(padding * 2);//Set "w" variable to the width of the panel + padding value on either side
      h = panelH+(padding*2);//Set "h" variable to the height of the panel + padding value on either side
      if (w >= stageW - panelL - padding ) {//Check if mask would exceed the Stage Width
         w = stageW - panelL - padding;//If so set to size to stop padding distance from edge of Stage
      }
      if (h >= stageH - panelT - padding ) {//Check if mask would exceed the Stage Height
         h =stageH - panelT - padding;//If so set to size to stop padding distance from edge of Stage
      }
   } else {//for full screen layouts
      w = thePanel._width + (hPad);//Set "w" variable to the width of the panel + hPad value
      h = thePanel._height + (vPad);//Set "h" variable to the height of the panel + hPad value
      if (h >= (stageH - (vPad))) {//Check if mask would exceed the Stage Height
         h = stageH - (vPad);//If so set to size to stop vPad distance from edge of Stage
      }
      if (w >= stageW - (hPad)) {//Check if mask would exceed the Stage Width
         w = stageW - (hPad);//If so set to size to stop hPad distance from edge of Stage
      }
   }
   if (w<maxThumbSide+(padding*2)) {//Checks if mask is less than Maximum thumbnail width
      w = maxThumbSide+(padding*2);//if so set it to the Maximum thumbnail width plus padding on either side
   }
   if (h < maxThumbSide+(padding*2)) {//Checks if mask is less than Maximum thumbnail height
      h = maxThumbSide+(padding*2);//if so set it to the Maximum thumbnail heiht plus padding on either side
   }
   theMask.clear;//Clears any previously drawn objects in the mask clip
   theMask.beginFill(0x0000FF);//begin fill for Mask clip
   theMask.lineTo(w, 0);//Draw Mask to "w" and "h" values just determined
   theMask.lineTo(w, h);
   theMask.lineTo(0, h);
   theMask.lineTo(0, 0);
   theMask.endFill();//Stop drawing Mask clip
   thePanel.setMask("theMask");//reset masking property for panel with new maks
}

function panelOver() {//Function for onRollOver of scrolling panel
   this.onEnterFrame = scrollPanel;//Start onEnterFrame to scroll the panel clip and watch for mouse to roll out of panel area
   delete this.onRollOver;//Delete the onRollOver of panel so thumbnail button actions will work
}


function scrollPanel() {//Function to scroll the panel and watch for mouse to roll out of panel area
   var c = theMask.getBounds(home.theMask);//register the boundaries of the mask clip to the "c" variable
   if (home.theMask._xmouse<c.xMin||home.theMask._xmouse>c.xMax||home.theMask._ymouse<c.yMin||home.theMask._ymouse>c.yMax) {//check if current mouse position is outside boundaries of mask.
      this.onRollOver = panelOver;//reinstate the onRollOver of the panel clip for future panel control
      delete this.onEnterFrame;//Delete onEnterFrame function running panel scrolling functions
   }
   var yDist = home.theMask._ymouse - (theMask._height/2); //set "yDist" variable to the mouse's distance from the center of the panel
   var xDist = home.theMask._xmouse - (theMask._width/2); //set "xDist" variable to the mouse's distance from the center of the panel
   if ( panelType == "fullLeftV" || panelType == "fullRightV" || panelType == "fixedV" ) {//for Vertical panel layouts
      thePanel._y += -yDist/speed;//Move panel's Y property the distance based on the Speed variable and distance just determined
      if (thePanel._y > panelHomeY) {//Test if panel has moved beyond minimum scrolling location
         thePanel._y = panelHomeY;//if so reposition to minimum scrolling location
      }
      if (thePanel._y < panelHomeY - (thePanel._height - theMask._height + (padding*2))) {//Test if panel has moved beyond maximum scrolling location
         thePanel._y = panelHomeY - (thePanel._height - theMask._height + (padding*2));//if so reposition to maximum scrolling location
      }
   }
   if ( panelType == "fullTopH" || panelType == "fullBottomH" || panelType == "fixedH" ) {
      thePanel._x += -xDist/speed;//Move panel's X property the distance based on the Speed variable and distance just determined
      if (thePanel._x > panelHomeX) {//Test if panel has moved beyond minimum scrolling location
         thePanel._x = panelHomeX;//if so reposition to minimum scrolling location
      }
      if (thePanel._x < panelHomeX - (thePanel._width - theMask._width + (padding*2))) {//Test if panel has moved beyond maximum scrolling location
         thePanel._x = panelHomeX - (thePanel._width - theMask._width + (padding*2));//if so reposition to maximum scrolling location
      }
   }
}

function loadFull(who) {//Function to load full image
   if (who <> whoIsOn) {//Be sure we aren't loading the same image that is already loaded
      whoIsOn = who;//Set "whoIsOn" to value of the new image to load
      disableButtons();//Disable buttons while new image is loaded
      oldHolder = newHolder;//Register previous clip with oldHolder variable so it can be removed after new image is loaded
      newHolder = home.createEmptyMovieClip("hold"+who, home.getNextHighestDepth());//Create new clip to hold image
      subHolder = newHolder.createEmptyMovieClip("sHolder", newHolder.getNextHighestDepth());//Create sub-clip so image can be centerd in main clip
      newHolder._alpha = 0;//set alpha of new clip to 0 so it can be fadedin once it's loaded
      thePanel.swapDepths(home.getNextHighestDepth());//Move panel above new clip
      if (panelType == "fullLeftV") {//position new clip based on panel layout taking into account where the panel is
         newHolder._x = (stageW/2)+(thePanel._width/2);
         newHolder._y = (stageH/2);
      }
      if (panelType == "fullRightV") {
         newHolder._x = (stageW/2)-(thePanel._width/2);
         newHolder._y = (stageH/2);
      }
      if (panelType == "fullTopH") {
         newHolder._x = (stageW/2);
         newHolder._y = (stageH/2)+(thePanel._height/2);
      }
      if (panelType == "fullBottomH") {
         newHolder._x = (stageW/2);
         newHolder._y = (stageH/2)-(thePanel._height/2);
      }
      if (panelType == "fixedH" || panelType == "fixedV") {//for Fixed layouts, set location based on variables declared at beginning of code
         newHolder._x = fullCenterX;
         newHolder._y = fullCenterY;
      }
      newHolder._xscale = newHolder._yscale = 200;//Set new clip to 200% size for entrance animation
      mainMcl.loadClip(fullURL[who], subHolder);//Call main MovieClipLoader to load full image to subHolder clip
   }
}

var mainMcl:MovieClipLoader = new MovieClipLoader();//Create Main MovieClipLoader
var mainMclListener:Object = new Object();//Create listener for Main MovieClipLoader
mainMcl.addListener(mainMclListener); //register Main listener with Main MovieClipLoader

mainMclListener.onLoadInit = function(targetClip:MovieClip) {//Function runs once full image is loaded
   targetClip._x = -targetClip._width/2;//Center loaded image on holder's registration point
   targetClip._y = -targetClip._height/2;
   var tw02:Tween = new Tween(newHolder, "_xscale", Strong.easeOut, newHolder._xscale, 100, 2, true);//Animate full image scaling from 200 to 100 %
   var tw03:Tween = new Tween(newHolder, "_yscale", Strong.easeOut, newHolder._yscale, 100, 2, true);
   var tw04:Tween = new Tween(newHolder, "_alpha", Strong.easeOut, newHolder._alpha, 100, 3, true);//Fade full image in
   tw02.onMotionFinished = function() {//Functionn runs after intro animation
      enableButtons();//Enable thumbnail buttons so new images can be loaded
   }
   var tw05:Tween = new Tween(oldHolder, "_alpha", Strong.easeIn, oldHolder._alpha, 0, 1, true);//Fade out old image
   tw05.onMotionFinished = function() {//Function runs when old image has finished fading out
      removeMovieClip(oldHolder);//Delete old image
   }
}

function disableButtons() {//Function disables thumbnails during full image loading
   for (q=0;q<thumbClips.length;q++) {//For loop to cycle through all the entries in the "thumbClips" Array
      thumbClips[q].enabled = false;//Disable the thumbnail clip
      if (q <> whoIsOn ) {//Check to see if current index is the thumbnail for the newly loaded image
         thumbClips[q]._alpha = 75;//For all other thumbnails set alpha to default value of 75%
      } else {
         thumbClips[q]._alpha = 25;//For thumbnail of newly loaded image, set alpha to 25 to indicate which is active
      }
   }
}

function enableButtons() {//Function enables thumbnails after full image has loaded
   for (r=0;r<thumbClips.length;r++) {//For loop to cycle through all the entries in the "thumbClips" Array
      if (r <> whoIsOn ) {//Check to be sure thumbnail index is not the newly loaded image
         thumbClips[r].enabled = true;//Enable thumbnail clips other than the currently loaded image
      }
   }
}

var stageL:Object = new Object;//Create Listener for Stage
Stage.addListener(stageL);//Register Listener to Stage for resizing

stageL.onResize = sizeIt;//When Stage gets resized, run the sizeIt function

function sizeIt() {//Runs when Stage is resized
   stageW = Stage.width;//Hold new Stage width in stageW variable
   stageH = Stage.height;//Hold new Stage height in stageH variable
   if (panelType == "fullLeftV") {//position new clip based on panel layout taking into account where the panel is
      newHolder._x = (stageW/2)+(thePanel._width/2);
      newHolder._y = (stageH/2);
   }
   if (panelType == "fullRightV") {
      newHolder._x = (stageW/2)-(thePanel._width/2);
      newHolder._y = (stageH/2);
   }
   if (panelType == "fullTopH") {
      newHolder._x = (stageW/2);
      newHolder._y = (stageH/2)+(thePanel._height/2);
   }
   if (panelType == "fullBottomH") {
      newHolder._x = (stageW/2);
      newHolder._y = (stageH/2)-(thePanel._height/2);
   }
   if (panelType == "fixedH" || panelType == "fixedV") {
      newHolder._x = fullCenterX;
      newHolder._y = fullCenterY;
   }
   sizePanel();//Call sizePanel function to resize panel based on the new stage size
}

Arrow Keys?
Could someone tell me how to move an object around on the screen with the arrow keys. A step by step would me much appreciated.

and could someone tell me how to use the keyboard keys for buttons

Arrow Keys
OK folks. Here is a link to what I'm about to explain:
OK I have this page setup so that when you press the left and right arrow keys you will cycle through the pictures. It's working fine, the only problem is my boss noticed that you have to click somewhere on the flash animation in order to use the arrow keys when it first starts. I know this is probably a browser issue but is there any way that I can work this out so that you don't have to click on the animation first?

-= greendog =-

[F8] Using Arrow Keys
When you are using:
on (keyPress "<Left>") {
this._x -= 10;
}
on (keyPress "<Right>") {
this._x += 10;
}
on (keyPress "<Up>") {
this._y -= 10;
}
on (keyPress "<Down>") {
this._y += 10;
}

to make some thing move with the arrow keys, how can you make it so that it is smoot and slows down in stead of stopping fast (for racing game)

And on more thing How can i be able to use a,s,d and w to make a movie clip move (2 players)

Thanks in advance.

[F8] Arrow Keys
hi i got this startDrag code


Code:
square_mc.onEnterFrame=function(){
startStopInterval(true);
startDrag(this,true,30,32,211,259);
for(var i:Number = 1; i<=4; i++){
if (this.hitTest(this._root["bar"+i+"_mc"]))
this.stopDrag();

}
}


this basically allows the mouse to be drag in the document
just wondering, can i convert this code so that arrow keys can be used?
If so, how can i limit like here so they wont go off document.
Thanks

Help With Arrow Keys
ok, i have this code associated with a movie clip


Code:
on(enterFrame){
if(Key.isDown(Key.LEFT)){
this.play();
}
}
doesn't work... could someone help?

Arrow Keys
Im making a game that involves moving the character with the arrow keys. I want to know the code to make him be able to move move at a set speed on the X and Y axis.

Thank you

Arrow Keys
I've got a movie clip that contains an animated character.

In the first frame of the movie clip I have the character facing forward. In the second frame of the movie clip I have the same character turning profile.

On the main timeline I have an instance of this movie clip with an instance name of Freddy_mc.

The objective being that when the user presses the left arrow key the Freddy_mc jumps to its next frame showing the animated character in profile.

All of this I have accomplished with the following code on my actions layer in my main timeline (and this much works fine):

var xv = 15;

Freddy_mc.onEnterFrame = function ():Void {
if (Key.isDown(Key.LEFT) {
this._x -= xv;
this.nextFrame();
}

As I said, this much works fine.

My problem/question is this: when the left arrow key is released I want the Freddy_mc to revert back to its frame one so that the character is once again facing front.

The obvious thought might be Key.isUp - except there is no such method of the Key class. Nor a Key.release.

Any thoughts would be appreciated.

Moving An MC With Arrow Keys
How would I make a movie clip move (at a set speed) when an arrowkey is pressed, then stop moving when its de-pressed.

Cheers

Plane With The Arrow Keys
okay,
I want to make my plane face down and move down when i push the down key, may plane face up and go up when i push the up key and so on.

So far it moves but does not change direction.
How do you do this?

Combobox Bug When Using Arrow Keys
Hi,
I was wondering if anyone encountered a bug using a combobox(flash MX).

When I use a combobox in a form, it works fine with the mouse; showing all labels etc. However when I use the arrow keys to make a selection instead of using the mouse I sometimes get an empty value if I press the up key several times as soon as I enter the combobox. When I than post the form, the combobox value is thus Null.

Anyone dealt with this before, and perhaps knows a work-around to avoid this?

cheers
Patrick

Moving With The Arrow Keys?
Hi.


Can anybody tell me how to make a character move with the arrow keys?


Thanks

Arrow Keys Input
I want to call the specific key on keyboard to control a specific action on screen.

e.g . when i press down the "down arrow key", i want my movie go to the nextFrame();

what should i do?

Trap Arrow Keys
I have a movie clip controlled by user ARROW key input. At one point, I want to disable the arrow keys for a few frames so that the user can't move. How do I stop the arrow key functionality? Or, do I simply swap the mc for a graphic for those frames?

Thanks all.

Using Arrow Keys To Scroll Down
Is it possible to use the arrow keys on the keyboard to scroll thru a long text box? If so, how do you do set this up?
Thanks!

HitTest With Arrow Keys
i can't seem to create nor find a script that allows hitTest by arrow key movement. Only by mouse movement with dragging.
please atleast point me in the right direction.
thanks in advance.

Free The Arrow Keys;-)
Hi,

I would like to have your point of view and benefit from your experience about this;-)

I have to realize an interface that would be "keyboard only" you would navigate it with arrow keys and select with space bar for instance.

When this menu appears, the user, using the arrow keys, navigate freely through the "buttons" (I suppose that it would rather be MobieClip?).
For instance, starting from "ON", one should be able to go right and highlight "OFF"...or go down and highlight "Option1"
The movieclip would react like a button, with different states for "highlighted", "on" or "off".

(I join this picture so that you can see better what's to be achieved:
In this picture "On" & "Option2" are selected, "Off" is unselected but with an "highlighted" state, "Option1" & "Option3" are unselected)

What's your feeling about that? What would be the best way to handle this?

Thanks very much by advance for taking of your time ;-)

Scroll Box With Arrow Keys?
Hello,
I'm needing to make a text box / scroll bar that works with Up and Down arrow keys rather than the typical mouse drag. It seems like that'd be easy enough, but honestly I'm stumped. Anyone have any advice or possibly a tutorial or sample file? By the way, it needs to be in AS2.

Thanks!
Jason

Moving MCs With Arrow Keys- Help
Hello, this is my first post in this forum.


I am asking how to move MCs with arrow keys, I have seen many different codes and they don't seem to work. I think my prolbem is I am entering (enterFRAME) wrong.

If you could, show an example of what code I would do if it was on frame 1

There may be a previous post, please link me there if there is.

Arrow Keys And Focus
I created a slider in AS2 that I was converting to AS3. Basically it's a long bar with a handle that you can slide to different points to select different values.

In the AS2 version in addition to using your mouse, you can tab to the handle and use your right and left arrow keys to move it to the proper position. Using your arrow keys will usually shift focus to the next object, so I used Selection.setFocus() to keep the focus on the handle.

So, in the AS3 version I was trying to do the same thing. I've tried things like:

stage.focus=handle, this.stage.focus=this.handle, stage.focus=e.target (e.target is the same as handle in this case).

No matter what I try, pressing the right arrow will shift focus to anything to the right of the handle, and pressing left will shift focus to anything to the left of the handle.

What am I missing here?

Arrow Keys For Navigation
ok i'm making a game and i need help for navigation with the arrow keys. all i want is to use the right and left arrow keys to go to the next frame and last frame, repectivley. please help :s this is what i used but it didint work :


ActionScript Code:
on (Key.isDown(Key.RIGHT)){
    gotoAndPlay(2);
}

Major Help With Arrow Keys
ok...i know NOTHING about actionscripting. See i have this movie clip. (made with sprites) and its moving in one direction, constantly. exactly what do I do to make it so that when someone presses the up arrow key, the clips direction (meaning the character for the movie clip is facing up) goes up and so forth. Where do I put the action script...and how can i make it so that it can face the direction its moving??

please please help me...Ive been trying to find an answer to this question all day

Free The Arrow Keys;-)
Hi,

I would like to have your point of view and benefit from your experience about this;-)

I have to realize an interface that would be "keyboard only" you would navigate it with arrow keys and select with space bar for instance.

When this menu appears, the user, using the arrow keys, navigate freely through the "buttons" (I suppose that it would rather be MobieClip?).
For instance, starting from "ON", one should be able to go right and highlight "OFF"...or go down and highlight "Option1"
The movieclip would react like a button, with different states for "highlighted", "on" or "off".

(I join this picture so that you can see better what's to be achieved:
In this picture "On" & "Option2" are selected, "Off" is unselected but with an "highlighted" state, "Option1" & "Option3" are unselected)

What's your feeling about that? What would be the best way to handle this?

Thanks very much by advance for taking of your time ;-)

Navigate XML With Arrow Keys?
Hi all --

I have a dynamic XML-driven drop down menu I modified from Kirupa. It works great, except I'd like to be able to step through the nodes with the arrow keys (the site is a portfolio for a friend of mine). I can't find any info on how to go about this. See it working without arrow keys at http://www.culturedesign.com/projects/hochstrasser/

AS (Kirupa):


Code:
// generates a list of menu items (effectively one menu) given the inputted parameters. This makes the main menu as well as any of the submenus
GenerateMenu = function(container, name, x, y, depth, node_xml) {
// variable declarations
var curr_node;
var curr_item;
var curr_menu = container.createEmptyMovieClip(name, depth);

// for all items or XML nodes (items and menus) within this, node_xml passed for this menu
for (var i=0; i<node_xml.childNodes.length; i++) {
// movieclip for each menu item
curr_item = curr_menu.attachMovie("menuitem","item"+i+"_mc", i);
curr_item._x = x;
curr_item._y = y + i*curr_item._height;
curr_item.trackAsMenu = true;

// item properties assigned from XML
curr_node = node_xml.childNodes[i];
curr_item.action = curr_node.attributes.action;
curr_item.variables = curr_node.attributes.variables;
curr_item.name.text = curr_node.attributes.name;

curr_item.client = curr_node.attributes.client;
curr_item.project = curr_node.attributes.project;
curr_item.body = curr_node.attributes.body;
curr_item.image = curr_node.attributes.image;

// item submenu behavior for rollover event
if (node_xml.childNodes[i].nodeName == "menu"){
// open a submenu
curr_item.node_xml = curr_node;
curr_item.onRollOver = curr_item.onDragOver = function(){
var x = this._x + this._width + 1;
var y = this._y;
GenerateMenu(curr_menu, "submenu_mc", x, y, 1000, this.node_xml);
// show a hover color
var col = new Color(this.background);
col.setRGB(0x1a1c09);
};
} else { // nodeName == "item"
curr_item.arrow._visible = false;
// close existing submenu
curr_item.onRollOver = curr_item.onDragOver = function(){
curr_menu.submenu_mc.removeMovieClip();
// show a hover color
var col = new Color(this.background);
col.setRGB(0x1a1c09);
};
}

curr_item.onRollOut = curr_item.onDragOut = function(){
// restore color
var col = new Color(this.background);
col.setTransform({ra:100,rb:0,ga:100,gb:0,ba:100,bb:0});
};

// any item, menu opening or not can have actions
curr_item.onRelease = function() {
Actions[this.action](this.image);
Actions[this.action](this.variables);
_root.nav_mc.client.text = this.client;
_root.nav_mc.project.text = this.project;
_root.nav_mc.body.text = this.body;
CloseSubmenus();
_root.nav_mc._visible = false
_root.invisible_btn._visible = true;
};
} // end for loop
};

// create the main menu, this will be constantly visible
CreateMainMenu = function(x, y, depth, menu_xml){
// generate a menu list
GenerateMenu(this, "mainmenu_mc", x, y, depth, menu_xml.firstChild);
// close only submenus if visible durring a mouseup, this main menu (mainmenu_mc) will remain
mainmenu_mc.onMouseUp = function(){
if (mainmenu_mc.submenu_mc && !mainmenu_mc.hitTest(_root._xmouse, _root._ymouse, true)){
CloseSubmenus();
}
};
};

// closes all submenus by removing the submenu_mc in the main menu (if it exists)
CloseSubmenus = function(){
mainmenu_mc.submenu_mc.removeMovieClip();
};

// This actions object handles methods for actions defined by the XML called when a menu item is pressed
Actions = Object();

Actions.gotoURL = function(urlVar) {
getURL(urlVar, "_blank");
};

Actions.message = function(msg) {
message_txt.text = msg;
};

Actions.newMenu = function(menuxml) {
menu_xml.load(menuxml);
};

// image loader
Actions.loadImage = function(img) {
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(this);
function onLoadInit() {
};
loader.loadClip(img, _root.image_mc);
};

// load XML, when done, run CreateMainMenu to interpret it
menu_xml = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(ok) {
// create main menu after successful loading of XML
if (ok) {
CreateMainMenu(10, 10, 0, this);
message_txt.text = "message area";
} else {
message_txt.text = "error: XML not successfully loaded";
}
};

// load first XML menu
menu_xml.load("hochstrasser.xml");

***
XML sample (I'd like to jump from ITEM to ITEM and populate with those attributes):


Code:
<menu name="POP">

<item name="Box"
client="SANTA CRUZ"
project="POP"
body="Bindings packaging design for the seasons 2005/06 and 2006/07."
action="loadImage"
image="images/sc_box.png"/>

<item name="Sticker"
client="SANTA CRUZ"
project="POP"
body="Board explanation sticker and warranty information."
action="loadImage"
image="images/sc_brdsticker.png"/>

<item name="Buttons"
client="SANTA CRUZ"
project="POP"
body="Giveaway buttons."
action="loadImage"
image="images/sc_buttons.png"/>

</menu>
Mac OS X, Flash 8 Pro, AS 2, Flash Player 8/9

Moving Around With Arrow Keys
i was trying to move an object around with the arrow keys in flash.
with this code


ActionScript Code:
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
this._y -= 5;
}
if (Key.isDown(Key.DOWN)) {
this._y += 5;
}
if (Key.isDown(Key.RIGHT)) {
this._x += 5;
}
if (Key.isDown(Key.LEFT)) {
this._x -= 5;
}
}

But it won't work, and i got the error "1087: Syntax error: extra characters found after end of program.

Navigation Bar Using The Arrow Keys
OK, I have to make a interface much like the ones you see on your television when you press the 'red button'.

I have a selection of 5 buttons on my main page, each leading to other pages. Now, I need to be able to select these buttons and click on them without using the mouse. So in other works, I need to navigate them using the Arrow Keys and then use the Enter button the select it and go to the next page.

I was wondering what would be the best way to do this. I'm having a problem finding a tutorial for it. I did find away to do this but I can't remember how I did it and the .fla file which I saved on Flash MX on a MAC, will not open on Flash MX on my PC!

Thanks in advance peeps! I really need help with this asap

Disable Arrow Keys
Hi,

I hope someone can help me out... I'm building an app in Flash8 which used the arrow keys to position movieclips. On the right side of the screen I placed a few components like radiobuttons and comboboxes. When one of these is clicked on (received focus) it starts responding to the arrow keys. I've tried removing focus, but can't get that to work. What I really would like to do is remove the listeners from the components...

Can anybody please help me out? Thanks in advance.
Rick.

Mac OS X: My Arrow Keys Don't Work In Swf
When I run a flash application in a browser, the arrow keys do not work. The space bar works, but no arrows. This is affecting games, mostly.

I using 10.4.10, Safari 3.0.3, Flash 9,0,64,0

What can I do to diagnose/fix this issue?

EventListener For The Arrow Keys
How would I write and EventListener that would listen for the UP and/or DOWN keys only? I want to pick up these events and fire off a function.

Thanks,
Mike

Easing With Arrow Keys
Hey there..

I can't seem to figure this out, I'm trying to make easing movement using the arrow keys..!?

Here's what I'm working with:


ActionScript Code:
speed = 20;MC.onEnterFrame = function() {            if (Key.isDown(Key.UP)) {            rotrad = MC._rotation/57;            ymove = speed*Math.sin(rotrad);            xmove = speed*Math.cos(rotrad);            _x += xmove;            _y += ymove;            }


Any help would be awesome

Free The Arrow Keys;-)
Hi,
I would like to have your point of view and benefit from your experience about this;-)
I have to realize an interface that would be "keyboard only" you would navigate it with arrow keys and select with space bar for instance.
When this menu appears, the user, using the arrow keys, navigate freely through the "buttons" (I suppose that it would rather be MobieClip?).
For instance, starting from "ON", one should be able to go right and highlight "OFF"...or go down and highlight "Option1"
The movieclip would react like a button, with different states for "highlighted", "on" or "off".

(I join this picture so that you can see better what's to be achieved:
In this picture "On" & "Option2" are selected, "Off" is unselected but with an "highlighted" state, "Option1" & "Option3" are unselected)
What's your feeling about that? What would be the best way to handle this?
Thanks very much by advance for taking of your time ;-)

Navigate XML With Arrow Keys
Hi All --

I've successfully downloaded and modified the XML Based Drop Down Menu from Kirupa (thanks a TON for breaking it down so well in the tutorial).

The only thing I wish it did was allow me to step through each node by using the left and right arrow keys. Has anyone tried modify the existing Drop Down Menu script to do that? Everything I've seen about XML looks like I'll have to write crazy loops that I just don't get...

Any help would be appreciated. Thanks!


Me: OS X, Flash 8 Pro, AS 2.0, Flash Player 8

[AS2] Using Arrow Keys For Selection [HELP PLS]
I'm in need of some help.

I am trying to create a four button system that is controlled using either your mouse or arrow keys.

I need to create a Key Listener to allow the highlighting and selecting of each button . The arrow keys allow you to select button when you reach the last button it returns to the first button, and the enter key allows you to select the button.

I just can't figure this out....any help would be appreciated!

Easing With Arrow Keys
Hey there..

I can't seem to figure this out, I'm trying to make easing movement using the arrow keys..!?

Here's what I'm working with:


ActionScript Code:
speed = 20;MC.onEnterFrame = function() {            if (Key.isDown(Key.UP)) {            rotrad = MC._rotation/57;            ymove = speed*Math.sin(rotrad);            xmove = speed*Math.cos(rotrad);            _x += xmove;            _y += ymove;            }


Any help would be awesome

Free The Arrow Keys;-)
Hi,

I would like to have your point of view and benefit from your experience about this;-)

I have to realize an interface that would be "keyboard only" you would navigate it with arrow keys and select with space bar for instance.

When this menu appears, the user, using the arrow keys, navigate freely through the "buttons" (I suppose that it would rather be MobieClip?).
For instance, starting from "ON", one should be able to go right and highlight "OFF"...or go down and highlight "Option1"
The movieclip would react like a button, with different states for "highlighted", "on" or "off".

(I join this picture so that you can see better what's to be achieved:
In this picture "On" & "Option2" are selected, "Off" is unselected but with an "highlighted" state, "Option1" & "Option3" are unselected)

What's your feeling about that? What would be the best way to handle this?

Thanks very much by advance for taking of your time ;-)

Free The Arrow Keys;-)
Hi,

I would like to have your point of view and benefit from your experience about this;-)

I have to realize an interface that would be "keyboard only" you would navigate it with arrow keys and select with space bar for instance.

When this menu appears, the user, using the arrow keys, navigate freely through the "buttons" (I suppose that it would rather be MobieClip?).
For instance, starting from "ON", one should be able to go right and highlight "OFF"...or go down and highlight "Option1"
The movieclip would react like a button, with different states for "highlighted", "on" or "off".

(I join this picture so that you can see better what's to be achieved:
In this picture "On" & "Option2" are selected, "Off" is unselected but with an "highlighted" state, "Option1" & "Option3" are unselected)

What's your feeling about that? What would be the best way to handle this?

Thanks very much by advance for taking of your time ;-)

Move A Mask With The Arrow Keys?
OK, I want to be able to move the background of a mask using the arrow keys (or perhaps the mouse?) I have a background and a circle in the centre of the stage. The background shows through the centre of the circle. And out side the circle is just a black fill. Now all i want to do is be able to move the background using the arrow keys so you see the background moving through the circle. Can someone please help me ASAP. Thanx in advance for your help

Using Arrow Keys With Scrollpane And Scrollbars?
Hi.

I am looking for a way if its possible to use arrow keys on the keyboard to move the scrollpane and scrollbars up and down etc. Anyone know if its possible and if so how

Thanks

Adding Arrow Keys Control
I've been trying to work out how to get this script to work with mouseMove AND Key.isDown control:

Code:
onClipEvent(load){

scrollIN = _root.range._y-_root.range._height
scrollOUT = _root.range._y

lowestScale = 180
highestScale = 12000

_y = scrollIN + (scrollOUT - scrollIN)/1

scaleFactor = Math.pow(highestScale/lowestScale,1/(scrollOUT-scrollIN))
function SetScale(){
_root.scale = _root.map._xscale = _root.map._yscale = lowestScale * Math.pow(scaleFactor,(scrollOUT-_y))
}
SetScale()
}
onClipEvent(mouseMove){
if (dragging){
_y = Math.min(Math.max(_parent._ymouse,scrollIN),scrollOUT)
SetScale()
updateAfterEvent();
}
}
The mouseMove is working fine on my slider, but I am having no luck getting it to work with Arrow Keys.
I've been trying something like this:

Code:
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
this._ymouse -= scrollIN;
}
if (Key.isDown(Key.RIGHT)) {
this._ymouse += scrollOUT;
}
}
As you can see, I have it all wrong.
Any mathematicians or actionScripters able to point me on the right path?

Thanks.

Note
I'm trying to get this to be Flash5 compatible, but it isn't mandatory.

Arrow Keys To Next/prev Frame
Please can anyone tell me how to make a Flash movie so that the keyboard arrow keys may be used to goto the next/prev frame and the up/down arrow keys may be used to goto the first/last frames.

Obviously I could add this actionscript to next/prev buttons in the movie but I'd just like to include a keyboard option as well as the mouse one.

Arrow Keys To Joystick Control
Hi all, does anyone know if it is possible to substitute arrow key commands for a joystick?

I have a game that will be (hopefully, if possible!) used on a exhibition stand and people will play it using a joystick. Is that possible?

Has anyone seen any good tutorials or anything that will get me started???

Diggz

Using Arrow Keys To Move An Object
I use the left arrow to make my helcipter move to the left. I would like it to react emediatly when pressing the left key but there goes half a second before it moves. Just like when moving the curser in word. DOes anyone know how to fix this?

The code I use:
on (keyPress "<Left>") {
helicopter_mov._x = helicopter_mov._x - 5
}

Hope we have a genius among us

Moving A Movieclip Using Arrow Keys?
I have a Movieclip, and i want it to be moved around using the arrow keys
how is this done ?

Moving MC Smoothly With Arrow Keys
I am building a small race game. I have a vehicle that moves left and right to avoid oncoming objects.

My problems is when I hold the left or right arrow key down to move the car, the MC moves one space, stops, then continues to move left or right.

How do I get the car clip to move smoothly without the initial jerk?

thanks!!

Move A Movieclip With Arrow Keys
I wanna

move a movieclip over the screen by using the arrow keys on my keyboard.

as longer you press one key, the more power it should have.

when hitting the edges it should bounce back.


how can I do that?

hope someone can help me

Rotating A Shape Using Arrow Keys
hi, I need help on writing the actionscript for a user to rotate a shape using the arrow keys on the keyboard.

could someone please help me on how to do this. I'm new to flash and can't find a simple example or tutorial anywhere online.

thanks so much!

How To Rotate A Shape Using Arrow Keys?
hi, I need help on writing the actionscript for a user to rotate a shape using the arrow keys on the keyboard.

could someone please help me on how to do this. I'm new to flash and can't find a simple example or tutorial anywhere online.

thanks so much!

[F8] Arrow Keys, Forward And Back.
How would I make a character move forward and backwards? I have the left and right arrow keys move the character 15 degrees left and right, but I have no idea how to get him to move forward at the angle the character is on, as far as I know, this involves some type of math, I haven't learned in school.
Thanks.

Rotate With Arrow Keys, But Only After Click
I'm building an application which involves simple drag and drop and rotation of objects, much like a jigsaw puzzle. I have the objects rotate with the arrow keys but I can't get the individual objects to rotate one at a time. as soon as I use the arrow keys to rotate an object, they all rotate. Is there a way I can tell the application to only rotate the last object I clicked on?

Copyright © 2005-08 www.BigResource.com, All rights reserved