2D Carrossel, can't get it right

  • arakno
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: Lisboa

Post 3+ Months Ago

AS2
Flash CS3
Player 8

I was about to conclude a freelance work for a client but I got stucked at the end of it.
Now I'm out of ideas, i've tried nearly anything I can think of with no luck.
I need some general guidance or some fresh thoughts on it, so please have a look.

This carrossel is supposed to display the images from this XML :

Code: [ Select ]
<?xml version="1.0" encoding="utf-8"?>
<phones>
<phone>
    <brand>Nokia</brand>
    <model>1680</model>
    <weight>12g</weight>
    <price>12.4</price>
    <image>images/2680_1.png</image>
    <link>link1.htm</link>
    <info item="" item2="" item3="" />
</phone>...
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <phones>
  3. <phone>
  4.     <brand>Nokia</brand>
  5.     <model>1680</model>
  6.     <weight>12g</weight>
  7.     <price>12.4</price>
  8.     <image>images/2680_1.png</image>
  9.     <link>link1.htm</link>
  10.     <info item="" item2="" item3="" />
  11. </phone>...


put them into mc's and repeat them endlessly as long as you push the button. When an mc reaches any of the extremeties it will take the last element and supposedly put it at the other end (sometimes it will not work as expected), that's how I achieved the endless loop.

It will have to be able to center the item you press it as well. That means that it will have to jump through several items which is a routine I was not able to figure out yet.

It's a big file so i'm just going to explain the essential and if you think you can help please ask for more...

THE SOURCE:
//after some variables initialization I start to dynamically spawn the mc's from the XML struture

Code: [ Select ]
//...
 
for (var i=0; i<numdeItems; i++){
        var t:MovieClip = home.attachMovie("item","item"+i, home.getNextHighestDepth(),{_x:i*intervalo, _xscale:80, _yscale:80});
this.getNextHighestDepth());
        var tw = t._width;
        var tpos = t._x ;
        var tame = t._name;
objData["item"+i] = tpos;
        objPos[i]=tpos;
        objName[i]=tame;
//...
  1. //...
  2.  
  3. for (var i=0; i<numdeItems; i++){
  4.         var t:MovieClip = home.attachMovie("item","item"+i, home.getNextHighestDepth(),{_x:i*intervalo, _xscale:80, _yscale:80});
  5. this.getNextHighestDepth());
  6.         var tw = t._width;
  7.         var tpos = t._x ;
  8.         var tame = t._name;
  9. objData["item"+i] = tpos;
  10.         objPos[i]=tpos;
  11.         objName[i]=tame;
  12. //...


//Then the events for each of them

Code: [ Select ]
t.onEnterFrame = function(){
            var points:Object = {x:this._parent._x, y:this._parent._y};
            this.localToGlobal(points);
                           
            objPos[i]=points.x;
           
    if(this._x > objData["item"+(numdeItems-1)]){
                    tmppos = objData["item"+1]-intervalo;
                    this._x = tmppos;
                   
                }else if(this._x < -100){
                    tmppos = objData["item"+(numdeItems-1)]+intervalo;
                    this._x = objData["item"+(numdeItems-1)];
                    }
}
t.icon.onRollOver = over;
        t.icon.onRollOut = out;
        t.icon.onPress = press;
        t.icon.onRelease = released;
        t.id= i;
        }
  1. t.onEnterFrame = function(){
  2.             var points:Object = {x:this._parent._x, y:this._parent._y};
  3.             this.localToGlobal(points);
  4.                            
  5.             objPos[i]=points.x;
  6.            
  7.     if(this._x > objData["item"+(numdeItems-1)]){
  8.                     tmppos = objData["item"+1]-intervalo;
  9.                     this._x = tmppos;
  10.                    
  11.                 }else if(this._x < -100){
  12.                     tmppos = objData["item"+(numdeItems-1)]+intervalo;
  13.                     this._x = objData["item"+(numdeItems-1)];
  14.                     }
  15. }
  16. t.icon.onRollOver = over;
  17.         t.icon.onRollOut = out;
  18.         t.icon.onPress = press;
  19.         t.icon.onRelease = released;
  20.         t.id= i;
  21.         }


