Webtoepassingen met Flash 5 - Ghent University...

Universiteit Gent Faculteit Toegepaste Wetenschappen

Vakgroep Telecommunicatie en Informatieverwerking Voorzitter: Prof. Dr. Ir. Herwig BRUNEEL

Webtoepassingen met Flash 5 door

Jeroen TYTGAT en Mieke VAN RIJCKEGHEM

Promotor: Prof. Dr. Ir. Wilfried PHILIPS Begeleider: Philippe SERBRUYNS

SCRIPTIE ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studie informatica

Academiejaar 2000-2001

Webtoepassingen met Flash 5 door

Jeroen TYTGAT en Mieke VAN RIJCKEGHEM

SCRIPTIE ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studie informatica Academiejaar 2000-2001 Promotor: Prof. Dr. Ir. Wilfried PHILIPS Begeleider: Philippe SERBRUYNS Faculteit Toegepaste Wetenschappen Universiteit Gent Vakgroep Telecommunicatie en Informatieverwerking Voorzitter: Prof. Dr. Ir. Herwig BRUNEEL

Samenvatting In de inleiding wordt een korte contextschets van deze thesis gegeven, evenals een korte uiteenzetting i.v.m. het uiteindelijke doel van deze scriptie. Het tweede hoofdstuk handelt dan over enkele basisbegrippen van Flash 5. Hierbij beschouwen we zowel de foundations als actionscript. In het derde hoofdstuk wordt dieper ingegaan op Flash versus PowerPoint en er wordt hierin beschreven hoe een presentatie / animatie analoog aan PowerPoint in Flash kan gemaakt worden en welke voor - en nadelen t.o.v. PowerPoint hierbij werden ondervonden. Het vierde hoofdstuk handelt over het invoegen van objecten. Hierbij kunnen twee onderverdelingen worden gemaakt. Eerst en vooral zal dan ook het invoegen van Flash 5 in andere programma's worden besproken en ten tweede wordt dan het item behandeld i.v.m. het invoegen van allerlei objecten in Flash 5 zelf. In het voorlaatste hoofdstuk worden enkele belangrijke andere gemaakte animaties nader toegelicht. In het laatste hoofdstuk ten slotte wordt het resultaat en de belangrijkste punten nog eens aangehaald. Tevens werd hierbij een CD-ROM toegevoegd, waarin de volgende mappenstructuur werd aangehouden: in de map docs vindt u de elektronische versie van deze scriptie. De map presentatie bevat de PowerPoint-presentatie die werd gegeven ter verdediging van deze scriptie samen met alle files die hierbij via een link werden aangeroepen. Ten slotte is nog een laatste folder voorzien, animaties genaamd, waar u alle files kan vinden, waarnaar in dit werk wordt verwezen en tevens enkele andere animaties, die werden gemaakt bij het leren van Flash 5. Trefwoorden: presentatie, animatie, Flash 5, PowerPoint, movieclip, frame, tijdslijn, …

Voorwoord

We bedanken onze promotor, Prof. W. Philips, en Ph. Serbruyns voor het begeleiden

van deze scriptie, voor hun nuttige informatie en voor hun kritische opmerkingen.

Daarnaast bedanken we onze medestudenten die ook een scriptie over

webtoepassingen met Flash hebben gemaakt en die ons lieten delen in hun Flash

expertise.

Ten slotte zijn we dank verschuldigd aan alle internauten die ons via internetfora

geholpen hebben en die hun Flash bestanden vrij ter beschikking stelden.

Mieke wil hierbij haar ouders bedanken omdat zij haar de mogelijkheid gaven dit

aanvullend jaar bij te studeren en al haar vrienden en vriendinnen omdat ze steeds

voor haar klaarstonden.

Jeroen bedankt zijn ouders, zijn zus en Alejandra voor hun geduld en hun steun.

De auteurs geven de toelating deze SCRIPTIE voor consultatie beschikbaar te stellen en

delen van de scriptie te kopiëren voor persoonlijk gebruik.

Elk ander gebruik valt onder de beperkingen van het auteursrecht, in het bijzonder met

betrekking tot de verplichting de bron uitdrukkelijk te vermelden bij het aanhalen van

resultaten uit deze SCRIPTIE.

31/05/'01

Inleiding 1

1 Inleiding

De scriptie "Webtoepassingen met Flash. Animaties in Flash 5" situeren we in de bredere

context van animaties, en nog meer algemeen, in die van multimedia.

"[Multimedia technology is an] Interdisciplinary, application-oriented technology that capitalizes

on the multisensory nature of humans and the ability of computers to store, manipulate, and

convey nonnumerical information such as video, graphics, and audio in addition to numerical

and textual information."1

De belangrijkste elementen in de definitie van Keinath en Minoli zijn, althans voor deze scriptie,

"integratie van verschillende media" en "interactie". Integratie van verschillende media betekent

dat zowel tekst, geluid, beeld en video worden samengebracht in één geheel, in één applicatie.

Interactie betekent enerzijds, dat de verschillende media met elkaar interageren en anderzijds,

dat de gebruiker met de applicatie interageert.

Binnen de multimedia situeren we animaties. Een animatie kan omschreven worden als een

simulatie van beweging door het tonen van een sequentie van afbeeldingen. Dit kan een

beweging in de ruimte zijn (b.v. een figuurtje dat zich van links naar rechts beweegt op het

scherm) en/of een beweging in de tijd (b.v. een figuurtje zal een aantal tijdseenheden nodig

hebben om zich te verplaatsen.)2

Deze definities zijn verre van volledig. Het is niet onze bedoeling om een theoretische studie te

maken over multimedia of animaties. We willen enkel het thema in een beperkte theoretische

omschrijving situeren.

Er zijn verschillende manieren om animaties te bouwen. We sommen er een paar op. We

kunnen animaties opbouwen/schrijven in een programmeertaal, b.v. Java of in een scripttaal,

b.v. JavaScript. Een animatie geschreven in een programmeertaal staat op zich, terwijl een

animatie geschreven in een scripttaal steeds moet worden geïnterpreteerd door een ander

programma, in het geval van webapplicaties, door een webbrowser.

1 KEINATH, R., MINOLI, D., Distributed Multimedia Through Broadband Communication Services. London, Artech House, 1994. 2 De site http://projects.edte.utwente.nl/pi/teksten/OrdeAnimatie.html geeft een overzicht van animatiedefinities.

Inleiding 2

We kunnen animaties opbouwen in presentatietools, zoals PowerPoint. Omdat deze tools niet

ontworpen zijn om animaties te maken, zijn de mogelijkheden ervan beperkt. Het resultaat laat

soms te wensen over.

Tekenfilms (al of niet met een computer ontwikkeld en geïmplementeerd) en computergestuurde

special effects zijn ook vormen van animatie.

Ten slotte kunnen we animaties opbouwen in editors. Animated GIF's, vaak onder de vorm van

adverterende banners op het Internet, kunnen bijvoorbeeld worden gemaakt in Macromedia

Fireworks.

Macromedia Flash is nog zo'n editor waarin animaties kunnen worden gebouwd. Zoals de titel

van de scriptie aangeeft, concentreren wij ons op Flash, meer bepaald op Flash 5.

Macromedia Flash 5 is een tool die vooral wordt gebruikt voor webdesign. De andere studenten

die een scriptie gemaakt hebben over webapplicaties in Flash 5 hebben een website ontwikkeld.

