[RESOLVED] Help looping an array

If anyone can help I will be so so thankfull,

please go to www.toolmarket.com to see what I am working with.

I would like to know how to loop the main player you see there everytime you get to the end of the 14h product. I have no idea how since I am new to actionscript. Any advice would help. Thanks in advance.

Right now I just have a code making an array of all the movieclips and then scrolling threw them.

Here is the actionscript:
(If you need the flash file I could send that two)

Actionscript Code:

myTimer = null;
var counter = null;
var roll = null;


// ******* Time Delays :: /////
myTimer = setInterval( function(){ scrollIcons(1);}, 6000 );

//•••••••••••••••••••••••
// ******* importing other classes :: ////
import caurina.transitions.Tweener;


//••••••••••••••••••••••••
=====================================
// Initialization methods

this.init = function():Void {
    // Initializes the movieclip

    // Properties- all the movieclips I am scrolling threw
    this.icons = [this.mk302wx1, this.dytp8640, this.ot3866, this.bsl130,  this.ro34788, this.apt8710,this.flkrld2, this.ot3825j, this.gwr85599, this.gwr85597, this.mc55500uv, this.lxt311hx1, this.mc98661, this.ir1207max, this.apt3018p ];
    this.iconNames = ["MK LCT302WX1", "DY TP-8640CS", "OT 3866", "BSL 130221SE","RO 34788", "APT 8710", "FLK RLD2", "OT 3825J","GWR 85599", "GWR 85597","MC 55500UV", "MK LXT311HX1", "MC 98661-PRO", "IR 1207MAX-D3", "APT 3018P"];

    this.currentIcon = 2;
    
    // Finally, redraws
    this.redraw(true);

    this.stop();
};

//•••••••••••••••••••••••••••
=====================================
// Execution methods
//-----------------------------------------------------------------------------------

this.redraw = function(p_immediate:Boolean) {
    // Redraws every item on their new position
    var i:Number;

    var scaleSmall:Number = 0.3; // Scale when not focused
    var scaleBig:Number = 1; // Scale when focused

    var baseX:Number = 340; // Base column for focused position
    var baseY:Number = 160; // Base row for all icons

    var iconDistance:Number = 130; // Distance between the center axis of each icon
    var iconDistanceFocused:Number = 220; // Distance between the center axis of each icon WHEN FOCUSED

    var animationTime:Number = p_immediate ? 0 : 0.6;
    var animationType:String = "easeoutCirc";

    // Redraw: icons
    
    // Set correct scale
    for (i = 0; i < this.icons.length; i++) {
        var distance:Number = this.currentIcon - i;
        var itemScale:Number = Math.abs(distance) > 1 ? scaleSmall : ((1-Math.abs(distance)) * (scaleBig-scaleSmall)) + scaleSmall;
        var itemX:Number = baseX + (distance * -iconDistance);
        if (distance != 0) {
            itemX += (iconDistanceFocused - iconDistance) * (distance > 0 ? -1 : +1);
        }

        Tweener.addTween(this.icons[i], {_x:itemX, _xscale:100 * itemScale, _yscale:100 * itemScale, time:animationTime, transition:animationType});

        this.icons[i]._y = baseY;

        if (animationTime > 0) {
            // Apply a motion blur depending on the ammount of pixels the object has to be moved
            var ammountToBlur:Number = Math.abs(this.icons[i]._x - itemX) / 12;
            Tweener.addTween(this.icons[i], {_blur_blurX:ammountToBlur, _blur_quality:2, time:animationTime/2, transition:"easeOutQuint"});
            Tweener.addTween(this.icons[i], {_blur_blurX:0, time:animationTime/2, delay:animationTime/2, transition:"easeOutQuad"});
        }}
    

//•••••••••••••••••••••••••••••
// Redraw: text
    this.caption.text = this.iconNames[this.currentIcon];
};

// ******* control for the scrolling looping back to number one
this.scrollIcons = function(p_offset:Number) {
    if (currentIcon == 14 && counter == null) // line of code that protects loop 
    {
        this.setIcon(0);}
    else {
        this.setIcon(this.currentIcon + p_offset);
        }};

