Animeren

Maakt u gebruik van geanimeerde headers, bewegende onderdelen of zelfs in elkaar overlopende achtergronden? Gebruik dan jQuery!

Flash is jarenlang het meest toegankelijke geweest op basis van geanimeerde onderdelen in een website.

Het maken van een animatie is ook eenvoudig en dus niet gek dat dit veel gebruikt werd. Echter met de komst van jQuery is Flash op enorm veel vlakken achterhaald en overbodig geworden.

Nadelen Flash:

• Een licentie voor Adobe Flash nodig. Dit kost veel geld.
• Er is de benodigde kennis vereist om het programma te gebruiken.
• De inhoud van een Flash element wordt niet door Google gevonden dus op dat vlak is er al een gemiste kans.
• Het wordt niet ondersteund door alle browsers, of je krijgt irritante meldingen.
• Versie updates (irritant meldingen).
• Werkt niet op een iPad, iPhone of iPod.
• Wordt in de cache van de browser opgeslagen.
• Het geeft een rommelige broncode.

Veel bestanden.

U heeft altijd veel bestanden nadat u de animatie heeft gemaakt (.fla) en de film zelf (.swf of .flv ) en wellicht meer bijbehorende bestanden.

Het originele bestand, de .FLA, moet u altijd bewaren omdat de animatie anders later niet meer veranderd kan worden. Hierdoor krijg u dus in de loop van tijd meer mappen/backups dan in principe nodig is.

Oké, geen flash dus?! Waarom wel jQuery?

jQuery is een framework dat in veel websites al wordt aangeroepen. Dit is de basis van alle animaties.

Op een plek in de website kunnen animaties geactiveerd worden door relatief eenvoudige handelingen. Wellicht heeft u hier geen kennis van en dat is ook helemaal niet nodig. Dat doen webdevelopers zoals wij graag voor u.

Hoe kan ik Flash herkennen?

Als u een animatie ziet in de website, klik dan eens met de rechtermuis op deze animatie. In het popup-menu ziet u onderin:

Bovenstaande afbeelding geeft aan dat het element een Flashelement is. Ziet u dat niet, dan is het geen Flash.

Wordt Flash dan volledig overbodig door jQuery?

Dat ligt aan het soort website.

Flash is tot dusver nog wel ideaal voor bijvoorbeeld reclamebanners. Reclamebanners aan de linker- of rechterzijkant van een website kennen we allemaal. Deze zijn voornamelijk in Flash gemaakt en dat gaat prima. Toch komen we ook vaker alternatieven tegen, zoals bijvoorbeeld op de website van Google.

HTML5 + CSS3

Op sommige dagen is het Google logo verwerkt in een soort van abstracte tekening of speelt er zich een hele film af. Zoals laatst met de verjaardag van Freddy Mercury.

Dit een zeer knap stukje werk omdat het filmpje niet in Flash is gemaakt maar met HTML5 + CSS3. Omdat HTML5 nog best onbekend terrein is voor velen, was ik blij verrast toen ik dit aanschouwde.

In HTML5 is het ook mogelijk om animaties te maken. En ik ben van mening dat die nog veel indrukwekkender zijn dan Flash animaties.

Zie bijvoorbeeld: http://9elements.com/io/projects/html5/canvas/

Waarom niet direct HTML5? Simpelweg omdat alleen moderne browsers het ondersteunen.

Onder moderne browsers verstaan we:

• Google Chrome
• Mozilla
• Firefox
• Opera
• en voorzichtig Internet Explorer 9.

Op dit moment worden IE6, IE7 en IE8 nog veel gebruikt in de wereld, dat belemmert de weg naar HTML5.

Als HTML5 over een aantal jaar volledig ondersteund wordt door alle browsers zal waarschijnlijk ook een gedeelte van jQuery weg vallen.

Zie een van mijn vorige artikelen over Wat heb je aan HTML5.