Objektet Image() – animera själv

Välj fart
1/100 sekund
1/10 sekund
1/4 sekund
1/2 sekund
1 sekund

Säkert har du någon gång lagt in en animering på din hemsida – en bild som du har gjort själv i något av de många animeringsprogrammen, eller en animerad bild som du har hittat på Internet.

Men nu skall vi använda objektet Image() för att tillverka animeringen själva och dessutom göra det möjligt att ändra hastigheten på bildväxlingen.

Bilderna

Till den flygande fågeln ovan har jag använt tre bilder. Du kan hämta dem här om du vill utnyttja dem för att testa skriptet. Bilderna är transparenta och heter pippim.gif (mittläget), pippiu.gif (vingarna uppåt) och pippin.gif (vingarna nedåt).

Längst ned hittar du en kortfattad beskrivning av hur du kan skapa bilderna i PaintShop Pro.

Skriptet

Skriptet som får fågeln att flyga ser ut så här:

I HEAD-elementet:

<SCRIPT language="javascript">
<!-- Göm
pippiImg = new Array(4)
pippiImg[1] = new Image();
pippiImg[1].src="pippiu.gif";
pippiImg[2] = new Image();
pippiImg[2].src="pippim.gif";
pippiImg[3] = new Image();
pippiImg[3].src="pippin.gif";
pippiImg[4] = new Image();
pippiImg[4].src="pippim.gif";
var ii=1; 
var nuTid=null;
var timerID=null;
function vingSlag(nySlag)
{
clearTimeout(timerID); 
nuTid=nySlag;
uppDatera(nuTid);
}
function uppDatera()
{
if (ii<4)
ii++;
else
ii=1;
document.startpippi.src=pippiImg[ii].src;
timerID=setTimeout("uppDatera()", nuTid);
}
// Sluta gömma -->
</SCRIPT> 

I den inledande BODY-taggen:

<BODY onLoad="vingSlag(250)"> 

I BODY:

<TABLE>
<TR><TD align="center">
<IMG name="startpippi" src="pippim.gif" border="0" width="176" height="100">
</TD>
<TD>
<FORM name="flyga">
<P>Välj fart<BR>
<INPUT type="radio" name="flax" onClick="vingSlag(10)">1/100 sekund<BR> 
<INPUT type="radio" name="flax" onClick="vingSlag(100)">1/10 sekund<BR>
<INPUT type="radio" name="flax" onClick="vingSlag(250)" checked>1/4 sekund<BR>
<INPUT type="radio" name="flax" onClick="vingSlag(500)">1/2 sekund<BR>
<INPUT type="radio" name="flax" onClick="vingSlag(1000)">1 sekund</P>
</FORM>
</TD>
</TR>
</TABLE> 

Vi tittar på tabellen i BODY först. Själva tabellen kan du naturligtvis ändra som du vill – jag har gjort den så här för att fågeln skall hamna till vänster och listan med fartkontroller till höger.

<IMG name="startpippi" src="pippim.gif" border="0" width="176" height="100">
Först placerar vi bilden av fågeln i "startposition" – här med vingarna i mittläget. Vi ger den här bilden ett namn (startpippi), eftersom detta namn används i skriptet. Vi anger dessutom bredd och höjd för bilden.

<INPUT type="radio" name="flax" onClick="vingSlag(10)">1/100 sekund<BR>
Formuläret har fått ett namn, men detta kommer inte att användas i skriptet. I INPUT-taggarna anger vi type="radio" och ger alla radioknapparna (kryssrutorna) samma namn. Det gör att man bara kan markera en av hastigheterna.

Skriptet skulle fungera även om radioknapparna fick olika namn, men det skulle bli fult eftersom markering av en knapp inte skulle rensa bort den föregående markeringen. Pröva detta genom att döpa om två av knapparna till "flaxa". Då uppstår i stället två knappgrupper som inte påverkar varandra.

I en av INPUT-taggarna har vi lagt till "checked", vilket gör att den knappen kommer att vara markerad när sidan laddas.

I händelsehanteraren onClick anger vi vad som skall hända när knappen markeras. Här anropas funktionen vingSlag() och funktionen får det värde som står i parentesen. Detta värde anges i millisekunder.

<BODY onLoad="vingSlag(250)">
I den inledande BODY-taggen placerar vi en händelsehanterare som – när sidan för övrigt är laddad – anropar funktionen vingSlag och ger den värdet 250 millisekunder. Här har jag satt samma värde i onLoad som i den markerade radioknappan, men detta är inte nödvändigt. Det gör dock att fågeln från början kommer att flyga i den hastighet som visas av den markerade radioknappen.

