The purpose of the script and its code
|
|
with a note on flash plug ins
|
|
|
We build a template and then we initialize as many animation objects as we want: everyone of them will get its mould casting it upon the template and every instance would not interfere with the other.
Normally when building animations you have to resort to as many different subroutines (different in names although pretty identical in tasks) since once a subroutine is engaged with an object, it cannot be invoked to perform the same task on another object without causing an interference, sort of an overflow on the subroutine allocated target, so to call it.
Of course if you only need one animation in your page you may not want this script, but if you need more than one, you could load it in some external javaScript file so to have it always at disposal, in case your site is flashy or can get avail of animations for its purposes.
Let me add one word on flash plug ins: I've a bias against them. Many think they are cool simply because can load faster animations, but this completely miss the point: the internet cannot replace the television, and pointless entertainment cannot be the unique purpose of a page, for that would not be entertainment but boredom. Moreover flash is far from being a standard (although many declare so: they get the plug in in bundle with their internet provider CD-ROM installer kit, so they argue flash is a standard...)
|
But I've got enough of these skip intro links at bottom of every flash animation (a sure symptom of an afterthought, of a dim awareness the whole intro could be recycled without remorse, since it is functional only to itself) as well as of those web sites entirely shaped upon flash so that if I do not have the plug in I have no way out. And guess what, even affirmed enterprises at times manage websites entirely based upon flash: some fashion sites do. I've never been able to view one page of theirs. I mean: feel free to use flash, but please do not believe the world revolves around it simply because that's the only stuff you can use: give us -and yourself- alternatives!
Ok, now your script:
How the script works and gets invoked
|
|
a few details
|
As you can see it is but a few lines. The imageAnimation function is the one which builds the template. It gets a list of arguments also if apparently only one is inserted, imageName. The script works as follows:
- You first need to , stuff like:
<img src="myCoolImage.jpg" name="aNameHere">
This name must be unique for each image that undergoes an animation, since is the pointer which identifies it as the script's target.
- Then for each animation you have to put (do not do it before, since what we're about to do is to invoke the image itself and you cannot invoke by a script an object which has not been loaded yet in the browser: you can make a reference to point C only once you're a point D, so to say...) a <script> ... </script> tag set.
In between these tags you will insert a variable whose name can be whatever you do prefer, such as:
<script>
FIRSTImage
</script>
- At this stage, you assign to this variable name a new instance of the imageAnimation function, which can be done this way:
<script>
FIRSTImage=new imageAnimation()
</script>
The keyword new (lowercase, please!) will initialize a new... animation. You now have to pass to the new animations the parameters: what image slot must be targeted, and what are the images that have to swap.
|
|
You proceed as follows:
- You pass as the first parameter the name of the image, in between quotes.
- you add in between quotes, as subsequent parameters, all the names of the images you mean to be swapping, in between quotes and separated by a comma, in the order you want them to be swapping.
Therefore an almost complete possible instance would be:
|
<img src="cool1.jpg" name="image1">
<script>
FIRSTImage=new imageAnimation()
</script>
- The script will build an object which will store all the references necessary to start this animation. Now what we have to do, once built the object and assigned it to a variable name (in our example, FIRSTIMage), is to activate it.
To do this we have provided every imageAnimation object of a reference to a function which gives a direction to the animation: the activation subroutine, which is built in within the main subroutine as one of its dependancies.
- This latest subroutine will update the image index.
- These latest instructions are carried out when the active() method that every new imageAnimation object has, is invoked: a statement like: this.active=function etc... means that every imageAnimation object will have a method called active and which points to the built in function.
-
So we just have, as a last move, to call this method: since we want an animation, we have to do it from within a built in method which is setInterval(), a method which instructs what is passed to it as its parameter to be repeated each milliseconds as many as it is specified as its parameter. Only technicality to remember: the parameter : so your full invocation now will appear:
<img src="cool1.jpg" name="image1">
<script>
FIRSTImage=new imageAnimation()
setInterval(, 1000)
</script>
You can change 1000, which means one second to higher numbers (slower, such as 5000=5 seconds) or lower (faster). To avoid Netscape 6 crashes do not set lower than 250 (hint from a somewhat experienced scripter!).
- You're done. You can add as many similar statements as you prefer (as many animations you want), provided you:
- give different unique names to the IMG tags involved
- Take care to pass as parameters the right names (if you do copy and paste odds are you'd report twice the same name...)
- You give different names to each process, such as
- FIRSTImage ... setInterval("FIRSTImage.active()"...
- SECONDImage ... setInterval("SECONDImage.active()"...
- THIRDImage ... setInterval("THIRDImage.active()"...
|