Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

Infinite draggable

$
0
0

Hello,

 

I have an animation that shows a briefcase with a combination lock as shown. I created a vertical png graphic of the numbers 0 thru 9. I then attached two more copies of the graphic end to end to each other to make one long strip of repeating numbers 0 thru 9. I then grouped the graphic as a single object and named it NumFirst and positioned it for the first tumbler of the lock. I did this two more times (NumSecond, NumThird) for the other two tumblers. I then created a graphic mask and positioned it so only three of the numbers are visible (as shown) giving the illusion of the tumblers. Using jquery draggable and restricting the drag along the y-axis, I can drag the individual tumblers up and down as though I was setting the combination. I did this in Edge Animate and the interactive animation looks great! However, I'm limited to how far I can drag the graphic because eventually I reach the end of it. My coding skills with jquery and javascript are growing, but I have hit a snag. How can I get the number graphic to repeat itself (either up or down) after it is dragged for a certain length, giving the illusion that the tumbler is going around and around. Here is my code so far which is in the creationComplete of my edge file:

 

yepnope({nope:['js/jquery-ui.min.js','js/jquery.ui.touch-punch.min.js' ], complete: init});

 

function init(){

    sym.$('NumFirst').draggable({ axis: "y" });

    sym.$('NumSecond').draggable({ axis: "y" });

    sym.$('NumThird').draggable({ axis: "y" });

}

 

Hasp.png


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>