Voorbeeld: een portfolio met animatie (Flash Professional)

Dit voorbeeld is ontworpen om u voor het eerst te laten zien hoe u gedeelten van ActionScript kunt samenvoegen tot een volledige toepassing. Het animatieportfoliostuk is een voorbeeld van hoe u aan een bestaande lineaire animatie kleine interactieve elementen toe kunt voegen. U kunt bijvoorbeeld in een online portfolio een animatie toevoegen die u voor een klant hebt gemaakt. Het interactieve gedrag dat we aan de animatie toevoegen bestaat uit twee knoppen waarop de kijker kan klikken: een die de animatie start en een met een koppeling naar een andere URL (bijvoorbeeld het portfoliomenu of de introductiepagina van de maker).

Het proces voor het maken van dit stuk bestaat uit de volgende hoofdonderdelen:

  1. Het FLA-bestand voorbereiden om ActionScript en interactieve elementen toe te voegen.

  2. De knoppen maken en toevoegen.

  3. De ActionScript-code schrijven.

  4. De toepassing testen.

Voorbereiden op toevoegen van interactiviteit

Voordat u interactieve elementen aan de animatie kunt toevoegen, is het nuttig om het FLA-bestand voor te bereiden door een aantal plaatsen toe te voegen voor de nieuwe inhoud. Deze taak omvat het maken van werkelijke ruimte in het werkgebied waar de knoppen zich bevinden. Het omvat ook het maken van 'ruimte' in het FLA-bestand, zodat verschillende items apart worden gehouden.

U kunt het FLA-bestand als volgt voorbereiden op het toevoegen van interactieve elementen:

  1. Maak een FLA-bestand met een eenvoudige animatie zoals een enkele bewegings-tween of vorm-tween. Als u al een FLA-bestand hebt met de animatie die u in het project weergeeft, opent u dat bestand en slaat dit op met een nieuwe naam.

  2. Bepaal waar op het scherm u de twee knoppen wilt laten verschijnen. Een knop om de animatie te starten en een knop om te koppelen aan de auteurportfolio of introductiepagina. Zo nodig kunt u in het werkgebied wat ruimte voor de nieuwe inhoud wissen of toevoegen. Als de animatie er nog geen heeft, kunt u op het eerste frame een opstartscherm maken. In dit geval wilt u de animatie waarschijnlijk verplaatsen, zodat deze op frame 2 of later start.

  3. Voeg een nieuwe laag toe boven de andere lagen in de tijdlijn en noem deze laag knoppen . In deze laag voegt u knoppen toe.

  4. Voeg een nieuwe laag toe boven de laag knoppen en noem deze laag handelingen . In deze laag voegt u ActionScript-code aan de toepassing toe.

Knoppen maken en toevoegen

Vervolgens maakt en plaatst u de knoppen die de kern van de interactieve toepassing vormen.

U kunt als volgt knoppen maken en toevoegen aan het FLA-bestand:

  1. Maak met behulp van de tekengereedschappen het uiterlijk van de eerste knop (de ‘afspeelknop’) in de laag knoppen. U kunt bijvoorbeeld een horizontale ovaal maken met tekst erop.

  2. Selecteer met het gereedschap Selecteren alle grafische delen van de enkele knop.

  3. Selecteer Wijzigen > Omzetten in symbool in het hoofdmenu.

  4. Selecteer in het dialoogvenster Knop als symbooltype, geef het symbool een naam en klik op OK.

  5. Geef de knop, terwijl deze is geselecteerd, in Eigenschapcontrole de instantienaam playButton .

  6. Herhaal de stappen 1 tot en met 5 om de knop te maken waarmee de gebruiker naar de introductiepagina van de maker navigeert. Noem deze knop homeButton .

De code schrijven