//•••••••••••••••••••
// Finally Setting the Correct Icon (SET ICON FUNCTION)
this.setIcon = function(p_icon:Number) {
    // Set the currently selected icon
    if (p_icon != undefined) {
        if (p_icon < 0) p_icon = 0;
        if (p_icon > this.icons.length - 1) p_icon = this.icons.length - 1;
        if (p_icon != this.currentIcon) {
            this.currentIcon = p_icon;
            this.redraw(false);}}};

    
//===================================================================================
// End
//-----------------------------------------------------------------------------------

this.init();

What you want to do isn't clear.

gparis

All I would like is to have this player seem endless from right to left.
If you look at toolmarket.com you will see the player I am talking.

I would like the array to keep going on the left, when you get to the last icon
I would like the first icon to appear on the left of the last icon. (as if the array
is created again to the left)

I would take out the buttons that take you to the first and last icon,
as they would be arbitrary at that point.

Do you have any idea how to do this? Have an array be reapeated endlessly?

Code:

---

this.scrollIcons = function(p_offset:Number) {
        this.icons.push(this.icons.shift());
        this.iconNames.push(this.iconNames.shift());
        this.redraw(false);
};

---

you are amazing!! Thank you so much! I can't believe it was that easy,
Other people told me it was much harder

Could I by chance ask you one more question, since you seem like a flash expert!

On the rollovers on each product I want to embed a button to click to an URL, but the button needs to be inside the movie clip.

Everytime I put a button in the movieclip, the code does not work!
I have tried _root. and _parent. but still does not work.

Got a quick fix on this one too?

Ok - Thought the code was perfect, but now I see some flaws.

I cannot have a back button any longer. I want them to be able to go backwards if they want to, not necessarily endlessly, but at least one full turn.

Right now I set up a new code for going backwards and assigned it to the back button, BUT it screws up the forward button and it also does not generate the icons to the left that have gone off the pasteboard:

Actionscript Code:

this.scrollIconsback = function(p_offset:Number) {
    this.setIcon(this.currentIcon -1);
};

ANY IDEAS?

Code:

---

var goLeft = true;
this.scrollIcons = function(p_offset:Number) {
        if (goLeft) {
                this.icons.push(this.icons.shift());
                this.icons[this.icons.length-1]._x = Stage.width;
        } else {
                this.icons.unshift(this.icons.pop());
                this.icons[0]._x = 0-this.icons[0]._width;
        }
        this.redraw(false);
};
btnLeft.onPress = function() {
        goLeft = true;
};
btnRight.onPress = function() {
        goLeft = false;
};

---

Left button doesn't work!

does not go left at all