Flash 5 wordt ook gebruikt om animaties (educatieve demo's, cartoons…) te maken. Die

toepassing behandelen wij in onze scriptie. We hebben twee zaken onderzocht: ten eerste of

gebruikers een presentatie in Flash 5 kunnen opbouwen die equivalent is aan een PowerPoint

presentatie en ten tweede hoe in Flash 5 (educatieve) demo's worden gemaakt.

Het is niet de bedoeling om PowerPoint te imiteren en Flash 5 als een presentatietool te

beschouwen. We zouden daarmee de mogelijkheden van Flash 5 te zeer beperken. Wat we wel

willen nagaan, is of we een presentatie kunnen opbouwen in Flash 5 die een PowerPoint

voorstelling benadert. Daardoor zullen we een reeks aspecten van het programma niet

bespreken. Op het Internet zijn een heleboel Flash-presentaties te vinden die weinig gemeen

hebben met voorstellingen in PowerPoint. Geef als trefwoorden "Flash" en "presentatie" op in

een zoekmachine en er zullen een heleboel links naar presentatie verschijnen.

Nogmaals, we proberen een voorstelling op te bouwen in Flash 5 die een PowerPoint

presentatie benadert. We bekijken een paar methoden die de gebruiker zou kunnen hanteren en

we wegen de voordelen en de nadelen ervan tegen elkaar af.

Het invoegen van objecten in Flash 5 en het invoegen van Flash 5 bestanden in andere

applicaties hebben we als apart hoofdstuk opgenomen. Het is een onderdeel dat behoort tot het

maken van een presentatie in Flash 5 en tot het opbouwen van animaties. Omdat we het

uitgebreid willen bespreken nemen we het apart op.

Inleiding 3

In het derde deel van onze scriptie hebben we het over het maken van (educatieve) animaties in

Flash 5. Tijdens de voorbije zes weken hebben we er een heleboel gemaakt om te leren werken

met het programma en om vertrouwd te worden met kernbegrippen. Daarnaast hebben we met

de opgedane ervaring een aantal animaties gemaakt, die uitgingen van een bepaald probleem

en die we op een creatieve manier hebben ontwikkeld. We geven vanzelfsprekend geen

opsomming van iedere animatie. We halen een aantal animaties aan bij wijze van voorbeeld, om

de tekst aan te vullen en om bepaalde elementen te verduidelijken.

We willen er meteen op wijzen dat er geen absolute grens bestaat tussen wat wij een

'presentatie' in Flash 5 noemen, en ‘animaties’ in Flash 5. De werkwijze die we hanteren in het

opbouwen van een voorstelling kan, bijvoorbeeld, ook worden toegepast op het bouwen van een

animatie. Het onderscheid is bedoeld om structuur in onze scriptie te brengen

We hebben allebei met veel plezier aan onze scriptie gewerkt en we zullen in de (nabije)

toekomst uit persoonlijke interesse Flash blijven bestuderen. Na zes weken zijn we goed

vertrouwd geraakt met Flash 5 en hebben we een zekere expertise verworven. De eerlijkheid

gebiedt ons te zeggen dat onze eerste stappen in Flash 5 soms moeizaam verliepen, zelfs bij

animaties die, achteraf bekeken, kinderlijk eenvoudig zijn. Maar dit mag de lezer niet afschrikken

om zelf aan de slag te gaan met Flash 5 en er de grenzen van af te tasten.

We hebben niet de pretentie om te zeggen dat deze tekst een volledig overzicht bevat van alle

mogelijkheden van Flash 5 en dat de lezer na het doornemen ervan de perfecte animaties zal

kunnen maken of een perfecte Flash 5 presentatie zal kunnen opstellen. Veel zaken zijn

waarschijnlijk voor verbetering vatbaar en we zijn de eersten om dat toe te geven. Niettemin

hebben we getracht een overzicht te geven van onze werkwijzen (en de voordelen en nadelen

ervan). We hopen dat we de lezers van deze scriptie alvast een stukje op weg kunnen helpen.

Flash 5 4

2 Flash 5

In het hiernavolgend stuk geven we een overzicht van de belangrijkste elementen in Flash 5. We

spreken over Flash 5 en Flash 5 bestanden omdat we zelf met de vijfde versie van het

programma hebben gewerkt. Sommige zaken gaan nog op voor oudere versies, andere niet. We

hebben geen tests uitgevoerd met vroegere versies.

We geven eerst een korte uitleg over vectorbestanden. Daarna leggen we enkele

basisbegrippen uit en hoe je die elementen gebruikt om animaties te maken. Ten slotte gaan we

in op ActionScript.

2.1 Vector versus raster 1

Flash 5 werkt met vectorbeelden en niet met rasterbeelden. Vectorbeelden beschrijven het

beeld in termen van coördinaten en wiskundige functies en transformaties.

"… [It] sounds complicated, but really is as simple as saying, 'put a dot here, put a dot there, and

draw a line between them'."2

Rasterbeelden of bitmaps (JPEG, GIF…) beschrijven de kleur en de positie van iedere pixel in

het beeld. Dit betekent dat rasterbeelden groter zijn. Grote bestanden betekenen langere

downloadtijden en weinig internetgebruikers hebben het geduld van een monnik.

Vectorbestanden zijn compacter in vergelijking met bitmaps. Dit betekent dat die bestanden

(afbeeldingen of animaties) snel te downloaden zijn. Een (goed gebouwd) Flash 5 bestand zal

bovendien de inhoud op het scherm van de gebruiker streamen, d.w.z. dat het eerste deel van

de animatie zal worden geladen en (her)afgespeeld, terwijl de rest van de animatie op de

achtergrond wordt geladen. De gebruiker ziet dus iets vooraleer het volledige bestand is

ingeladen en is niet geneigd om een andere site te bezoeken.

Vectorbeelden zijn display-onafhankelijk. De schermresolutie van de gebruiker mag verschillen

van die van de ontwikkelaar van het bestand. In principe zal de file niet significant wijzigen.

1 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, pp. 2-3. 2 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 3, op. cit.

Flash 5 5

(Misschien kan de ontwikkelaar van een presentatie of animatie in Flash 5 het bestand onder

verschillende resoluties uittesten.)

Inzoomen op een rasterformaat betekent dat de pixels steeds groter en groter worden tot de

gebruiker uiteindelijk een scherm vol (gekleurde) vierkanten heeft waarin hij/zij niets meer

herkent. Een vectorbeeld behoudt zijn relatieve grootte en helderheid bij het inzoomen.

Rasterbeelden zijn beter geschikt om afbeeldingen of foto's met veel kleuren weer te geven. Een

foto in termen van vectoren beschrijven zou een enorm groot bestand opleveren.

Flash 5 laat toe om met vectoren én rasters te werken.

2.2 Begrippen 3

In het volgende stuk leggen we een aantal basisbegrippen uit, aangevuld met voorbeelden. We

willen de lezer niet overspoelen met terminologie zonder de betekenis ervan te hebben

uitgelegd. We beginnen met enkele elementen van het programma zelf (stage, working area…),

zonder ieder element uit elke menubalk of elk panel uitvoerig te bespreken. Het is niet de

bedoeling een tutorial te schrijven. Daarna behandelen we symbolen. We hebben het ook over

tweening. We sluiten af met een kort stukje over maskers.

2.2.1 Flash 5 interface "Flash is really two things; firstly, it's the standard file format for delivering interactive visually-rich

content and animation on the web – this is the .swf file format […], secondly, it's the actual

authoring environment that lets you create and publish those .swf files. The Flash program you

install in your computer is the gateway to state-of-the-art web content." 4

We bekijken eerst de Flash 5 interface of de "authoring environment" waar de gebruiker Flash 5

bestanden creëert, de .fla files en die bestanden kan testen en publiceren.5

3 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, pp. 10-44; FENCZIK, Peter, FRANCESCATO, Rosana, Szabla, Ann, (eds.), Macromedia Flash 5. Using Flash. San Francisco, Macromedia, 2000.

Op het eerste zicht

4 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 10, op. cit. 5 Het editeerbaar Flash 5 bestand is een .fla bestand. De ontwikkelaar kan de inhoud ervan aanpassen en manipuleren. De afspeelbare movie is de .swf file die gecreëerd wordt bij het publiceren van de movie. Het is de .swf file die wordt afgespeeld in, b.v. een browser. Tijdens het publicatieproces wordt alle inhoud van het .fla bestand gecomprimeerd en geëncodeerd in het .swf formaat. De .swf file, ook "swiff" genoemd is kleiner dan de .fla parent.

Flash 5 6

lijkt de interface een wirwar van icoontjes en panelen, maar ieder element heeft zijn

functionaliteit.

Figuur 2-1: de Flash 5 interface

De panelen aan de rechterkant van de figuur helpen de gebruiker om de inhoud van zijn/haar creatie te veranderen en te manipuleren. De opties in de panelen zijn ook terug te vinden in de

menubalk bovenaan het scherm. Sommigen zullen de panelen gebruiksvriendelijk vinden en er

weinig aan veranderen, anderen zullen zich irriteren en de panelen uit de interface verwijderen.

De gebruiker is in staat zijn/haar Flash 5 omgeving aan te passen.

De (eind)gebruiker ziet tijdens het afspelen van de Flash 5 movie alleen de inhoud van de stage

(b.v. de zwart gekleurde cirkels). De ontwikkelaar van Flash 5 movies moet daar rekening mee

houden. De eindgebruiker ziet de visuele elementen niet die zich buiten de grenzen van de

stage bevinden (b.v. de grijze cirkels), die elementen bevinden zich in de work area. Het werkgebied omringt de stage. De ontwikkelaar kan dan, bijvoorbeeld, een figuur links op de

stage laten verschijnen en rechts laten verdwijnen. Teksteffecten, zoals in PowerPoint, kunnen

op die manier worden gegenereerd. Een stuk tekst wordt in het werkgebied geplaatst en op een

bepaald tijdstip in de Flash 5 movie vliegt de tekst van het werkgebied de stage binnen (zie

verder). De eigenschappen van de stage (grootte, achtergrondkleur,…) kunnen worden

aangepast.

Flash 5 7

Een belangrijk, zoniet het belangrijkste element van de interface is de tijdslijn. Naast een ruimtedimensie (hoogte en breedte op de stage) heeft een Flash 5 movie ook een tijdsdimensie.

De tijdslijn organiseert de inhoud van een .swf over een bepaalde periode (die de ontwikkelaar

bepaalt). Een animatie start wanneer, bijvoorbeeld, een surfer een webbrowser opent en eindigt

als de Flash movie is afgespeeld of als de surfer de webpagina verlaat. Flash vraagt a.h.w. de

tijdslijn op, die in de .swf file vervat zit, en leest af wat er in de browser moet worden getoond.

De Flash 5 movie leest de frames in de tijdslijn. De ontwikkelaar imiteert een tijdsverloop, creëert een animatie… door inhoud in frames te plaatsen op verschillende tijdstippen in de

tijdslijn. De playhead (de rode rechthoek bovenop het framenummer) duidt aan waar de movie zich bevindt in de tijdslijn. Een keyframe geeft aan dat er iets belangrijks gebeurt op het punt in de tijdslijn waar het keyframe staat. In een keyframe toont de movie een bepaalde inhoud,

verdwijnt iets of verandert een element.

"If something significant changes on the screen in your movie, there'll probably be a keyframe

involved. Keyframes are the 'key' to making things happen." 6

De tijdslijn en de frames organiseren en manipuleren de inhoud van een Flash 5 movie over tijd,

lagen voegen er diepte aan toe en verdelen delen van de inhoud en acties. Lagen geven de ontwikkelaar de mogelijkheid flexibeler en overzichtelijker te werk te gaan en laten toe om

complexere animaties op te bouwen. Het gebruik van meerdere lagen betekent dat een movie

een reeks van verschillende elementen op de stage kan bevatten die elk afzonderlijk en

onafhankelijk van elkaar ageren.

Figuur 2-2: lagen op de tijdslijn

6 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 25, op. cit.

Flash 5 8

Scenes verdelen de Flash 5 movie in secties, (onafhankelijke) stukjes die samen de movie vormen. Een scene is een extensie van de tijdslijn, die toelaat om een bepaalde actie te

onderbreken in één scene en verder te gaan in een andere. De ontwikkelaar kan de inhoud van

de movie op een logische manier opsplitsen en op een efficiënte wijze organiseren. De bezoeker

kan gemakkelijker door de .swf navigeren. Vergelijk het opsplitsen van een movie met het

opsplitsen van een website in verschillende HTML pagina's.

Figuur 2-3: scenes

2.2.2 Symbolen en bibliotheken in Flash 5

In dit stuk hebben we het over symbolen, meer bepaald over graphics, buttons en movieclips. Deze symbolen worden in bibliotheken ondergebracht. Flash 5 laat niet toe dat symbolen dezelfde naam dragen.

Een symbool is een op zichzelf staande component die de gebruiker/ontwikkelaar kan bewaren

en hergebruiken. Het kan een tekening zijn, een animatie…

"A symbol at its most basic level is a thing in Flash that you can use time and time again. That

'thing' could be a simple picture, an interactive button, or even an entire mini-movie that runs

within your main movie. You can convert your existing movie content into symbols, or you can

create symbols from scratch – either way, you will be saving the completed symbol away so that

you can use it again later in your movies." 7


Flash 5 9

Het in een bibliotheek opgeslagen symbool is een soort sjabloon ("template"). Flash gebruikt die

template om een nieuwe kopie te creëren van het bewaarde symbool. Als de gebruiker een

kopie van een symbool op de stage plaatst, dan spreekt men van een instantie van dat symbool. Elke instantie is een uniek object, een exacte kopie van het symbool waarop de

instantie gebaseerd is. Er is een band tussen instantie en symbool. Als de gebruiker het

(onderliggend) symbool aanpast, dan worden alle instanties aangepast. Iedere individuele

instantie kan worden aangepast, zonder het (onderliggende) symbool te veranderen.

Er zijn drie types van symbolen: een graphic symbol, een button symbol en een movie clip

symbol. Ieder symbool heeft een aantal capaciteiten en heeft een welbepaald gedrag. Ieder

symbool heeft een eigen tijdslijn.

Grafische symbolen ("graphics") zijn statische beelden. Vandaar dat in de tijdslijn dikwijls slechts één frame staat. Vaak vertrekken designers van een aantal graphics om movieclips,

buttons… te maken. In veel van onze animaties hebben we die aanpak gevolgd.

Figuur 2-4: tijdslijnen van een graphic, een button en een movie clip

Knoppen ("buttons") voorzien een swiff bestand van interactiviteit. Aan de hand van knoppen kan de eindgebruiker navigeren in een Flash website, kan hij/zij acties starten of stopzetten…

De tijdslijn van een button ziet er anders uit en bepaalt hoe de knop (of een instantie ervan) zal

reageren op gebruikersinteractie. Er zijn vier frames, die elk een toestand van het gedrag van de

knop weergeven. De Up state geeft weer hoe de knop er in statische toestand (voor er interactie is van de kant van de gebruiker) uitziet. De Over state geeft weer hoe de knop er uitziet als de gebruiker met de muiswijzer over de knop beweegt. De Down state is de toestand waarbij de

Flash 5 10

gebruiker op de knop klikt.8

De Hit state is een onzichtbare toestand. Deze staat van de knop is niet zichtbaar op de stage. Deze toestand definieert het aanklikbare gedeelte van de knop. Het

is van belang deze toestand goed te implementeren. Een speciale knop, de "invisible button",

heeft een tijdslijn zonder keyframe in de up, over en down state. Enkel in de hit state staat een

keyframe. Een onzichtbare knop wordt b.v. gebruikt om een knop achter een stuk verwijzende

tekst te plaatsen. Een klik op de tekst heeft dan een bepaalde actie als resultaat. Een

onzichtbare knop wordt ook gebruikt om een versleepbaar gebied te implementeren. De knop

zal echter pas werken als we er acties aan toekennen. Die acties worden geschreven in

ActionScript (zie verder).

Het derde symbool is de Movie Clip. Movieclips (mc's) zijn in feite movies binnen een movie.

Het zijn op zichzelf staande animaties die, onafhankelijk van andere elementen op de

hoofdtijdslijn, kunnen afgespeeld worden. Van zodra de playhead op het keyframe aankomt

waar de mc is ingevoegd, wordt de mc afgespeeld. Movieclips kunnen verschillende lagen

bevatten die verschillende grafische componenten, animaties en geluid bevatten. Zelfs een

movieclip binnen een movieclip kan. (De animatie mc_binnen_mc in de map animaties is hier

een voorbeeld van (hierbij werd de mc van het vierkant ingevoegd in de mc van de cirkels.))

2.2.3 Tweening

"In Flash, animation is called tweening. This might seem an odd name, until you realize that it's

short for 'in-betweening', or the process of creating the transitional frames that go in-between the

keyframes." 9

Een animatie in Flash is gebaseerd op het principe van verandering in tijd. Als Flash 5 een

'tween' maakt, dan tekent het programma de frames tussen (in-between) twee cruciale

tijdstippen, die op hun beurt gedefinieerd zijn door de inhoud van keyframes. De sequentie

"keyframe, in-between frames, keyframe" is de essentie van een Flash animatie.

8 De gebruiker klikt met de linkermuisknop op de knop in de .swf. We hebben onderzocht of het mogelijk is om in Flash 5 acties toe te kennen aan de rechtermuisknop, zonder resultaat. Een klik op de rechtermuisknop geeft een menu weer, waar de gebruiker ondermeer informatie over de Macromedia Flash 5 Player terugvindt. Om een event van de rechtermuisknop te kunnen vastleggen is – waarschijnlijk – een implementatie in javascript nodig. We schrijven "waarschijnlijk", omdat onze implementaties niet gelukt zijn, wat ondermeer te wijten is aan onze beperkte kennis van de scripttaal. 9BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 34, op. cit.

Flash 5 11

(In de definitie in de inleiding hadden we het ook over verandering in ruimte. Een motion tween is daar de voorstelling van.) De snelheid van een animatie wordt in Flash 5 uitgedrukt in frames

per second (fps). Doorgaans gebruikt men een ratio van 12 fps.

In Flash zijn er twee soorten animatie/tweening. De shape tween (of animatie van vorm) en de motion tween (animatie van beweging). Een voorbeeld hiervan is de swiff tweening.swf uit de map animaties.

"A shape tween is a morphing operation, where the original object is transmogrified into a

different object, and a motion tween is the representation of an object moving around the stage." 10

Het idee achter shape tweening is dat op een tijdstip A een bepaald object op het scherm is

afgebeeld en op tijdstip B een ander object. Tussen A en B grijpt een graduele transformatie

plaats dat object A vervormt tot object B. (Zie animatie shape_tween.swf. in de map animaties)

Shape tweening werkt met (ongegroepeerde) vormen en niet met gegroepeerde vormen of met

symbolen. Het is mogelijk om symbolen te degroeperen.

Shape hints verhogen de controle over het vervormen van een object. Op die manier kan een

designer de vervorming op een bepaalde manier ontwikkelen. Shape hints 'leiden' het

vervormen van een object. Het is soms knoeien om een bepaald effect te bekomen. Oefening

baart kunst… (zie animatie shape_tween_hints.swf in de map animaties.)

Motion tweening is het (doen) bewegen van een object van punt A naar punt B. Motion tweening

werkt alleen met symbolen of met gegroepeerde vormen. De beweging is steeds lineair.

Een object kan via een pad, een motion guide, worden geanimeerd. Op die manier kunnen objecten niet-lineaire bewegingen uitvoeren. Een motion guide is onzichtbaar buiten de

editeeromgeving. De guide bevindt zich op een speciale laag onder het object dat de gebruiker

wil tweenen. (Binnen de editeeromgeving staat de guide als een laag boven het object.) Een

motion guide moet even lang zijn als de tijdslijn van het object dat wordt 'gegidst'. (Een

voorbeeld van een object dat geanimeerd wordt op een motion guide is casestudy.swf uit de

map animaties. De vier rode bollen, die samen een menu vormen, nemen als het ware een

bocht op het scherm.)


Flash 5 12

Als een gebruiker twee of meer objecten tegelijkertijd wil animeren, dan moet ieder object in een

aparte laag staan. Twee objecten kunnen op één laag bewegen als ze elk op een verschillend

punt in de tijdslijn worden geanimeerd (zie het voorbeeld twee_objecten_in_laag.swf uit de map

animaties).

Figuur 2-5: motion guide

2.2.4 Maskers

Een interessant hulpmiddel bij het opbouwen van animaties is het masker. Een masker verbergt

en toont op een selectieve wijze de inhoud van een Flash 5 movie, naargelang de positie van

het masker. Het laat toe een illusie van diepte, beweging, verlichting… te creëren.

Maskers worden gemaakt op een speciale "mask layer". Op die laag staat een symbool. Dat

symbool, een cirkel, een stuk tekst…, is het gat in het masker dat (een deel van) de inhoud van

de gemaskeerde la(a)g(en) toont. (Zie het voorbeeld tv.swf uit de map animaties) Een masker

kan statisch of dynamisch (geanimeerd) zijn (b.v. een movieclip). Het masker en de lagen die

het verbergt, moeten zijn gelockt.

Figuur 2-6: masker

Flash 5 13

2.3 Flash 5 ActionScript 11

Het stuk "Flash 5 ActionScript" behandelt de scripttaal in het programma. ActionScript werd in

Flash 4 geïntroduceerd. In Flash 5 zijn de mogelijkheden van de scripttaal uitgebreid. We

bespreken kort de omgeving waarin de gebruiker scripts kan schrijven. We verklaren enkele

termen en we bespreken een paar eenvoudige, maar belangrijke instructies. We hebben het

over de dot notatie en daarna geven we een woordje uitleg bij het testen van een Flash 5

bestand. We sluiten af met een korte theoretische beschouwing.

2.3.1 Omgeving

"ActionScript is what makes Flash a living, breathing, responsive program rather than just a

brilliant linear animation tool. ActionScript is what enables Flash to be interactive. […]

Interactivity, in this context, means that your Flash movie, when it's running in the user's browser, responds to something that the user does, or reacts to pre-defined set of conditions." 12

Vooraleer er interactiviteit optreedt, moet er een gebeurtenis ("event") plaatsvinden en worden

behandeld ("event handler"). In Flash 5 zal een muisklik op een knop een gebeurtenis op gang

brengen die behandeld zal worden door de instructies die aan de knop zijn toegekend. In Flash

5 zijn die instructies geschreven in ActionScript. De scripttaal voorziet de swiff van interactie,

niet de objecten.

De code kan de gebruiker in de "Actions" editor schrijven. (De gebruiker kan kiezen tussen de

"Normal mode" en de "Expert mode". In de "Normal mode" kiest de gebruiker een instructie uit

een lijst aan de linkerkant van het codevenster en Flash 5 plaatst de gewenste instructie in het

codevenster. Bijkomende parameters kunnen dan onderaan het scherm nog worden ingevuld. In

de "Expert mode" schrijft de gebruiker zelf de instructies neer.) De "Movie Explorer" geeft een

overzicht van alle objecten, frames en instructies. Persoonlijk vinden we dat het editeervenster

voor het schrijven van ActionScript gebruiksvriendelijker mag worden. Vooral bij het invullen van

11 Voor het stuk over ActionScript hebben we ons gebaseerd op volgende boeken: BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000; BHANGAL, Sham, Foundation ActionScript. Birmingham, Friends of ED, designer to designer, 2000; FENCZIK, Peter, FRANCESCATO, Rosana, Szabla, Ann, (eds.), Macromedia Flash 5. ActionScript reference guide. San Francisco, Macromedia, 2000. 12 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 308, op. cit.

Flash 5 14

de parameters in de Normal mode moet de gebruiker dikwijls dichtbij het scherm zitten om te

kunnen lezen wat waar moet worden ingevuld.

Figuur 2-7: movie explorer venster

Figuur 2-8: (frame) actions venster

Flash 5 15

De gebruiker kan ActionScript instructies toekennen aan (key)frames. De acties worden dan

uitgevoerd als de playhead een bepaald frame bereikt. In veel van onze animaties bevat het

laatste frame een stopinstructie die vermijdt dat de animatie opnieuw wordt afgespeeld. We

raden aan om in de .fla file een aparte laag te voorzien die enkel acties bevat.

De gebruiker kan ook instructies toekennen aan (instanties) van knoppen (en zelfs aan

instanties van movieclips). De gebruiker brengt dan door een muisklik (of een druk op een

bepaalde toets) een actie op gang die wordt behandeld door het ActionScript. De lezer moet

goed begrijpen dat een actie wordt toegekend aan een instantie van een symbool. Die instantie moet op de stage een (individuele) naam krijgen. Dit noemen we het instantiëren van een object. In het instance panel kan de gebruiker een naam opgeven.

Figuur 2-9: instance panel

2.3.2 Begrippen

Een variabele is een container waarin data, die kunnen veranderen, kan worden bewaard. In

Flash 5 kan de gebruiker literal values en expressions opslaan. Een literal is een 'vaste' variabele. Een expressie wordt geëvalueerd (en kan een waarde teruggeven).

Een datatype beschrijft de informatie die een variabele kan bevatten. In Flash 5 zijn er twee

soorten datatypes: primitieven en referenties . De primitieve datatypes zijn string, number en boolean. Strings zijn sequenties van karakters. Hun lengte is variabel en gaat van één enkel karakter tot een reeks van woorden. Numbers zijn double-precision floating-point getallen, waarop bewerkingen kunnen worden uitgevoerd. Booleans kunnen de waarde true of false

krijgen (soms omgezet naar 1 en 0 waar nodig).

De referentiële datatypes zijn object en movie clip. Een object is een verzameling van eigenschappen. Elke eigenschap heeft een naam en een waarde (waarvan het datatype

primitief óf referentieel is). Een referentie naar een object is een harde referentie.

Flash 5 16

Een movieclip werd eerder al gedefinieerd. Een referentie naar een movieclip is een zachte

referentie. Een zachte referentie verplicht het gerefereerd object niet te bestaan. Als het niet

bestaat, dan werkt de referentie simpelweg niet.

Een variabele kan globaal of lokaal gedefinieerd zijn. Een globale variabele is gedeeld over alle tijdslijnen. Het bereik van een lokale variabele is beperkt tot het stuk code waarin de variabele voorkomt (tussen een paar akkolades).

Een kleine opmerking vooraleer we van start gaan met de bespreking van een aantal instructies.

Flash 5 is hoofdlettergevoelig wat acties betreft. De instructie gotoandplay(1); werkt niet,

gotoAndPlay(1); wel. Flash 5 is niet case sensitive voor namen van variabelen.

Het gepresenteerde overzicht is selectief en onvolledig. We hebben het, bijvoorbeeld, niet gehad

over de objecten Date, Math, String… We hebben ook de de implementatie van een

(voorwaardelijke) keuze (if - else) en van een lus in ActionScript niet behandeld (while) 13

We

gaan ervan uit dat het voor de lezer interessanter is om een paar eenvoudige, maar

veelvoorkomende en krachtige event handlers en instructies van dichterbij te bekijken. We

beginnen met de "On Mouse Event" en de "onClipEvent" instructies. Daarna bekijken we de

instructies "goto", "play" en "stop".

2.3.3 Instructies

De instructie "On Mouse Event" is een event handler die de actie van de muis of van een toets

op een knop specificeert. Het argument (mouseEvent) kan één of meer van de volgende

parameters dragen: press, release, releaseOutside, rollOver, rollOut, dragOver, dragOut en

keypress. Alle argumenten, behalve keypress, zijn acties van de muis(wijzer). Bij een keyPress

veroorzaakt een druk op een toets op het toetsenbord een bepaalde actie. De lezer moet

onthouden dat deze acties worden toegekend aan een knop. Het is een knop die luistert naar

een actie van de muis of van het toetsenbord.

on(mouseEvent){

statement;

}

Flash 5 17

Stel dat een gebruiker een .swf in een HTML pagina heeft ingebed. Stel dat in de swiff een knop

gedefinieerd is, die een bepaalde actie zal uitvoeren als de gebruiker de letter "a" indrukt. De

gebruiker opent de HTML pagina en drukt op "a", maar er gebeurt niets. Hij/zij moet namelijk

eerst in het gebied van de movie klikken vooraleer het indrukken van de toets effect heeft.

De instructie "onClipEvent" is eveneens een event handler, maar heeft een bepaalde actie tot

gevolg die gedefinieerd is voor een instantie van een movie clip. Deze instructie kan slechts één

argument bevatten, te kiezen uit load, unload, enterFrame, mouseMove, mouseDown,

mouseUp, keyDown, keyUp of data. Als een gebruiker een actie toekent aan een movie clip,

bijvoorbeeld na een mouseDown event, dan betekent dit dat, om het even waar in de stage, een

muisklik tot de actie zal leiden die aan de mc is toegekend.

onClipEvent(movieEvent){

statement;

}

De ontwikkelaar van een website in Flash 5 moet oppassen wanneer hij/zij movieclips en

knoppen als navigatiemiddelen implementeert. Als er een mouseEvent aan een movieclip én

aan een knop, die in de stage staan, wordt toegekend, dan kunnen er conflicten optreden. Een

movieclip verwacht een muisklik ergens in het scherm, en dat kan ook op de plaats zijn waar de

knop staat.

Met de instructies goto, play en stop manipuleert Flash 5 het afspelen van een animatie.

"Play();" doet de playhead op de tijdslijn vooruit bewegen. "GotoAndPlay(scene, frame);" doet

net hetzelfde, maar de gebruiker kan een aantal argumenten meegeven, nl., de scene van het

volgende af te spelen frame. Het argument "frame" kan van een aantal types zijn: ten eerste kan

het een nummer zijn (ga naar frame 1, 5…); ten tweede kan het een expressie zijn (ga naar

frame 1 + 5 frames); ten derde kan het een frame label zijn (een naam die je aan een bepaald

frame meegeeft, bv., frame 2 heet "begin", in de code staat dan gotoAndPlay("begin")); ten

vierde kan de gebruiker de optie previous frame aanduiden; ten vijfde is de optie next frame

mogelijk.

13 De referentiegids van Macromedia biedt een volledig overzicht. FENCZIK, Peter, FRANCESCATO, Rosana, Szabla, Ann, (eds.), Macromedia Flash 5. ActionScript reference guide. San Francisco, Macromedia, 2000.

Flash 5 18

Een animatie kan er al gauw complex uitzien, enkel door de volgorde van de af te spelen frames

in een bepaalde sequentie te plaatsen.

"Stop();" stopt de tijdslijn. "GotoAndStop(scene, frame) doet net hetzelfde, maar ook hier kan de

gebruiker een aantal parameters meegeven (dezelfde als hierboven beschreven). De movie

stopt dan in het opgegeven frame van de opgegeven scene.

De beschreven instructies kunnen toegekend worden aan een object in de stage of aan een

frame in de tijdslijn. We geven een kort voorbeeldje. Een druk op een knop (dat het om een knop

gaat is van de eerste lijn af te lezen) heeft tot gevolg dat de scene met de naam "asi" vanaf

frame 5 wordt afgespeeld. (Er zijn andere voorbeelden te vinden in onze animaties.)

on (release) {

gotoAndPlay ("asi", 5);

}

In veel van onze animaties werken we met de instructies gotoAndPlay() en gotoAndStop().

Dikwijls voorzien we op het einde van een tijdslijn een stop()-actie om een eindeloze lus te

vermijden.

Maar dat is nog niet alles. De gebruiker kan een actie toekennen aan een welbepaalde instantie

op de stage, doorgaans aan de instantie van een movieclip. Hij/zij kan in ActionScript, b.v. de

opdracht geven om een bepaalde instantie 100 pixels naar links op te schuiven. De syntax die

Flash 5 daarvoor gebruikt heet de dot notatie. Deze methode laat toe om dynamische animaties op te stellen, gebaseerd op waarden (argumenten) die de eindgebruiker voorziet.

(Bijvoorbeeld door waarden op te geven in een inputbox.)

2.3.4 Dot notatie

"Dot notation in Flash and ActionScript is a way of expressing a path through a movie: it gives us a way of targeting a particular object and telling it what to do, irrespective of its position in the

movie's structure."14


Flash 5 19

on (release) {

_root.instantienaam.play();

}

De dot notatie is een heel krachtig hulpmiddel. Ze laat ondermeer toe eigenschappen van een

object in ActionScript te veranderen. Ze is ook van belang in de communicatie tussen de

verschillende tijdslijnen in een swiff. We geven nog een voorbeeld om het belang ervan te

onderstrepen. Het voorbeeld behandelt de interactie tussen tijdslijnen in een Flash 5 movie. Stel

dat de gebruiker een Flash 5 bestand heeft met een hoofdtijdslijn (of root timeline, _root genaamd), een movie clip mc.cirkels (met instantienaam cirkels), met daarin een movie clip

mc.draaiend_vierkant (met instantienaam vierkant). (Zie het voorbeeld mc_binnen_mc.swf uit de

map animaties.)

De gebruiker kan een object vanaf de hoofdtijdslijn aanroepen door een absoluut of een relatief

pad te specificeren. In de volgende voorbeelden stopt de root de instantie vierkant.

_root.cirkels.vierkant.stop(); (absoluut)

cirkels.vierkant.stop(); (relatief)

Subtijdslijnen kunnen hogerliggende niveaus, zelfs de main, manipuleren aan de hand van

parent. Opnieuw maakt Flash 5 daarvoor gebruik van een absoluut en een relatief pad. In het voorbeeld stopt de instantie cirkels de main.

_root.stop(); (absoluut)

_parent.stop(); (relatief)

Er is nog een andere manier om een tijdslijn vanuit ActionScript aan te spreken, nl., door gebruik

te maken van this. Stel dat de constructie "this.stop();" in de main staat, dan wordt de main gestopt. Staat dezelfde constructie in de tijdslijn van een movieclip, dan wordt de movieclip op

een bepaald tijdstip gestopt. "This" is een bijzonder handig pad, want het laat een movieclip toe

om de eigen properties te veranderen.

Flash 5 20

2.3.5 ECMAScript

ActionScript is een scripttaal gebaseerd op de ECMAScript Language Specification.15

(ECMAScript is afgeleid van JavaScript om te dienen als de internationale standaard voor de

JavaScripttaal.)

ECMAScript is een objectgeoriënteerde programmeertaal voor het uitvoeren van

bewerkingen/berekeningen en voor het manipuleren van bewerkbare/berekenbare objecten in

een hostomgeving. Het ECMAScript is in het specificatiedocument niet gedefinieerd als

computationeel volledig. Het voorziet niet in input van (externe) data of in output van berekende

resultaten. Men verwacht dat de omgeving, waarin het ECMAScript opereert, objecten en

andere facilteiten én hostspecifieke objecten voorziet.

Een scripttaal is een programmeertaal die gebruikt wordt om de voorzieningen van een

bestaand systeem te manipuleren, te customiseren en te automatiseren. In dergelijke systemen

is een nuttige functionaliteit al aanwezig in de user interface. De scripttaal is een een

mechanisme om die functionaliteit open te stellen voor programmacontrole. Op die manier

voorziet het werkend systeem in een hostomgeving van objecten en faciliteiten die de

capaciteiten van de scripttaal vervolledigt.

We hebben het hier verder niet over de specificaties. In bijlage zit een kort theoretisch stukje dat

gebaseerd is op het betreffende ECMAScript specificatie document. We gaan ook niet verder in

op de verschillen en de overeenkomsten tussen JavaScript en ActionScript.

Ons overzicht van ActionScript is eerder beperkt gebleven. Ook hier was het niet de bedoeling

om een tutorial te schrijven, maar om de lezer van de nodige bagage voor deze scriptie te

voorzien. Bovendien, en dat moeten we eerlijk toegeven, is onze kennis van ActionScript na zes

weken nog niet toereikend om alle elementen ervan te kunnen ontleden.

15 ECMA, Standardizing Information and Communication Systems, ECMAScript language specification. Standard ECMA-262, 3rd edition, december 1999. Geneva, ECMA, 1999, 188 p.

Flash versus PowerPoint 21

3 Flash versus PowerPoint Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint

3.1 Inleiding

De uitleg die hierna zal volgen, houdt verband met hoe je een presentatie / animatie moet

opbouwen in Flash naar analogie aan PowerPoint en dan wel in het meest specifieke geval

waarbij het zo is dat er iets nieuws verschijnt, telkens als je op de muis klikt. Er wordt dus van

het ene effect naar het andere overgegaan (binnen één slide) nadat op de muis werd geklikt.

Volgende figuur visualiseert een dergelijke PowerPoint-presentatie.

Figuur 3-1: structuur van een PowerPoint-presentatie

Het onderscheid tussen presentatie en animatie is heel subtiel: met animatie wordt in dit

hoofdstuk dan eerder het volgende bedoeld: analoog als bij een presentatie, is het dan ook zo

dat stap per stap naar het volgende wordt overgegaan, maar de zaken die stap voor stap

verschijnen, zijn dan niet meer louter tekstueel, maar bestaan dan uit meer grafische objecten.

Voor een voorbeeld van een dergelijke animatie, zie besluit.swf in de map presentatie. De

methode die we hieronder zullen uitleggen om een presentatie / animatie op te bouwen in Flash,

is heel handig om dergelijke animaties te maken die ook via muisklik naar een volgend "effect"

springen en die op die manier toelaten iets stap voor stap te kunnen uitleggen.

(De animatie powerpoint.swf uit de map presentatie is tevens op deze manier gemaakt.)

Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 22

In de rest van deze paragraaf wordt voor ieder stuk apart, namelijk voor effect, slide en

presentatie, uitgelegd op welke manier in Flash dient te worden te werk gegaan om een analoog

effect als in PowerPoint te verkrijgen.

3.2 Opbouw effect

3.2.1 Aanpak

3.2.1.1 Effecten analoog aan PowerPoint

Vrijwel alle effecten die in PowerPoint worden gebruikt, kunnen worden nagemaakt in Flash:

denken we maar aan typeffect, kader uit, kader in, dissolve-effect, invoegen vanaf links, rechts,

boven, onder, …

Een voorbeeld van elk effect kan u vinden bij EffectsPP.swf in de map presentatie.

Om al deze effecten te verkrijgen, kunnen we de volgende onderverdeling maken volgens

opsplitsing van werkmethode in Flash.

3.2.1.1.1 Masker

Eerst en vooral kan er met maskers worden gewerkt. Door met maskers te werken, kunnen de

effecten kader uit, kader in, typeffect en dissolve-effect worden nagebootst.

Dit laatste effect is beter in PowerPoint. Om het laatste effect na te bootsen in Flash, werd

gebruik gemaakt van twee maskers: één waarbij een soort dambordpatroon van links naar

rechts beweegt en één waarbij een kopie van dat dambordpatroon tegelijkertijd met het andere

van rechts naar links beweegt.

3.2.1.1.2 Motion-tweening

Ten tweede kan er gebruik gemaakt worden van motiontweening. Aangezien dit zorgt voor

beweging van één keyframe naar een ander, kunnen met deze methode allerlei effecten die

beweging veronderstellen, zoals invoegen vanaf links, rechts, boven, onder, etc., worden

nagebootst.


3.2.1.2 Effecten niet analoog aan PowerPoint1

Met Flash kunnen uiteraard nog veel geavanceerdere effecten worden verkregen (zie file

EffectsFlash.swf onder map presentatie. Merk hierbij op dat je bij dit voorbeeld op de muis moet

klikken om een volgend effect te kunnen zien!).

Ook hierbij kan dan van maskers gebruik gemaakt worden, zoals in de eerste twee effecten te

zien is. In tegenstelling tot het gebruik van maskers in de vorige paragraaf, zijn de maskers nu

geen rechthoeken die als maskerlaag boven de tekst liggen. Nu is het zo dat de tekst zelf de

maskerlaag vormt en dat ze de bewegende ondergrond zichtbaar maakt.

Het laatste effect is een effect dat werd gemaakt door gebruik te maken van de methode

"shape-tweening". Bij shape-tweening is het belangrijk op te merken dat er niet met symbolen of

groups kan gewerkt worden, er moet steeds break apart gedaan worden.

3.2.2 Voor- en nadelen t.o.v. PowerPoint

Het spreekt voor zich dat de effecten te maken met Flash veel geavanceerder kunnen zijn dan

de effecten die je maar kan verkrijgen in PowerPoint.

In PowerPoint echter is het misschien iets eenvoudiger om een bepaald effect aan iets toe te

kennen: er moet hier immers maar naar het scherm voor aangepaste animatie gegaan worden

en er kan onmiddellijk uit het gekozen effect worden gekozen.

Bij Flash ligt dit anders, aangezien eerst op de tijdslijn de juiste lagenstructuur moet worden

gehanteerd om het gewenste effect te kunnen verkrijgen.

Deze lagenstructuur moet worden overgenomen en in de tijdslijn van een movieclip worden

geplaatst. Dit kan gemakkelijk door alle lagen te selecteren, alle frames te knippen en dan in de

nieuw gemaakte movieclip de frames te plakken. Zo bekomt men meteen de movieclip die zorgt

voor een bepaald effect. Deze movieclip moet dan worden ingevoegd in de frames in de

structuur van de tijdslijn die we bij de opbouw van een slide hierna zullen bespreken.

1 Teksteffecten zijn ook heel gemakkelijk en vlug te maken m.b.v. de third-party-tool Swish, meer info is te vinden op http://www.swishzone.com/help/index.html. Het is een nieuwe Windowsapplicatie die allerlei teksteffecten automatisch genereert zoals exploderen, typemachine, golven, … Er moeten dus geen tweens meer voor alle letters apart worden aangemaakt. De gegenereerde effecten kunnen dan geëxporteerd worden onder swf-formaat.


3.3 Opbouw slide

3.3.1 Aanpak

Hiervoor werden verschillende methoden gehanteerd. We zullen nu elk geval apart bespreken

en uitleggen hoe we tot de meest optimale methode zijn gekomen.

3.3.1.1 Werken met labels

3.3.1.1.1 Uitleg methode

Volgende figuur toont met welke lagenstructuur er op de tijdslijn werd gewerkt.

Figuur 3-2: tijdslijnstructuur met labels

De file labels.fla in de map animaties verduidelijkt tevens onderstaande uitleg. Merk op dat voor

het gemak nog niet met effecten werd gewerkt, maar dat gewoon stuk per stuk iets nieuws

verschijnt.

Op de onderste laag staan alle zaken die stuk per stuk moeten verschijnen. In het eerste blok

van frames werd dan het eerste stuk gestopt. Aan het tweede blok van frames werd dan het

tweede stuk dat er moet bijverschijnen, toegevoegd (het eerste stuk moet er ook nog inzitten,

anders zal het niet meer zichtbaar zijn indien naar het tweede stuk wordt overgegaan!).

Om naar een volgend stuk te springen, werd hier gewerkt met buttons waaraan de actie

gotoAndStop("Label") werd toegekend. De knoppen werden in de laag erboven aangebracht.

Hierbij is het echter zo dat er per knop een nieuw label moet gespecificeerd worden. Zoals op

voorgaande figuur te zien is, moet aan de eerste knop de actie


on (release) {

gotoAndStop ("L2");

}

worden toegekend, om naar het volgende stukje te kunnen springen. In de buttonlaag boven het

tweede blok frames, moeten dan twee buttons voorzien worden, waarbij de linkse button de

actie krijgt dat hij naar L1 moet springen en in de actie voor de rechtse button moet dan als label

L3 worden ingevuld. De linkse knop springt dan naar het vorige stukje en het is meteen duidelijk

dat de rechtse knop dan naar het label L3 springt en m.a.w. naar het blok frames waaraan het

derde stuk is toegevoegd.

Voor de acties toegekend aan de andere buttons, kan dan een analoge uitleg worden gegeven.

Steeds is het zo dat het juiste label dient ingegeven te worden dat ervoor zal zorgen dat naar het

vorige en volgende stukje wordt overgegaan. De commentaar in de middelste laag op de figuur

maakt dit duidelijk.

3.3.1.1.2 Nadelen

Uit voorgaande uitleg blijkt dat aan iedere button een aparte actie moet worden toegekend, die

niet dezelfde kan genomen worden voor alle buttons, aangezien iedere keer een ander label

dient gespecificeerd te worden om naar het volgende en vorige stuk te kunnen springen. De

noodzaak voor het toekennen van aparte code aan iedere knop is dus een eerste nadeel.

Een tweede nadeel wordt duidelijk wanneer men de file labelsTussengevoegd.fla (map

animaties) bekijkt, met de volgende lagenstructuur:

Figuur 3-3: tijdslijnstructuur met labels bij tussenvoeging

Bij dit voorbeeld werd van de vorige situatie vertrokken, maar tussen het eerste en tweede

stukje werd er iets tussengevoegd in een blok van frames dat werd gelabeld met het label met


als naam "tussengevoegd". Wanneer niets aan de codes van de buttons wordt veranderd, zal de

eerste button nog steeds naar L2 springen, maar dit is niet meer juist, want er wordt dan niet

naar het volgende stuk overgegaan, maar naar het tweede volgende stuk. Er zou immers naar

het stukje dat tussengevoegd werd, moeten worden overgegaan.

In de code voor die button zou dus m.a.w. het label L2 moeten vervangen worden door het label

tussengevoegd.

Het label in de code toegekend aan de linkse button, in de laag boven de laag met de blok

frames gelabeld met L2, zou dan eveneens moeten veranderen, nu van L1 naar tussengevoegd,

om naar het vorige stuk te springen en niet naar het tweede vorige stuk.

De code van sommige buttons moet dus worden aangepast bij tussenvoegen, omdat anders niet

meer juist wordt overgegaan naar een volgend (vorig) stuk.

Een laatste nadeel van deze methode is dat, als er iets wordt tussengevoegd, dat hetgeen werd

tussengevoegd in ieder blok van frames, dat volgt op het tussengevoegde blok van frames, zou

moeten herhaald worden.

Dit nadeel is niet te wijten aan het feit dat met labels gewerkt wordt, maar komt wel door de

gehanteerde structuur op de tijdslijn, namelijk dat voor alle zaken die stuk per stuk verschijnen,

dat die maar op één laag worden gepositioneerd. We zullen later zien dat dit probleem kan

worden opgelost door te werken met aparte lagen voor ieder stuk dat er moet bijkomen!

Tot slot nog een laatste opmerking: we hadden in het begin gezegd dat in het voorbeeld

labels.fla niet met effecten werd gewerkt. Je kan echter volledig op analoge wijze van het ene

effect naar het andere overgaan, door van dat effect met zijn tijdslijnstructuur (die we in het

puntje "opbouw effect" hebben besproken) een movieclip te maken en die movieclip in de

verschillende blokken frames in te voegen in de tijdslijnstructuur die hier werd aangegeven.

3.3.1.2 Werken zonder labels

Door de vele nadelen van de vorige methode, moest dus een ander alternatief worden gezocht.

Om aan het euvel van verschillende acties per button te kunnen verhelpen, werd gekozen voor

de volgende oplossing: een actie gebruiken die voor alle buttons dezelfde kan worden genomen.

Aan een button werd dan ook de actie prevFrame() toegekend om naar het vorige effect terug te

kunnen keren. Om naar het volgende effect over te gaan, volstond het dan om aan de rechtse

knop de actie nextFrame() toe te kennen.


Dit had meteen zijn implicaties op de positionering van de verschillende zaken en structuur van

lagen op de tijdslijn. Hierna bespreken we twee methoden.

3.3.1.2.1 Aparte opeenvolgende keyframes in één laag per effect

De eerste methode bestond erin om met de volgende lagenstructuur te werken:

Figuur 3-4: tijdslijnstructuur met aparte opeenvolgende keyframes voor opbouw slide

De effecten werden dus in aparte opeenvolgende keyframes op één laag geplaatst. Op die

manier zorgden de methodes prevFrame() en nextFrame() er immers voor dat naar het vorige

respectievelijk volgende effect kon worden overgegaan.

In het eerste keyframe bevindt zich dan het eerste effect. Het tweede keyframe is dan een kopie

van het eerste met een effect eraan toegevoegd.

Het voordeel van deze methode is dus dat aan alle buttons om naar het volgende effect te gaan,

de volgende uniforme actie kon worden toegekend:

on (release) {

nextFrame ();

}

Merk op dat er tevens naar het volgende effect kan worden overgegaan door op de Page Down

toets te drukken (analoog aan PowerPoint), wanneer je

on (release, keyPress "") als eerste "statement" van de code specificeert.

Deze methode had echter als belangrijk nadeel dat, wanneer er iets wou veranderd worden, b.v.

aan de positie van alle elementen of aan de grootte ervan, dat niet alle elementen in één keer

konden worden aangepast. Je kon wel de volledige laag met alle effecten selecteren (de aparte

keyframes werden dan ook wel in zwart aangeduid en geselecteerd), maar als je dan alles


verplaatste of veranderde van grootte, dan werden de veranderingen slechts toegepast op het

laatste keyframe en niet op alle effecten die in alle voorgaande keyframes ook aanwezig waren.

Als belangrijk nadeel blijft echter ook, analoog als bij de vorige methode, dat, wanneer je een

effect wilt tussenvoegen, je het effect zou moeten herhalen in ieder keyframe dat volgt op het

keyframe waaraan het tussengevoegde effect is toegevoegd. Dit zou kunnen worden opgelost

door te werken met een aparte laag met een blok frames waarin het tussengevoegde effect zit,

en waarvan het keyframe begint juist na het keyframe dat werd tussengevoegd. Een voorbeeld

hiervan is te vinden in de file aparteKeyframesTussengevoegd.fla in de map animaties.

Dit brengt ons meteen bij de volgende methode waar met aparte lagen per effect, dat wordt

toegevoegd, gewerkt wordt.

3.3.1.2.2 Aparte lagen per effect

De lagenstructuur die op de tijdslijn gehanteerd wordt, ziet er als volgt uit:

Figuur 3-5: tijdslijnstructuur met aparte lagen per effect

In de file lagen.fla uit de map presentatie is van deze optimale methode om de overgangen in

een slide te realiseren, gebruik gemaakt. Hierbij zie je ook duidelijk dat in de aparte lagen

telkens de verschillende movieclips, die instaan voor de verschillende effecten, zijn aangebracht.

Per nieuw effect dat moet verschijnen, moet een nieuwe laag worden aangebracht, waarin de

desbetreffende movieclip, dat het effect realiseert, is ingevoegd. Het beginframe van die laag

moet telkens één frame verder staan dan het beginframe van de laag eronder. Dit is opdat met


de methodes nextFrame() en prevFrame() nog correct naar het volgende en vorige effect zou

kunnen worden overgegaan. Zoals blijkt uit voorgaande figuur is dit wel degelijk het geval!

Deze methode is de optimale methode aangezien ze alle nadelen van alle vorige methodes

wegwerkt.

Eerst en vooral kan er dezelfde code aan alle knoppen worden toegekend, namelijk nextFrame()

en prevFrame(). Er kan tevens gewerkt worden met een andere navigatiemogelijkheid, namelijk

met een continue movieclip (zie verder).

Als er een effect moet worden tussengevoegd, volstaat het een nieuwe laag op de juiste plaats

tussen te voegen en alle erboven liggende lagen op te schuiven (zodat er nog steeds wordt voor

gezorgd dat de beginframe van iedere laag juist één verder staat dan de beginframe van een

laag eronder). Doordat met aparte lagen wordt gewerkt, is het dan niet meer noodzakelijk het

toegevoegde effect aan de rest toe te voegen, omdat het toegevoegde effect automatisch in de

rest zichtbaar is, aangezien het om een aparte laag gaat!

Als laatste voordeel kunnen we hier het volgende vermelden. In tegenstelling tot de vorige

methode kan hier zonder problemen de positionering van alle effecten net als de grootte ervan

worden aangepast: de verschillende lagen waarin de movieclips van de verschillende effecten

zijn ingevoegd, kunnen immers heel gemakkelijk allemaal samen in één keer geselecteerd

worden en als je dan op de stage de elementen verplaatst of verandert van grootte, dan zijn

deze veranderingen meteen voor alles van toepassing!

Het spreekt vanzelf dat deze methode dient gehanteerd te worden wanneer men van één effect

naar een ander wil overspringen, aangezien ze geen enkel nadeel heeft!

3.3.1.3 Navigatiemogelijkheden

Tot hiertoe hebben we steeds gesproken over het werken met buttons waaraan de acties

nextFrame() en prevFrame() werden toegekend. Er kan echter ook gewerkt worden met wat wij

hier verder een continue movieclip zullen noemen. Dit is een speciale soort movieclip (zie

verder) die ervoor zorgt dat de beste analogie met PowerPoint wordt verkregen doordat

eveneens gewoon op de muis hoeft gedrukt te worden om naar het volgende effect te gaan,


maar waarbij je dan geen handje meer ziet (wat uiteraard wel het geval is indien je van buttons

gebruik maakt), maar effectief een pijltje zoals dat ook het geval is bij PowerPoint.

Hieronder worden nog eens beide navigatiemogelijkheden nader toegelicht.

3.3.1.3.1 Buttons met actie nextFrame() en prevFrame()

Een voorbeeld van gebruik van buttons met deze acties eraan toegekend, kan u vinden in

kortstePad.swf in de folder presentatie. Hierbij zal je in de fla-file zien dat nog met de minder

goede methode van aparte opeenvolgende keyframes in één laag werd gewerkt, aangezien

toen de beste methode van aparte lagen per effect nog niet gevonden was.

Er werden echter ook enkele varianten op deze buttons aangebracht.

Om b.v. gelijk waar te kunnen klikken en niet exact op een bepaalde kleine button, werd eens

gewerkt met één grote button. Dit kan je b.v. zien in de file gradient3.swf in de map animaties.

Er kan ook gewerkt worden met één grote invisible button. Dit is te zien in de file lagen2.swf

onder animaties. (De zichtbare knop is hier dan een knop om naar de volgende slide over te

gaan, maar de overgang tussen verschillende slides, komt maar aan bod in het stukje "opbouw

presentatie", zie verder)

3.3.1.3.2 Continue movieclip

I.p.v. buttons met de actie nextFrame() en prevFrame() eraan toegekend, kan men ook gebruik

maken van een movieclip die de timeline stillegt van de movieclip waarin hij is ingebracht, zelf

begint te spelen en pas als de movieclip zijn laatste frame heeft afgespeeld, terug de

parentmovieclipstimeline doet afspelen. Deze manier van werken zorgt ervoor dat er niet met

knoppen hoeft gewerkt te worden en dat overal in het scherm kan geklikt worden en dat de

muiscursor niet verandert in een handje aangezien het niet gaat om een button! Dit vertoont dus

volledig dezelfde functionaliteit als het springen naar een volgend effect via een simpele muisklik

zoals bij een presentatie in PowerPoint.

Merk op dat deze navigatiemogelijkheid dus gebruikt kan worden wanneer de effecten op de

tijdslijn zijn geordend volgens de meest optimale methode nl. in aparte lagen per effect: doordat

de parentmovieclip immers terug begint af te spelen, wordt één frame verder in die tijdslijn

gegaan en aangezien de beginframe van een laag van een volgend effect één verder

gepositioneerd was dan de beginframe van de laag eronder, wordt dus weldegelijk naar een

volgend effect overgegaan m.b.v. deze navigatiemogelijkheid!


De praktische implementatie van de laatste manier van werken met een movieclip, gebeurt dan

als volgt:

op de tijdslijn van de movieclip moet in het eerste frame de volgende code worden voorzien:

_parent.stop();

stop();

Let hierbij op het feit dat de volgorde van deze twee statements van belang is. Indien immers de

tijdslijn van de "continue movieclip" eerst zou gestopt worden, zou er geen middel meer zijn om

de parentmovieclipstijdslijn aan te spreken en te controleren. Er moet dus eerst gezegd worden

aan de tijdslijn van de parentmovieclip dat ze moet stoppen vooraleer de movieclip zichzelf doet

stoppen.

In het laatste keyframe voorziet men dan uiteraard de actie _parent.play(); om de tijdslijn van de

parentmovieclip terug aan te spreken en verder te laten spelen.

Er kan hierbij uit twee alternatieven gekozen worden: ofwel specificeer je enkel de voorgaande

acties in het eerste en laatste frame van de tijdslijn van de continue movieclip, ofwel maak je ook

nog een bepaald effect aan dat kan worden afgespeeld. Het verschil wordt duidelijk als je de file

lagen uit de map presentatie vergelijkt (ga hiertoe b.v. naar mc.slide1 en ga naar control: test

scene en druk op de muis, dan zie je dat je van het ene effect naar het andere overgaat net

zoals in PowerPoint) met de file gradient5 uit de map animaties. In de laatste file werd immers

naast de vorig beschreven acties ook een bepaalde animatie ingebracht: nl. het vervagen van

de tekst via een motiontween. Wanneer je dus gradient5.swf bekijkt, zie je dat eerst telkens

volledig de "animatie" van het vervagen afspeelt eer naar het volgende effect wordt overgegaan.

Het spreekt vanzelf dat het eerste alternatief (nl. enkel de vorige beschreven acties

implementeren in het eerste en laatste frame en geen bijkomende "animatie" voorzien op die

tijdslijn) het beste is om vlug van het ene effect naar het volgende over te gaan.

Er is echter nog een laatste stap te kort (naast het noodzakelijk specificeren van de voorgaande

acties in het eerste en laatste frame van de tijdslijn van de continue movieclip) en wel de

volgende:

we moeten uiteraard nog de continue movieclip naar de stage slepen en volgende acties aan de

instantie ervan toekennen:

onClipEvent (mouseDown) {

play();

}


Dit stukje code zorgt ervoor dat, wanneer er op de muisknop geduwd wordt, de movieclip begint

te spelen. Het maakt hierbij niet uit waar je staat met je muiscursor in het scherm (in

tegenstelling tot bij een button, waarbij er maar iets gebeurt wanneer je met je muis in het

gebied van de hitstate zit), omdat de event mouseDown gedetecteerd wordt, zodra de muisknop

ingedrukt wordt.

Merk op dat de laatste code dus noch aan de tijdslijn van de movieclip noch aan die van de

tijdslijn van de parentmovieclip is toegekend, maar aan de movieclip zelf. (Door het aan de

movieclip zelf toe te kennen, en niet aan de tijdslijn van de movieclip, kunnen verschillende

acties aan verschillende instanties van eenzelfde movieclipsymbool worden toegekend.

Wanneer de acties echter aan de tijdslijn van de movieclip zouden worden toegekend, dan

zouden deze acties meteen voor alle instanties van die movieclip geldig zijn. Hieruit blijkt

meteen het voordeel van de mogelijkheid om sedert Flash5 nu ook acties aan een

movieclipinstantie zelf toe te kennen!)

3.3.2 Samenvatting

We hebben de beste methode in Flash gevonden om de overgang tussen verschillende effecten

mogelijk te maken. Voor de lagenstructuur dient met aparte lagen per effect gewerkt te worden

waarbij het beginframe van een bepaalde laag steeds één verder moet liggen dan het

beginframe van de laag eronder. Wanneer met effecten wil gewerkt worden, moet gewoon per

laag dan de movieclip die voor dat effect instaat, ingevoegd worden. Als navigatiemogelijkheden

kan men dan zowel buttons met de acties prevFrame() en nextFrame() als een continue

movieclip gebruiken.

3.3.3 Volgorde van effecten verwisselen

Soms is het in PowerPoint niet zo handig om de volgorde van de effecten te veranderen. Stel

b.v. dat je het geval hebt, net zoals op slide 5 uit presentatieMiekeJeroen.ppt uit de map

presentatie te zien is, dat je eerst de "hoofdtitels" wilt laten verschijnen en dan pas de ondertitels

van dat eerste stuk. Dan werd dit in PowerPoint opgelost door te werken met aparte tekstvakken

en voor elk van die tekstvakken dan de volgorde in te stellen. Wanneer echter geen aparte

tekstvakken zouden worden gecreëerd, dan zou enkel kunnen geordend worden op het tweede


niveau en dan zou sowieso de tweede hoofdtitel verschijnen nadat alle kleine ondertitels ook

reeds verschenen waren.

Om te tonen dat je in Flash heel gemakkelijk de volgorde van effecten kan verwisselen, werden

twee files gemaakt volgordeEffecten.fla en volgordeEffectenAnders.fla uit de map animaties. De

eerste file toont de volgorde die je zou hebben indien je in PowerPoint zou geordend hebben op

het tweede niveau, dus m.a.w. de tweede "hoofdtitel" verschijnt nadat alle ondertitels van de

eerste "hoofdtitel" op het scherm zijn gekomen. De tweede file is dan die welke hoort bij de

situatie analoog aan de manier van werken met tekstvakken in PowerPoint, m.a.w. waarbij eerst

de twee hoofdtitels verschijnen en dan pas de rest. Voor volgordeEffectenAnders.fla werd

uitgegaan van volgordeEffecten.fla, maar aangezien het 7e effect op de tweede plaats moest

verschijnen, werd gewoon boven de onderste laag (met het eerste effect) een nieuwe laag

gecreëerd. Daarin werd dan het zevende effect gestopt. Voor de rest diende dan enkel die

oorspronkelijke zevende laag verwijderd te worden en tevens diende ervoor te worden gezorgd

dat nog steeds voor elke laag geldig was dat de beginframe juist één verder stond dan de

beginframe van de laag eronder.

3.3.4 Voor - en nadelen t.o.v. PowerPoint

Zoals blijkt uit het vorige puntje, kan het in Flash handiger zijn wanneer de volgorde van

sommige effecten moet veranderd worden. Er dienen dan immers geen nieuwe aparte

tekstvakken te worden aangemaakt, zoals dat in PowerPoint wel nodig kan zijn. Bovendien is

het zo, dat wanneer met zeer veel effecten wordt gewerkt en de volgorde dient te worden

veranderd, het effect bij PowerPoint op de juiste plaats moet worden gebracht door het in het

aangepaste animatievenster zoveel als nodig naar boven of naar beneden te verplaatsen via de

pijltjestoetsen. Vooral indien het aantal effecten zeer groot is, kan dit een nutteloze langdurige

bezigheid zijn. In Flash is dit probleem vlug opgelost aangezien enkel een nieuwe laag met het

effect op de juiste plaats dient te worden toegevoegd, en ervoor moet gezorgd worden dat de

beginframe van iedere laag juist één verder staat dan het beginframe van de laag eronder.


3.4 Opbouw presentatie

3.4.1 Opbouw presentatie analoog aan PowerPoint

3.4.1.1 Methode2

Om een overgang tussen verschillende slides te maken, is het heel eenvoudig. Je maakt van

iedere slide een movieclip (met op de tijdslijn ervan de lagenstructuur die reeds besproken werd

in voorgaande paragraaf, namelijk met aparte lagen per effect) en die movieclip voeg je dan in in

een apart keyframe op één laag. Volgende figuur verduidelijkt dit.

Figuur 3-6: tijdslijnstructuur met aparte opeenvolgende keyframes voor opbouw presentatie

In de laag slides bevinden zich achtereenvolgens aparte keyframes met in elke keyframe de

movieclip van een slide. Deze figuur hoort bij de file lagen.fla in de map presentatie. Om van de

ene keyframe naar de andere en dus van de ene slide naar de andere over te gaan, kunnen

verschillende navigatiemogelijkheden gebruikt worden.

3.4.1.2 Navigatiemogelijkheden

Ook hier kunnen van dezelfde navigatiemogelijkheden gebruik gemaakt worden als die welke

gebruikt konden worden bij de navigatie tussen verschillende effecten binnen één slide.

Als eerste zouden dus de buttons met de acties prevFrame() en nextFrame() kunnen vermeld

worden, om naar de vorige respectievelijk volgende slide over te gaan.

2 Deze methode werd ook gebruikt op de volgende site http://lts.ncsu.edu/instruction/guides/intro_flash/introduction.html, waarbij er wordt uitgelegd hoe een presentatie naar analogie aan PowerPoint in flash kan gemaakt worden. Het is hier echter wel zo dat er geen effecten binnen één slide zijn, en dat er gewoon moet overgegaan worden van de ene slide naar de andere.


Ten tweede zou ook hier een continue movieclip kunnen worden gehanteerd, maar hierbij dient

wel het volgende te worden opgemerkt.

Indien b.v. gewerkt werd met een continue movieclip als navigatiemogelijkheid tussen de

verschillende effecten binnen één slide, waaraan de actie onClipEvent (mouseDown) {play();}

werd toegekend, dan dient hier nu een continue movieclip te worden geïmplementeerd wiens

instantie nu niet de actie onClipEvent (mouseDown) {play();} meekrijgt, maar de actie

onClipEvent (keyDown) {play();} of onClipEvent (keyUp) {play();}.

Volgende combinaties zijn dus mogelijk en kunnen dus als volgt nog eens op een rijtje worden

gezet: indien als navigatie binnen een slide tussen de verschillende effecten, een button werd

gebruikt, dan kan voor de navigatie tussen de slides zowel een button als een continue

movieclip gebruikt worden.

Indien echter als navigatie binnen één slide, een continue movieclip werd gebruikt, dan kan ook

nog steeds een button aangewend worden, maar indien wil gewerkt worden met een continue

movieclip voor de navigatie tussen de slides i.p.v. een button, dient er voor gezorgd te worden

dat niet gereageerd wordt op dezelfde event als die welke bij de instantie van de movieclip,

horende bij de navigatie binnen één slide, werd gespecificeerd.

3.4.1.3 Voor- en nadelen t.o.v. PowerPoint

Je zou kunnen stellen dat Flash een voordeel biedt doordat met hoger vernoemde methode

onmiddellijk naar de volgende slide kan worden overgegaan, zonder dat alle effecten binnen die

slide hoeven overlopen te worden. In PowerPoint is dit niet zo (je zou immers eerst alle effecten

binnen één slide moeten overlopen tijdens de diavoorstelling eer je aan de volgende dia

geraakt, tenminste als je de rechtermuisknop niet gebruikt om naar een welbepaalde dia over te

gaan), maar wanneer dit echt wenselijk is, zou dit onmiddellijk in PowerPoint kunnen worden

opgelost door een knop naar de volgende dia te voorzien. Van een echt voordeel t.o.v.

PowerPoint is dus niet direct sprake.

3.4.2 Opbouw presentatie niet analoog aan PowerPoint

Met de methodes en ideeën die in de voorgaande stukken werden toegelicht, kunnen tevens

"presentaties" worden gemaakt die niet zo analoog aan PowerPoint zijn, maar die meer weg

hebben van webgebaseerde toepassingen. Hieronder worden enkele ideeën naar voor

gebracht.


3.4.2.1 Werken met levels

Er kunnen ook meer geavanceerde presentaties worden gehouden. Een voorbeeld van zo'n

"geavanceerdere presentatie" kan men vinden bij levels2.swf in de map animaties. Merk op dat

dit enkel een heel eenvoudig voorbeeld is van het idee dat we voor ogen hadden. Het voorbeeld

dient enkel om het idee weer te geven, maar zou eigenlijk nog moeten aangepast worden (de

windows "contact" en "links" zouden nog moeten worden vergroot en er zou nog een movieclip

in elk van die windows moeten komen die een overgang tussen verschillende slides mogelijk

maakt, net zoals dat het geval is in het eerste window "about").

We zullen hier nu enkel kort het principe van levels2.swf aanhalen.

Aan elk van de buttons bovenaan is de actie toegekend dat ze een movie of swf-file moeten

inladen op een verschillend level of niveau. Dit kan gebeuren met de actie

loadMovieNum("file","level"). Aan de eerste knop is dus de actie

on (release) {

loadMovieNum ("EffectsInWindow.swf", 1);

} toegekend. De andere in te laden movies zijn dan WinContact2.swf op het tweede level en

WinLinks2.swf op het derde level.

In levels2.swf is duidelijk te zien dat de levels a.h.w. lagen boven elkaar zijn en dat hetgeen op

een hoger level staat, datgene wat op het level eronder staat, bedekt.

Zorg er hierbij wel voor dat de movies die op de verschillende levels moeten komen, dezelfde

movie-eigenschappen hebben als de movie die op het grondlevel (level0) komt te staan (met

dezelfde eigenschappen wordt b.v. bedoeld dat de resolutie van de stage gelijk genomen moet

worden).

In dit voorbeeld zijn de swf's allemaal draggable windows die versleept, verkleind, vergroot of

gesloten kunnen worden. (Voor de praktische implementatie hiervan, verwijzen we naar

hoofdstuk 5.)

In zo'n window kan er dan voor gezorgd worden dat verschillende slides kunnen worden

doorlopen. Hoe dit gebeurt en waar je op moet letten, wordt tevens in hoofdstuk 5 besproken.

We kunnen echter hier al aanhalen dat dit mogelijk is doordat van de lagenstructuur die juist

werd besproken voor de overgang tussen verschillende slides, een movieclip werd gemaakt die

dan in het eerste keyframe van dat draggable window werd ingevoegd.


3.4.2.2 Werken met movieclips

Een tweede methode bestaat erin te werken met een geavanceerde menubar die toelaat te

navigeren naar verschillende slides zoals te zien is in de file scrollSlides.swf in de map

animaties. In de menubar kan een soort button worden versleept, die naar drie posities kan

"snappen". Voor meer uitleg over hoe deze menubar tot stand werd gebracht, verwijzen we ook

hier naar hoofdstuk 5.

We willen er hier nog op wijzen, dat het voorgaande voorbeeld nog als volgt zou kunnen worden

uitgebreid: i.p.v. movieclips die slides voorstellen, in te voegen, zou tevens met movieclips

kunnen gewerkt worden, die de overgang tussen verschillende slides voorstellen. In de menubar

zou dan tevens van de ene movieclip naar de andere kunnen worden overgegaan, maar er zou

nu geen overgang meer zijn van één slide naar een andere, maar van een groep slides naar

een andere groep slides.


3.5 Voorlopig besluit

De volgende figuur vat nog eens de werkwijze samen, die dient gehanteerd te worden wanneer

een presentatie / animatie, analoog aan PowerPoint, in Flash wil gemaakt worden.

Figuur 3-7: overzicht

Van alle effecten dienen dus movieclips te worden gemaakt.

Die moeten ingevoegd worden in iedere laag in de optimale lagenstructuur die werd besproken

bij de opbouw van een slide.

Van iedere slide dient ten slotte een movieclip te worden aangemaakt, die dan wordt ingevoegd

in de aparte keyframes in de lagenstructuur, aangehaald bij de opbouw van een presentatie als

overgang tussen verschillende slides.

Deze methode is herbruikbaar. Er werden verschillende files opgenoemd die als soort sjabloon

voor een dergelijke presentatie kunnen dienen (b.v. lagen.fla uit de map presentatie). In de

libraries van die files zijn de nodige movieclips beschikbaar. In die files wordt de volledige

opbouw van movieclip in movieclip duidelijk en werd met de optimale implementatie van

schikking op de tijdslijn, gewerkt.

Deze methode is vooral zeer handig om een bepaalde animatie te maken die dient om uitleg te

verduidelijken m.b.v. visualisatie en om stap voor stap vooruit te gaan zodat ondertussen de


nodige uitleg kan worden gegeven. De file besluit.swf uit de map presentatie is zo'n animatie die

de uitleg van dit voorlopig besluit visualiseert. Het was eerst de bedoeling om voor ieder stuk in

het proces, horende bij de paragraaf die in deze scriptie handelt over de opbouw van een slide,

zo'n animatie te maken en die gemaakte animaties te gebruiken in de powerpointpresentatie ter

verdediging van deze scriptie. Zo zou de uitleg die werd gegeven, zeer goed kunnen worden

meegevolgd via een visuele animatie van die uitleg, gemaakt in Flash. Wegens tijdsgebrek kon

dit jammer genoeg niet meer gerealiseerd worden en bleef het aantal visualiserende animaties,

ter verduidelijking van de uitleg, beperkt tot de reeds vernoemde animatie besluit.swf.

Tot slot kan hier nog het volgende worden vermeld: wanneer veel figuren en foto's enz. zouden

moeten ingevoegd worden in PowerPoint, zou het handig zijn om deze in Flash te "animeren". In

PowerPoint zou dan een link kunnen voorzien worden naar die swf-file, zodat op die manier de

filesize van de presentatie in PowerPoint zou kunnen beperkt worden.

Invoegen van objecten 40

4 Invoegen van objecten

In dit stuk gaan we dieper in op het invoegen van objecten. Eerst bekijken we hoe Flash 5

bestanden kunnen ingevoegd worden in een PowerPoint presentatie en hoe we Flash 5 files

kunnen inbrengen in HTML pagina's. Daarna geven we een korte uitleg bij het exporteren van

een Flash 5 movie. Tenslotte behandelen we het invoegen van allerlei objecten in een Flash 5

bestand.

We brengen geen volledig overzicht. Het is niet de bedoeling om het invoegen van ieder

mogelijk object in detail te bespreken. (Meer informatie is gemakkelijk te vinden op het internet

en ook verschillende boeken over Flash 5 behandelen uitgebreid het invoegen van objecten.)

Alleen de zaken die we onderzocht hebben, worden besproken. We spreken over Flash 5

objecten omdat we zelf met de vijfde versie van het programma hebben gewerkt. We hebben

geen experimenten uitgevoerd met vorige versies.

4.1 Invoegen van Flash 5 Het eerste punt dat we in deze alinea bespreken, behandelt het inbedden van Flash 5 movies

(swf's of "swiffs") in PowerPoint door gebruik te maken van de ActiveX besturingselementen.

(Wij hebben Microsoft PowerPoint 97 gebruikt tijdens onze test.) In het tweede punt halen we

twee andere manieren aan om Flash 5 bestanden in een presentatie in te voegen. Daarna

leggen we uit hoe je een Flash 5 bestand in een HTML pagina kan inbrengen. Ten slotte

beschrijven we hoe je Flash 5 movies als HTML pagina's kan publiceren.

4.1.1 Invoegen van Flash 5 in PowerPoint

De gebruiker kan een Flash 5 movie in een PowerPoint presentatie inbedden door gebruik te

maken van de werkset besturingselementen (of de "control toolbox"). Na een muisklik op het

icoontje "Meer besturingselementen" ("More elements") verschijnt een menu waarin de

gebruiker het type van het in te voeren object kan kiezen. In ons geval is dat een "Shockwave

Flash Object". Dit is de enige juiste keuze als de gebruiker een swiff wil inbedden.

Invoegen van objecten 41

Figuur 4-1: werkset besturingselementen

Als de gebruiker zijn/haar keuze gemaakt heeft, dan kan de gebruiker aangeven waar de swiff

op de slide moet komen. Er wordt een vierkant op de slide geplaatst dat het – voorlopig -

afspeelgebied van de Flash 5 movie aangeeft. De gebruiker kan naar hartelust de afmetingen

aanpassen. Belangrijker evenwel zijn de eigenschappen ("properties") van het ingebedde

Shockwave Flash Object.

In het venster "Properties" verschijnt na een klik in het tekstvak "Custom" een icoontje dat de

gebruiker toelaat naar een overzichtelijk venster te springen waarin de eigenschappen voor de

Flash 5 movie kunnen worden ingegeven.

Er zijn een aantal zaken waarmee de gebruiker rekening moet houden om ervoor te zorgen dat

de Flash 5 movie correct wordt afgespeeld tijdens de presentatie. We sommen de belangrijkste

op. Bij de optie "Movie URL" moet de gebruiker een pad specifiëren. Volgens de

informatiepagina's van Macromedia1

De gebruiker moet de optie "Play" aanvinken, anders wordt de movie niet afgespeeld. De optie

"Loop" betekent - in theorie – dat de movie doorlopend wordt afgespeeld, maar deze optie laat

het vaak, zoniet altijd, afweten. Het is beter een lus te implementeren in de Flash 5 fla zelf. We

komen hier verder nog op terug.

is een relatieve link voldoende, uit ondervinding blijkt dat

het opgegeven pad best een absoluut pad is, b.v. "C:\ASI\Scriptie\Movies\myMovie.swf", in

plaats van "myMovie.swf", zelfs al staat de swi

Webtoepassingen met Flash 5 - Ghent University...

Documents

Transcript of Webtoepassingen met Flash 5 - Ghent University...