dinardo01
07-20-2005, 09:06 PM
I'm excited - I have been working on this for a while and it is starting to behave as I intended. AND since you all have been so helpful by posting and commenting on this website, I would like to share this with all of you! What do you think? Please post comments (good and bad). See attached file.
Features
This is a sliding thumbnail viewer that is supposed to mimic the cool transition effects found on websites.
Two 'throttling' areas at either end (sizes changable)
Mouse controlled speed - as the mouse reaches the ends of 'throttle' areas, the thumbs will speed up to a percentage of the MAX_SPEED (defined as TARGET_SPEED)
Thumbnails will accelerate upon entering viewer
Thumbnails will decelerate upon exiting viewer
Wish list. I wish..
..thumbnails would automatically detect when they are reaching the boundaries of the mask and decelerate to their "exact" respective left and right boundary.
..the thumbnails would 'snap' decelerate so that the thumbnails are never cut off.
Please feel free to post code that will help with the wish list !
Concerns
I think this code is not a clean as it can be. Does anyone agree? I guess the best thing to do is to make this a class file, but I am not very confident in doing that.
The code is not using Penner easing or any other easing, I just winged it. Should I use Penner easing? If so, how do I implement?
The code
/*
this mc reads the mouse location and accelerates the thumbnail movie called
(ThumbMaker_mc) movie left or right depending on the mouse location on the mask
Rob DiNardo - http://www.robdinardo.com
*/
//make some thumbnails
for(i=0;i<30;i++){
ThumbMaker_mc.attachMovie("ThumbImg_mc",["ThumbImg_mc"+i],i);
ThumbMaker_mc["ThumbImg_mc"+i]._x = i * 135;
ThumbMaker_mc["ThumbImg_mc"+i].count_txt.text = i; //not working ????
}
var boundL:Number = 300; //left bounding area: 0 to boundL
var boundR:Number = 360; //right bounding area: boundR to 660
var CURRENT_SPEED:Number = 0; //variable for current speed
var TARGET_SPEED:Number; //variable for desired speed
var MAX_SPEED:Number = 15; //maximum possible speed
var ACCELERATION:Number = 0.25; //ratio of acceleration (also used to declerate)
var DIRECTION:String = "L"; //variable for the direction of the motion
var THUMB_WIDTH:Number = ThumbMaker_mc._width; //width of all thumbnails
var MASK_WIDTH:Number = mask_mc._width; //width of mask
var SCROLL_WIDTH:Number = MASK_WIDTH-THUMB_WIDTH; //
this.onEnterFrame = function(){
// if the mouse pointer enters thumb viewer
if(mask_mc.hitTest(_root._xmouse, _root._ymouse, false)){
MOUSE_LOC = Math.round(this._xmouse); //mouse location
//if the mouse is in the left part of the navigation
if(MOUSE_LOC < boundL){
if(ThumbMaker_mc._x > -50) {
DecelerateThumbs()
} else {
THROTTLE = (boundL-MOUSE_LOC)/(boundL-0); //percent
TARGET_SPEED = Math.round(THROTTLE * MAX_SPEED,2); //desired speed
DIRECTION = "R"; //direction to move thumbs
AccelerateThumbs(TARGET_SPEED); //move thumbs right
}
}
//if the mouse is in the right part of the navigation
if (MOUSE_LOC > boundR) {
if(ThumbMaker_mc._x < SCROLL_WIDTH + 50) {
DecelerateThumbs()
} else {
THROTTLE =(MOUSE_LOC-boundR)/(MASK_WIDTH-boundR); //percent of speed
TARGET_SPEED = Math.round(THROTTLE * MAX_SPEED,2); //desired speed
DIRECTION = "L"; //direction to move thumbs
AccelerateThumbs(TARGET_SPEED); //move thumbs left
}
}
} else {
DecelerateThumbs();
}
};
function AccelerateThumbs(ts:Number){
if (DIRECTION == "L"){ j = -1; } else { j = 1; } //set direction
if(CURRENT_SPEED <= ts){ //check current speed
ThumbMaker_mc._x += j*CURRENT_SPEED; //move the thumbnails to the left
CURRENT_SPEED += ACCELERATION; //increment current speed
} else { //if target speed reached
ThumbMaker_mc._x += j*ts; //contiue moving at target speed
CURRENT_SPEED = ts;
}
}
function DecelerateThumbs(){
if (DIRECTION == "L"){ j = -1; } else { j = 1; } //set direction
if(CURRENT_SPEED > 0){ //if in motion
ThumbMaker_mc._x += j*CURRENT_SPEED; // move the thumbnails to the left
CURRENT_SPEED -= ACCELERATION*3; //decrease speed
}
}
Features
This is a sliding thumbnail viewer that is supposed to mimic the cool transition effects found on websites.
Two 'throttling' areas at either end (sizes changable)
Mouse controlled speed - as the mouse reaches the ends of 'throttle' areas, the thumbs will speed up to a percentage of the MAX_SPEED (defined as TARGET_SPEED)
Thumbnails will accelerate upon entering viewer
Thumbnails will decelerate upon exiting viewer
Wish list. I wish..
..thumbnails would automatically detect when they are reaching the boundaries of the mask and decelerate to their "exact" respective left and right boundary.
..the thumbnails would 'snap' decelerate so that the thumbnails are never cut off.
Please feel free to post code that will help with the wish list !
Concerns
I think this code is not a clean as it can be. Does anyone agree? I guess the best thing to do is to make this a class file, but I am not very confident in doing that.
The code is not using Penner easing or any other easing, I just winged it. Should I use Penner easing? If so, how do I implement?
The code
/*
this mc reads the mouse location and accelerates the thumbnail movie called
(ThumbMaker_mc) movie left or right depending on the mouse location on the mask
Rob DiNardo - http://www.robdinardo.com
*/
//make some thumbnails
for(i=0;i<30;i++){
ThumbMaker_mc.attachMovie("ThumbImg_mc",["ThumbImg_mc"+i],i);
ThumbMaker_mc["ThumbImg_mc"+i]._x = i * 135;
ThumbMaker_mc["ThumbImg_mc"+i].count_txt.text = i; //not working ????
}
var boundL:Number = 300; //left bounding area: 0 to boundL
var boundR:Number = 360; //right bounding area: boundR to 660
var CURRENT_SPEED:Number = 0; //variable for current speed
var TARGET_SPEED:Number; //variable for desired speed
var MAX_SPEED:Number = 15; //maximum possible speed
var ACCELERATION:Number = 0.25; //ratio of acceleration (also used to declerate)
var DIRECTION:String = "L"; //variable for the direction of the motion
var THUMB_WIDTH:Number = ThumbMaker_mc._width; //width of all thumbnails
var MASK_WIDTH:Number = mask_mc._width; //width of mask
var SCROLL_WIDTH:Number = MASK_WIDTH-THUMB_WIDTH; //
this.onEnterFrame = function(){
// if the mouse pointer enters thumb viewer
if(mask_mc.hitTest(_root._xmouse, _root._ymouse, false)){
MOUSE_LOC = Math.round(this._xmouse); //mouse location
//if the mouse is in the left part of the navigation
if(MOUSE_LOC < boundL){
if(ThumbMaker_mc._x > -50) {
DecelerateThumbs()
} else {
THROTTLE = (boundL-MOUSE_LOC)/(boundL-0); //percent
TARGET_SPEED = Math.round(THROTTLE * MAX_SPEED,2); //desired speed
DIRECTION = "R"; //direction to move thumbs
AccelerateThumbs(TARGET_SPEED); //move thumbs right
}
}
//if the mouse is in the right part of the navigation
if (MOUSE_LOC > boundR) {
if(ThumbMaker_mc._x < SCROLL_WIDTH + 50) {
DecelerateThumbs()
} else {
THROTTLE =(MOUSE_LOC-boundR)/(MASK_WIDTH-boundR); //percent of speed
TARGET_SPEED = Math.round(THROTTLE * MAX_SPEED,2); //desired speed
DIRECTION = "L"; //direction to move thumbs
AccelerateThumbs(TARGET_SPEED); //move thumbs left
}
}
} else {
DecelerateThumbs();
}
};
function AccelerateThumbs(ts:Number){
if (DIRECTION == "L"){ j = -1; } else { j = 1; } //set direction
if(CURRENT_SPEED <= ts){ //check current speed
ThumbMaker_mc._x += j*CURRENT_SPEED; //move the thumbnails to the left
CURRENT_SPEED += ACCELERATION; //increment current speed
} else { //if target speed reached
ThumbMaker_mc._x += j*ts; //contiue moving at target speed
CURRENT_SPEED = ts;
}
}
function DecelerateThumbs(){
if (DIRECTION == "L"){ j = -1; } else { j = 1; } //set direction
if(CURRENT_SPEED > 0){ //if in motion
ThumbMaker_mc._x += j*CURRENT_SPEED; // move the thumbnails to the left
CURRENT_SPEED -= ACCELERATION*3; //decrease speed
}
}