Flash en JavaScript (met in het verlengde HTML) worden vaak gezien als twee eigen werelden. Bij projecten komt dan de vraag op tafel ‘Gaan we dit in Flash of HTML maken?’. Met daarna een lange discussie over alle voor- en nadelen van de keuze.

Zonde eigenlijk, want als je een paar stappen terugneemt dan zie je dat beiden hun eigen sterke kanten hebben en dat juist in de combinatie grote kansen liggen voor het verbeteren van de gebruikerservaring. Een betere vraag is dus ‘Hoe kunnen we Flash én HTML binnen dit project gebruiken?’. En het mooie is dat dit eenvoudiger is dan je zou denken.

Dit artikel laat zien wat de mogelijkheden zijn, hoe je die kunt toepassen en een aantal concrete startpunten. Eerst een voorbeeld uit de praktijk.

Voorbeeld: Weg-Dromen.nl

De site weg-dromen.nl presenteert de resultaten van een toekomstverkenningsproject van Rijkswaterstaat. De resultaten bestaan uit materiaal in de vorm van foto’s, bestanden, teksten, video’s en dergelijke. Om de bezoeker zelf hierin op onderzoek te laten gaan is gekozen voor een interface waarmee de inhoud op een soepele manier gefilterd en gesorteerd kan worden.

Een dergelijke interface is Flash op het lijf geschreven, maar dat brengt op het eerste gezicht wel een aantal beperkingen met zich mee: Je kunt niet zomaar een pagina bookmarken, de knoppen vooruit en terug van de browser doen het niet, lange teksten lezen wat minder fijn en de inhoud is niet toegankelijk voor zoekmachines. Tot zover de standaard discussie.

Maar door JavaScript aan de mix toe te voegen kunnen we deze problemen zonder veel moeite minimaliseren. Het resultaat is een gebruikerservaring die het beste van beide kanten biedt. Om te beginnen maken we van de hele site een eenvoudige HTML-versie voor gebruikers zonder JavaScript en voor zoekmachines. Een bezoeker met JavaScript (en Flash) krijgt de Flash-versie die op basis van de meegegeven deeplink de correcte informatie laat zien. Zo kom je vanuit de zoekmachine altijd op de goede plek.

Andersom wordt een navigatie-actie in Flash via JavaScript vertaald naar een nieuwe URL in de browsergeschiedenis. Dit zorgt er meteen voor dat ieder punt te bookmarken is en dat de vooruit- en achteruit-knoppen werken. Bij een overgang van een Flash-onderdeel naar een HTML-deel blijft het Flash-menu in beeld, maar het wordt klein gemaakt met een MooTools script. Zo hoeft de SWF niet steeds opnieuw geladen te worden.

Laten we eens kijken wat er achter de schermen gebeurt bij een site als Weg Dromen.

Communicatie

De kern van de integratie vormt communicatie. Het contact tussen Flash en JavaScript wordt verzorgd door de External Interface van Flash. Hiermee kunnen functies in de andere omgeving worden aangesproken en wordt informatie uitgewisseld.

Het gebruik is eenvoudig en begint met het correct plaatsen van de SWF in de HTML-pagina. De manier waarop dit gebeurt maakt niet uit. Dit kan statisch (bijvoorbeeld via Object-tags) of dynamisch (door inhoud te vervangen). Het gebruik van bijvoorbeeld SWFObject kan hierbij helpen.

Wel is belangrijk te zorgen dat de SWF in de HTML voorzien is van een eenduidige name en id. Deze heb je namelijk nodig om de SWF te kunnen aanspreken vanuit JavaScript. Beide zijn nodig omdat Internet Explorer met de id werkt en de andere browsers juist de name gebruiken.

Verder moet het toegestaan worden om de SWF vanuit JavaScript te benaderen. Dit kan via de 'allowscriptaccess' parameter. In het onderstaande voorbeeld wordt SWFObject gebruikt om een SWF met de id/name 'flashdemo' te plaatsen en de minste beperkingen aan de toegang te geven.

swfobject.embedSWF("demo.swf", "flashContent", "800", "600", "9.0.0", false, flashvars,{allowscriptaccess: "always"},{id:"flashdemo", name:"flashdemo"});

Voor meer informatie en demo’s zie de SWFObject-site

Functies

Als de SWF geplaatst is, zijn er aan beide kanten nog enkele functies die elkaar kunnen bereiken. Aan de Flash-kant werkt het als volgt.

