PDA

View Full Version : Please help me converting into variable names, or help me out any way you can...



Put
Nov 24th, 2005, 10:00 AM
Since I'm very new to JavaScript, I don't even know if this is possible, but I'll state my problem...

I am to create an animated piece of lego without using an animated gif. Well, it's not really animated, but I want to loop through a number of pictures quickly to make it look like the piece of lego rotates.

I got it working, kind of, but the solution is far from acceptable.

I want the script to look simple, something like...



<script type="text/javascript">

for(i=0; i <= 11; i++)
{
// (bl+i) does of course not work. I mean that if i is 0, (bl+i) should be bl0.
(bl+i) = new Image();

if(i<10)
(bl+i).src = ("Bilder/Legobit"+"000"+i+"."+"bmp");
else
(bl+i).src = ("Bilder/Legobit"+"00"+i+"."+"bmp");
}

function snurra(image, color, count) {

image.src=(color+count).src;
count=count+1;

if(count==12)
{
// Stop.
image.src=(color+0).src;
}
else
setTimeout('snurra(image, color, count)',20);
}

}

</script>

...

<img src="Bilder/Legobit0000.bmp" id="blabit" alt="Legobit" onmouseover="snurra(blabit, bl, 0)" />

...

(I hope it's comprehensible. I will use png instead of bmp when it's finished.)



... but since I'm not good at JavaScript I had to script it really clumsy, which can be seen here:

http://www.student.itn.liu.se/~chral647/Lego.html [the test site]

http://www.student.itn.liu.se/~chral647/Lego.txt [the code]

http://www.student.itn.liu.se/~chral647/Lego.zip [the html with images]



If the links don't work, try downloading from...

http://www.student.itn.liu.se/~chral647/



Please, help me. I greatly appreciate any help.




// Put

Kor
Nov 24th, 2005, 11:20 AM
You need the basics of javascript to code correctely.

1. all the page's elements are appended to the document, so that they are to be refered as

document.myobject

1a. In your particular case, when the event is trigered from the same element which must be manipulate, you may use the self reference this

2. There are a couple of different methods to refere an elements, upon name, id, tagName or index in a collection. There are 2 different way of coding, both accepted by the modern browsers, the classical javascript 1.0 and the DOM. If you tried to code in classical way, let's see: Pictures are to be found as

document.images[name_or_index]

That means you may manipulate objects in a single reference using square brackets notation.

3. setTimeout() and setInterval() have as first argument a string. That means you have to use concatenation when you need to pass some parameters. It is important what kind of parameter you send.

setTimeout('myfunction('+mynumber+')',delay)
setTimeout('myfunction("'+mystring+'")',delay)

4. If your elements have their identification marks (name, ids...) build in a indexed way, there is no need to pre-build an array.

5 To simplify coding you may use ternary conditioner
var myvariabe=(condition)?value1:value2;
is equivalet of
if(condition){var myvariable=value1}
else{var myvariable=value2}

6. There is no use to set the delay time as 10 miliseconds. Anyway the respond time of an average CPU is no lower than 70-80 miliseconds

7. Use clearTimeout() to stop a setTimeout()

Let's see what we have got till now


<script type="text/javascript">
var i=0;
function snurra(n) {
if(i<12){
var q=(i<10)?'0'+i:i;
document.images[n].src='Bilder/Legobit000'+q+'.bmp';
i++;
var set = setTimeout('snurra("'+n+'")',80);
}
else{
i=0;
document.images[n].src='Bilder/Legobit0000'+i+'.bmp';
clearTimeout(set)
}
}
</script>
...
<img src="Bilder/Legobit0000.bmp" id="blabit" alt="Legobit" onmouseover="snurra(this.name)" />
...

Put
Nov 24th, 2005, 06:20 PM
Thanks for your effort.

I want to point out that the purpose of the first part is to load all images before they're actually used, not after the animation has started.

Anyway, I'm delighted to see a reply, but where do I go from now? How can the script be completed?

I think this could be useful for others as well.

Kor
Nov 25th, 2005, 10:16 AM
I want to point out that the purpose of the first part is to load all images before they're actually used

the code just try to do that, but there is no guarantee for such a preloader, as javascript can not actually check whether an image was really loaded in cache or not. And some pictures might be interlaced, so that the loading process is a continous one...

I take those preloader codes ussles, so that I never use them.

Speaking about pictures... I advice you not to use bitmap (bmp) files, as they are not optimized, so that they are "heavy". Normally, on web pages are to be used optimized pictures in format GIF, JPG (JPEG) and PNG.