Flash kent iedereen. Flex roept echter vooral verwarring op. Flex is een IDE, een framework en het eindresultaat is een Shockwave Flash File (swf). Eigenlijk precies hetzelfde als wat je met Flash doet. Toch denken veel mensen bij Flash aan mooie strak geanimeerde sites en bij Flex eigenlijk helemaal nergens aan. Goede zet van Adobe om daarom de naam binnenkort te veranderen. Flex Builder gaat voortaan als Flash Builder door het leven.

Het eindresultaat mag hetzelfde zijn maar Adobe mikt met de twee tools op twee totaal verschillende doelgroepen. De grafisch designer (met eventueel wat scripting ervaring) gebruikt Flash en de software ontwikkelaar gaat voor Flex. Flex is vooral bedoeld om Flash “dynamisch” te maken (dus te “voeden” vanuit een backend systeem).

Hoe onvereenigbaar deze werelden soms lijken te zijn (wie kent niet de eeuwige strijd tussen webdesigner en ontwikkelaar), zo eenvoudig is het eigenlijk om de kracht van deze twee tools (en disciplines) te combineren. In dit blogartikel een korte omschrijving hoe je de twee tools met elkaar kunt combineren.

Flash
Maar wat was Flash ook alweer? Flash (of eigenlijk vooluit “Flash designer”) is, zoals eerder geschreven, een tool voor designers. Programmeren in Flash is mogelijk (je kunt vrijwel dezelfde dingen als dat je in Flex zou kunnen doen) maar ideaal is het zeker niet. Flash is met name geschikt voor design, animaties en geluid.

De basis in Flash is namelijk de “timeline”. Een Flash “filmpje” loopt altijd een bepaalde tijd door. Dit principe is te vergelijken met het bewerken van een video. Zoals bij het bewerken van video, kun je op bepaalde tijdstippen in de video, iets laten gebeuren. Er kan een tekst op het scherm getoond worden, er kan een geluidsfragment worden gestart, enz.

Omdat Flash als basis de timeline kent, vindt scripting (Actionscript) dan ook plaats op de timeline. Dat wil zeggen: stel dat er bij het 20e frame wat moet gebeuren, dan kan er een zgn. keyframe worden geplaatst met daarop een actie. Maar: dat geldt ook voor het beschrijven van een klasse. Een voor een software ontwikkelaar verschrikkelijk onlogische manier van denken.

Voor de designer is het echter ideaal (afgezien van het definieeren van klassen op de timeline). Je kunt grafische elementen eenvoudig interactief maken. Zo kun je bijvoorbeeld zeer simpel een animatie ontwerpen en starten wanneer iemand met de muis over een object heen beweegt.

Als voorbeeld:

In het bovenstaande voorbeeld wordt op frame 1 een eventlistener toegevoegd aan het huidige object. Zodra de gebruiker met de muis op het object klikt, wordt de animatie van het object gestopt. Vrij eenvoudig dus. Met Flex zou je voor de animatie en de interactiviteit veel meer regels code kwijt zijn. Daarnaast kun je in Flex ook de animatie zelf niet designen (wat soms juist wel gewenst is).

Library
Er is nog één aspect waarin Flash wat afwijkt van Flex en dat is de zogenaamde. Library. In de Library worden alle assets opgeslagen. Denk hierbij aan afbeeldingen, filmpjes of geluiden. Deze assets worden allemaal mee gecompileerd in de SWF (ge-embed).

Flex
En wat was Flex ook alweer? Kort gezegd: Flex (of vooluit Flex Builder) is de IDE om in te kunnen Actionscript’en. Het Flex framework laat ik voor nu even buiten beschouwing.

In Flex zul je vanuit klasses denken. De applicatie heeft altijd een hoofdklasse (een entrypoint) die vanuit daar de regie voert. Niet veel anders dan een gemiddelde Java applicatie.

Flex en Flash delen dezelfde libraries, dus ook voor Flex geldt het zelfde principe als bij Flash (maar dan andersom): Alles wat in Flash kan, kan ook in Flex.

De vraag is echter of je dat soms wel wilt. Animaties zijn zelf te programmeren maar eenvoudig is het niet. Bij complexe animaties vergt het aardig wat fantasie om dit alleen met regels Actionscript code te kunnen.

De twee combineren
Beter is het om de kracht van beide tools te combineren. De Flash designer is immers goed in vormgeving en animaties. De ontwikkelaar juist in het samenbrengen van alle componenten (frontend en backend) en het tot een werkende applicatie te brengen.

