I have a photo slideshow which is part of a larger flash application. I’m trying to add keyboard navigation to go from one photo to the next, using the right and left arrow keys.
The slideshow also has buttons for next and previous, so when I detect the right or left key press I’m simply calling the onRelease function of the corresponding button.
The strange problem is that the buttons work fine, but when I call the same onRelease function via the keypress it doesn’t work quite right. It should be running the exact same function as if I was pushing the button, but obviously it’s not quite the same and I cannot figure out why.
The specific problem I’m noticing is that when using the keypress navigation images get skipped. It looks like sometimes it goes two images ahead instead of one and when it does this the tweening transition between the images is hurried and not quite right. This does not happen when using the buttons, only with keypress, even though theoretically both trigger the exact same functions.
Here’s is the code below relating to the slideshow. Does anyone see a reason why the keypress navigation would not be functioning the same as the button navigation?
Note: there is some extra stuff here that has to do with the larger application – there can be many different instances of the slideshow at once so that’s why the specific slideshow that is currently active has to be targeted when using the keypress navigation otherwise it will control all of the slideshows at once instead of just the one being viewed.
Let me know if you have any questions. There may be some things in the code that need explaining, but I’m focusing just on the issue of the keyboard navigation not working the same as the button navigation even though they call the same function.
p = 0;
// next and prev buttons
setNav_mc.setNavPrev_btn.onRelease = function() {
if (!this._parent._parent.empty_mc.isTweening() && !this._parent.isTweening() && !this._parent._parent.backing_mc.isTweening()) {
prevImage();
}
};
setNav_mc.setNavNext_btn.onRelease = function() {
if (!this._parent._parent.empty_mc.isTweening() && !this._parent.isTweening() && !this._parent._parent.backing_mc.isTweening()) {
nextImage();
}
};
// once box is correct size, fade in new image
showNewImage = function () {
this.onEnterFrame = function() {
loader_mc._visible = false;
loader_mc._x = array[p].width / 2;
loader_mc._y = array[p].height / 2;
var t = empty_mc.getBytesTotal();
var l = empty_mc.getBytesLoaded();
percent = Math.round((l / t) * 100);
if (l == t && t != undefined && t > 0) {
empty_mc.alphaTo(100, .7, "easeOutQuint", .3);
setNav_mc.alphaTo(100, .7, "easeOutQuint", .5);
pictureNum();
loader_mc._visible = false;
delete this.onEnterFrame;
} else {
loader_mc._visible = true;
if (isNaN(percent)) {
percent = 0;
}
loader_mc.percent_txt.text = 10 - Math.round(percent / 10);
loader_mc.circle_mc._xscale = 100 - percent + 55;
loader_mc.circle_mc._yscale = 100 - percent + 55;
}
};
};
// go to next image
nextImage = function () {
if (p < (total - 1)) {
p++;
} else if (p == (total - 1)) {
p = 0;
}
this.photoWidth = this.array[p].width;
empty_mc._alpha = 0;
setNav_mc._alpha = 0;
setNav_mc.setPhotoNumber_txt._visible = false;
infoMask_mc._y = -this._parent.infoHeight - 1;
empty_mc.loadMovie(this.array[p].path);
if (backing_mc._width == this.array[p].width && backing_mc._height == this.array[p].height) {
showNewImage();
resetCaption();
} else {
shadow_mc.resizeTo(this.array[p].width - 5 + 20, undefined, .4, "easeInOutQuint");
shadow_mc.resizeTo(undefined, this.array[p].height - 5 + 20, .4, "easeInOutQuint", .4);
backing_mc.resizeTo(this.array[p].width, undefined, .4, "easeInOutQuint");
backing_mc.resizeTo(undefined, this.array[p].height, .4, "easeInOutQuint", .4, showNewImage);
resetCaption();
}
setNav_mc._x = 0;
setNav_mc._y = this.array[p].height - 23.1;
setNav_mc.setNavShape_mc._width = this.array[p].width;
setNav_mc.setNavNext_btn._x = setNav_mc.setNavShape_mc._width;
setNav_mc.setPhotoNumber_txt._x = setNav_mc.setNavShape_mc._width / 2 - setNav_mc.setPhotoNumber_txt._width / 2;
};
// go to prev image
prevImage = function () {
if (p > 0) {
p--;
} else if (p == 0) {
p = (total - 1);
}
this.photoWidth = this.array[p].width;
empty_mc._alpha = 0;
setNav_mc._alpha = 0;
setNav_mc.setPhotoNumber_txt._visible = false;
infoMask_mc._y = -this._parent.infoHeight - 1;
empty_mc.loadMovie(this.array[p].path);
if (backing_mc._width == this.array[p].width && backing_mc._height == this.array[p].height) {
showNewImage();
resetCaption();
} else {
shadow_mc.resizeTo(this.array[p].width - 5 + 20, undefined, .4, "easeInOutQuint");
shadow_mc.resizeTo(undefined, this.array[p].height - 5 + 20, .4, "easeInOutQuint", .4);
backing_mc.resizeTo(this.array[p].width, undefined, .4, "easeInOutQuint");
backing_mc.resizeTo(undefined, this.array[p].height, .4, "easeInOutQuint", .4, showNewImage);
resetCaption();
}
setNav_mc._x = 0;
setNav_mc._y = this.array[p].height - 23.1;
setNav_mc.setNavShape_mc._width = this.array[p].width;
setNav_mc.setNavNext_btn._x = setNav_mc.setNavShape_mc._width;
setNav_mc.setPhotoNumber_txt._x = setNav_mc.setNavShape_mc._width / 2 - setNav_mc.setPhotoNumber_txt._width / 2;
};
// load first image at start
firstImage = function () {
empty_mc._alpha = 100;
empty_mc.loadMovie(this.array[p].path);
shadow_mc._width = this.array[p].width - 5 + 20;
shadow_mc._height = this.array[p].height - 5 + 20;
backing_mc._width = this.array[p].width;
backing_mc._height = this.array[p].height;
setNav_mc._x = 0;
setNav_mc._y = this.array[p].height - 23.1;
setNav_mc.setNavShape_mc._width = this.array[p].width;
setNav_mc.setNavNext_btn._x = setNav_mc.setNavShape_mc._width;
setNav_mc.setPhotoNumber_txt._x = setNav_mc.setNavShape_mc._width / 2 - setNav_mc.setPhotoNumber_txt._width / 2;
this.photoWidth = this.array[p].width;
pictureNum();
resetCaption();
_root.menuBar_mc.status_mc.loadStatus_txt.text = this.photoName;
if (this.isLast = true) {
_root.menuBar_mc.status_mc.alphaTo(0, .3, "easeOutQuad", 2);
}
};
// adjust picture number
pictureNum = function () {
setNav_mc.setPhotoNumber_txt._visible = true;
currentPos = p + 1;
setNav_mc.setPhotoNumber_txt.text = "image " + currentPos + " of " + total;
};
// reset caption
resetCaption = function () {
infoBox_mc.infoBoxShape_mc._width = this.array[p].width;
infoMask_mc._width = this.array[p].width;
infoBox_mc.caption_txt._width = this.array[p].width - 30;
infoBox_mc.caption_txt.text = this.array[p].caption;
if (infoBox_mc.caption_txt.textHeight < 20) {
infoBox_mc.caption_txt._height = infoBox_mc.caption_txt.textHeight + 8;
} else if (infoBox_mc.caption_txt.textHeight > 20) {
infoBox_mc.caption_txt._height = infoBox_mc.caption_txt.textHeight + 12;
}
infoBox_mc.photographer_txt._width = this.array[p].width - 30;
infoBox_mc.photographer_txt._y = infoBox_mc.caption_txt._y + infoBox_mc.caption_txt._height - 4;
infoBox_mc.photographer_txt.text = this.array[p].info;
this.infoHeight = infoBox_mc.caption_txt._y + infoBox_mc.caption_txt._height + infoBox_mc.photographer_txt._height + 10;
infoBox_mc.infoBoxShape_mc._height = this.infoHeight;
infoMask_mc._height = this.infoHeight;
infoMask_mc._y = -this.infoHeight - 1;
this.link = this.array[p].link;
};
// start at first image when load
firstImage();
// detect key press
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.isDown(Key.LEFT)) {
if (_global.activeLevel == 1 && _global.zoomedPhoto) {
_root.center_mc.photosLevel1_mc[_global.activePhoto].setNav_mc.setNavPrev_btn.onRelease();
} else if (_global.activeLevel == 2 && _global.zoomedPhoto) {
_root.center_mc.photosLevel2_mc[_global.activePhoto].setNav_mc.setNavPrev_btn.onRelease();
} else {
//nothing
}
} else if (Key.isDown(Key.RIGHT)) {
if (_global.activeLevel == 1 && _global.zoomedPhoto) {
_root.center_mc.photosLevel1_mc[_global.activePhoto].setNav_mc.setNavNext_btn.onRelease();
} else if (_global.activeLevel == 2 && _global.zoomedPhoto) {
_root.center_mc.photosLevel2_mc[_global.activePhoto].setNav_mc.setNavNext_btn.onRelease();
} else {
//nothing
}
} else {
//nothing
}
};
Key.addListener(keyListener);