Importeer als eerste de benodigde class. In dit artikel is uitgegaan van ActionScript 3 maar in ActionScript 2 werkt het in grote lijnen hetzelfde.

import flash.external.ExternalInterface;

En vervolgens kun je een JavaScript functie aanroepen op de volgende manier:

HetResultaat = ExternalInterface.call("mijnFunctieInJavascript",parameter1,parameter2,…);

Hiermee wordt mijnFunctieInJavascript uitgevoerd met de meegestuurde parameters en vervolgens wordt het resultaat in de variabele HetResultaat geplaatst. De parameters kunnen elk ActionScript Data Type zijn.

Omgekeerd is het bijna net zo eenvoudig. In dit geval moet eerst de ActionScript-functie voor JavaScript beschikbaar gemaakt worden. Dit kan in ActionScript met:

ExternalInterface.addCallback("roepnaam",functie);

De roepnaam is de name die je wilt gebruiken om de functie vanuit JavaScript aan te roepen. De functie is nu beschikbaar als:

HetResultaat = mijnFlashObject.roepnaam(parameter1,parameter2,…);

MijnFlashObject refereert naar het SWF-object in de HTML. Deze vind je via de name (vandaar dat die goed gedefinieerd moet zijn). Adobe geeft zelf het volgende stukje JavaScript hiervoor, maar met een framework als jQuery of MooTools kan het ook heel eenvoudig.

function getMovie(movieName) {
  if (navigator.appName.indexOf("Microsoft") != -1) {
 return window[movieName]
  } else {
    return document[movieName]
  }
}

Bij elkaar wordt dit

getMovie("flashtest").roepnaam(parameter1,parameter2,…);

Een andere mogelijkheid is dat de SWF zijn eigen name doorgeeft. Deze wordt gevonden met:

mijnID = ExternalInterface.objectID;

Bekijk demo 1: Communicatie tussen Javascript en Flash

Demo 1 laat een werkend voorbeeld zien. Vanuit beide kanten (HTML of Flash) kan een regel tekst gestuurd worden naar de andere kant. Bij het ontvangen van de tekst wordt de actuele tijd teruggestuurd.

Download de broncode van demo 1 (1.0Mb - FLA) voor meer uitleg en details.

Wat betekent dit?

Met de bovenstaande demo zul je natuurlijk geen prijzen winnen, maar het vormt wel de basis om hele nuttige dingen mee te doen. We hebben met ExternalInterface een snelle en betrouwbare manier om over en weer functies aan te roepen en informatie te verplaatsen. De informatie kan van alles zijn: input van de gebruiker, geladen data, CSS, HTML, etc.

Kort gezegd betekent dit dat JavaScript en ActionScript één geheel zijn geworden. Geen aparte werelden maar gewoon gezellige buren.

Alles wat in JavaScript mogelijk is kan ook vanuit Flash gedaan worden. Van het aanpassen van een paginatitel tot en met het gebruik van de meest uitgebreide JavaScript-frameworks. En omgekeerd natuurlijk ook. Flash-video aansturen met HTML-links is geen enkel probleem.

Hiermee hebben we de mogelijkheid om onze interactie te verrijken en tegelijkertijd ergernissen weg te nemen. Om te beginnen met Flash-scrollbars in de volgende demo.

Demo 2: Flash past zichzelf aan

Een Flash-pagina of element met wisselende inhoud brengt de vraag met zich mee ‘Wat te doen als de hoogte van de inhoud verandert?’. Je kunt zorgen dat er altijd ruimte is, maar dat is zonde als je de ruimte niet nodig hebt. Je kunt ook de inhoud scrollbaar maken, maar dat is bij kleinere elementen niet fijn in gebruik. Zelfgemaakte scrollbars zijn een hoop gedoe en al helemaal niet populair.

Of — veel handiger — je verandert de hoogte van het Flash-element via JavaScript gewoon afhankelijk van de inhoud. Meer of minder inhoud, het past altijd. De layout past zich aan. En zo nodig verschijnt er gewoon de vertrouwde browser-scrollbar.

Zie voor een voorbeeld de tweede demo Communicatie tussen Javascript en Flash.

In de demo past de SWF zijn eigen hoogte aan als de knoppen worden gebruikt om de lengte van de inhoud te veranderen. De werking is eenvoudig. Zodra de inhoud wijzigt wordt de benodigde hoogte bepaald en vanuit Flash een JavaScript-functie aangeroepen. Deze geeft vervolgens het element de correcte hoogte.

Aan de Flash-kant sturen we de nieuwe hoogte:

