I'm stuck on making swipe work -
I've made a simple timeline with three pages - and simple back/next buttons for the logic -
// back button
this.backButton.addEventListener("click", playbackButton.bind(this));
function playbackButton()
{
if (currentSlide == "page3") {this.gotoAndPlay("page2");}
else if (currentSlide == "page2") {this.gotoAndPlay("page1");}
else if (currentSlide == "page1") {this.gotoAndPlay("page3");}
}
this.nextButton.addEventListener("click", playnextButton.bind(this));
function playnextButton()
{
if (currentSlide == "page1") {this.gotoAndPlay("page2");}
else if (currentSlide == "page2") {this.gotoAndPlay("page3");}
else if (currentSlide == "page3") {this.gotoAndPlay("page1");}
}
All working fine -
I put the hammer function in the index.html after the </body> tag
<script>
var jk = document.getElementById('canvas');
var ht = new Hammer(jk);
//Swipe Left
ht.on('swipeleft', function(){
swipeLeft();
});
//Swipe Right
ht.on('swiperight', function(){
swipeRight();
});
</script>
back in animate I have the following logic
this.swipeLeft=function (){
console.log("Swiping Left!");
}
swipeLeft = this.swipeLeft;
this.swipeRight=function(){
console.log(Swiping Right!");
}
swipeRight = this.swipeRight;
Works great! - I swipe and get the correct responses from the console - (so from the index.html the 'swipeleft' function is running the global function from inside animate.
Now the problem happens when I try and include my simple button logic inside the swipeLeft() function -
this.swipeLeft=function (){
if (currentSlide == "page1") {this.gotoAndPlay("page2");}
else if (currentSlide == "page2") {this.gotoAndPlay("page3");}
else if (currentSlide == "page3") {this.gotoAndPlay("page1");}
console.log("Swiping Left!");
}
swipeLeft = this.swipeLeft;
I get the error "this.gotoAndPlay" in not a function -
Am I missing the proper syntax? I assume its running the commands of the function from the index.html? Can I somehow make the function in index.html trigger the button I already have?
Thanks,
sam
1
Reply
AdChoices