jQuery Flip Book Video


Loading ....
 

Loops don’t always do it when you’re looking to display a stream of images on a page, spaced by time.  So if you want to make a flipbook video you’re going to have to be constructive with how you get the images onto the page, one after the other, and in the right order.

Y’see, a loop runs – full stop.  You can’t affect the speed at which a for-loop, $.each loop or any other kind of loop runs.  It just runs.

So if you have a list of 20 images in an array and you simply loop through that array the effect will happen so fast you’re likely only to register the fact that the last image has loaded.

What you ACTUALLY want to do is to:

  1.  Create a variable containing a starting-number (0 or 1)
  2. Show the 1st image based on that number
  3. Add 1 to the variable
  4. Show the 2nd image …
  5. So on and so forth.

This is fairly easy to achieve – copy the code below, change the images location to match where you’ve stored your images, and voila, away you go!

<html>
<body>
<h2>Flip Book Video Player</center></h2>
<br>
  <div id="container" class="jumbotron">
    <center><img id="picFrame" src=""></center>
  </div>

  <button id="start">Go</button>

</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

// SET UP AN ARRAY CONTAINING MY IMAGE NAMES
imageArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];

// PICK UP THE CLICK ON THE 'GO' BUTTON AND RUN THE FUNCTION TO START THE 'LOOP'
$('#start').on('click', function() {
  myLoop(); 
}) ;	
var i = 1 ; 

// ... AND HERE'S THE FUNCTION.  SHOW A PICTURE, ADD 1 TO THE VARIABLE, SHOW THE NEXT PICTURE.
// WHEN YOU'VE COMPLETED THE LIST, RESET THE VARIABLE TO 1 AND RUN THE FUNCTION AGAIN.
// WRAP ALL OF THIS UP IN A 'setTimeout()' AND ADJUST THE DELAY TIME TO WHATEVER SUITS YOUR ANIMATION.
function myLoop() { 
  setTimeout(function() { 
     $('#picFrame').attr('src' , "IMAGES/" + i + ".jpg") ;
     i++;  
     if (i < imageArray.length) {    
       myLoop();   
     } else {
       i = 1 ;
       myLoop() ;
     }    
  }, 225);	
} ;
</script>

To help you along with that, here’s a zip file with the images I used.  Of course you can always make your own – why, you could even animate an entire feature-length cartoon using this method!

Stickman Flipbook Images

Share and enjoy, that’s what I always say!

 


RELATED PRODUCTS
  • Push A Button And Out PopsYour Own Viral Video Clip.
  • We help you teach yourself guitar, learn fast, and play your favorite songs.
  • A Course That Will Take A Beginner Guitarist From Ground Zero To A Fully Capable Guitarist
  • Course is been developed to accelerate learning by teaching to different learning styles.
  • The New Video Guides Show's How To Build A 3d Solar Panel.
  • VIP Video Converter is a reliable, user friendly and affordable video converting software.
  • This is a video series teaching you how to fill out your provisional patent application.
  • The Complete FroKnowsPhoto 6-HourGuide to DSLR Video.
  • Make Fantasies Come True. Lucid Dreaming Techniques Work.
  • Clickbank Ads
     
    Share

    You may also like...

    Leave a Reply

    Your email address will not be published. Required fields are marked *