[resolved] Xml Image Gallery
If I use this code for every thumbnail transitions work ...How would I make this AS easier for me ?
Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
//Gallery panel
panel.onRollOver = panelOver;
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
}
var b = stroke.getBounds(_root);
function scrollPanel() {
if (_xmouse < b.xMin || _xmouse > b.xMax || _ymouse < b.yMin || _ymouse > b.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
}
if (panel._x >= 42) {
panel._x = 42;
}
if (panel._x <= -1870) {
panel._x = -1870;
}
var xdist = _xmouse - 400;
panel._x += Math.round(-xdist / 11);
}
panel.s1.onRollOver = function() {
panel.s1.swapDepths(this.getNextHighestDepth());
new Tween(panel.s1, '_xscale', Elastic.easeOut, panel.s1._xscale, 100, 1, true);
new Tween(panel.s1, '_yscale', Elastic.easeOut, panel.s1._yscale, 100, 1, true);
};
panel.s1.onRollOut = function() {
new Tween(panel.s1, '_xscale', Elastic.easeOut, panel.s1._xscale, 50, 1, true);
new Tween(panel.s1, '_yscale', Elastic.easeOut, panel.s1._yscale, 50, 1, true);
};
panel.s1.onRelease = function() {
holder.loadMovie('images/l1.jpg');
};
panel.s2.onRollOver = function() {
panel.s2.swapDepths(this.getNextHighestDepth());
new Tween(panel.s2, '_xscale', Elastic.easeOut, panel.s2._xscale, 100, 1, true);
new Tween(panel.s2, '_yscale', Elastic.easeOut, panel.s2._yscale, 100, 1, true);
};
panel.s2.onRollOut = function() {
new Tween(panel.s2, '_xscale', Elastic.easeOut, panel.s2._xscale, 50, 1, true);
new Tween(panel.s2, '_yscale', Elastic.easeOut, panel.s2._yscale, 50, 1, true);
};
panel.s2.onRelease = function() {
holder.loadMovie('images/l2.jpg');
};
panel.s3.onRollOver = function() {
panel.s3.swapDepths(this.getNextHighestDepth());
new Tween(panel.s3, '_xscale', Elastic.easeOut, panel.s3._xscale, 100, 1, true);
new Tween(panel.s3, '_yscale', Elastic.easeOut, panel.s3._yscale, 100, 1, true);
};
panel.s3.onRollOut = function() {
new Tween(panel.s3, '_xscale', Elastic.easeOut, panel.s3._xscale, 50, 1, true);
new Tween(panel.s3, '_yscale', Elastic.easeOut, panel.s3._yscale, 50, 1, true);
};
panel.s3.onRelease = function() {
holder.loadMovie('images/l3.jpg');
};
panel.s4.onRollOver = function() {
panel.s4.swapDepths(this.getNextHighestDepth());
new Tween(panel.s4, '_xscale', Elastic.easeOut, panel.s4._xscale, 100, 1, true);
new Tween(panel.s4, '_yscale', Elastic.easeOut, panel.s4._yscale, 100, 1, true);
};
panel.s4.onRollOut = function() {
new Tween(panel.s4, '_xscale', Elastic.easeOut, panel.s4._xscale, 50, 1, true);
new Tween(panel.s4, '_yscale', Elastic.easeOut, panel.s4._yscale, 50, 1, true);
};
panel.s4.onRelease = function() {
holder.loadMovie('images/l4.jpg');
};
panel.s5.onRollOver = function() {
panel.s5.swapDepths(this.getNextHighestDepth());
new Tween(panel.s5, '_xscale', Elastic.easeOut, panel.s5._xscale, 100, 1, true);
new Tween(panel.s5, '_yscale', Elastic.easeOut, panel.s5._yscale, 100, 1, true);
};
panel.s5.onRollOut = function() {
new Tween(panel.s5, '_xscale', Elastic.easeOut, panel.s5._xscale, 50, 1, true);
new Tween(panel.s5, '_yscale', Elastic.easeOut, panel.s5._yscale, 50, 1, true);
};
panel.s5.onRelease = function() {
holder.loadMovie('images/l5.jpg');
};
panel.s6.onRollOver = function() {
panel.s6.swapDepths(this.getNextHighestDepth());
new Tween(panel.s6, '_xscale', Elastic.easeOut, panel.s6._xscale, 100, 1, true);
new Tween(panel.s6, '_yscale', Elastic.easeOut, panel.s6._yscale, 100, 1, true);
};
panel.s6.onRollOut = function() {
new Tween(panel.s6, '_xscale', Elastic.easeOut, panel.s6._xscale, 50, 1, true);
new Tween(panel.s6, '_yscale', Elastic.easeOut, panel.s6._yscale, 50, 1, true);
};panel.s6.onRelease = function() {
holder.loadMovie('images/l6.jpg');
};
panel.s7.onRollOver = function() {
panel.s7.swapDepths(this.getNextHighestDepth());
new Tween(panel.s7, '_xscale', Elastic.easeOut, panel.s7._xscale, 100, 1, true);
new Tween(panel.s7, '_yscale', Elastic.easeOut, panel.s7._yscale, 100, 1, true);
};
panel.s7.onRollOut = function() {
new Tween(panel.s7, '_xscale', Elastic.easeOut, panel.s7._xscale, 50, 1, true);
new Tween(panel.s7, '_yscale', Elastic.easeOut, panel.s7._yscale, 50, 1, true);
};
panel.s7.onRelease = function() {
holder.loadMovie('images/l7.jpg');
};
panel.s8.onRollOver = function() {
panel.s8.swapDepths(this.getNextHighestDepth());
new Tween(panel.s8, '_xscale', Elastic.easeOut, panel.s8._xscale, 100, 1, true);
new Tween(panel.s8, '_yscale', Elastic.easeOut, panel.s8._yscale, 100, 1, true);
};
panel.s8.onRollOut = function() {
new Tween(panel.s8, '_xscale', Elastic.easeOut, panel.s8._xscale, 50, 1, true);
new Tween(panel.s8, '_yscale', Elastic.easeOut, panel.s8._yscale, 50, 1, true);
};
panel.s8.onRelease = function() {
holder.loadMovie('images/l8.jpg');
};
panel.s9.onRollOver = function() {
panel.s9.swapDepths(this.getNextHighestDepth());
new Tween(panel.s9, '_xscale', Elastic.easeOut, panel.s9._xscale, 100, 1, true);
new Tween(panel.s9, '_yscale', Elastic.easeOut, panel.s9._yscale, 100, 1, true);
};
panel.s9.onRollOut = function() {
new Tween(panel.s9, '_xscale', Elastic.easeOut, panel.s9._xscale, 50, 1, true);
new Tween(panel.s9, '_yscale', Elastic.easeOut, panel.s9._yscale, 50, 1, true);
};
panel.s9.onRelease = function() {
holder.loadMovie('images/l9.jpg');
};
panel.s10.onRollOver = function() {
panel.s10.swapDepths(this.getNextHighestDepth());
new Tween(panel.s10, '_xscale', Elastic.easeOut, panel.s10._xscale, 100, 1, true);
new Tween(panel.s10, '_yscale', Elastic.easeOut, panel.s10._yscale, 100, 1, true);
};
panel.s10.onRollOut = function() {
new Tween(panel.s10, '_xscale', Elastic.easeOut, panel.s10._xscale, 50, 1, true);
new Tween(panel.s10, '_yscale', Elastic.easeOut, panel.s10._yscale, 50, 1, true);
};
panel.s10.onRelease = function() {
holder.loadMovie('images/l10.jpg');
};
panel.s11.onRollOver = function() {
panel.s11.swapDepths(this.getNextHighestDepth());
new Tween(panel.s11, '_xscale', Elastic.easeOut, panel.s11._xscale, 100, 1, true);
new Tween(panel.s11, '_yscale', Elastic.easeOut, panel.s11._yscale, 100, 1, true);
};
panel.s11.onRollOut = function() {
new Tween(panel.s11, '_xscale', Elastic.easeOut, panel.s11._xscale, 50, 1, true);
new Tween(panel.s11, '_yscale', Elastic.easeOut, panel.s11._yscale, 50, 1, true);
};
panel.s11.onRelease = function() {
holder.loadMovie('images/l11.jpg');
};
panel.s12.onRollOver = function() {
panel.s12.swapDepths(this.getNextHighestDepth());
new Tween(panel.s12, '_xscale', Elastic.easeOut, panel.s12._xscale, 100, 1, true);
new Tween(panel.s12, '_yscale', Elastic.easeOut, panel.s12._yscale, 100, 1, true);
};
panel.s12.onRollOut = function() {
new Tween(panel.s12, '_xscale', Elastic.easeOut, panel.s12._xscale, 50, 1, true);
new Tween(panel.s12, '_yscale', Elastic.easeOut, panel.s12._yscale, 50, 1, true);
};
panel.s12.onRelease = function() {
holder.loadMovie('images/l12.jpg');
};
panel.s13.onRollOver = function() {
panel.s13.swapDepths(this.getNextHighestDepth());
new Tween(panel.s13, '_xscale', Elastic.easeOut, panel.s13._xscale, 100, 1, true);
new Tween(panel.s13, '_yscale', Elastic.easeOut, panel.s13._yscale, 100, 1, true);
};
panel.s13.onRollOut = function() {
new Tween(panel.s13, '_xscale', Elastic.easeOut, panel.s13._xscale, 50, 1, true);
new Tween(panel.s13, '_yscale', Elastic.easeOut, panel.s13._yscale, 50, 1, true);
};
panel.s13.onRelease = function() {
holder.loadMovie('images/l13.jpg');
};
panel.s14.onRollOver = function() {
panel.s14.swapDepths(this.getNextHighestDepth());
new Tween(panel.s14, '_xscale', Elastic.easeOut, panel.s14._xscale, 100, 1, true);
new Tween(panel.s14, '_yscale', Elastic.easeOut, panel.s14._yscale, 100, 1, true);
};
panel.s14.onRollOut = function() {
new Tween(panel.s14, '_xscale', Elastic.easeOut, panel.s14._xscale, 50, 1, true);
new Tween(panel.s14, '_yscale', Elastic.easeOut, panel.s14._yscale, 50, 1, true);
};
panel.s14.onRelease = function() {
holder.loadMovie('images/l14.jpg');
};
panel.s15.onRollOver = function() {
panel.s15.swapDepths(this.getNextHighestDepth());
new Tween(panel.s15, '_xscale', Elastic.easeOut, panel.s15._xscale, 100, 1, true);
new Tween(panel.s15, '_yscale', Elastic.easeOut, panel.s15._yscale, 100, 1, true);
};
panel.s15.onRollOut = function() {
new Tween(panel.s15, '_xscale', Elastic.easeOut, panel.s15._xscale, 50, 1, true);
new Tween(panel.s15, '_yscale', Elastic.easeOut, panel.s15._yscale, 50, 1, true);
};
panel.s15.onRelease = function() {
holder.loadMovie('images/l15.jpg');
};
panel.s16.onRollOver = function() {
panel.s16.swapDepths(this.getNextHighestDepth());
new Tween(panel.s16, '_xscale', Elastic.easeOut, panel.s16._xscale, 100, 1, true);
new Tween(panel.s16, '_yscale', Elastic.easeOut, panel.s16._yscale, 100, 1, true);
};
panel.s16.onRollOut = function() {
new Tween(panel.s16, '_xscale', Elastic.easeOut, panel.s16._xscale, 50, 1, true);
new Tween(panel.s16, '_yscale', Elastic.easeOut, panel.s16._yscale, 50, 1, true);
};
panel.s16.onRelease = function() {
holder.loadMovie('images/l16.jpg');
};
panel.s17.onRollOver = function() {
panel.s17.swapDepths(this.getNextHighestDepth());
new Tween(panel.s17, '_xscale', Elastic.easeOut, panel.s17._xscale, 100, 1, true);
new Tween(panel.s17, '_yscale', Elastic.easeOut, panel.s17._yscale, 100, 1, true);
};
panel.s17.onRollOut = function() {
new Tween(panel.s17, '_xscale', Elastic.easeOut, panel.s17._xscale, 50, 1, true);
new Tween(panel.s17, '_yscale', Elastic.easeOut, panel.s17._yscale, 50, 1, true);
};
panel.s17.onRelease = function() {
holder.loadMovie('images/l17.jpg');
};
panel.s18.onRollOver = function() {
panel.s18.swapDepths(this.getNextHighestDepth());
new Tween(panel.s18, '_xscale', Elastic.easeOut, panel.s18._xscale, 100, 1, true);
new Tween(panel.s18, '_yscale', Elastic.easeOut, panel.s18._yscale, 100, 1, true);
};
panel.s18.onRollOut = function() {
new Tween(panel.s18, '_xscale', Elastic.easeOut, panel.s18._xscale, 50, 1, true);
new Tween(panel.s18, '_yscale', Elastic.easeOut, panel.s18._yscale, 50, 1, true);
};
panel.s18.onRelease = function() {
holder.loadMovie('images/l18.jpg');
};
panel.s19.onRollOver = function() {
panel.s19.swapDepths(this.getNextHighestDepth());
new Tween(panel.s19, '_xscale', Elastic.easeOut, panel.s19._xscale, 100, 1, true);
new Tween(panel.s19, '_yscale', Elastic.easeOut, panel.s19._yscale, 100, 1, true);
};
panel.s19.onRollOut = function() {
new Tween(panel.s19, '_xscale', Elastic.easeOut, panel.s19._xscale, 50, 1, true);
new Tween(panel.s19, '_yscale', Elastic.easeOut, panel.s19._yscale, 50, 1, true);
};
panel.s19.onRelease = function() {
holder.loadMovie('images/l19.jpg');
};
this is suppose to be a slim down version of the above AS, and if I use this AS the transitions don't work, thumbnail panel scrolls but you are unable to select any of the thumbnail images.
Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
//Loads the xml
var xml:XML = new XML();
xml.ignoreWhite = true;
var url:Array = new Array();
var captions:Array = new Array();
var whoIsOn:Number;
xml.onLoad = function() {
var photo:Array = this.firstChild.childNodes;
for (i = 0; i < photo.length; i++) {
url.push(photo[i].attributes.url);
captions.push(photo[i].attributes.caption);
}
holder.loadMovie(url[0]);
caption.text = captions[0];
whoIsOn = 0;
};
xml.load("image.xml");
//Gallery panel
panel.onRollOver = panelOver;
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
}
var b = stroke.getBounds(_root);
function scrollPanel() {
if (_xmouse < b.xMin || _xmouse > b.xMax || _ymouse < b.yMin || _ymouse > b.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
}
if (panel._x >= 42) {
panel._x = 42;
}
if (panel._x <= -1870) {
panel._x = -1870;
}
var xdist = _xmouse - 400;
panel._x += Math.round(-xdist / 11);
}
function myFunction(imgNum, scaleNum) {
this['panel']['s' + imgNum].swapDepths(this.getNextHighestDepth());
new Tween(this['panel']['s' + imgNum], '_xscale', Elastic.easeOut, this['panel']['s' + imgNum]._xscale, scaleNum, 1, true);
new Tween(this['panel']['s' + imgNum], '_yscale', Elastic.easeOut, this['panel']['s' + imgNum]._yscale, scaleNum, 1, true);
}
I'M SURE SOMEONE COULD HELP ME OUT WITH WHAT I`M MISSING..OR..DOING WRONG..
View Replies !
View Related