did you know that I have code on each arrow
CODE IS THE FOLLOWING:
[this.onRelease = function() {
this._parent.scrollIcons(-1);

]

Remove any code on the buttons.
Make sure the instance name is 'btnLeft'.

Just wanted to repspond to this post

Still never got anything to work.

Once I took the code I had of the individual buttons, nothing worked!
Didn't move anything, anyone got any ideas!

I just want to scroll through an array left and right, and when scrolling to the right i would love it to be endless, doesn't seeem like it should be that hard

Can you post a stripped down version of your current fla here?

Below is my actionscript code in the first frame
I could give you the source files if you need them


I just have code setting up an array of images
And two left and right btn lables btnRight and btnLeft
that I want to be able to scroll left to the beggining and scroll right endlessly....


What do you think?

Actionscript Code:

// ******* Variables I have added  :: ////
myTimer = null;
var counter = null;
var roll = null;

// ******* Time Delays :: /////
myTimer = setInterval( function(){ scrollIcons(1);}, 6000 );

//••••••••••••••••••••••••••••••••••••
// ******* importing other classes :: ////
import caurina.transitions.Tweener;


// Initialization methods
//-----------------------------------------------------------------------------------

this.init = function():Void {
    // Initializes the movieclip

    // Properties
    this.icons = [this.mk302wx1, this.dytp8640, this.ot3866, this.Hammer,  this.ro34788, this.apt8710,this.flkrld2, this.ot3825j, this.gwr85599, this.gwr85597, this.mc55500uv, this.lxt311hx1, this.mc98661, this.ir1207max, this.apt3018p, this.bsl130];
    this.iconNames = ["MK LCT302WX1", "DY TP-8640CS", "OT 3866", "IR 2015MAX","RO 34788", "APT 8710", "FLK RLD2", "OT 3825J","GWR 85599", "GWR 85597","MC 55500UV", "MK LXT311HX1", "MC 98661-PRO", "IR 1207MAX-D3", "APT 3018P", "BSL 130221SE" ];

    this.currentIcon = 3;
    
    // Finally, redraws
    this.redraw(true);

    this.stop();
};

// Execution methods
//-----------------------------------------------------------------------------------

this.redraw = function(p_immediate:Boolean) {
    // Redraws every item on their new position
    var i:Number;

    var scaleSmall:Number = 0.3; // Scale when not focused
    var scaleBig:Number = 1; // Scale when focused

    var baseX:Number = 340; // Base column for focused position
    var baseY:Number = 160; // Base row for all icons

    var iconDistance:Number = 130; 
    var iconDistanceFocused:Number = 220; 

    var animationTime:Number = p_immediate ? 0 : 0.5;
    var animationType:String = "easeoutCirc";

    // Redraw: icons
    
    // Set correct scale
    for (i = 0; i < this.icons.length; i++) {
        var distance:Number = this.currentIcon - i;
        var itemScale:Number = Math.abs(distance) > 1 ? scaleSmall : ((1-Math.abs(distance)) * (scaleBig-scaleSmall)) + scaleSmall;
        var itemX:Number = baseX + (distance * -iconDistance);
        if (distance != 0) {
            itemX += (iconDistanceFocused - iconDistance) * (distance > 0 ? -1 : +1);
        }

        Tweener.addTween(this.icons[i], {_x:itemX, _xscale:100 * itemScale, _yscale:100 * itemScale, time:animationTime, transition:animationType});

        this.icons[i]._y = baseY;

        if (animationTime > 0) {
            // Apply a motion blur depending on the ammount of pixels the object has to be moved
            var ammountToBlur:Number = Math.abs(this.icons[i]._x - itemX) / 12;
            Tweener.addTween(this.icons[i], {_blur_blurX:ammountToBlur, _blur_quality:2, time:animationTime/2, transition:"easeOutQuint"});
            Tweener.addTween(this.icons[i], {_blur_blurX:0, time:animationTime/2, delay:animationTime/2, transition:"easeOutQuad"});
        }
        }

    

//••••••••••••••••••••••••••••••••••••••
// Redraw: text
    this.caption.text = this.iconNames[this.currentIcon];}

var goLeft = true;
this.scrollIcons = function(p_offset:Number) {
    if (goLeft = true) {
        this.icons.push(this.icons.shift());
        this.icons[this.icons.length-1]._x = Stage.width;
    } else {
        this.icons.unshift(this.icons.pop());
        this.icons[0]._x = 0-this.icons[0]._width;
    }
    this.redraw(false);
};
btnLeft.onPress = function() {
    goLeft = true;
};
btnRight.onPress = function() {
    goLeft = false;
};


//••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
// Finally Setting the Correct Icon (SET ICON FUNCTION)
this.setIcon = function(p_icon:Number) {
    // Set the currently selected icon
    if (p_icon != undefined) {
        if (p_icon < 0) p_icon = 0;
        if (p_icon > this.icons.length - 1) p_icon = this.icons.length - 1;
        if (p_icon != this.currentIcon) {
            this.currentIcon = p_icon;
            this.redraw(false);}}};
    
==============================
// End
//-----------------------------------------------------------------------------------


this.init();

I don't need your 'real' source files, just a stripped down version that has the structure and code in it.

well that should be it, what I posted before

That is just the actionscript I am having a problem with, and that is what is delegated the scroll.

Let me know what you think, thanks a lot!

If you want:

Here is a link for the "stripped down version" of this player in one folder including the folder for the class that is helping the player scroll.



Let me know if anyone has any ideas

You can see what the player looks like without the link on www.toolmarket.com

Sorry, but I can't get files from other sites, that's why I asked if you could post it here.

Sorry about that, then how do I get you the file?

I posted all the actionscript before that is in question, what else do you need on this?

Does this work?

I didn't realize there was an advance post sorry!

No files in the zip.

This is getting ridiculous i must have been over the limit


ok how about this?

Okay...

left

Code:

---

onClipEvent (load) {
        //import caurina.transitions.Tweener;
        this._alpha = 60;
        this.onRollOver = function() {
                //_parent.counter = 1;
                //trace(_parent.counter);
                clearInterval(_parent.myTimer);
                Tweener.addTween(this, {_alpha:30, time:0.1, transition:"linear"});
                Tweener.addTween(this, {_height:30, time:0.5, transition:"easeoutCirc"});
        };
        this.onRollOut = this.onReleaseOutside = function() {
                //_parent.counter = null;                Tweener.addTween(this, {_alpha:60, time:0.1, transition:"linear"});
                Tweener.addTween(this, {_height:30, time:0.2, transition:"easeoutCirc"});
                _parent.myTimer = setInterval( function(){_parent.scrollIcons(1);}, 6000 );
        };

        this.onRelease = function() {
                this._parent.scrollIcons(-1);
               
        };
}

---

right

Code:

---

onClipEvent (load) {
        //import caurina.transitions.Tweener;
        this._alpha = 60;
        this.onRollOver = function() {
                //trace(_parent.counter);
                clearInterval(_parent.myTimer);
                Tweener.addTween(this, {_alpha:30, time:0.1, transition:"linear"});
                Tweener.addTween(this, {_height:30, time:0.5, transition:"easeoutCirc"});
        };
        this.onRollOut = this.onReleaseOutside = function() {
               
                Tweener.addTween(this, {_alpha:60, time:0.1, transition:"linear"});
                Tweener.addTween(this, {_height:30, time:0.2, transition:"easeoutCirc"});
                _parent.myTimer = setInterval( function(){_parent.scrollIcons(1);}, 6000 );
        };

        this.onPress = function() {
                this._parent.scrollIcons(1);
        };
}

---

main

Code:

---


// ******* Variables I have added  :: ////
myTimer = null;
//var counter = null;
var roll = null;

// ******* Time Delays :: /////
myTimer = setInterval( function(){ scrollIcons(1);}, 6000 );

//••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
// ******* importing other classes :: ////
import caurina.transitions.Tweener;

//••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
//===================================================================================
// Initialization methods
//-----------------------------------------------------------------------------------

this.init = function():Void {
        // Initializes the movieclip

        // Properties
        this.icons = [this.mk302wx1, this.dytp8640, this.ot3866 ];
        this.iconNames = ["MK LCT302WX1", "DY TP-8640CS", "OT 3866"];

        this.currentIcon = 1;
       
        // Finally, redraws
        this.redraw(true);

        this.stop();
};

//••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
//===================================================================================
// Execution methods
//-----------------------------------------------------------------------------------

this.redraw = function(p_immediate:Boolean) {
        // Redraws every item on their new position
        var i:Number;

        var scaleSmall:Number = 0.3; // Scale when not focused
        var scaleBig:Number = 1; // Scale when focused

        var baseX:Number = 340; // Base column for focused position
        var baseY:Number = 160; // Base row for all icons

        var iconDistance:Number = 130; // Distance between the center axis of each icon
        var iconDistanceFocused:Number = 220; // Distance between the center axis of each icon WHEN FOCUSED

        var animationTime:Number = p_immediate ? 0 : 0.5;
        var animationType:String = "easeoutCirc";

        // Redraw: icons
       
        // Set correct scale
        for (i = 0; i < this.icons.length; i++) {
                var distance:Number = this.currentIcon - i;
                var itemScale:Number = Math.abs(distance) > 1 ? scaleSmall : ((1-Math.abs(distance)) * (scaleBig-scaleSmall)) + scaleSmall;
                var itemX:Number = baseX + (distance * -iconDistance);
                if (distance != 0) {
                        itemX += (iconDistanceFocused - iconDistance) * (distance > 0 ? -1 : +1);
                }

                Tweener.addTween(this.icons[i], {_x:itemX, _xscale:100 * itemScale, _yscale:100 * itemScale, time:animationTime, transition:animationType});

                this.icons[i]._y = baseY;

                if (animationTime > 0) {
                        // Apply a motion blur depending on the ammount of pixels the object has to be moved
                        var ammountToBlur:Number = Math.abs(this.icons[i]._x - itemX) / 12;
                        Tweener.addTween(this.icons[i], {_blur_blurX:ammountToBlur, _blur_quality:2, time:animationTime/2, transition:"easeOutQuint"});
                        Tweener.addTween(this.icons[i], {_blur_blurX:0, time:animationTime/2, delay:animationTime/2, transition:"easeOutQuad"});
                }}
       

//••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
// Redraw: text
        this.caption.text = this.iconNames[this.currentIcon];
};

// ******* control for the scrolling looping back to number one
this.scrollIcons = function(p_offset:Number) {
        if (p_offset == 1) {
                this.icons.push(this.icons.shift());
                this.iconNames.push(this.iconNames.shift());       
        } else {
                this.icons.unshift(this.icons.pop());
                this.iconNames.unshift(this.iconNames.pop());
        }
        this.setIcon(this.currentIcon+p_offset);
        };




//••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
// Finally Setting the Correct Icon (SET ICON FUNCTION)
this.setIcon = function(p_icon:Number) {
        // Set the currently selected icon
        if (p_icon != undefined) {
                if (p_icon < 0) p_icon = 0;
                if (p_icon > this.icons.length - 1) p_icon = this.icons.length - 1;
                if (p_icon != this.currentIcon) {
                        //this.currentIcon = p_icon;
                        this.redraw(false);}}};
       
//===================================================================================
// End
//-----------------------------------------------------------------------------------


this.init();

---

Ok this does almost exactly what I want! Thanks so much for your time!

But one more thing:
Is there any way to have you not see the products moving in the background?
Right now you can see them overlap as the product moves behind.

Code:

---

this.scrollIcons = function(p_offset:Number) {
        if (p_offset == 1) {
                this.icons.push(this.icons.shift());
                this.iconNames.push(this.iconNames.shift());
                this.icons[this.icons.length-1]._x = Stage.width;
        } else {
                this.icons.unshift(this.icons.pop());
                this.iconNames.unshift(this.iconNames.pop());
                this.icons[0]._x = 0-this.icons[0]._width;
        }
        this.setIcon(this.currentIcon+p_offset);
};

---

Wow this works great

Thank you so much, I can't believe that someone actually helped me!

Thank you Thank you!

Your very welcome - sorry it took so long.

You can use the User CP to manage your attachments.
Please use the thread tools and mark the thread resolved.

Dawsonk

I thought I would just ask because you sound like you know how to solve things easier then me:

I use to use the currentIcon variable to delegate each product's rollover to only occur if it is in the front. But since it is now endless I lost that feature.

So none of my rollover work, which I am not too worried about I just was wondering if you knew of an easier fix then my working for days on it?

Again thanks for everything, if you do not repsond I will still mark this as solved!

Thanks!

I figured it out faster then I thought!

Thanks for everything, I'm done for now!

Code:

---

this.init = function():Void  {
        this.icons = [this.mk302wx1, this.dytp8640, this.ot3866, this.ot3866A];
        for (i in this.icons) {
                this.icons[i].onPress = doPress;
        }
        this.iconNames = ["MK LCT302WX1", "DY TP-8640CS", "OT 3866", "OT 3866A"];
        this.currentIcon = 1;
        this.redraw(true);
        this.stop();
};
this.doPress = function() {
        clearInterval(myTimer);
        var num = currentIcon;
        for (i in icons) {
                if (icons[i] == this) {
                        num = i;
                        break;
                }
        }
        var dir = (num<currentIcon) ? -1 : 1;
        while (num != currentIcon) {
                num -= dir;
                scrollIcons(dir);
        }
        myTimer = setInterval(function () {
                scrollIcons(dir);
        }, 6000);
};

---

And what should I do with the doPress funtion?

Should I add it to each product?

Just put all the code in and it works great!

Without any code on the buttons, thanks again so much for everything!

You are a flash master!

I just thought I'd keep going till it's all finished, sorry If I am being rude.

Now that last and final thing to finish this entire player for my job/ company and let me sleep at night and all my headaches will be over.

I need a button to work inside of the movie clip rollover. When I put a button inside the movie clip it dosen't go to a URL no matter if I use _root or _parent or anything.

I just want the final step on this beautiful player to be an order now button inside the movie clip. Right now on toolmarket.com you can see what I tried to do and put a button inside the movieclip, but the entire movie clip takes you to the product.

And people are already complaining that it's confusing, and that you should just be going to order when you click on just the button, WITHOUT rolling out the movieclip in the process.

Im a pest - I know

You are building up such a large amount of Karma!

Sorry, can't view your site from here. Can you update your stripped down file to include the rollover and the order button?

Here it is, the buttons are in the rollover and need to stay up while you hover over them and hopefully with the correct code - link to where they can buy the product

I couldnt get my attachedments to be in the same zip file, so I attached them as two files. But the fla file does need to be in the same folder as the Caurina class folder.

After this I am positive you will not hear from me, at least for a long time

Thanks for any help!

On the last frame of each product clip, where the order button is, make sure the instance name is 'ClicktoOrder_btn' and that it is a movie clip, not a button. Delete the on release code.

On all of the product clips themselves delete the on clip event codes.

On the first frame of each product clip, delete everything except the stop() function.

Update code in first frame...

Code:

---

this.init = function():Void  {
        this.icons = [this.ir1207max, this.apt3018p, this.bsl130];
        for (i in this.icons) {
                this.icons[i].onPress = doPress;
                this.icons[i].onRollOver = doRollOver;
        }
        this.iconNames = ["IR 1207MAX-D3", "APT 3018P", "BSL 130221SE"];
        this.iconOrder = ["product-38-1207max-series-air-ratchet_54306","product-digital-tire-inflator_82203.aspx","Product-Pro-Shot-Injection-System_67875.aspx"]
        this.currentIcon = 1;
        this.redraw(true);
        this.stop();
};

this.doRollOver = function() {
        clearInterval(myTimer);
        if (this == icons[currentIcon]) {
                this.play();
        }
        this.onRollOut = function() {
                clearInterval(myTimer);
                myTimer = setInterval(function () {
                        scrollIcons(1);
                }, 6000);
                this.onEnterFrame = function() {
                        if (this._currentframe == 1) {
                                delete this.onEnterFrame;
                        } else {
                                this.prevFrame();
                        }
                };
        };
};
this.doPress = function() {
        clearInterval(myTimer);
        var num = currentIcon;
        for (i in icons) {
                if (icons[i] == this) {
                        num = i;
                        break;
                }
        }
        var dir = (num<currentIcon) ? -1 : 1;
        if (num == currentIcon) {
                if (this.ClicktoOrder_btn.hitTest(_xmouse, _ymouse, true)) {
                        trace("order");
                        _root.getURL("http://www.toolmarket.com/"+iconOrder[currentIcon],"_self");
                }
        } else {
                while (num != currentIcon) {
                        num -= dir;
                        scrollIcons(dir);
                }
        }
        myTimer = setInterval(function () {
                scrollIcons(dir);
        }, 6000);
};

---

You will also want to move the order so that the user doesn't roll out of the movie clip when trying to get to the order button.

Seemed like it should work but not totally there. The link does work and only when your mouse is over it, but it does not seem to be rotating, and stays the same as the assigned current icon in the beggining.

I will keep trying though and let you know

Don't know if you can open a CS3 file, but I stripped out the actual photos, so the file could be uploaded.

I was able to open the files you gave me. They work as links but still stay on the same link for all three products, the link assinded the currentIcon=1. Does not open any other product link.

Does it change for you?

Sorry. Needs this...

Code:

---

// ******* control for the scrolling looping back to number one
this.scrollIcons = function(p_offset:Number) {
        if (p_offset == 1) {
                this.icons.push(this.icons.shift());
                this.iconNames.push(this.iconNames.shift());
                this.iconOrder.push(this.iconOrder.shift());
                this.icons[this.icons.length-1]._x = 790;
        } else {
                this.icons.unshift(this.icons.pop());
                this.iconNames.unshift(this.iconNames.pop());
                this.iconOrder.unshift(this.iconOrder.pop());
                this.icons[0]._x = 0-this.icons[0]._width;
        }
        this.setIcon(this.currentIcon+currentIcon);
};

---

Ok

All is fixed and works great

Thanks again and again for the help!