Vi kan utesluta den här händelsehanteraren helt. Då står fågeln stilla i luften tills någon av radioknapparna markeras – bilden från IMG-taggen visas, men den rör sig inte.

Sedan till skriptet, som kan behöva några förklaringar.

pippiImg = new Array(4)
Vi börjar med att skapa en ny vektor (pippiImg) som kommer att innehålla 4 värden.

pippiImg[1] = new Image(); och pippiImg[1].src="pippiu.gif"; och så vidare
Det första av dessa ([1]) skall visa bilden "pippiu.gif", det andra ([2]) skall visa bilden "pippim.gif" och så vidare. Eftersom rörelsen skall "pendla" använder vi pippim.gif två gånger. I en cirkelrörelse skulle vi i stället ha gått direkt från tredje bilden tillbaka till den första.

var ii=1;
Här deklarerar vi en variabel, vars värde vi sätter till 1. Denna variabel skall vi sedan använda i bildväxlingen.

var nuTid=null;
Variabeln nuTid är till att börja med tom. Senare får den sitt värde från funktionen vingSlag() och den kommer då att bestämma hastigheten på rörelsen.

var timerID=null;
Även den här variabeln är till att börja med tom. Den kommer att användas i setTimeout där den tillsammans med funktionen uppDatera() och värdet på nuTid anger hur snabbt bildväxlingen skall ske.

För båda de senare variablerna gäller att vi hade kunnat utesluta "=null", men för den goda sakens skull sätter vi ut dessa värden.

function vingSlag(nySlag)
Nu deklarerar vi den första funktionen, som kommer att få sitt värde för nySlag först från onLoad i den inledande BODY-taggen och sedan från radioknapparna i formuläret.

Funktionen ger nuTid värdet i nySlag och anropar sedan nästa funktion, till vilken den skickar värdet på nuTid.

function uppDatera()
Det första den här funktionen gör är att undersöka värdet på variabeln ii. Om värdet är mindre än 4 – if (ii<4) – ökas värdet med 1 – ii++;. Om värdet inte är mindre än 4, sätts värdet till 1 – ii=1;.

document.startpippi.src=pippiImg[ii].src;
Det här betyder: I IMG-taggen med namnet "startpippi" visas bilden pippiImg[ii]. Värdet på ii har angetts tidigare i funktionen och bilden som skall visas hämtas från vektorn "pippiImg" i början av skriptet.

timerID=setTimeout("uppDatera()", nuTid);
Och slutligen kommer det som avgör hur snabbt bildväxlingen skall ske. Variabeln timerID kommer att anropa funktionen uppDatera() så ofta som det anges i variabeln nuTid.

När denna tid har gått, körs alltså funktionen en gång till. Detta fortsätter tills besökaren markerar någon av radioknapparna i formuläret. Då kommer funktionen vingSlag() att anropas igen och skriptet körs om därifrån.

Gör bilden i PaintShop Pro

Här kommer en kortfattad beskrivning av hur du kan göra bilderna till skriptet i PaintShop Pro.

  1. Gör en ny bild i den storlek du vill ha och med vit bakgrund.
  2. På denna bild ritar du "grundformen" – i fågelbilderna ritade jag fågeln utom vingarna. Färglägg denna grundform.
  3. Välj Layers | New Raster Layer. Rita den "första fasen" av rörliga delar och färglägg den. Välj Selections | Select All och tryck Ctrl+C. Tryck sedan Ctrl+V för att klistra in lagret som en ny bild.
  4. Markera sedan den ursprungliga bilden igen och välj Selections | Select None. Nu kan du radera lagret med den rörliga delen.
  5. Upprepa det här för varje ny "fas". Så småningom har du grundformen plus ett antal nya bilder med de rörliga delarna.
  6. Markera den första "fasbilden", välj Selections | Select All och tryck Ctrl+C. Markera sedan grundformen och tryck Ctrl+E för att klistra in delarna. Flytta den rörliga delen till rätt plats och välj Selections | Select None.
  7. Klicka File | Export | Transparent GIF och spara bilden. Markera sedan grundformen igen och välj Edit | Undo tills "fasbilden" är borta.
  8. Gör om samma sak med var och en av "fasbilderna". Exportera varje ny fas under ett nytt namn.

© SupportData.Net