webtoepassingen met flash 5 - ghent university...
TRANSCRIPT
-
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
7 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 82, op. cit.
-
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.)
10 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 208, op. cit.
-
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
14 BHANGAL, Sham, FARR, Amanda, REY, Patrick, Foundation Flash 5. Birmingham, Friends of ED, designer to designer, 2000, p. 487, op. cit.
-
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 23
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 24
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
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 25
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
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 26
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 27
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
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 28
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
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 29
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,
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 30
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!
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 31
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();
}
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 32
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
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 33
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 34
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 35
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 36
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 37
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.
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 38
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
-
Opbouw presentatie / animatie in Flash naar analogie aan PowerPoint 39
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