//Then this function gets called from the left or right buttons used to move the carrossel whenever the animation finishes.

Code: [ Select ]
t.updtpos = function (){
            for(a in objPos){
                        var unscaleme:MovieClip = home[objName[a]];
                        TweenLite.to(unscaleme, 0.2, {_xscale:80, _yscale:80, ease:easeOut});
                    }
                    for(a in objName){
                        var unscaleme:MovieClip = home[objName[a]];
                        TweenLite.to(unscaleme, 0.2, {_xscale:80, _yscale:80, ease:easeOut});
                    }
 
  1. t.updtpos = function (){
  2.             for(a in objPos){
  3.                         var unscaleme:MovieClip = home[objName[a]];
  4.                         TweenLite.to(unscaleme, 0.2, {_xscale:80, _yscale:80, ease:easeOut});
  5.                     }
  6.                     for(a in objName){
  7.                         var unscaleme:MovieClip = home[objName[a]];
  8.                         TweenLite.to(unscaleme, 0.2, {_xscale:80, _yscale:80, ease:easeOut});
  9.                     }
  10.  

// THE onPRESS FUNCTION:
Code: [ Select ]
function press(){
               
                for( mc in objData){
                    //TweenLite.to(this, 0.3, {_x:0, ease:easeOut});
                    var tmpx:Number = objData[mc] - this._x;  
                    var tmpmc:MovieClip = home[mc];
                    trace("PRESS :" + objData[mc] );
                    TweenLite.to(tmpmc, 0.8, {_x:tmpx, ease:easeIn});
                }
               
                }
  1. function press(){
  2.                
  3.                 for( mc in objData){
  4.                     //TweenLite.to(this, 0.3, {_x:0, ease:easeOut});
  5.                     var tmpx:Number = objData[mc] - this._x;  
  6.                     var tmpmc:MovieClip = home[mc];
  7.                     trace("PRESS :" + objData[mc] );
  8.                     TweenLite.to(tmpmc, 0.8, {_x:tmpx, ease:easeIn});
  9.                 }
  10.                
  11.                 }


// AND FINALLY the script for the left button ( right button is similar with negative values)

Code: [ Select ]
left.onPress = function():Void {
        if(!isTweening){
            TweenLite.to(price, 0.4, {_xscale:0, _yscale:0, _alpha:0, ease:easeOut, onComplete:ballonInfo});
           
            for(mc in objData){
            var tmpx:Number = objData[mc] + intervalo;  
            var tmpmc:MovieClip = home[mc];
            TweenLite.to(tmpmc, 0.3, {_x:String(intervalo), ease:easeOut, onStart:isTweening=true, onComplete:tmpmc.updtpos});
        }
        (objindex > 0)? objindex-- : objindex = (numdeItems-1) ;
       
            }
    }
  1. left.onPress = function():Void {
  2.         if(!isTweening){
  3.             TweenLite.to(price, 0.4, {_xscale:0, _yscale:0, _alpha:0, ease:easeOut, onComplete:ballonInfo});
  4.            
  5.             for(mc in objData){
  6.             var tmpx:Number = objData[mc] + intervalo;  
  7.             var tmpmc:MovieClip = home[mc];
  8.             TweenLite.to(tmpmc, 0.3, {_x:String(intervalo), ease:easeOut, onStart:isTweening=true, onComplete:tmpmc.updtpos});
  9.         }
  10.         (objindex > 0)? objindex-- : objindex = (numdeItems-1) ;
  11.        
  12.             }
  13.     }


Bear in mind this is a slimmed version of what I have! Im really short on time for a change...

Thanks

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.