Het combineren van deze twee tools, kan op drie manieren:

• Flash project exporteren naar een .SWC (Component) bestand en als library toevoegen aan een Flex project
• Flash movie embedden in een Flex project
• Flash movie (runtime) dynamisch inladen in een draaiende Flex applicatie

Flash component
Een Flash component is te vergelijken met een JAR file. Alle gecompileerde klassen / packages zitten weggestopt in één file. Het grote voordeel hiervan is dat de Flex IDE deze SWC ook direct de klassen kan gebruiken voor code completion. Erg handig als je even niet meer weet hoe de klassen allemaal heten.

Een Flash project exporteren gaat als volgt:

Ga naar File -> Publish settings en klik op het tabje Flash. Vink vervolgens de optie Export SWC aan.

De tweede en laatste stap is de SWC in je libraries opnemen van je Flex project. Dit gaat als volgt:

Klik op je project (in de Flex Navigator) op Properties. Klik op ActionScript Build path en klik op Library path. Klik tenslotte op Add SWC en voeg de zojuist gecompileerde SWC toe aan je project.

Alle objecten in de Flash Library zijn nu klassen geworden in je project.

package {
  import flash.display.*;

  public class Applicatie extends Sprite {
    private function doIntroAnimation():void {
      var filmpje:mcIntro = new mcIntro();

      addChild(filmpje);
      mcIntro.play();
    }
  }
}

Houdt er wel rekening mee dat je voor het maken van een SWC eerst hebt aangegeven welke assets in de Library toegankelijk zijn in je code:

Embedden
Embedden van een SWF wijkt iets af van het toevoegen van een SWC aan je Flex project. Een SWF is immers een opzichzelfstaande Flash “applicatie”. Dat houdt in dat het dus zijn eigen sandbox kent. Klassen zijn daardoor beperkt uitwisselbaar (één richting) en het bevat zijn eigen entrypoint. Zodra een SWF wordt toegevoegd aan het “scherm” (een DisplayObject) begint het dus direct af te spelen:

package {
  import flash.display.*;

  public class Applicatie extends Sprite {
    [Embed(source="../filmpjes/intro.swf")]
    private var IntroClass:Class;

    // constructor
    public function Applicatie() {
      var intro:MovieClip = new IntroClass();
      addChild(intro);
    }
  }
}

In het bovenstaande voorbeeld wordt een intro filmpje ge-embed en in het entrypoint toegevoegd aan het scherm. Het intro filmpje speelt nu direct af. Het grote verschil is dus dat je buiten klasse definities (wat bij een SWC het geval is) ook de gehele applicatie embed in je Flex project.

Runtime inladen
Dan is er nog de derde, en meest aantrekkelijke, variant. In Flash is het mogelijk externe SWF bestanden runtime in te laden en klasse definities uit te wisselen (met enige beperkingen uit security oogpunt). Het grote voordeel hiervan is, is dat je je hoofd Flex applicatie klein houdt en alleen hetgene inlaadt wat je op dat moment nodig hebt.

Er zijn bij het op runtime niveau inladen van SWF bestanden wel enige restricties. Zo is het alleen mogelijk klasse definities uit te wisselen met SWF bestanden die zijn ingeladen vanaf hetzelfde domein als de Flex applicatie. De ingeladen SWF file kan ook niet bij de variabelen van de hoofdapplicatie (omdat deze in een soort sandbox draait).

package {
  import flash.display.*;
  import flash.net.*;
  import flash.event.*;

  public class Applicatie extends Sprite {
    private var loader:Loader;
    private var intro:MovieClip;

    public function Applicatie() {
      loader = new Loader();
      loader.contextInfo.addEventListener(Event.COMPLETE, handleLoadComplete, false, 0, true);
      loader.load(new URLRequest("intro.swf"));
    }

    private function handleLoadComplete(e:Event):void {
      intro = MovieClip(loader.content);
      addChild(intro);

      // begin te spelen vanaf frame 0
      intro.gotoAndPlay(0);
    }
  }
}

Conclusie
Het combineren van twee tools / disciplines is voor mij als ontwikkelaar ideaal. De Flash designer hoeft geen Actionscript wizard te zijn en kan vooral gewoon doen waar hij goed in is. Ik, de ontwikkelaar, kan mij vooral focussen op hetgeen waar ik goed in ben (althans: hoor te zijn )