Rapid image succession - use javascript or graphics software? - JavaScript and CSS

#1
atblink

Posted 06 May 2011 - 02:01 AM

Newbie

Members
3 posts

Hi,

I want to create an animation using several images, with image 1 appearing for 2 seconds, images 2-8 appearing for 100ms each, and images 9-10 appearing for 2 second each.

(it's a simplified version of the task on this page, with gifs instead of text: Attentional Blink demo)

I found a script that's vaguely similar (attached below) on another forum, but what would be the easiest way to do this? Photoshop, powerpoint, flash, javascript?

Thanks for any advice!

<html>

<head>

<title>Fingerprint analysis</title>

<script type="text/javascript">

var DELAY = 10;

var MAX = 90;

var IMAGE_COUNT = 9;

var imageno = 1;

var changes = 9;

var printimg;

var faceimg;

var interval;


function changeimg() {

   changes++;

   faceimg.src = "face" + imageno + ".gif";

   do {

      // Pick random image between 1 and IMAGE_COUNT:

      var newimageno = Math.floor(Math.random()*IMAGE_COUNT + 1);

   } while (newimageno == imageno); // avoid getting the same image twice in a row.

   imageno = newimageno;

   

   if (changes == MAX) {

      clearInterval(interval);

      var info = document.getElementById("info");

      info.innerHTML = "MATCH FOUND";

   }

}


function analyze() {

   printimg = document.getElementById("printimg");

   faceimg = document.getElementById("faceimg");

   changes = 0;

   interval = setInterval(changeimg,DELAY);

}

</script>

</head>

<body>

   <button id="analyze" onclick="analyze();">Start</button>

   <p><img id="printimg" src="finger1.gif" /><img id="faceimg" src="face1.gif" /></p>

   <h1 id="info"></h1>

</body>

</html>

Edited by dargueta, 07 May 2011 - 09:17 AM.
Please use [code][/code] tags next time.

#2
dargueta

Posted 07 May 2011 - 09:18 AM

Writes binary right handed and hex left handed

Moderators
4,722 posts

Programming Language:C, Java, C++, PHP, Python, Perl, Assembly, Bash, Others
Learning:JavaScript

Where do you want to display this? You can't do PowerPoint on a webpage like that.

sudo rm -rf /

#3
atblink

Posted 07 May 2011 - 04:34 PM

Newbie

Members
3 posts

It's just for a class presentation. I thought I could insert an animation into powerpoint or use javascript and open an html file midway through the presentation.

#4
atblink

Posted 10 May 2011 - 05:21 AM

Newbie

Members
3 posts

Hmm, I tried to reply to this topic but it seems my post wasn't approved (?). The demo is just for a class presentation. I'm basically just creating a gif with about 10 frames appearing successively.

#5
Alexander

Posted 10 May 2011 - 05:43 AM

It's Science!

Moderators
4,118 posts

Location:Vancouver, Eh! Cleverness: 200

Javascript cannot per se craft a gif (just display ten of them one visible at a time). PHP and other scripting languages could through image libraries (i.e. imagemagick.) however.

if your classroom contains an HTML5 capable browser, you could use Javascript and 2D rendering on the <canvas> element to load and perform animations fairly easily over pure Javascript. (» Simple Animation in the HTML5 Canvas Element), or create your own dynamic animation with an array of files, and maybe settimeout() to hide and show the next one if you cannot.

Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#6
bbqroast

Posted 15 May 2011 - 01:49 PM

Codecall Addict

Members
554 posts

Location:/etc/passwd

Load all the images as tiny thumbnails (like 1 pixel) s they are cached...
Then use Javascript to rapidly change the Images by reloading them, this should run fast because they are cached.

Please, write clearly with proper structure. Double spacing makes the text feel un-jointed, Capitalizing Every Word Means People Stop Before Every Word Sub-Consciously Which Is A Pain In The Backside, and use code tags! (The right most styling box).