// ******* 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.
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!
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.
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
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 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.
// ******* 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);
};
Reply With Quote
