Image_Slider [built w/Flash 8 Pro] xml, very cool...

[Joy_M]

came across this very cool image slider the other day,

a real must have as far as I'm concerned! Cheers!

download zip (http://blog.reintroducing.com/source/flash/imgloadscroller/imgLoadScroller.zip)

[beepiams]

nuff respect mate, you have a good start to something that could be elegant.

I'm gonna give it a little button upgrade and see what I can do.

Cheers!
Beep

[4lex]

This is exactly what I'm looking for! Thanks for posting this!

I would like to have more buttons thou, not only prev and next. Each button would have its own specific image and they would change as the user hovers over the buttons.

I have modified the code a little with no luck (simply because I mainly don't know what I'm doing).

Here's the code:

_global.tRef = this;

var iXML:XML = new XML();
iXML.ignoreWhite = true;
iXML.onLoad = init;
iXML.load("xml/images.xml");

// axis is a string: _x or _y, speed is a number between 1 and 2: if undefined, default is 1.5
MovieClip.prototype.easeTo = function(axis:String, destination:Number, speed:Number) {
var goSpeed:Number; // speed of easing

// if its undefined, set default to 1.5
if (speed == undefined) {
goSpeed = 1.5;
} else {
goSpeed = speed;
}

this.onEnterFrame = function():Void {
this[axis] = destination - (destination - this[axis]) / goSpeed;
if (this[axis] > destination - 1 && this[axis] < destination + 1) {
this[axis] = destination;
tRef.next_btn.enabled = tRef.prev_btn.enabled = true;
tRef.next_btn._alpha = tRef.prev_btn._alpha = 100 ;
delete this.onEnterFrame
}
};
};

function init():Void {
var imgNum:Number = iXML.firstChild.childNodes.length;
var curPanel:Number = 0;

for (var i:Number = 0; i < imgNum; i++) {
var ob:Object = new Object();
ob.id = i;
ob.mc = tRef.panels_mc.createEmptyMovieClip("img" + ob.id + "_mc", tRef.panels_mc.getNextHighestDepth());
ob.mc._x = (578 * ob.id)
ob.mc.loadMovie(iXML.firstChild.childNodes[i].attributes.src);
ob.invis = tRef.panels_mc.createEmptyMovieClip("invis" + ob.id, tRef.panels_mc.getNextHighestDepth());
ob.invis.btn = ob.invis.attachMovie("invis", "btn" + ob.id, ob.id);
ob.invis.btn._x = (578 * ob.id);
ob.invis.btn.id = ob.id;

ob.invis.btn.onRelease = function():Void {
trace("clicked button " + this.id + " and made a selection");
};
}

tRef.home.onRollOver = function() { // <--- I have modified this and...
this.enabled = false;
this._alpha = 50;

if (curPanel < (imgNum - 1)) {
curPanel++;
tRef.panels_mc.easeTo("_x", tRef.panels_mc._x - 578, 1.3);
}
};
tRef.latest.onRollOver = function() { // <--- ...this
this.enabled = false;
this._alpha = 50;

if (curPanel < (imgNum - 1)) {
curPanel++;
tRef.panels_mc.easeTo("_x", tRef.panels_mc._x - 578, 1.3);
}
};

tRef.prev_btn.onRollOver = function() { // <--- I have no idea what to do with this one o.O
this.enabled = false;
this._alpha = 50;

if (curPanel > 0) {
curPanel--;
tRef.panels_mc.easeTo("_x", tRef.panels_mc._x + 578, 1.3);
}
};
}How can I achieve that? Thank you!

[4lex]

Anyone?

I want (I wish) to make it look similar to the menu seen in this website (http://boaforma.abril.com.br/).

As you can see, the content changes as the user hovers over the buttons. I tried to change the code of the example available in this thread, but I'm too novice to figure out what exactly needs to be changed.

Please, some master of the ActionScript Language, help!

Thanks!

[gonzolo]

@4lex don't hijack >:[

@Joy_M any chance of a swf linky? for us lazy ppl :P

[4lex]

@4lex don't hijack >:[

@Joy_M any chance of a swf linky? for us lazy ppl :P

What do you mean by hijacking?

Here's the link to the swf file: http://blog.reintroducing.com/source/flash/imgloadscroller/

[mprzybylski]

here you go. edited it to do what you want.

http://blog.reintroducing.com/index.php/17/07/2007/456

[gonzolo]

What do you mean by hijacking?
i have absolutely no idea :/

ty for the linky

[4lex]

mprzybylski man, thanks for taking your time to help me and other people that will eventually want to make a cool image slider just like yours.

True master of the ActionScript language really!

[mprzybylski]

lol, you're welcome, but i'm far from a master of AS. that's what we all strive to be.

[sw0bes]

I'm looking at using something similar to this but with it cycling through the images, and the buttons changing to show which image you're at. I'm gonna poke around with it, but if anybody has any suggestions let me know :)

[mikenificent]

lol, you're welcome, but i'm far from a master of AS. that's what we all strive to be.

Thanks for this it is great work, was wondering how would I be able to make it so instead of rolling over the button the image slides, I would like to make it so when you click on a button it slides insteand.

[4lex]

Thanks for this it is great work, was wondering how would I be able to make it so instead of rolling over the button the image slides, I would like to make it so when you click on a button it slides insteand.

Open the file code.as and go to line 74 (ob.mc.onRollOver = function():Void) and replace onRollOver by onRelease

[4lex]

Hmm, I got a problem. I followed this tutorial (http://www.kirupa.com/developer/mx2004/button_effect.htm) to add RollOver/RollOut effects to the buttons. The problem is that the effects are not being displayed, because the buttons are already receiving the RollOver event (from the code.as).

I also followed an example from this thread (http://www.kirupa.com/forum/showthread.php?t=266470&highlight=rollover+inside), but didn't work.

What could be done about it?

[mikenificent]

Open the file code.as and go to line 74 (ob.mc.onRollOver = function():Void) and replace onRollOver by onRelease

Thanks

[4lex]

You're welcome mikenificent.

I managed to solve the RollOver/RollOut problem. I used the function tellTarget seen in this Advanced Rollovers tutorial (http://www.kirupa.com/developer/flash5/advroll.htm).

I'll now try to assign a link for each image from an xml file, does anybody have any suggestions?

[4lex]

Hello guys,

Matt from reintroducing.com (http://blog.reintroducing.com) did us huge favor and in a snap assigned links to each image. Thank you man!

Download the zip file and enjoy!