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
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
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 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?
|