De ActionScript-code voor deze toepassing kan naar functionaliteit worden opgedeeld in drie onderdelen, hoewel alle code op dezelfde plaats worden ingevoerd. De code heeft drie functies:

  • De afspeelkop stoppen zodra het SWF-bestand wordt geladen (wanneer de afspeelkop frame 1 ingaat).

  • Luisteren naar een gebeurtenis zodat het SWF-bestand wordt afgespeeld wanneer de gebruiker op de afspeelknop klikt.

  • Luisteren naar een gebeurtenis zodat de browser naar de juiste URL wordt gestuurd wanneer de gebruiker op de knop voor de introductiepagina klikt.

U kunt als volgt de code schrijven die de afspeelkop stopt wanneer deze frame 1 ingaat:

  1. Selecteer het hoofdframe in frame 1 van de laag handelingen.

  2. Selecteer Venster > Handelingen in het hoofdmenu om het deelvenster Handelingen te openen.

  3. Voer de volgende code in het Script-veld in: 

    stop();

U kunt als volgt de code schrijven die de animatie start wanneer op de afspeelknop wordt geklikt:

  1. Voeg twee lege regels toe aan het einde van de code die u in de vorige stappen hebt ingevoerd.

  2. Voer onderaan het script de volgende code in: 

    function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}

    Deze code definieert een functie startMovie() . Wanneer startMovie() wordt aangeroepen, begintde hoofdtijdlijn met afspelen.

  3. Voer op een nieuwe regel de volgende code in, na de code die u in de vorige stap hebt ingevoerd: 

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    Deze coderegel registreert de functie startMovie() als een listener voor de gebeurtenis click van playButton . Met andere woorden, wanneer op de knop playButton wordt geklikt, wordt de functie startMovie() aangeroepen.

U kunt als volgt de code schrijven die de browser naar een URL stuurt wanneer op de knop voor de introductiepagina wordt geklikt.

  1. Voeg twee lege regels toe aan het einde van de code die u in de vorige stappen hebt ingevoerd.

  2. Voer onderaan het script de volgende code in: 

    function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}

    Deze code definieert een functie gotoAuthorPage() . Deze functie maakt eerst een URLRequest-instantie met de URL http://example.com/. Hij geeft die URL vervolgens door aan de functie navigateToURL() , waardoor de browser van de gebruiker die URL opent.

  3. Voer op een nieuwe regel de volgende code in, na de code die u in de vorige stap hebt ingevoerd: 

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    Deze coderegel registreert de functie gotoAuthorPage() als een listener voor de gebeurtenis click van homeButton . Met andere woorden, wanneer op de knop homeButton wordt geklikt, wordt de functie gotoAuthorPage() aangeroepen.

De toepassing testen

De toepassing is nu volledig functioneel. U kunt een test uitvoeren om te zien of dit inderdaad het geval is.

U kunt als volgt de toepassing testen:

  1. Selecteer Besturing > Film testen in het hoofdmenu. Het SWF-bestand wordt gemaakt en geopend in een Flash Professional-venster.

  2. Klik op beide knoppen om te controleren of deze naar verwachting functioneren.

  3. Wanneer de knoppen niet werken, kunt u het volgende controleren:

    • Hebben de knoppen beide verschillende instantienamen?

    • Gebruiken de aanroepen van de methode addEventListener() dezelfde namen als de instantienamen van de knoppen?

    • Worden de juiste gebeurtenisnamen gebruikt in de aanroepen van de methode addEventListener() ?

    • Is de juiste parameter opgegeven voor elk van de functies? (Beide methodes moeten een enkele parameter hebben met het gegevenstype MouseEvent.)

    Al deze fouten en de meeste andere mogelijke fouten leveren een foutbericht op. het foutbericht kan verschijnen wanneer u de opdracht Film testen kiest of wanneer u op de knop klikt terwijl u het project test. Kijk in het deelvenster Compilatiefouten voor compilatiefouten (die verschijnen wanneer u voor het eerst Film testen kiest). In het deelvenster Uitvoer vind u uitvoerfouten die optreden wanneer de inhoud wordt afgespeeld, zoals wanneer u op een knop klikt.