var id:String = ExternalInterface.ObjectID;
ExternalInterface.call("adjustFlashHeight", id, nieuweHoogte);

En die wordt aan de JavaScript-kant vervolgens gebruikt om het element te schalen:

function adjustFlashHeight (id, newHeight) {
  getMovie(id).style.height = newHeight + "px";
}

En dat is alles.

Door adjustFlashHeight uit te breiden met een framework als jQuery of MooTools kan de overgang eenvoudig geanimeerd worden. Nu we dit kunnen is het een kleine stap om de inhoud te schalen en iets te doen wat JavaScript niet alleen kan.

Zoom

De nieuwere browsers hebben zoom-functionaliteit die de pagina als geheel schaalt in plaats van alleen de tekst. Standaard werkt dit behoorlijk goed, ook met Flash. Maar op sommige momenten zou het handig zijn om te weten wat de actuele zoomfactor is. Dan kunnen we zelf de layout en onderdelen op de pagina nog wat verbeteren.

Helaas is het actuele zoomniveau van de pagina niet direct te bepalen. Via Flash kan dit wel. Mark Wubben (de ontwikkelaar van sIFR) legt op zijn blog in detail uit hoe dit werkt.

De basis vormt de verhouding tussen de hoogte of breedte van het Flash-element zoals die in JavaScript gevonden wordt en zoals die in Flash bekend is. Standaard zijn beide maten gelijk maar als de zoomfactor verandert, verandert ook de maat in Flash.

Aan de Flash-kant hebben we dan nodig:

var outside:Number = Number(ExternalInterface.call("getWidth",ExternalInterface.objectID));
var inside:Number  = stage.stageWidth;
var zoomFactor:Number = inside/outside;

En de breedte wordt aan de JavaScript-kant bepaald en teruggestuurd:

function getWidth (swfID) {
  return getMovie(swfID).width;
}

Download de broncode van demo 2 (1.0Mb - FLA) voor de verdere uitleg.

Nu we de zoomfactor weten kunnen we de tekstgrootte en lay-out er op aanpassen, maar ook de factor aan JavaScript doorgeven.

Bekijk demo 2 nog een keer en probeer nu de zoom-functionaliteit van de browser. De tekstgrootte wordt ook aangepast terwijl de knoppen op een vaste plek blijven staan.

Andere mogelijkheden

De bovenstaande demo’s zijn maar een klein deel van wat er mogelijk is. Hierbij nog een aantal uitgewerkte toepassingen om verdere inspiratie op te doen.

• De SWF haalt zelf de informatie uit een HTML-tabel en maakt er vervolgens een mooie grafiek van. Zie bijvoorbeeld YUI Charts
• Een unordered list met steden wordt via SWFobject automatisch vervangen door een SWF met een kaart waarop de steden op de juiste locatie geplaatst worden. Fijn voor de gebruiker (met en zonder Flash plugin) en voor de zoekmachines. Zie deze demo: van een unordered list naar een kaart.
• Als je echt graag alles wilt gebruiken kun je zelfs op deze manier met Silverlight communiceren
• Een scrollwheel in Flash gebruiken op de Mac. Standaard niet mogelijk maar wel als de gegevens vanuit JavaScript naar Flash gestuurd worden.
• sIFR zorgt voor mooie typografie door met JavaScript de gewenste elementen te vervangen door Flash.
• Lightbox oproepen vanuit Flash en over de gehele inhoud plaatsen.
• Kopiëren naar het clipboard. Niet (in iedere browser) direct mogelijk vanuit JavaScript maar wel via Flash.
• Screenreaders zijn niet eenvoudig te detecteren met JavaScript maar wel met Flash met behulp van FlashAid.
• Een eval functie voor Actionscript via Javascript.
• Uploaden van meerdere files gaat veel fijner via Flash. Zie bijvoorbeeld YUI Uploader
• Door de URL van de getoonde pagina te dynamisch aan te passen vanuit Flash is bookmarken en deeplinken eenvoudig mogelijk. Zie bijvoorbeeld SWFAddress
• De inhoud van een Flash-videoplayer besturen via een JavaScript API. Zie bijvoorbeeld Flowplayer

Tot slot

Het is dus duidelijk dat het combineren van Flash & JavaScript een hoop mogelijk maakt en lang niet zo complex is als het misschien lijkt. Volgende keer als er gevraagd wordt ‘Gaan we dit in Flash of HTML maken?’ kan het antwoord ook zijn ‘een cocktail van beiden’.

• Home
• Artikelen
• Colofon