Universiteit Gent · 2020-02-25 · Universiteit Gent Faculteit Toegepaste Wetenschappen Vakgroep...
102
Transcript of Universiteit Gent · 2020-02-25 · Universiteit Gent Faculteit Toegepaste Wetenschappen Vakgroep...
Universiteit Gent Faculteit Toegepaste Wetenschappen
Vakgroep Elektronica en Informatiesystemen
Voorzitter: Prof. Dr. Ir. J. Van Campenhout
XML-gebaseerde spatiale en temporele synchronisatie van PowerPoint diapresentaties met MPEG-4 video.
door
Wim Provoost
Promotor: Prof. Dr. Ir. R. Van de Walle Scriptiebegeleiders: Ir. Jeroen Bekaert en Lic. Robbie De Sutter
Scriptie ingediend tot het behalen van de academische graad van Burgerlijk ingenieur in de computerwetenschappen
Academiejaar 2002-2003
Voorwoord en bedanking: In het bijzonder wil ik al de mensen bedanken die mij gedurende de laatste 5 jaar op gelijk welke manier gesteund hebben. Dit zijn redelijk veel mensen en ik vrees dat het persoonlijk opnoemen bij naam een te groot en gevaarlijk werk is. Daarom bedankt:
- familie die er altijd was - vrienden, VTK op wie ik altijd kon rekenen - kotgenootjes om mij steeds aan het werk te houden - Ir. Jeroen Bekaert voor al de nuttige informatie en tips omtrent SVG - Lic. Robbie De Sutter voor de vele uren die hij in mij gestoken heeft en voor het
nalezen van mijn scriptie - Prof. Dr. Ir. R. Van de Walle die mij de kans bood dit werk te kunnen verrichten - De mensen van Macromedia en FlashFreaks met hun kritiek op “de dode taal”
SVG, zodat ik nog gemotiveerder was om te bewijzen dat SVG wel degelijk levensvatbaar is
Aan al deze mensen, uit de grond van mijn hart, bedankt .... De toelating tot bruikleen: “De auteur geeft 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” Datum: Wim Provoost 1 juni 2003
XML-gebaseerde spatiale en temporele synchronisatie
van PowerPoint diapresentaties met MPEG-4 video.
door
Wim Provoost Scriptie ingediend tot het behalen van de academische graad van Burgerlijk ingenieur in de computerwetenschappen Academiejaar 2002-2003 Promotor: Prof. Dr. Ir. R. Van de Walle Scriptiebegeleiders: Ir. Jeroen Bekaert en Lic. Robbie De Sutter Faculteit ToegepasteWetenschappen Universiteit Gent Vakgroep Elektronica en Informatiesystemen Voorzitter: Prof. Dr. Ir. J. Van Campenhout Samenvatting
In dit werk worden een aantal nieuwe XML-talen in de praktijk toegepast. In het bijzonder wordt SVG grondig onderzocht. Dit gebeurt op basis van een programma dat een PowerPoint–presentatie omzet naar SVG. Tevens wordt er voor gezorgd dat de muisbewegingen bij het geven van de presentatie gesimuleerd worden binnen SVG. Het programma dat instaat voor het omzetten van het PowerPoint-bestand en het opnemen van de muisbewegingen is geschreven in VBA. Een tweede technologie die aan bod komt in dit werk is SMIL. Deze XML-taal zorgt voor de synchronisatie van het MPEG-4 video-bestand en de SVG-presentatie. Trefwoorden: SVG, SMIL, VBA, PowerPoint
Inhoudstafel
Hoofdstuk 1: Inleiding 1
Hoofdstuk 2: Wat en hoe, nu en toekomst
2.1 Nu
2.2 De nieuwe architectuur
3
3
5
Hoofdstuk 3: De technologie 6
3.1 XML 6
3.1.1 Inleiding 6
3.1.2 De geschiedenis 6
3.1.3 Het doel 7
3.1.4 Well-formed en valid XML-documenten 8
3.1.5 Een eenvoudig voorbeeld 9
3.2 SMIL 10
3.2.1 Inleiding 10
3.2.2 Wat is SMIL 11
3.2.3 De modules 12
3.2.4 HTML + TIME 19
3.2.5 SMIL in de praktijk 20
3.3 SVG 23
3.3.1 Inleiding 23
3.3.2 Wat is SVG
3.3.3 Een eerste SVG afbeelding
23
25
3.3.4 Animatie met SVG 25
3.3.5 Optimalisatie van SVG 30
3.3.6 Flash vs. SVG 31
3.3.7 SVG in de praktijk 34
3.4 Visual Basic for Applications 37
3.4.1 Inleiding 37
3.4.2 Objecten 37
3.4.3 Efficiënte code schrijven in VBA 39
3.4.4 Enkele voordelen van VBA 39
Hoofdstuk 4: De applicatie 40
4.1 Inleiding 40
4.2 De omzetting naar SVG 42
4.2.1 Inleiding 42
4.2.2 Globale variabelen 43
4.2.3 Het omzetten van afbeeldingen 43
4.2.4 De kleuromzetting 44
4.2.5 Het converteren van de slides 45
4.2.6 De mogelijkheden van de macro 46
4.2.7 De problemen 49
4.2.8 Conclusie 55
4.3 Het opnemen van de muisbeweging 56
4.3.1 Inleiding 56
4.3.2 Visual Basic 57
4.3.3 Visual Basic for Applications 59
4.3.4 C++ 59
4.3.5 De uiteindelijke oplossing 60
4.4 De SMIL-presentatie 61
Hoofdstuk 5: Handleiding voor het gebruik van de applicatie 62
5.1 Het inladen van de invoegtoepassing 62
5.2 De presentatie ontwerpen 65
5.3 Het geven van een presentatie 66
Hoofdstuk 6: Conclusie 69
Appendices 71
Referenties 93
Tabel van afkortingen
API Application Programming Interface
ASV Adobe SVG Viewer
CML Chemical Markup Language
CSS Cascading Style Sheets
DHTML Dynamic HTML
DLL Dynamic Linked Library
DOM Document Object Model
DTD Document Type Declaration
HTML HyperText Markup Language
IVPV Instituut Voor Permanente Vorming
MMS Multimedia Messaging Service
MPEG Motion Picture Experts Group
OLE Object Linking and Embedding
SGML Standard Generalized Markup Language
SMIL Synchronized Multimedia Integration Language
SVG Scalable Vector Graphics
TIME Time Interactive Multimedia Extensions
VBA Visual Basic for Applications
W3C World Wide Web Consortium
XML eXtensible Markup Language
1
Hoofstuk 1
Inleiding
In het midden van de jaren 90 groeide de opvatting dat “e-learning” de volgende “killer-
applicatie” zou worden van het internet. Nu de dot-com zeepbellen gesprongen zijn, blijkt
dat ongeveer 10 jaar later, de technologie de kinderschoenen ontgroeit raakt. Ook onze
universiteit is mee op de kar gesprongen en biedt via het IVPV [1] (Instituut Voor
Permanente Vorming) een tiental cursussen aan. Voorlopig zijn deze enkel te volgen via
een CD die meegegeven wordt op het einde van de eerste les. Naar de toekomst toe, wil het
IVPV de cursussen via het internet aanbieden.
Het afstandsleren via de computer biedt vooral het voordeel dat men de cursus kan
studeren wanneer men de tijd ervoor heeft. Daar de cursus op CD uitgebracht is, kan men
ze op bijna elke computer bekijken. Verder studeert men op eigen tempo en men kan
lessen herhalen of weglaten.
Wanneer de cursus naar het web gemigreerd wordt, komt er een dimensie bij:
interactiviteit. Er kunnen vragen gesteld worden en online discussies gevoerd worden via
een chat. Men kan zelfs huiswerk of projecten, waar men in groep aan gewerkt heeft,
indienen. Kortom dankzij internet wordt afstandsleren volledig opnieuw gedefinieerd.
Waarom biedt onze universiteit dan nog geen lessen online aan? De belangrijkste reden is
waarschijnlijk het feit dat er op dit moment geen nood is aan een online versie. Iedereen
heeft een CD-ROM speler maar niet iedereen heeft breedband. Bovendien is een CD-versie
goedkoop en is er weinig werk aan eens de uiteindelijke presentatie af is. Een online versie
zou nieuwe servers vereisen en personen die deze servers onderhouden.
2
Een minpunt aan de huidige architectuur is het feit
dat de presentatie en de video samen gecodeerd
worden. Dit leidt tot een groot bestand en een
presentatie die niet meer aangepast kan worden.
Via deze thesis probeer ik een ander, nieuw pad te
bewandelen om later, als de presentaties online
aangeboden worden, de bestandsgrootte van de
presentaties te verkleinen en de kwaliteit van de
presentatie te verhogen. Dit wil ik doen door de
presentatie los te koppelen van de video en door de
Fig. 1-1 : een beeld van de huidige situatie presentatie in een geschikt formaat op te slaan.
Concreet valt mijn thesis uiteen in 3 grote delen. Een eerste deel beschrijft hoe het nu
gebeurt en wat de problemen precies zijn. Tevens formuleer ik een nieuwe architectuur
gebaseerd op een aantal nieuwe technologieën. De taal waarin ik de presentatie zal opslaan
is SVG. Het script dat de omzetting van PowerPoint naar SVG doet is geschreven in Visual
Basic for Applications en de taal die de synchronisatie verzorgt tussen de presentatie en de
video is SMIL. Omdat zowel SVG en SMIL afgeleid zijn van dezelfde basistaal, XML, zal
ik in het tweede deel beginnen met een kleine uiteenzetting over XML.
Verder zal ik de andere bovenstaande technologieën bespreken. Het derde deel is de
concrete uitwerking van de nieuwe architectuur aan de hand van een applicatie op basis
van deze nieuwe technologieën. Tevens komen in dit deel ook de beperkingen van mijn
architectuur ter sprake.
3
Hoofdstuk 2
Wat en hoe, nu en toekomst
2.1 Nu Hoe komen de lessen nu eigenlijk tot stand? Hier volgt een beschrijving van de
opeenvolgende stappen in het ontwikkelingsproces van een video-les:
• De lesgever maakt een PowerPoint-voorstelling over het onderwerp.
• De lesgever wordt gevraagd om naar het ARC te gaan. In het ARC is een zaal die
volledig ingericht is als multimediazaal. Dit auditorium is uitgerust met audio- en
video-apparatuur voor videoconferenties.
• Twee digitale camera’s filmen de professor en de presentatie. De ene camera filmt
de torso van de lesgever. De andere neemt de presentatie op.
• Beide videostromen worden door een digitale video-mixer gestuurd en opgenomen
op een DVCAM-recorder. Het mixen van de beelden gebeurt op het moment van de
presentatie en is dus te vergelijken met het produceren van een live tv-uitzending.
Na de opnames kan dus niets meer aan deze beelden veranderd worden.
• Daarna worden de DVCAM-tapes afgespeeld op een aparte DVCAM-recorder en
via de S-video ingang (beeld) en firewire ingang (geluid) ingelezen in een PC via
een videokaart (Pinnacle) met Premiere (Adobe).
• De bestanden worden bewaard als MPEG-2 en daarna met RealProducer omgezet
naar RealVideo (versie 8). Als laatste stap worden de rm-files op CD-rom gezet.
4
Fig. 2-1 : een beeld van de huidige architectuur
Deze opeenvolging van stappen roept een aantal vragen op. Wat als de presentatie
veranderd moet worden omdat er bijvoorbeeld een schrijffout in staat? Het antwoord is dat
dit onmogelijk is. Waarom wordt de digitale presentatie eerst naar een analoge presentatie
omgezet en vervolgens terug gedigitaliseerd? Waarom wordt PowerPoint, dat een vector-
formaat is, omgezet naar een niet vector-formaat? Waarom worden de twee video-stromen
niet van elkaar losgekoppeld? Het antwoord op de laatste vragen is 1 woord: eenvoud. Al
het materiaal is aanwezig in het ARC om het zo te doen en het is waarschijnlijk het minst
arbeidsintensief en het goedkoopst. Wil men in de toekomst de lessen aanbieden via het
internet dan zullen er toch wel enkele problemen de kop op steken. Het is verspilling van
bandbreedte als men een “video”-bestand verzendt waarbij slechts een klein deeltje van
het beeld echt video is. De presentatie bestaat voornamelijk uit stilstaande beelden met
eventueel een miniem aantal animaties, bijvoorbeeld een slide-overgang. Het enige echte
stuk video is de lesgever die de presentatie doet. Daarbij is de presentatie omgezet van
vector-formaat naar een niet vector-formaat wat een grote toename van de bestandsgrootte
in de hand werkt. Wegens het feit dat bij online diensten de gebruikte bandbreedte nog
altijd een niet te onderschatten prijs is, zou men dus best overgaan naar een scheiding van
de twee bronnen (presentatie en video) en de presentatie in vector-formaat blijven
behouden. Verder leidt de scheiding ook tot de mogelijkheid om de presentatie aan te
passen om bijvoorbeeld schrijffouten er uit te halen of eventueel extra info toe te voegen,
indien dit nodig blijkt.
5
2.2 De nieuwe architectuur De architectuur die in de rest van deze thesis uitgewerkt wordt, heeft als belangrijk
voordeel ten opzichte van de huidige dat de presentatie en de video van elkaar gescheiden
zijn. In tegenstelling tot de huidige architectuur waar de video en de presentatie als video
worden behandeld en samen worden gecodeerd, zal in deze thesis enkel de video worden
gecodeerd met MPEG-4. De presentatie wordt namelijk omgezet naar een state-of-the-art
taal, SVG. Het samenvoegen van de twee, de SVG-presentatie en de MPEG-4 video
gebeurt zo laat mogelijk. Ze worden namelijk pas samengevoegd in de speler.
Fig. 2-2 : een beeld van de nieuwe architectuur
Het grote nadeel aan deze architectuur ligt in het feit dat het omzetten van PowerPoint naar
SVG niet volledig mogelijk is en het feit dat het animeren van de video minder eenvoudig
is.
6
Hoofdstuk 3
De technologie
3.1 XML 3.1.1 Inleiding :
XML [2] (eXtensible Markup Language) is een opmaak-taal voor gestructureerde
documenten. Dit zijn documenten die zowel de inhoud (tekst, foto’s,…) beschrijven en
tevens een indicatie geven welke betekenis die inhoud heeft. Inhoud in een hoofding heeft
bijvoorbeeld een andere betekenis dan inhoud in een voetnoot. Een opmaak-taal is een taal
om structuur te definiëren in een document. XML is in staat om tags te definiëren en de
structurele relatie ertussen. De semantiek van een XML-document wordt gedefinieerd door
de applicaties die de XML verwerken of door stylesheets.
3.1.2 De geschiedenis :
In het midden van de jaren 1990 ontstond een nieuwe methode voor het behandelen van
data. In november 1996 werd de initiële XML-draft voorgesteld op de SGML 96
Conference [3]. Reeds in 1997 werd de eerste XML conferentie gehouden. In hetzelfde
jaar werd XML 1.0 een Proposed Recommendation. Uit deze methode groeiden talrijke
data schema’s zoals MathML en Chemical Markup Language (CML). Andere talen
volgden en sedert 1999 mogen we daar ook SVG, de belangrijkste taal in dit werk, aan
toevoegen.
7
3.1.3 Het doel :
Het doel van XML was om op een gemakkelijke manier gestructureerde documenten over
het internet zenden. HTML en SGML waren op dat moment de enige andere
mogelijkheden, maar deze voldeden niet aan deze eis. Verder had men enkele doelen [3]
voorop gesteld waaraan XML moest voldoen:
1. Eenvoudig gebruik over internet:
Voor de gebruiker moest XML even gemakkelijk te bekijken zijn als HTML.
Hiervoor was er echter nood aan speciale XML-browsers.
2. XML moest door een groot aantal applicaties ondersteund worden.
Alhoewel de hoofdbedoeling van XML was om gestructureerde documenten over
internet te zenden, wist men dat een groot aantal andere applicaties nodig waren
om XML, als technologie, een plaats te geven. Men dacht hiervoor in eerste
instantie aan XML-browsers en software om documenten in XML te schrijven.
3. XML moest compatibel zijn met de standaard SGML:
Er was reeds een hoop software op de markt om SGML-documenten te schrijven
en men wou de kennis binnen deze taal gebruiken om XML te ontwerpen.
4. Eenvoudige documenten:
Hiermee bedoelt men niet dat XML-bestanden eenvoudig moeten zijn, want voor
grote projecten is de XML-structuur meestal complex1. Het moest echter
eenvoudig zijn om deze bestanden te schrijven. Vandaar de mogelijkheid om
XML-documenten te ontwikkelen via een tekst-editor.
5. Eenvoudige programma’s:
Men wou een standaard ontwerpen die toeliet eenvoudige programma’s ervoor te
schrijven. Volgens de ontwerpers mag het maar 2 weken duren vooraleer een
goede, afgestudeerde computer specialist een programma om XML te verwerken
kan schrijven.
6. Het aantal optionele features binnen XML moest gelijk zijn aan nul of zo klein
mogelijk.
7. XML moest leesbaar en verstaanbaar zijn voor mensen.
8. Het design van XML moest formeel en bondig zijn.
1 Bijvoorbeeld http://www.macromedia.com/devnet/resources/macromedia_resources.rdf
8
9. Beknoptheid was van minder groot belang:
Binnen de SGML–taal waren er enkele aanpassingen gebeurd om SGML-
documenten zo beknopt mogelijk te schrijven. Binnen XML was dit echter niet
van primordiaal belang.
3.1.4 Well-formed en valid XML-doucmenten :
Een XML-document is slechts een goed XML-document als het valid en well-formed is.
Well-formed slaat op het feit of het de syntax-regels van XML eerbiedigt [4].
• Sommige markup bouwstenen zijn enkel toegelaten op welbepaalde plaatsen.
Indien deze op andere plaatsen voorkomen, is het XML-document niet well-
formed. Een voorbeeld van zo’n bouwsteen is <?xml version="1.0" encoding="UTF-
8"?>.
• Geen attribuut mag meer dan eenmaal verschijnen binnen dezelfde start-tag.
Bijvoorbeeld <ash time=”15” time=”16”> is ongeldig.
• String attribuut-waarden mogen geen referenties bevatten naar externe eenheden.
• Tags moeten gesloten worden. Dit kan ofwel door een expliciete sluit-tag of door
/>.
Bijvoorbeeld <test>dit is juist</test> of <test ok=”dit is juist”/>.
• Niet-lege tags moeten correct genest worden.
<ash><test>dit is fout!</ash></test> is ongeldig.
• Parameters moeten gedeclareerd worden voor ze gebruikt worden.
• Tekst en parameters mogen niet recursief gedeclareerd worden.
Het geldig (valid) zijn van documenten slaat op een juiste Document Type Declaration.
Binnen Document Type Declarations (DTD) kan men een XML-bestand enige betekenis
geven door verplichtingen op te leggen aan het nesten of de opeenvolging van tags. Verder
staat in een DTD beschreven wat de attributen zijn van een tag, het type van de waarden en
eventuele standaardwaarden. Indien aan al deze verplichtingen voldaan is noemt men het
XML-document geldig.
9
3.1.5 Een eenvoudig voorbeeld : <?xml version="1.0" encoding="UTF-8"?> <ash> <person> <age>22</age> <country>Belgium</country> <name>Wim Provoost</name> </person> <person> <age>25</age> <country>Finland</country> <name>Janne</name> </person> <person> <age>22</age> <country>Ireland</country> <name>Neola Mc Kinley</name> </person> </ash>
In dit voorbeeld wordt een studentenhome, ash, beschreven. Elk XML-bestand heeft een
root-element. Bij dit voorbeeld is ash het root-element. Binnen de home zijn 3 buitenlandse
studenten aanwezig. Van deze 3 elementen wordt de leeftijd, de naam en het land van
afkomst opgeslagen. Elk element bestaat uit een start- en eind-tag en de inhoud tussen deze
twee tags. Verder kan een element ook attributen bevatten. In het voorbeeld zijn er geen
attributen. Een voorbeeld van een element met attributen zou kunnen zijn de uitbreiding
van de <person>-tag naar <person gender=”X”> waarbij X dan vrouwelijk of mannelijk is.
10
3.2 SMIL
3.2.1 Inleiding :
Het verhaal van SMIL (Synchronized Multimedia Integration Language) begon in 1995 [5]
en de tweede versie volgde twee jaar later. SMIL werd ontwikkeld door het World Wide
Web Consortium door een mix van experts vanuit 4 verschillende takken van de industrie
[6]. CD-ROM, interactieve televisie, de webwereld en de audio/video streaming wereld
hebben geholpen om de standaard op poten te zetten. De eerste SMIL implementatie,
HPAS, zag het licht in 1998 [5]. SMIL (uitgesproken smile) biedt auteurs de mogelijkheid
op televisielijkende inhoud aan te bieden op het web. Dit kon door het vermijden van de
beperkingen van traditionele tv en dankzij een vermindering van de bandbreedte die nodig
is om dit soort media over het internet te sturen. Het was de bedoeling om met SMIL een
eenvoudige applicatie te ontwikkelen waarvoor geen nieuwe programmeertaal moest
geleerd worden en zo dus met een gewone tekst-editor geschreven kon worden.
Ondanks de bescherming van het W3C en de ruime belangstelling van multimedia
onderzoeksgroepen, werd SMIL in het strijdperk gegooid met slechts één industrieel
bedrijf achter zich: RealNetworks. In het begin stadium waren Microsoft en Macromedia
ook betrokken bij de implementatie. Maar wegens onenigheid, vooral over de
implementatie van het timing-gebied, beslisten beiden uit het SMIL avontuur te stappen
[7]. Naar de buitenwereld toe werd echter gezegd dat ze niet geloofden in SMIL als
technologie.
In de zomer van 1999 werd er aan SMIL Boston, genoemd naar de stad waar de conventie
plaatsvond, gewerkt. Dit zou later leiden tot de huidige standaard SMIL 2.0. SMIL 2.0 is
vooral gericht op een betere beschrijving van de timing- en positioneringsmogelijkheden
en zorgt ervoor dat SMIL kan interageren met andere XML talen zoals SVG en XHTML.
11
3.2.2 Wat is SMIL :
Om uit te leggen wat SMIL precies is, kan men het best beginnen met een aantal
misverstanden uit de wereld te halen en te zeggen wat het niet is.
SMIL is geen vervanger van Flash:
SMIL is geen vervanger van het Flash want SMIL beschrijft geen media inhoud. Het
beschrijft geen type van mediaformaat (zoals vector, video, text of audio). Het beschrijft
echter wel hoe verschillende mediaformaten met elkaar interageren. SMIL probeert een
raamwerk aan te bieden om media objecten te controleren. Voor SMIL is Flash een media-
formaat net zoals alle andere.
SMIL is geen vervanger van DHTML:
DHTML werd ingevoerd om HTML pagina’s minder statisch te maken. Er werd een
lokale tijd geïntroduceerd zodat ook animatie effecten toegepast konden worden. Binnen
SMIL bestaan deze mogelijkheden ook, maar SMIL heeft echter veel meer potentieel dan
eenvoudige animaties. Het is als het ware het krachtigere broertje van DHTML.
Wat is SMIL dan wel? De taal is voornamelijk ontwikkeld met het oog op de toekomst.
Men verwacht namelijk dat presentaties door clients met totaal verschillende vereisten
(breedband, GSM, modem, ...) bezocht zullen worden. Bij de ontwikkeling werd hiermee
rekening gehouden zodat men gemakkelijk herbruikbare presentaties kan schrijven.
SMIL is een XML gebaseerde taal. Ze bestaat dus uit tags en attributen die zowel de
spatiale als temporele coördinatie beschrijven tussen verschillende multimedia formaten.
De eerste versie van SMIL was redelijk klein en bestond slechts uit een aantal tags. De
doelen van SMIL 1.0 waren dan ook eenvoudig. Het beschrijven van de layout van
presentaties en het tijdsgedrag en hyperlinks aan media objecten verbinden. SMIL 1.0 was
een goede basis: eenvoudig en snel aan te leren maar toch functioneel. Maar omdat er een
aantal limieten waren, werd de eerste versie aangepast tot een nieuwe meer uitgebreide
versie SMIL 2.0.
SMIL 2.0 bestaat uit een tiental functionele groepen van XML-elementen en attributen
waarvan timing en synchronisatie de kernfunctionaliteiten zijn. In volgende paragraaf staan
de belangrijkste functionele groepen met een aantal tags en attributen. Voor het volledig
overzicht van de tags en attributen verwijs ik naar de officiële SMIL website [5].
12
De opmars van SMIL is nu reeds begonnen. Eén van de belangrijkste toepassingen, buiten
het web, is het gebied van MMS (Multimedia Messaging Service) [1]. Met MMS is het
mogelijk tekst, beelden, audio en in de toekomst video aan te bieden via de opvolger van
de SMS. Samen met SOAP en WAP zal SMIL een belangrijke rol spelen in het
overbrengen van berichten. Voorlopig worden slechts enkel foto’s en teksten aangeboden
via MMS. Het blijft wachten op de G3 technologie om een video door te zenden. In
Amerika loopt reeds een proefproject waarbij bepaalde mediabedrijven reeds video op
PocketPC aanbieden.
3.2.3 De modules :
3.2.3.1 Structuur module
De SMIL structuur module definieert de drie basis elementen van SMIL: smil, head en
body. Alle SMIL presentaties moeten minstens deze 3 elementen bevatten. Ze zijn dus te
vergelijken met de tags html, head en body in HTML.
Elk SMIL bestand heeft de volgende kapstok: <smil> <head> …
</head> <body> … </body>
</smil>
3.2.3.2 Media objecten
De media object module is waarschijnlijk de belangrijkste. Ze bepaalt namelijk welke
media bestanden ondersteund worden. Binnen SMIL worden media bestanden opgedeeld
binnen 2 groepen.
• Continue media zoals video, audio en deze hebben allen een bepaalde lengte. • Discrete media zonder tijdsnotie zoals foto’s of tekst.
13
3.2.3.3 Layout
Eén van de belangrijkste aspecten van SMIL is de mogelijkheid tot het beschrijven van een
layout voor een presentatie. De layout module bestaat uit een BasicLayout module en drie
additionele modules: AudioLayout, MultiWindowLayout en een HierachicalLayout
module.
BasicLayout module:
Het <layout> element beschrijft hoe en waar de verschillende media objecten in de
presentatie staan. Binnen dit element kunnen verschillende stukken afgebakend worden
aan de hand van de <region>-tag. Binnen deze regio’s kunnen dan de verschillende media
objecten afgespeeld worden. Men kan ook regio’s laten overlappen. De z-index geeft dan
aan welke regio de bovenste is.
Een voorbeeld: <layout> <root-layout width="320" height="440" background-color="black" /> <region id="text" left="0" top="0" width="320" height="240" background-color="white" z-index="1" /> <region id="video" left="0" top="200" width="320" height="240" z-index="2" /> </layout>
Fig. 3-1 : de BasicLayout module
AudioLayout module:
Via deze module is het mogelijk om aan verschillende regio’s verschillende geluids-
volumes te geven.
MultiWindowLayer:
De module vormt het verlengde van de BasicLayout module en zorgt ervoor dat er
meerdere top-level vensters gedefinieerd kunnen worden. Op deze manier kunnen vensters
onafhankelijk geplaatst en geschaald worden.
HierachicalLayout:
De module zorgt ervoor dat regio’s genest kunnen worden om zo een hiërarchische structuur op te bouwen.
14
3.2.3.4 Timing
SMIL bestaat uit 3 basis timing tags:
seq, de sequential time container: de kinderen van deze container worden één voor één
afgespeeld (met een eventuele vertraging tussen het einde van de ene en het begin van de
andere). De vertraging tussen de verschillende kinderen kan niet negatief zijn. Ze zullen
elkaar dus niet overlappen. Men kan dus geen kind laten beginnen voor het andere kind
klaar is.
Fig. 3-2 : de sequential time container
par, de parallel time container: de kinderen van deze container worden tegelijkertijd
afgespeeld. Het woord tegelijkertijd in de vorige zin moet niet letterlijk genomen worden.
Het kan zijn dat ze niet tegelijk spelen maar na elkaar omdat bijvoorbeeld het startpunt op
de tijdsas van de ene later ligt dan het eindpunt van de andere.
Fig. 3-3 : de parallel time container
15
excl, de exclusive time container: deze conatiner wordt het minst gebruikt. Tegelijkertijd
kunnen geen meerdere kinderen actief zijn. De starttijd van een kind kan bijvoorbeeld
geregeld worden door een gebeurtenis die geïnitieerd wordt door de gebruiker,
bijvoorbeeld door het indrukken van een muisknop.
Er weze opgemerkt dat deze 3 containers genest kunnen worden. De kinderen van een
timing container zijn gewone media objecten zoals video, afbeeldingen of zelfs tekst. Uit
de derde container kunnen we ook halen dat er twee verschillende tijdsrelaties zijn: een
statische en een dynamische. Bij de statische relatie staat in het SMIL-bestand geschreven
wanneer het media object begint te spelen en wanneer het eindigt. Hier tegenover staat de
dynamische tijdsrelatie. Wanneer we een gebruiker de mogelijkheid geven om een
gebeurtenis te starten dan weten we niet wanneer deze zal starten. Bij het opstarten van het
SMIL-bestand weten we dus niet wanneer de begin- en eindtijden zullen vallen van de
verschillende media objecten.
Een voorbeeld: <par> <text src="fuse.txt" region="text" fill="freeze"/> <seq> <img src="dancetrippin.gif" region="video" dur="6s"/> <video id="test" src="fuse.mp4" region="video"/> </seq> </par> We gebruiken dezelfde layout als in het eerste voorbeeld. In dit voorbeeld wordt in de
regio “text” een tekstbestand ingeladen en tegelijkertijd wordt in de andere regio een gif
ingeladen. Na 6 seconden wordt de gif vervangen door een MPEG-4 filmpje.
16
3.2.3.5 Synchronisatie
Naast het definiëren van de timing en de layout van de presentatie is voor SMIL tevens
een belangrijke rol weggelegd als taal om verschillende media objecten met elkaar te
synchroniseren, zodat we niet hoeven te werken met exacte tijdstippen. Aan de hand van
de tags begin, dur en end kunnen verschillende objecten op elkaar afgestemd worden.
Verder kunnen we ook aangeven hoeveel maal een object herhaald moet worden.
Omdat de synchronisatie soms niet precies kan lopen, zijn er 3 synchronisatie attributen
ingevoerd:
syncBehaviour, aan de hand van dit attribuut kan men aangeven dat de synchronisatie
perfect moet zijn.
syncTolerance, laat toe te definiëren hoeveel asynchronisatie er mag zijn tussen de
verschillende stromen.
syncMaster, laat toe een bepaald element binnen de presentatie als hoofdelement te
beschouwen. Het is dan ten opzichte van dit element dat alle andere objecten
gesynchroniseerd worden.
3.2.3.6 Linking
Een dynamische webpresentatie wordt gekenmerkt door het feit dat de gebruiker zelf ook
een rol speelt in de presentatie. Zo is de mogelijkheid van hyperlinking naar ander media
en presentaties ingebouwd. De methode van aanspreken gebeurt net zoals bij de
vertrouwde HTML via een anchor-tag. Net zoals in HTML biedt SMIL interne links aan
zodat binnen één SMIL-presentatie naar een ander stuk van de presentatie kan gesprongen
worden. <a href="link.htm" target=”bestemming" accesskey="a">
<img region="source" src="bron.jpg" dur="indefinite"/> </a>
In bovenstaand voorbeeld wordt de webpagina link.htm in het frame bestemming geladen
wanneer de gebruiker op bron.jpg klikt of wanneer de letter a ingedrukt wordt.
17
3.2.3.7 Switch
Schaalbaarheid is een belangrijk aspect van multimedia-presentaties. Gebruikers van een
presentatie kunnen namelijk uit alle hoeken van de wereld komen en kunnen met
verschillende systemen naar de presentatie kijken. De één heeft breedband, de ander
smalband, de één spreekt Engels, een ander Spaans. SMIL heeft hiervoor een aantal tags
die dienen om deze schaalbaarheid aan te bieden. In tegenstelling met HTML hoeven er
met SMIL geen client-side scripts aan te pas komen.
Veruit het belangrijkst is de switch-tag. Aan de hand van deze tag maakt een presentatie
automatisch de keuze tussen breed- en smalband of past zich automatisch aan aan de taal
van de gebruiker. Het eerste kind van de switch-tag dat voldoet, wordt uitgevoerd en een
tag zonder testattribuut wordt als waar aanzien.
Een voorbeeld : <body> <switch> <!-- Engels --> <par system-language=”en”> <text src”engels.txt” region=”boodschap” /> <!-- schermgrootte --> <switch> <text src=”800_600E.txt” region=”scherm” system-screen-size=”800X600”/> <text src=”1024_768E.txt” region=”scherm” system-screen-size=”1024X768”/> <text src=”anderE.txt” region=”scherm”/> </switch> <!-- bitrate --> <switch> <text src=”14000E.txt” region=”bitrate” system-bitrate=”14000” /> <text src=”28000E.txt” region=”bitrate” system-bitrate=”28000”/> <text src=”anderbitE.txt” region=”bitrate” /> </switch> </par> <!-- Frans --> <par system-language="fr"> <text src”frans.txt” region=”boodschap” /> <!-- schermgrootte --> <switch> <text src=”800_600F.txt” region=”scherm” system-screen-size=”800X600”/> <text src=”1024_768F.txt” region=”scherm” system-screen-size=”1024X768”/> <text src=”anderE.txt” region=”scherm”/> </switch> <!-- bitrate --> <switch>
18
<!-- vervolg van het voorbeeld --> <text src=”14000F.txt” region=”bitrate” system-bitrate=”14000” /> <text src=”28000E.txt” region=”bitrate” system-bitrate=”28000”/> <text src=”anderbitF.txt” region=”bitrate” /> </switch> </par> <!—andere talen --> <text src”anderetaal.txt” region=”boodschap”/> </switch> </body>
In dit voorbeeld past de presentatie zich aan aan de taal van de gebruiker en wordt bij de
weergave rekening gehouden met de schermgrootte en de connectiesnelheid.
3.2.3.8 Transities en animaties
SMIL 2.0 laat toe een aantal basis transities en effecten te definiëren op alle visuele media
objecten. De bedoeling van deze modules is controle krijgen over verschillende media
objecten op één tijdslijn om zo een aantal speciale effecten te creëren. De animatie functies
zorgen voor een connectie tussen de tijdslijn en de attributen van verschillende objecten.
Een simpel voorbeeld van een animatie: <rect> <animate attributeName="width" from="10px" to="100px"
begin="0s" dur="10s" /> <animate attributeName="height" from="100px" to="10px"
begin="0s" dur="10s" /> </rect>
De transitie module is er pas bijgekomen in SMIL 2.0. Ze voegt enkele belangrijke opties
toe, namelijk fades en wipes. Geluidstransities zijn echter nog niet mogelijk.
Transities bestaan enerzijds uit een transitie element en anderzijds uit een transitie
parameter. Elk transitie element definieert een transitie klasse. Het transitie element kan
enkel gebruikt worden binnen de <head>-tag.
19
Een voorbeeld van een transitie klasse: ... <transition id="voorbeeldklasse" type="fade" subtype="fadeToColor" dur="2s" color="#000000" /> ...
Deze klasse definieert een transitie element dat in twee seconden naar zwart verkleurd.
Het parameter element biedt de mogelijkheid om een klasse toe te passen op een object en
wordt zoals de naam verklaard als parameters meegegeven.
Een voorbeeld waarin we bovenstaande klasse, voorbeeldklasse toepassen op een stukje
video. … <par> <video src=”test.mp4” dur="30s" transOut="voorbeeldklasse"/> </par> …
Bij dit voorbeeld zal de video dus wegfaden aan de hand van de transitieklasse
voorbeeldklasse.
3.2.4 HTML + TIME
De grote tegenhanger van SMIL is HTML+TIME (Timed Interactive Multimedia
Extensions). HTML + TIME 2.0 is gegroeid uit HTML en SMIL en werd ontwikkeld door
Microsoft omdat ze het oneens waren met de implementatie van de timing module binnen
SMIL. Het doel van HTML+TIME is gelijkaardig aan dat van SMIL: tijd- en media-
synchronisatie met als verschil dat TIME zich richt op HTML pagina’s. HTML+TIME
maakt slechts gebruik van een aantal XML attributen. De kracht van HTML+TIME is
kleiner dan die van SMIL maar het grote voordeel is dat HTML+TIME ingebakken zit in
de laatste versies van Internet Explorer en er dus geen speciale speler gedownload moet
worden.
20
3.2.5 SMIL in de praktijk :
3.2.5.1 De spelers
Daar SMIL 2.0 pas in 2001 afgewerkt werd [5], is het dus niet verwonderlijk dat er nog
maar weinig spelers verkrijgbaar zijn. De eerste speler was GRiNS SMIL 2.0, maar andere
grote software giganten ontwikkelden eveneens een speler voor SMIL. RealNetworks heeft
reeds een speler die gratis te downloaden is [8]. De installatie van de Real software kan
nogal wat problemen opleveren bij mensen die niet gewoon zijn te werken met een proxy-
server.
Apple QuickTime [9] heeft een streaming media speler die SMIL ondersteunt. Net zoals de
RealONE speler biedt ook de QuickTime speler niet alle SMIL extensies aan. Naast een
SMIL speler biedt Apple ook een SMIL-editor aan.
Fig. 3-4 : de SMIL-editor van Apple
21
Een ander programma dat de mogelijkheid biedt op een gestructureerde manier SMIL
presentaties te schrijven is Fluition [10]. Verder heeft dezelfde firma ook een API
ontwikkeld die server-side oplossingen kan bieden voor dynamische interactieve media
presentaties.
Fig. 3-5 : de SMIL-editor Fluition
Verder komen nu ook de eerste versies van Basic SMIL (de vereenvoudigde versie van
SMIL 2.0) op de markt voor PDA en GSM. Zo kondigde Access [11] in maart een nieuwe
versie aan van haar micro browser, NetFront 3.0.
22
3.2.5.2 Enkele links die het bezoeken waard zijn
SMIL is nog te jong om in een groot aantal boeken besproken te zijn. De meeste en
nieuwste informatie is dus te vinden op het net. Vooral aan sites die tutorials aanbieden is
er geen gebrek.
W3C (http://www.w3.org/AudioVideo/)
De bakermat van SMIL. Op deze site vind je vooral eerder de technische kant.
CWI SMIL Page (http://www.cwi.nl/%7Emedia/SMIL/)
Deze pagina bevat een aantal duidelijke tutorials en
een validator voor SMIL. Bekijk zeker ook eens de
demo applicatie Island For Sale
(http://www.cwi.nl/%7Emedia/SMIL/Island/) waar
men probeert een digitaal eiland te verkopen. De
applicatie bestaat uit een aantal Bryce 3D filmpjes
die gesynchroniseerd worden met exotische foto’s
en een briesje zuiderse muziek.
Fig. 3-6 : Island for sale
RealNetworks
(http://service.real.com/help/library/guides/realone/ProductionGuide/HTML/realpgd.htm)
Deze site staat vol mooie tutorials en demo’s. Voor de meer geavanceerde
animatie en transitie technieken met SMIL is vooral deze website aan te raden.
23
3.3 SVG 3.3.1 Inleiding :
SVG (Scalable Vector Graphics) [12] is zoals de naam het zegt, een taal die schaalbare
vector afbeeldingen definieert. Mensen binnen de webwereld vragen zich af wat voor
nieuws deze XML toepassing hen wel kan bieden. Veel meer dan op het eerste zicht zou
lijken. Een indicatie dat SVG meer is dan een met kladblok editeerbare versie van Flash2,
volgt uit het feit dat SVG de meest besproken technologie was gedurende XML Europe
2002 [13]. Er waren 4 presentaties volledig aan SVG gewijd en in talrijke voorstellingen
werd er naar verwezen.
Voorlopig ziet het ernaar uit dat SVG als webdesign toepassing voorlopig niet opgewassen
is tegen de macht van Flash. Dit is niet verwonderlijk want Macromedia heeft door
jarenlang een kwalitatief en innoverend product aan te bieden een schare gebruikers
verzameld die rotsvast overtuigd zijn van de kracht van Flash. Getuige hiervan zijn de
talrijke Flashfora3 waar deze fanaten, elke kritiek4 als een regelrechte aanval op hun geloof
zien. Neen, op dit gebied is SVG nog te onvolwassen om de rol van Flash over te nemen.
En toch blijkt uit een onderzoek van ILOG [14] dat naar de toekomst toe 27.7% van hun
klanten SVG zal gebruiken in hun projecten en slechts een magere 2.4% Flash.
Het domein waar SVG zal scoren en reeds scoort is dat van de mobiele apparaten om
locaties te bepalen, bijvoorbeeld als beeldvorming voor navigatiesystemen in auto’s.
Verdere toepassingen zijn mogelijk als CAD-diagrammen voor het ontwerpen van PCB
borden en de lucratieve entertainment industrie.
SVG 1.0 werd een W3C Recommendation op 4 sepetmber 2001 [12].
3.3.2 Wat is SVG
Het SVG schema biedt een structuur aan om vector afbeeldingen te definiëren in XML.
Verder bepaalt deze specificatie ook de definities voor raster afbeeldingen en tijds- en
events-gebaseerde animaties. Er zit dus meer in SVG dan het woord vector laat
vermoeden. Ook de S van schaalbaarheid heeft een bredere betekenis dan de term
schaalbaarheid zoals deze in verband wordt gebracht met vectoren. Want schaalbaarheid
van vectoren, het aanpassen van de grootte zonder kwaliteitsverlies, was reeds een
2 Flash is een product van Macromedia, in de rest van de thesis wordt bij verwijzing naar Flash telkens dit product bedoeld 3 Bv. http://www.flashkit.com, http://www.flashfreaks.be, http://www.ultrashock.com en vele andere 4 Bv. het artikel van Jacob Nielsen: “Flash : 99% bad” veroorzaakte heel wat deining op verschillende fora
24
standaard voor SVG ontwikkeld werd. Schaalbaarheid slaat in de term SVG niet op
vectoren maar eerder op het feit dat de taal perfect schaalbaar is op verschillende
apparaten. Ze is onafhankelijk van de drager. Deze onafhankelijkheid komt ook tot uiting
in het feit dat de taal niet afhankelijk is van een software of hardware platform. Ook de
menselijk interface om SVG te creëren kan vele vormen aannemen (Adobe Illustrator5,
Notepad, …).
SVG definieert 3 verschillende type objecten:
1. vectoren: dit kunnen zowel lijnen als geometrische figuren zijn.
2. tekst.
3. afbeeldingen: de gangbare formaten (jpg, gif, bmp, …) worden ondersteund.
Verder kunnen objecten samengevoegd worden in een groep om zo samen behandeld te
worden. Tevens biedt SVG de mogelijkheid tot clipping en zitten een aantal veel gebruikte
effecten zoals het genereren van een glow of van een schaduw ingebakken in de taal.
Animatie binnen SVG kan bestaan uit een gecodeerde beweging of als reactie op een actie
van de gebruiker of ander object. Zwaardere applicaties kunnen gemaakt worden aan de
hand van een scriptaal die toegang heeft tot het SVG Document Object Model (DOM). Dit
model biedt toegang tot de elementen waaruit de afbeelding opgebouwd is, hun attributen
en hun eigenschappen. Aan de hand van een aantal event handlers zoals onclick en
onmouseover biedt SVG de mogelijkheid tot interactie met het SVG object.
We kunnen dus besluiten dat SVG een XML toepassing is die de gebruiker in staat stelt 2D
afbeeldingen en animaties voor deze afbeeldingen te definiëren.
5 http://www.adobe.com/products/illustrator/main.html
25
3.3.3 Een eerste SVG afbeelding:
Aan de hand van een aantal voorbeelden zal ik proberen SVG zo goed mogelijk uit de
doeken te doen. Hierbij zal ook gelet worden op eventuele moeilijkheden die ik onderweg
ondervonden heb.
Een eerste voorbeeld <?xml version="1.0" standalone="no"?> <svg width="600" height="500"> <title>cirkel</title> <circle cx="300" cy="225" r="100" fill="red"/> <text x="300" y="480" font-size="35" text-anchor="middle"> Dit is een cirkel. </text> </svg>
Fig. 3-7 : een eenvoudig SVG voorbeeld
De eerste lijn is de standaard XML processing instructie. Op de tweede lijn wordt het SVG
root-element gedeclareerd en wordt aangegeven dat de uiteindelijke afbeelding een
breedte heeft van 600 en een hoogte van 500 pixels. Het is waarschijnlijk niet
verwonderlijk dat de title-tags de titel van de afbeelding bepalen. Op de vierde lijn begint
het serieuze werk pas echt. Deze lijn bepaalt een cirkel en als standaard attributen heeft een
cirkel een x-centerwaarde, een y-centerwaarde. We hebben de straal een waarde van 100
pixels en de cirkel een rode vulling mee gegeven. De <text>-tag heeft analoge attributen
zodat geen verdere uitleg nodig is.
3.3.4 Animatie met SVG :
Animaties kunnen we indelen op twee verschillende manieren. Een eerste opsplitsing kan
gemaakt worden op basis van de taal die gebruikt wordt om de animatie te scripten. De
eerste methode is via het SVG Document Object Model (DOM), de tweede via JavaScript.
De tweede opsplitsing gebeurt op basis van het feit of de animatie start door een
gebeurtenis (dynamische tijdsrelatie) of op een op voorhand vastliggend moment (statische
tijdsrelatie).
26
3.3.4.1 Timing:
Animaties worden in SVG geschreven aan de hand van een aantal tags. De timing van de
animatie kunnen we op twee verschillende manieren opvatten. We laten de gebruiker de
animatie starten of we coderen de tijdsnoties begin, lengte en einde van de animatie mee in
het SVG-bestand. Op deze laatste manier ligt de animatie van een object dus op voorhand
vast.
Een voorbeeld: <?xml version="1.0" ?> <svg width="800" height="800"> <rect x="10" y="20" width="10" height="20" stroke="black" fill="black">
<animate begin="0s" attributeName="width" attributeType="XML" from="100" to="200" dur="5s" fill="freeze"/>
</rect></svg>
Dit stukje code definieert de animatie van een rechthoek die start met een breedte van 100
pixels en eindigt na 5 seconden met een breedte van 200 pixels. De lijn met
attributeType=”XML” dient om de browser duidelijk te maken dat we een XML attribuut
willen veranderen en bijvoorbeeld geen CSS eigenschap. Indien deze regel weggelaten
wordt dan zal eerst door de CSS eigenschappen gezocht worden en slechts daarna door de
XML attributen. De voorlaatste regel bevat het SMIL fill attribuut dat de animatie engine
zegt hoe het de resterende tijd moet opvullen. In ons geval zal de eindafmeting behouden
blijven. Deze fill is niet dezelfde als de fill die binnen SVG gebruikt wordt om
bijvoorbeeld een rechthoek van kleur te voorzien.
In het volgende voorbeeld zullen we de gebruiker laten bepalen wanneer de animatie moet
beginnen. Dit geeft aanleiding tot dynamische afbeeldingen waarbij het tijdstip van het
begin van de animatie niet op voorhand gekend is. We kunnen de figuur dus dynamisch
aanpassen.
<?xml version="1.0" ?> <svg width="800" height="800">
<rect x="10" y="20" width="10" height="20" stroke="black" fill="black"> <animate begin="click" attributeName="width" attributeType="XML" from="10" to="200" dur="2s" fill="freeze"/>
</rect></svg>
27
3.3.4.2 DOM vs. JavaScript:
Het grote verschil tussen beide is dat JavaScript geen gebruik maakt van XML om de
attributen van SVG objecten te veranderen. Het grote voordeel van JavaScript voor de
mensen die er reeds vertrouwd mee zijn is dat je dezelfde syntax kunt gebruiken als bij
gewone HTML.
JavaScript animatie <script type="text/ecmascript"> <![CDATA[
… het script zelf …
]]> </script>
De <script>-tag duidt aan dat we de wereld van XML/SVG gaan verlaten en dat het
volgende stuk in ECMA Script omgeving uitgevoerd wordt. Het type attribuut geeft weer
welke taal je precies gaat gebruiken.
In XML duidt een kleiner dan teken een tag aan en staat de ampersand voor een escape
karakter. Omdat ECMA Script geen XML is, willen we hebben dat vanaf nu < en & als
gewone karakters beschouwd worden. Daarom gebruiken we de code <![CDATA[ zodat
XML stopt met < en & als speciale symbolen te interpreteren. Vanaf dan zitten we volledig
in de ECMA Script omgeving.
]]> beëindigt het stuk dat we begonnen zijn op lijn twee met <
28
<?xml version="1.0" standalone="no"?> <svg width="6cm" height="5cm" xmlns="http://www.w3.org/2000/svg"> <!-- ECMAScript dat de straal aanpast bij elke klik --> <script type="text/ecmascript"> <![CDATA[ function circle_click(evt) { var circle = evt.target; var currentRadius = circle.getAttribute("r"); if (currentRadius == 100) circle.setAttribute("r", currentRadius*2); else circle.setAttribute("r", currentRadius*0.5); } ]]> </script> <!-- Een rode cirkel die gevoelig is aan muisklikken --> <circle onclick="circle_click(evt)" cx="300" cy="225" r="100" fill="red"/> <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> Klik op de cirkelom de grootte te wijzigen. </text> </svg> Via een onclick-event wordt de functie circle_click opgeroepen en aan de hand van de
functie setAttribute wordt het attribuut, de straal, aangepast.
3.3.4.3 SVG DOM animatie:
De SVG DOM is gebouwd op en is compatibel met het Document Object Model (DOM)
Level 2 specificatie [15]. Deze DOM biedt een platform en taal onafhankelijke interface
aan zodat programma’s en scripts dynamisch toegang kunnen krijgen en indien nodig
updates uitvoeren aan de structuur van het document. Men kan dus bijvoorbeeld
dynamisch attributen en eigenschappen van een tag wijzigen. Een rijke set aan event-
handlers zoals bijvoorbeeld mouseover kunnen toegewezen worden aan een SVG object
zodat een hoge graad van interactiviteit met de gebruiker bereikt kan worden.
Voor een volledige beschrijving van alle ondersteunde DOM-events verwijs ik naar de site
van het W3C [15] waar deze uitvoerig beschreven staan. Ik zal enkel de naar mijn mening
meest gebruikte bespreken. De eerste zes zijn vooral gericht op de muis, daarna volgen een
aantal algemene events.
click : het click-event treedt op wanneer een knop van de muis ingedrukt wordt boven een
element. Een klik wordt gedefinieerd als een mousedown en een mouseup op dezelfde
locatie. Het eigenlijke click-event bestaat uit een sequentie van events, namelijk
mousedown, mouseup en click.
29
mousedown : dit event wordt gegenereerd wanneer een knop van de muis ingedrukt wordt
boven een element.
mouseup : dit event treedt op wanneer een knop van de muis losgelaten wordt boven een
element.
mouseover : wanneer de muisaanwijzer boven een element wordt gehouden, treedt dit
event op. Het wordt bijvoorbeeld gebruikt om een geanimeerd menu te krijgen. Wanneer
de muis boven het menu staat, wordt bijvoorbeeld de kleur van het menu aangepast.
mouseout : dit is het tegenovergestelde van het voorgaande. Wanneer de muisaanwijzer
weggehaald wordt van op een element wordt dit event gegenereerd.
mousemove : bij elke muisbeweging wordt dit event gegenereerd. Het wordt bijvoorbeeld
gebruikt om een animatie te creëren die de muis volgt.
SVGzoom : het zoom-event treedt op wanneer een gebruiker een actie ontlokt die ervoor
zorgt dat het SVG document herschaald wordt.
BeginEvent, endEvent, repeatEvent zijn afkomstig uit de SMIL Animation Specificatie en
worden gegenereerd wanneer er zich een transitie voordoet in de staat van animaties.
3.3.4.4 Opmerking:
Bij het testen van beide soorten animaties met de Adobe speler6 kwam ik tot een nogal
vreemde vaststelling. Als ik twee bestanden maak met identieke animaties dan loopt de
versie die geanimeerd wordt door JavaScript veel vloeiender dan de versie door DOM
animatie. Het verschil in prestatie wordt versterkt wanneer er veel objecten aanwezig zijn.
Dit is echter tegen alle verwachtingen in. Men zou toch mogen verwachten dat een
animatie geschreven in een XML-taal sneller is dan een animatie geschreven in een niet
XML-taal. Hoe dit komt blijft dan ook voor mij een raadsel. Ik heb deze feiten ook
voorgelegd aan Adobe maar ik heb op mijn bevindingen nooit een antwoord gekregen.
Beide voorbeelden lopen echter niet optimaal, daarom het volgende deel: optimalisatie van
SVG.
6 http://www.adobe.com/svg/viewer/install/
30
3.3.5 Optimalisatie van SVG :
Mijn ervaring met SVG is dat het een ongelooflijk sterke taal is maar dat de spelers, die al
deze pracht op het scherm moeten toveren, de kracht van SVG nog niet aankunnen. Voor
sommige dingen is dit compleet normaal. Je kan namelijk moeilijk verwachten van de
ASV (Adobe SVG Viewer) dat deze in real-time een geanimeerde gaussian blur filter kan
berekenen. Zelfs een product dat hiervoor speciaal ontworpen is door Adobe, Adobe After
Effects heeft hier veel moeite mee. Maar toch zou je verwachten dat de ASV, die als betere
beschouwd wordt onder de SVG spelers en veruit het meest verspreid is, toch ongeveer
qua kracht in de buurt van de Flash speler kan komen. Bij het testen van iets zwaardere
SVG slideshows viel onmiddellijk op dat de ASV ongelooflijk veel problemen heeft bij het
animeren van presentaties met meer dan 20 objecten. De animatie zoals een volgende slide
op het beeld brengen bleek al vlug niet meer in real-time te kunnen. Uiteindelijk ben ik er
toch in geslaagd alles vlot te laten lopen en op basis van die ervaringen heb ik een aantal
vuistregels opgesteld.
1. Vermijd het gebruik van doorzichtige vlakken. Dit is een standaard regel voor
iedereen die aan webanimatie doet. Net zoals in Flash zijn talrijke vlakken waarvan
de alpha-waarde niet gelijk is aan 100%, dodelijk voor de CPU. Daarom de gulden
regel, vermijd het aanpassen van de alpha-waarde zoveel mogelijk.
2. Een tweede regel is om objecten die niet gerenderd moeten worden als attribuut
display op none te zetten. Dit heeft tot gevolg dat dit object niet meer in rekening
gebracht wordt. In mijn geval zorg ik ervoor dat enkel de slides die op dat moment
zichtbaar zijn als waarde van de display inline hebben. Dit heeft tot gevolg dat
animaties wel terug vlot lopen.
3. Verder is het best om combinaties van objecten die veel voorkomen in een groep te
steken en deze vervolgens als vaste definitie te behandelen. Via <use
xlink:href="#naam_van_de_definitie" /> kan men dan een nieuwe instantie van de
groep maken.
31
3.3.6 Flash vs. SVG :
In bijna elk artikel [14] [16] komt de strijd tussen SVG en Flash terug. Als voorlaatste
puntje wil ik ook mijn steentje bijdragen tot deze discussie. Als gebruiker van beide kan ik
dus wel een aantal verschilpunten aanstrepen. Voorts wil ik er wel op wijzen dat ik me er
terdege van bewust ben dat de twee technologieën niet gemaakt zijn om met elkaar
vergeleken te worden.
1. De 2 MB download van de speler van Adobe is geen goede zet. De reden voor de
grootte van de speler is het feit dat een aantal bibliotheken van Adobe Illustrator
gebruikt worden. Zolang Adobe zich niet toelegt op een versie die niet gebaseerd is
op een ander programma van hen zal de grote zwakte van SVG de speler blijven.
Over de verspreiding van hun speler willen ze ook geen woord reppen. Enkel via
niet officiële bron komt men een geschat aantal downloads (200.000.000) te
weten. Dit staat in schril contrast met de aanpak van Macromedia dat erin slaagt om
op een jaar tijd een verspreiding op wereldvlak van ongeveer 84 % [17] te krijgen.
Bovendien is de Flash speler slechts 400KB groot.
2. Het grote probleem van Flash is dat het geïsoleerd is. Bij grote applicaties heb je
onmiddellijk de hulp nodig van andere dure Macromedia producten zoals
Coldfusion MX7. SVG kan daarentegen terugvallen op zijn XML roots en kan zo
meer bereiken. Ook bij Macromedia hebben ze ingezien dat XML het formaat is
om data uit te wisselen. Bij de nieuwste versie van Flash, Flash MX, kan men dan
ook uitgebreid gebruik maken van XML. Het is echter jammer dat ze bij deze
versie slechts een aantal mogelijkheden ingebouwd hebben. Een voorbeeld hiervan
is de gebrekkige publieke API van het XML object waarbij slechts de helft
geïmplementeerd werd van wat verwacht wordt van een publieke API [14].
Daarenboven is de XML API zelfs niet eens standaard.
3. Eén van de belangrijkste tekortkomingen van Flash-bestanden is dat ze niet als
tekst bestand kunnen geraadpleegd worden. Hierdoor kunnen ze ook niet door zoek
machines bezocht worden. Daardoor is de nood aan correcte meta-data wel erg
belangrijk. Wegens de slechte toegang tot het formaat zal Flash ook nooit
doorbreken als formaat om bijvoorbeeld dienst te doen als stratenplan. Je kan
7 http://www.macromedia.com/software/coldfusion/
32
namelijk niet zoeken naar een straat op het stratenplan. Voor Flash heeft dit dan
weer een voordeel want zo kunnen Flash animaties niet worden gekopieerd met een
simpele ctrl-c, ctrl-v. Met de bronbestanden van Flash animaties (fla) kan veel geld
verdiend worden. Zo betaal je voor de bronbestanden van Theory7, een bekend
webdesign bedrijf 70 dollar. Het gaat zelfs zover dat deze firma een volledige
online fla-winkel in elkaar heeft gestoken. [18]
Fig. 3-8 : Theory7’s online fla-winkel
4. Flash ontneemt de gebruiker de toegang tot de gewone browser-knoppen. Voor veel
mensen is dit één van de meest storende eigenschappen van Flash. Bij SVG kan een
gebruiker nog altijd deze knoppen gebruiken. Ook het rechtsklikken op een
afbeelding wordt niet aangeboden. Het menu wordt vervangen door een eigen
menu. Om het nog bonter te maken kun je zelfs dit menu weglaten zodat enkel nog
een tekst wordt getoond dat de afbeelding met Flash gemaakt is.
5. Het grootste nadeel van SVG blijft het feit dat er geen hoogstaande ontwerp-
apllicatie is zoals dit bij Flash wel het geval is. Voorlopig moeten ontwerpers dus
blijven gebruik maken van programma’s die niet speciaal ontworpen zijn om SVG
bestanden te maken. Maar dit lijkt geen groot probleem te zijn want meer en meer
wordt SVG gebruikt als programma om dynamische afbeeldingen te maken. Zo
worden taart-diagrammen volledig dynamisch gegenereerd en wordt de data uit de
33
databank gehaald en automatisch verwerkt tot een mooi grafisch geheel door de
databank-software.
Ook hier heeft SVG een voordeel op Flash. Om bijvoorbeeld met php dynamisch
een swf-bestand te creëren heeft men een bibliotheek nodig. Men moet dus extra
software installeren en nieuwe functies leren.
6. Wat heeft SVG meer te bieden dan Flash. Stylesheets! Vele Flash gebruikers
vragen reeds lang om stylesheets te kunnen gebruiken in Flash zodat ze, nu Flash
beperkt toelaat HTML-tags te gebruiken als opmaak, nog meer vrijheid hebben. Er
zou reeds een website zijn die een stuk action-script, de programmeertaal binnen
Flash, aanbiedt om stylesheets te verwerken. Een tweede uitbreiding die Flash
gebruikers graag zouden zien is effecten. Zo is het niet mogelijk om een blur te
definiëren op een Flash-object. Beide zijn echter wel al aanwezig in SVG en
kunnen indien nodig nog uitgebreid worden.
34
3.3.7 SVG in de praktijk :
Omdat SVG nog maar pas de kinderschoenen ontgroeid is, zijn er nog niet veel boeken
over SVG te vinden. De meeste en tevens nieuwste info is te vinden op het internet.
Adobe website (http://www.adobe.com/svg/)
Dit is een startpagina voor iedereen die met SVG bezig is. De site bevat goede tutorials en
een duidelijke uitleg over het wat en hoe van SVG. Maar het allerbelangrijkste is natuurlijk
de gratis Adobe SVG viewer 3.0 (ASV) die men er kan downloaden zodat SVG-bestanden
bekeken kunnen worden.
Battlebots (http://www.battlebots.com/svg_info.asp)
Op deze website staan een
aantal schitterende
applicaties van SVG. Zo is
het mogelijk je eigen
battlebot te besturen. Verder
krijg je ook meer info over
het speelveld dat gebruikt
wordt in de echte
televisieafleveringen van
deze show of kan je eigen
robot samenstellen.
Fig. 3-9 : Battlebots website
Missile Defense (http://www.kevlindev.com/games/missile/index.htm)
Een klein spelletje waarmee de kracht van SVG getoond wordt.
Pixelize (http://www.kevlindev.com/samples/pixelize/index.htm)
35
Een verbluffend staaltje van de kracht
van SVG. Het totale project omvat een
aantal voorbeelden waarbij een
pixeleffect toegepast wordt op een foto.
Aan de hand van een schuifbalk kan
men instellen hoe groot de pixels
moeten zijn. Dit alles kan de gebruiker
dynamisch aanpassen. Als persoonlijke
noot moet ik er aan toevoegen dat ik een
gelijkaardige applicatie in Flash nog niet
gezien heb. Fig. 3-10 : Pixelize
Wiki (http://www.protocol7.com/svg-wiki/)
Dit is een startpagina voor iedereen die met SVG bezig is. Deze site geeft vooral algemene
informatie omtrent SVG.
Pinkjuice (http://www.pinkjuice.com/svg/)
Dit is de experimentele zolder van een digitale artiest.
Fig. 3-11 : een SVG experimen
36
svgGP (http://www.corporatemontage.com.au/svg/svggp/car.svg)
Fig. 3-12 : svgGP, een SVG race-spel
Dit is het beste SVG spelletje dat ik tot nu toe gezien heb. Ik heb het wel al een aantal keer
gezien in Flash maar de SVG versie moet zeker niet onderdoen. Het is verbazingwekkend
dat de snelheid van het spel zo hoog ligt.
37
3.4 Visual Basic for Applications 3.4.1 Inleiding:
VBA (Visual Basic for Applications) is een krachtige object-gebaseerde scripttaal die
ontwikkelaars van applicaties in staat stelt de objecten binnen de applicatie te manipuleren
zodat eigen functionaliteit of geautomatiseerde processen toegevoegd kunnen
worden.VBA is zoals reeds uit de naam af te leiden is, afkomstig van Microsoft Visual
Basic. Het grote verschil tussen de twee is dat VBA er eerder op gericht is om bestaande
software uit te breiden om zo oplossingen te bieden aan persoonlijke problemen in plaats
van een volledig nieuw software pakket te schrijven. Een andere taal waar VBA mee
verward wordt, is VBScript. VBScript is echter een afgeslankte versie van Visual Basic en
biedt zodus minder functionaliteit aan. Verder is VBScript ontwikkeld om binnen een
webbrowser uitgevoerd te worden.
VBA biedt een aantal object-georiënteerde mogelijkheden aan zoals encapsulatie maar
biedt niet alle mogelijkheden aan die men zou verwachten binnen een object-
georiëntieerde taal.
De bouwstenen van VBA applicaties zijn macro’s. Dit zijn kleine stukjes code die de
applicatie waarin gewerkt wordt, bijvoorbeeld PowerPoint, iets laten doen. Dit kan gaan
van het wegschrijven van een log-bestand tot het wegschrijven van een boodschap naar het
scherm. Meestal worden macro’s gecreëerd om repetitieve taken uit te voeren. De
nieuwste versie, VBA 6.3 werd op de markt gebracht in 2001 [19].
3.4.2 Objecten:
Bij VBA draait alles om objecten. Microsoft definieert een object als een ding dat
geprogrammeerd of gecontroleerd kan worden, zoals een document, een tekstvak of een
afbeelding. Een object is dus een combinatie van code en data. Code slaat in dit geval op
de functies die verbonden zijn met het object, de data heeft te maken met de eigenschappen
van het object. Een ander belangrijk begrip binnen VBA is het object-model. Dit is een
voorstelling van de hiërarchie van de objecten zodat een overzichtelijke weergave wordt
gegeven voor het ontwikkelen van een applicatie.
Het meest gebruikte instrument voor het ontwikkelen van applicaties is de Object Browser.
Het linker-deel toont alle mogelijke objecten die bruikbaar zijn binnen VBA en het rechter-
deel toont de verschillende attributen en functies die toegepast kunnen worden op het
geselecteerde object.
38
Fig. 3-13 : de Object Browser, het Application-object
Het opper-object is meestal het Application-object. Bij PowerPoint is dit
PowerPoint.Application zelf. Via dit Application-object is het mogelijk de onderliggende
objecten te bereiken. Dit natuurlijk op voorwaarde dat het Application-object bestaat, met
andere woorden dat PowerPoint opgestart is. In het geval van PowerPoint is het kind-
object bijvoobeeld ActivePresentation wat de actieve presentatie is. Deze
ActivePresentation is natuurlijk ook ouder van een aantal objecten zoals bijvoorbeeld
Slides. Indien een ouder meerdere kinderen heeft dan spreekt men van een collectie. Een
ActivePresentation bestaat dus meestal uit een collectie slides.
39
3.4.3 Efficiënte code schrijven in VBA:
Office maakt gebruik van zowel de COM (Component Object Model) en de ActiveX
interface zodat er veel onnodige code wordt gegenereerd. Daarom volgen nu enkele tips
om de code efficiënter te laten lopen [20]. Ik heb geprobeerd om deze regels zoveel
mogelijk toe te passen in mijn eigen VBA-applicaties.
• With ... End With
Wanneer er veel attributen van een object worden geraadpleegd of worden
gewijzigd zal de code sneller zijn als men niet telkens de volledige referentie moet
nagaan van het object. Een voorbeeld hiervan is het deel dat de eigenschappen van
het lettertype nagaat. Deze eigenschappen liggen verborgen binnen het tekstvak. With sh.TextFrame.TextRange.Font vertical_offset = .Size fontname = .Name fontsize = Int(.Size * export_scaling_factor) largestfontsize = .Size fontcolor = .Color.RGB fontcolorrgb = rgb_to_color(fontcolor) End With Dit stukje code gaat sneller dan bij elke assignatie de volledige resolutie op te
geven zoals bijvoorbeeld sh.TextFrame.TextRange.Font.Size omdat dan telkens de
volledige object-structuur afgelopen moet worden.
• Het gebruik van For Each ... Next is ook sneller dan de gewone for-lussen. Daarom
werd het gebruikt bij het doorlopen van de slides. For Each slid In Application.ActivePresentation.Slides ‘ Here comes the code in the loop Next slid
3.4.4 Enkele voordelen van VBA:
Als laatste stuk over VBA wil ik afsluiten met enkele voordelen die de taal heeft.
• Code kan herbruikt worden tussen verschillende applicaties omdat VBA
bijvoorbeeld binnen het Microsoft Office framewerk de standaardtaal is.
• VBA laat toe bestaande applicaties zo aan te passen zodat ze voldoen aan de eisen
van de gebruiker.
• Tussen verschillende VBA-applicaties is het overbrengen en het delen van data
veel eenvoudiger.
40
Hoofstuk 4
De applicatie
4.1 Inleiding
In de vorige hoofdstukken werden een aantal technologieën voorgesteld. In dit hoofdstuk is
het de bedoeling om op basis van die technologieën een concrete uitwerking te maken van
de nieuwe architectuur. In deze architectuur worden de presentatie en de video los van
elkaar behandeld en opgeslagen. De presentatie wordt namelijk omgezet naar een state-of-
the-art taal, SVG. Het samenvoegen van de twee, de SVG-presentatie en de MPEG-4 video
gebeurt zo laat mogelijk. Ze worden namelijk pas samengevoegd in de speler.
Fig. 4-1 : een schematische voorstelling van de nieuwe architectuur
41
Een eerste, belangrijke vraag was of het mogelijk is via SVG PowerPoint te simuleren. Al
vlug bleek dit resultaat positief. Een logische tweede vraag volgde: Is het mogelijk
PowerPoint-presentaties om te zetten naar SVG en dit automatisch? Later werd aan deze
vraag een vervolg gebreid door te eisen dat SVG ook de muisbewegingen voor zijn
rekening nam. Op al deze vragen kan een positief antwoord gegeven worden door een
applicatie te ontwerpen die PowerPoint automatisch omzet en daarenboven in staat is
muisbewegingen op te nemen.
Om de kracht van SMIL te testen werd geopteerd om aan de applicatie een vervolg te
breien door de SVG-presentatie te synchroniseren met MPEG-4 video. Later kwam het
animeren van de video erbij als extra uitdaging.
42
4.2 De omzetting naar SVG
4.2.1 Inleiding
In het begin zag het er naar uit dat dit het moeilijkste deel van de thesis zou worden. Na
enig speur- en programmeerwerk bleek het schrijven van een macro in Visual Basic for
Applications (VBA) de eenvoudigste oplossing. Een andere mogelijkheid bestond erin om
aan de hand van stylesheets de HTML-output van PowerPoint om te zetten naar SVG.
Maar wegens de gebrekkige HTML-output en het feit dat dit niet echt een oplossing is die
getuigt van hoog niveau, heb ik beslist dit pad te verlaten.
Er bestaan reeds enkele applicaties die PowerPoint omzetten naar HTML [21] maar een
applicatie die de omzetting doet naar SVG was nog niet voor handen. Mijn code is voor
een klein stuk gebaseerd op een applicatie van Tim Pagden [22]. Ik heb echter de macro
herschreven zodat veel meer toeters en bellen van PowerPoint ondersteund worden.
Natuurlijk heb ik niet de tijd gehad om alle deze toeters en bellen te implementeren.
De macro zelf bestaat uit twee delen. Het eerste deel exporteert de afbeeldingen uit de
Powerpoint-presentatie naar losse jpg’s die later in het SVG-bestand ingeladen kunnen
worden. Het tweede deel is verantwoordelijk voor de omzetting van de informatie op de
slides en de animaties van de slide-overgangen.
Tevens zijn er een aantal help-functies die door verschillende export-functies gebruikt
worden. Dit komt omdat het me beter lijkt om generieke handelingen zoals het afleiden
van de kleur van een lijn of vulling van een object door één generieke functie te laten
behandelen.
De volledige VBA-code werd bijgevoegd op het einde van dit werk als Appendix A.
Tevens werd er geprobeerd zo weinig mogelijk code in dit deel op te nemen. Er wordt
daarentegen meer de nadruk gelegd op hoe de applicatie in elkaar zit.
43
4.2.2 Globale variabelen:
Bij het opstarten van de presentatie verschijnt er een formulier. Op dit formulier kan de
gebruiker ingeven waar hij de presentatie wil opslaan en wat hij als naam wil.
Fig. 4-2 : Formulier voor het doelpad en de bestandsnaam
De data van dit formulier wordt bij het ok klikken gestuurd naar de module data. In deze
module zijn er twee functies aanwezig. Setdata zorgt voor het opslaan van het pad en
setnaam voor de naam van het presentatie-bestand. Als men later het pad of de naam nodig
heeft, kan men deze op eenvoudige wijze verkrijgen door het aanroepen van de functie
setdata of setnaam.
4.2.3 Het omzetten van afbeeldingen:
Omdat PowerPoint de afbeeldingen, die op de slides gebruikt worden, opslaat binnen
het PowerPoint bestand, is het nodig dat deze afbeeldingen geëxporteerd worden aan de
hand van een macro [23] vanuit PowerPoint zodat ze kunnen ingeladen worden in SVG
door gebruik te maken van <img>-tags. Hiervoor wordt de export-functie van PowerPoint
gebruikt. Voor het gemak worden alle afbeeldingen weggeschreven als jpg. Dit zorgt voor
een aantal nadelen. Deze worden in een later puntje besproken.
44
Er zijn twee macro’s, één voor Office XP en één voor de andere versies van Office8. De
reden voor deze opsplitsing wordt eveneens in een later puntje uitgelegd.
Call oSld.Export(sPath & "img" & Format(Ctr, "00000") & ".JPG", "JPG") of in de XP-versie Call oShpSource.Export(sPath & "img" & _ Format(Ctr, "0000") & ".JPG", ppShapeFormatJPG)
De twee stukken code verschillen dus slechts een klein beetje. De Format instructie zorgt
ervoor dat alle afbeeldingen eenzelfde type bestandsuitgang hebben zodat het later
overzichtelijker is om deze afbeeldingen in de SVG-presentatie in te voegen.
4.2.4 De kleuromzetting:
Vermits PowerPoint niet werkt met een hexadecimale notatie van kleuren moet er dus een
conversie gebeuren naar een hexadecimale voorstelling.
Private Function rgb_to_color(intRGB) As String 'converts VBA RGB integer to #rrggbb format string redRGB = Hex(intRGB Mod 256) 'red If Len(redRGB) = 1 Then redRGB = "0" & redRGB End If greenRGB = Hex(intRGB \ 256 Mod 256) 'green If Len(greenRGB) = 1 Then greenRGB = "0" & greenRGB End If blueRGB = Hex(intRGB \ 65536 Mod 256) 'blue If Len(blueRGB) = 1 Then blueRGB = "0" & blueRGB End If rgb_to_color = "#" & redRGB & greenRGB & blueRGB End Function
Deze functie wordt elke keer opgeroepen als er een kleur wordt weergegeven zoals
bijvoorbeeld bij het bepalen van de achtergrondkleur van een vierkant.
8 ‘97 en 2000
45
4.2.5 Het converteren van de slides
Dit deel van de code is gebaseerd op een stuk (half-werkende) code [22] die ik gevonden
heb op het internet. Er zijn echter een aantal veranderingen in aangebracht zodat het beter
aansluit bij mijn project. De tijdstippen van de slide-overgangen worden wel ingelezen uit
een tekstbestand en worden later in de SVG-code verwerkt. Als laatste wordt de SVG-
code voor de muis toegevoegd. Deze code wordt gehaald uit een tekstbestand dat gemaakt
is aan de hand van een andere stuk VBA-code dat verantwoordelijk is voor het opnemen
van de muisbeweging.
For Each slid In Application.ActivePresentation.Slides help = "<g id=""slide" & slid.SlideNumber & """><use xlink:href=""#background"" x=""0"" y=""0"" />" help = help & main_select(slid) help = help & "</g>" slides_output(slid.SlideNumber) = help Next slid
Elke slide wordt via een for-loop afgelopen en wordt opgeslagen binnen een groep-tag met
als id-naam slide en het nummer van de slide. Vervolgens voegen wij bij elke slide de
standaard achtergrond in via de use-tag. De inhoud van de achtergrond werd eerder
afgeleid en weggeschreven naar het SVG-bestand. Tijdens de loop wordt telkens
gesprongen naar de functie main_select. Deze fucntie loopt de verschillende objecten op de
slide af en roept de bijhorende output-functie aan. De bijhorende output-functie wordt
bepaald door het object-type. Zo hebben tekstvakken type 17 en afbeeldingen het nummer
13.
46
De volledige keuze-functie staat hieronder.
Private Function main_select(ByVal s As Slide) As String ' This function evaluates the shapetype number and chooses, based on that number the right export-function ' Following names are substitutes for the number of thge shapetype shape_img = 13 shape_title = 14 shape_text = 17 shape_simple = 1 Shape_line = 9 For Index = 1 To s.Shapes.Count 'Shape is an image If s.Shapes.Item(Index).Type = shape_img Then main_select = main_select & export_image(s.Shapes.Item(Index)) 'Shape is a title ElseIf s.Shapes.Item(Index).Type = shape_title Then main_select = main_select & export_text(s.Shapes.Item(Index)) 'Shape is a text ElseIf s.Shapes.Item(Index).Type = shape_text Then main_select = main_select & export_text(s.Shapes.Item(Index)) ' Shape is an auto-form ElseIf s.Shapes.Item(Index).Type = shape_simple Then main_select = main_select & export_simple(s.Shapes.Item(Index)) ElseIf s.Shapes.Item(Index).Type = Shape_line Then main_select = main_select & export_line(s.Shapes.Item(Index)) End If Next End Function
4.2.6 De mogelijkheden van de macro
De macro’s bevatten enkel de basisfunctionaliteit. Een macro die elke PowerPoint-
presentatie compleet kan omzetten is onmogelijk te schrijven op één semester. Ik hoop dat
ik voldoende commentaar toegevoegd heb zodat mensen die mijn code willen aanvullen
geen problemen zullen hebben.
• Tekst: de tekstvakken worden geëxporteerd naar SVG. Men kan onder ander
gebruik maken van verschillende kleuren en letterstijlen zoals vet, cursief en
onderlijnen. Het gebruik van verschillende lettergroottes binnen één tekstvak levert
wel wat problemen op. Meer hierover is terug te vinden in het deel over de
problemen van de conversie. Het gebruik van verschillende kleuren of
verschillende parameters binnen één tekstvak zorgt ook wel voor een enorme
hoeveelheid aan extra code in het SVG-bestand zodat het allemaal wat
onoverzichtelijker is.
47
• Afbeeldingen: afbeeldingen kunnen eveneens worden weergegeven in de SVG-
presentatie. Alle afbeeldingen worden eerst zoals in een vorig deel werd
beschreven omgezet naar jpg-bestanden. Enkel de naam van het bestand
(imgxxxx), de plaats en grootte moeten dus weggeschreven worden naar het SVG-
bestand.
• Cirkels en ellipsen: de functie export_circle doet meer dan de naam laat
vermoeden. Naast cirkels kunnen ook ellipsen weggeschreven worden. SVG maakt
een onderscheid tussen cirkels en ellipsen. Cirkels worden weergegeven aan de
hand van de <circle>-tag. Hierbij moet een x- en y-coördinaat opgegeven worden
en een straal. Ellipsen worden weergegeven met een <ellipse>-tag. Hierbij moet
zowel een x als een y-waarde voor de straal opgegeven worden. Ik maak dit
onderscheid niet omdat zo met één functie zowel ellipsen als circkels
weggeschreven kunnen worden.
• Rechthoeken: rechthoeken worden ook ondersteund, zolang ze niet geroteerd
worden of er een andere transformatie op toegepast wordt.
• Lijnen: de demo kan ook lijnen met de juiste kleur en lijndikte exporteren
• Slide-transities: PowerPoint slaagt erin een ongelooflijk aantal transities aan te
bieden aan de gebruiker. Dit gaat van eenvoudige transities zoals bedekkend van
links tot meer complexe transities waarbij woorden als het ware na twee volledige
omwentelingen en iedere hoek van het scherm gezien te hebben tot stilstand
komen. Omdat deze laatste soort transities vooral de aandacht afleiden van de
inhoud van de slides, heb ik ervoor geopteerd om enkel eenvoudige slide-
overgangen aan te bieden. Het staat personen die per se een complexe slide-
overgang willen natuurlijk vrij om dit zelf te implementeren in VBA. Het tijdstip
waarop de transitie moet beginnen wordt ingelezen uit een tekstbestand, klik.txt.
Dit tekstbestand moet dus op voorhand aangemaakt worden. Dit is mogelijk aan de
hand van de code in het volgende deel over het opnemen van de muisklikken. De
verschillende tijdstippen, die gescheiden zijn door ; worden ingelezen en één voor
één weggeschreven bij de juiste slide.
48
Fig. 4-3 tot 4-6 : Vergelijking tussen links PowerPoint-slides en rechts geëxporteerde SVG-slides
49
4.2.7 De problemen
Problemen met afbeeldingen:
Gif-afbeeldingen met een doorzichtige achtergrond worden niet goed geëxporteerd. De
doorzichtige achtergrond wordt namelijk vervangen door een witte achtergrond. Dit komt
omdat de gif-afbeeldingen omgezet worden naar jpg-afbeeldingen en jpg-afbeeldingen
kunnen geen doorzichtige achtergrond hebben.
Fig. 4-7 en 4-8 : Vergelijking tussen links PowerPoint-slide en rechts de geëxporteerde SVG-slide met betrekking
tot het exporteren van gif-bestanden
Dit deel is dus nog voor verbetering vatbaar. Andere formaten zoals PNG, BMP worden
eveneens niet ondersteund.
Een tweede probleem met de omzetting van afbeeldingen is het feit dat er twee macro’s
zijn, één voor Office XP en een versie voor de andere Office versies. Het zou mooi zijn als
deze tot één macro konden worden teruggebracht zodat de omzetting kan gebeuren zonder
tussenkomst van de gebruiker. Het feit dat er twee versies zijn, is te wijten aan de lichtjes
andere export-functie binnen Office XP.
Een derde probleem is dat de huidige code de afbeeldingen die als achtergrond van elk
slide ingesteld staan, niet exporteren en deze dus niet kunnen worden ingeladen. Dit is dus
een puntje dat eveneens voor verbetering vatbaar is.
50
Problemen met de tekstomzetting:
Voor twee woorden kunnen verschillende kleuren gebruikt worden. Maar op dit moment
kan men geen verschillende kleur per letter gebruiken. Dit zou eventueel verbeterd kunnen
worden zodat verschillende kleuren per letter gebruikt kunnen worden.Verder zijn er nog
een aantal problemen met het exporteren van tekst. Deze treden vooral op wanneer de
gebruiker een waaier aan verschillende lettergroottes binnen eenzelfde tekstvak gebruikt.
Indien dit gebeurt slaat PowerPoint in plaats van de grootte van het lettertype iets anders
op, bijvoorbeeld “12+” als grootte van het lettertype binnen het tekstvak en “+2’ als
grootte van het eigenlijke woord. Indien deze waarde dan geëxporteerd wordt dan zal de
speler de verkeerde grootte weergegeven. De auteur moet er dus over waken dat hij ervoor
zorgt dat de juiste grootte wordt opgeslagen.
Fig. 4-9 : PowerPoint slaat een verkeerde waarde op als lettergrootte
Verdere problemen treden op bij het gebruik van niet standaard karakters. Zo zet
PowerPoint drie puntjes om naar ..., wat een speciaal karakter is dat door SVG niet kan
worden weergegeven. Alle speciale karakters moeten dus omgezet worden naar hun
overeenkomstige unicode waarde [24].
51
Op dit moment wordt enkel ’ vervangen. De letters ë, ö, ü en ä worden echter niet goed
weergegeven wegens een andere reden. Als we <?xml version="1.0" encoding="iso-8859-1"
standalone="no"?> nemen als XML-processing instructie worden ze wel goed
weergegeven.
Een ander typisch probleem met PowerPoint is het gebruik van niet-standaard lettertypes.
In tegenstelling tot bijvoorbeeld Macromedia Flash is het bij PowerPoint niet mogelijk om
op eenvoudige wijze het lettertype bij de presentatie te voegen. Dit wil zeggen dat als de
gebruiker het lettertype niet op zijn computer heeft staan PowerPoint dit automatisch
vervangt door een lettertype dat gelijkaardig is maar wel op de computer staat. Dit
probleem treedt eveneens op binnen SVG.
Er is ook een probleem met de allignatie van tekstvakken. Links uitlijnen is geen probleem.
De problemen beginnen wanneer men verschillende kleuren of stijlen gebruikt binnen één
tekstvak dat bijvoorbeeld in het midden gealligneerd is. Het eerste deel van de tekst zal in
het midden gealligneerd staan, de rest staat echter gewoon tegen het eerste deel aangeplakt.
Het totale tekstvak is dus niet meer in het midden gealligneerd.
SVG kan net zoals HTML geen twee spaties tonen. Dus als men meerdere spaties invoegt,
zullen deze vervangen worden door één spatie. Hier is geen ontkomen aan.
Een ander Microsoft grilletje speelt eveneens een rol bij het exporteren van tekst.
PowerPoint hanteert namelijk als afstandsmaat de zelf gedefinieerde pica in plaats van
bijvoorbeeld de logische pixel-maat. Om de tekst te exporteren heb ik dus een aantal uur
gezocht naar de ideale maat zodat de pica-pixel-conversie ongeveer klopt. Het kan dus nog
altijd zijn dat een stuk van de tekst niet volledig op het scherm staat omdat het te dicht bij
de onderste rand van de slide stond. Wegens tijdsdruk ben ik gestopt met het zoeken naar
de beste verhouding voor de lettergroottes en de afstand tussen twee regels.
Terugkeren naar de vorige slide:
Het is niet mogelijk om te registeren of er teruggekeerd wordt naar een vorige slide.
Aangezien het in een goed ontworpen presentatie niet nodig zou mogen zijn om naar een
vorige slide terug te keren, heb ik besloten dit ook niet te implementeren. Het is mogelijk
dit te implementeren maar het leidt tot behoorlijk wat codeerwerk.
52
Problemen met Z-ordening:
Z-ordening wordt eveneens niet ondersteund. Binnen een PowerPoint-slide is het namelijk
mogelijk om een object helemaal naar voor of naar achter op de slide te brengen. De
eigenschap die hiervoor zorgt is de z-ordening. Dit is echter gemakkelijk op te vragen via
.Zorder. De ordening is dezelfde als binnen de layout-module van SMIL. Hoe hoger de
waarde, hoe hoger het element ligt op de slide.
Animaties binnen slides:
Wegens tijdsgebrek zijn de animatie mogelijkheden binnen een slide achterwege gelaten.
Binnen een slide is het namelijk mogelijk om een stuk tekst pas na een klik te voorschijn te
laten komen. Het is mogelijk om dit binnen SVG ook te implementeren maar wegens
tijdsgebrek en het feit dat animaties binnen slides nu eenmaal niet super belangrijk zijn,
heb ik besloten dit niet te implementeren.
Problemen met auto-vormen:
De auto-vormen zijn opgesplitst in een aantal klassen. Zo behoren alle vierhoeken tot één
klasse. Nu was het de bedoeling om binnen één klasse één generieke export-functie te
definiëren.
Dit is echter niet gelukt. Het probleem zit hem in het feit dat men bij auto-vormen de
hoekpunten niet uit het object kan afleiden. Als men de vierhoek zelf tekent, wordt de lijn-
export-functie gebruikt die de x- en y-coördinaten via .Nodes(index).Points(1, 1) voor de
x-waarde en .Nodes(index).Points(1, 2) voor de y-waarde wel uit het object kan afleiden.
Bijvoorbeeld bij de vierhoek links kan men enkel de x en y
coördinaten afleiden van de linkerbovenhoek van de
”bounding box”. De coördinaten van de hoekpunten van het
parallellogram kan men niet achterhalen. Persoonlijk
beschouw ik dit als een inconsistentie van de taal. Tot nu toe
weet ik geen oplossing voor dit probleem. De enige manier die
ik nu zie, is de radicale manier: het verbieden van auto-vormen of de gebruiker verplichten
de tekeningen zelf te maken.
53
Naamgeving:
Op dit moment heb ik zelf de namen bedacht bij het nummer van de animatieklasse of het
type van het object. Elk item op een slide heeft een nummer dat zegt wat het precies is. Zo
heeft een afbeelding het nummer 13, tekst het nummer 17 en alle auto-vormen hebben het
nummer 1.
Binnen PowerPoint bestaan er namen die bestaan uit letters in plaats van nummers. Een
voorbeeld hiervan is msoPicture wat voor het type afbeelding staat en dus eigenlijk gelijk
is aan het nummer 13. Het enige probleem is dat deze constanten zo goed verstopt zitten op
de PowerPoint website [25] dat men ze moeilijk kan vinden.
Geluiden exporteren:
Een programma dat een 100% procent identieke conversie doet van een PowerPoint-
presentatie naar een SVG-presentatie zal nooit geschreven kunnen worden. SVG
ondersteund namelijk, in tegenstelling tot PowerPoint, geen geluid. Sommige (meestal
minder ervaren) auteurs gebruiken geluiden, of dit al dan niet om een gebrekkige inhoud te
verbergen is, laat ik in het midden. SVG is echter niet in staat om deze geluiden af te
spelen. Er is geen tag of module die in staat is geluid te beschrijven. SVG dient om
grafische objecten te beschrijven en geluid hoort hier niet thuis. De enige mogelijkheid die
ik zie om de geluiden toch mee in de presentatie te krijgen is door ze eerst te exporteren
naar wav of mp3 en dan te synchoniseren met de presentatie met SMIL. Het invoeren van
geluid schept een bijkomend probleem omdat men soms niet weet wanneer het geluid
afgespeeld moet worden. Als dit bij het veranderen van slide is, dan kunnen we het tijdstip
uit het tekstbestand klik.txt halen. Moeilijker is het als het tijdstip van afspelen bepaald
wordt door de gebruiker bijvoorbeeld doordat de presentator met de muis over een
luidsprekertje beweegt. Het precieze tijdstip is dan bij het schrijven van de presentatie niet
gekend. Technisch gezien zou het wel mogelijk zijn. Men zou namelijk een stuk code
kunnen hangen aan dat luidsprekertje zodat als er over bewogen wordt er een stukje code
uitgevoerd wordt dat de exacte tijd wegschrijft naar een bestand. Maar wegens tijdsgebrek
en de lage prioriteitsgraad van dit item heb ik dit niet verder uitgewerkt.
54
Speciale objecten binnen PowerPoint:
Sommige mensen slagen er in de meest exotische objecten in een slide te importeren.
Voorbeelden hiervan zijn Flash, OLE-objecten, filmpjes, Exell-tabellen, WordArt en vele
andere. Als men ondervindt dat PowerPoint zelf al moeilijkheden9 genoeg heeft met het
importeren en juist weergeven van deze exotische objecten dan is het niet verwonderlijk
dat SVG niet in staat is deze objecten weer te geven. Hiervoor is SVG ook niet gemaakt.
Ook hier rijst de vraag of al deze “features” wel nuttig zijn binnen het kader van een goede,
duidelijke presentatie.
Problemen met hyperlinks:
Hyperlinks worden ook niet mee geëxporteerd. Binnen SVG is het mogelijk om
hyperlinks te leggen naar andere objecten aan de hand van het <a>- element. Een
voorbeeld hiervan zou kunnen zijn:
<a xlink:href=http://www.wimpers.tk> <circle cx=”10” cy=”50” r=”50” style=”fill:red ;”/> </a>
Dit voorbeeldje zou bij het klikken op de rode cirkel de website http://www.wimpers.tk
inladen in hetzelfde venster.
9 Bijvoorbeeld het juist weergeven van Flash-bestanden binnen PowerPoint is bijna onmogelijk in goede banen te leiden. Er komt al heel wat codeerwerk bij kijken om de Flash-animatie naar zijn beginbeeld terug te brengen bij het herbekijken van de slideshow.
55
4.2.8 Conclusie:
De basis van een programma dat PowerPoint omzet naar SVG is met mijn applicatie
gelegd. Er zijn nog een aantal tekortkomingen en problemen bij de conversie die wegens
tijdsgebrek en de vele toeters en bellen van PowerPoint respectievelijk niet
geïmplementeerd of opgelost konden worden. Een volledige 100 procent accurate
omzetting van PowerPoint naar SVG zal nooit lukken. Daarvoor is SVG ook niet
ontworpen. Het gebruik van geluid binnen SVG is bijvoorbeeld al niet mogelijk. Verder is
er ook nog de gebrekkige ondersteuning van tekstvakken die voor veel problemen zorgen
bij het exporteren. Ik denk dat mijn demo wel bewijst dat de vraag of SVG, als taal die niet
ontwikkeld is om PowerPoint om te zetten, in staat is om PowerPoint tot op zekere hoogte
te benaderen, een positief antwoord verdient. Voor die kleine ruimte waar SVG
PowerPoint niet kan volgen, kan men zich afvragen of deze “features” van PowerPoint wel
bijdragen tot het doel van de presentatie. Dit is een duidelijke presentatie creëren die de te
vertellen boodschap zo goed mogelijk overbrengt.
Ik hoop dat de macro voldoende commentaar bevat zodat personen die eventueel
uitbreidingen aanbrengen met mijn code niet veel problemen hebben. Een puntje waar ik
ook geen aandacht aan besteed heb, is het afhandelen van fouten.
56
4.3 Het opnemen van de muisbeweging 4.3.1 Inleiding
Een belangrijk aspect van een presentatie is de muisbeweging. Door deze bewegingen kan
een spreker beter accenten leggen op de belangrijkste punten van de presentatie. Om via
SVG en SMIL een goede presentatie te geven, is het dus noodzakelijk om de
muisbewegingen van de spreker op te kunnen nemen. Mijn eerste idee was om dit te doen
met Visual Basic. Een eerste demo rolde zonder veel problemen uit de computer. Deze
demo bestond uit het opnemen van de bewegingen op een aantal jpg-afbeeldingen van een
demo-presentatie. Een versie op een echte PowerPoint-presentatie werkte echter niet. Een
tweede manier werd gecodeerd in Visual Basic for Applications. Ook hier strandde ik.
Vervolgens lukte het mij een programma te schrijven in C++ en de volgende methode was
een totaal nieuwe aanpak in VBA. In de volgende paragrafen geef ik meer uitleg over mijn
zoektocht.
57
4.3.2 Visual Basic
Zoals in de inleiding gezegd, lukte een demo op jpg-afbeeldingen al vrij snel. Ik maakte
gebruik van een timer, die de tijd voorstelt. Om de 100 milliseconden paste ik deze
variabele aan en zo kon ik de tijdstippen bepalen waarop muisbewegingen gebeurden en
deze wegschrijven naar een tekstbestand.
Het registreren van de muisbewegingen gebeurde door twee events, MouseMove en
MouseUp. Zoals de naam het zegt, registreert het MouseMove-event de verplaatsing van
de muis. In plaats van MouseMove had ik er ook voor kunnen kiezen om bij elke interrupt
van de klok de positie van de muis te registreren. Ik heb gekozen om via MouseMove te
werken omdat bij normale presentaties de muis meestal niet beweegt. Op deze manier was
het wel nodig om twee reservevariabelen in te voeren. De reden hiervoor is dat op deze
manier voor de beweging van de muis nog eens expliciet de muiscursor op de juiste positie
moet staan anders bekomt men een lange, trage beweging van het ene punt van stilstand
naar het andere en dus geen korte bewegingen met stilstand ertussen.
Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) Dim variable1 As String dur = tijdstip - oldtijdstip If dur > 0 Then deel1 = oldtijdstip \ 10 deel2 = oldtijdstip Mod 10 deel1a = dur \ 10 deel2a = dur Mod 10 Open "c:\thesis\temp\muis.svg" For Append As #1 If dur < 2 Then variable1 = "<animateMotion from=""" & oldX & "," & oldY & """ to =""" & X & "," & Y & """ begin =""" & deel1 & "." & deel2 & "s"" dur=""" & deel1a & "." & deel2a & "s"" fill =""freeze""/>" Else deel1b = oldtijdstip \ 10 deel2b = oldtijdstip Mod 10 variable1 = "<animateMotion from=""" & oldX & "," & oldY & """ to =""" & oldX & "," & oldY & """ begin=""" & deel1b & "." & deel2b & "s"" dur=""" & deel1a & "." & deel2a & "s"" fill =""freeze""/>" Print #1, variable1 variable1 = "<animateMotion from=""" & oldX & "," & oldY & """ to =""" & X & "," & Y & """ begin =""" & deel1 & "." & deel2 & "s"" dur=""" & "0.1" & "s"" fill =""freeze""/>" End If Print #1, variable1 Close #1 oldX = X oldY = Y oldtijdstip = tijdstip End If End Sub
58
Wat uitleg over de code:
Dit deel van de code wordt uitgevoerd telkens de muis een beweging maakt binnen het
venster waarin de presentatie loopt. Als de beweging niet binnen dezelfde milliseconde
valt wordt de if-lus behandeld. Hier maken we onderscheid tussen het feit of de beweging
binnen twee milliseconden na een andere beweging valt. Indien dit zo is dan wordt enkel
de muiscursor verplaatst. Indien dit niet het geval is dan definiëren we eerst een animatie
die de cursor op zijn plaats houdt gedurende de tijd tussen de twee muisbewegingen.
Indien we dit niet zouden doen, krijgen we een trage beweging van de laatste positie waar
de muis was naar de nieuwe positie op het scherm. Door het invoeren van twee
<animateMotion>-tags kunnen we dit vermijden.
Als laatste stap vervangen we dan de oude tijd door de huidige tijd en de oude x- en y-
positie door de huidige.
Het tweede deel van het opnemen van de muisbeweging bestaat uit het detecteren van de
linker muisklik. Ook hiervoor maken we gebruik van een event, MouseUp. Bij een klik
schrijft de procedure, die door dit event getriggerd wordt, de animatie van de slide naar het
SVG-bestand weg. Tevens wordt de nieuwe slide op het formulier ingeladen.
Enkele bedenkingen:
• De presentatie kan niet oneindig lang duren want de tijdsvariabele heeft een eindige
grootte. Wanneer we dus te lang wachten zullen we een negatieve tijdsindex
krijgen door overflow. Indien we als tijdsvariabele een variabele van het type long
(4 byte) nemen, kunnen we ongeveer 200 miljoen seconden opnemen. Dit is
ongeveer 55 uur. Voor de toepassing die in deze thesis kadert, zou dit toch
voldoende moeten zijn.
• Het uitbreiden van dit programma van jpg-afbeeldingen naar een PowerPoint-
presentatie lijkt eenvoudig, …
Er bestaan 2 mogelijkheden om via Visual Basic een PowerPoint-presentatie in te laden.
De eerste maakt gebruik van het OLE-object. Het probleem is dat men dan de presentatie
niet meer op een eenvoudige manier kan sturen. Een volgende slide afspelen vergt reeds
heel wat codeerwerk. De tweede is gebaseerd op de webbrowser component binnen Visual
Basic. Aan de hand van deze component is het eenvoudig om een presentatie in te laden.
Het grote probleem is dat deze component de overhand neemt op het formulier waar de
59
component ingeladen wordt zodat men muis-events niet meer kan detecteren. De enige
manier om dan nog aan het muis-events te geraken is via een API (Application
Programming Interface). Om via een API aan deze events te geraken is heel wat
programmmeerwerk nodig. Daarom heb ik nog enkele andere methodes uitgeprobeerd.
4.3.3 Visual Basic for Applications
Omdat het belangrijkste deel van mijn thesis, de omzetting van PowerPoint naar SVG, aan
de hand van macro’s gebeurt, heb ik geprobeerd om ook het opnemen van de
muisbeweging aan de hand van VBA (Visual Basic for Applications) te doen. Aan de hand
van een timer en enkele standaard API functies zoals Public Declare Function GetCursorPos
Lib "user32" ( lpPoint As POINTAPI) As Long kan men op een eenvoudige manier een macro
schrijven die bijvoorbeeld om de 10 seconden de muiscoördinaten naar het scherm
wegschrijft. Er blijft echter wel een probleem over: het opvangen van het indrukken van de
muisknoppen. In tegenstelling tot andere programma’s uit de MS Office reeks, zoals MS
Excel, ondersteunt MS PowerPoint het event OnMouseClick niet zodat het zonder veel
codeerwerk onmogelijk is om een event toe te kennen aan een muisklik. De enige manier
om dit te verhelpen is de API die de muisklik opvangt te herschrijven. Het neerschrijven
van deze gedachtengang is echter iets anders dan het herschrijven zelf …
4.3.4 Visual C++
Aan de hand van een stuk code dat binnen Multimedia Lab10 ontwikkeld werd, ben ik in
staat geweest een eerste werkende applicatie te schrijven voor het opnemen van de
muisbeweging binnen PowerPoint. De oplossing is echter nogal complex. Ik heb een
“laucher”-applicatie geschreven die de mogelijkheid biedt een geschikte presentatie te
kiezen en deze op te starten. Bij het opstarten van de presentatie wordt een extra ddl11
ingeladen. Deze zorgt ervoor dat aan alle muis- en keyboard-events een bepaalde actie
toegevoegd kan worden. Twee events zijn van belang: WM_LBUTTONDOWN, het
indruken van de linker muisknop en WM_MOUSEMOVE, een event dat getriggerd wordt
bij het bewegen van de muis. Deze twee events worden onafhankelijk behandeld. Bij het
klikken van de linker muisknop wordt enkel het tijdstip weggeschreven, gevolgd door een
punt-komma als separator van de verschillende tijdstippen. Het tijdstip halen we uit de 10 http://multimedialab.elis.ugent.be en bijzondere dank gaat uit naar Wesley De Neve voor het ter beschikking stellen van zijn code en de vele uitleg 11 Dynamic Link Library is een bestand die een reeks veel voorkomende functies en code bevat die een OS of een applicatie nodig kunnen hebben
60
boodschap die gegenereerd wordt bij een event. Het tweede event, WM_MOUSEMOVE
vergt wat meer werk. Bij dit event wordt de nodige SVG code weggeschreven naar een
bestand dat later bij de volledige SVG-presentatie gevoegd wordt. Hier zijn de x- en y-
coördinaten en het tijdstip van belang. Al deze waarden halen we uit de boodschap die
gegenereerd wordt door het muis-event.
Het nadeel van deze C++ oplossing is dat het een losstaand programma is en niet zoals de
rest van het project in VBA geschreven is. De code van dit deel werd bijgevoegd als
Appendix B.
4.3.5 De uiteindelijke oplossing
De uiteindelijke oplossing is er één geworden in VBA. Bij mijn eerste testen met VBA
bleek het al vlug dat Microsoft voor enige inconsistentie heeft gezorgd bij het ontwikkelen
van VBA. Sommige events zijn wel gedefinieerd in andere Office programma’s maar
worden niet ondersteund door PowerPoint. In mijn ogen is dit niet logisch, maar de mensen
binnen Microsoft zullen wel een goede reden hebben om dit niet te ondersteunen.
Als het niet rechtstreeks gaat, dan maar onrechtstreeks en zodus via een add-in van Chirag
Dalal [26] ben ik er ingeslaagd alles in VBA te programmeren. De add-in zelf is niet
gebaseerd op muis-events zoals ik altijd in mijn vorige versies geprobeerd heb maar deze
ppa12 maakt gebruikt van de interne events van de slideshow. Ik hang dus geen code aan
het klikken van de muis zelf maar aan het event dat gegenereerd wordt door het afspelen
van de volgende slide. De uiteindelijke implementatie van het opnemen van de
muisbeweging is als volgt: om de 100 milliseconden loopt een timer af die kijkt of de muis
verplaatst is. Indien dit het geval is, wordt de muis via een set-tag naar de nieuwe positie
verplaatst.
De code van dit deel zit vervat in Appendix A.
12 ppa: dit is de bestandsuitgang voor add-in voor PowerPoint
61
4.4 De SMIL-presentatie In dit deel geef ik wat meer uitleg bij de code in het SMIL-bestand. De code van dit deel is
bijgevoegd in Appendix C.
De SMIL-presentatie bestaat uit een venster van 640 op 480 pixels. Binnen dit venster zijn
3 regio’s gedefinieerd. De onderste, “powerpoint”, dient om de SVG-presentatie in te
laden. Daarboven ligt de “background”-regio die zorgt voor een randje rond de eigenlijke
video die in de regio “video” wordt afgespeeld.
Binnen de <body>-tag worden in parallel de presentatie en de video ingeladen. Na 20
seconden start de animatie om de video het volledige scherm te laten vullen.
62
Hoofdstuk 5
Handleiding voor het gebruik van de
applicatie
5.1 Het inladen van de invoegtoepassing We gaan ervan uit dat u de presentatie ontworpen hebt op basis van de lege voorbeeld
presentatie. Deze heeft als naam template.ppt en staat op de cd die bij dit werk zit.
Laad de presentatie. Druk op ‘Enable Macros’. Dit laat macro’s toe ongehinderd te lopen.
Fig. 5-1 : Macro’s inschakelen
Indien geen pop-up verschijnt die vraagt naar gegevens dan is de invoegtoepassing nog
niet geïnstalleerd. Ga hiervoor naar Tools->Add-Ins.
63
Fig. 5-2 : Nieuwe invoegtoepassing laden (1)
Klik op Add-New. Laad de invoegtoepassing EventGen in. Dit bestand heeft als extensie
.ppa. Indien nodig surft u naar de map waar het bestand EventGen.ppa staat.
Fig. 5-3 : Nieuwe invoegtoepassing laden (2)
64
Fig. 5-4 : Nieuwe invoegtoepassing laden (3)
Klik op OK en ‘Enable Macros’. Bewaar de presentatie en sluit ze af.
65
5.2 De presentatie ontwerpen Laad opnieuw de presentatie in. Druk op ‘Enable Macros’ en klik OK bij de gevraagde
gebruikersinformatie. Ontwerp de presentatie zoals u dit normaal doet binnen PowerPoint.
Houd er wel rekening mee dat een aantal zaken niet ondersteund worden. Indien u beslist
de presentatie niet te ontwerpen op basis van deze template moet u zelf nog gebruikers-
formulieren maken in de Microsoft Visual Basic editor (Alt-F11).
Tevens moeten ook de verschillende modules aangemaakt worden. Let hierbij op dat de
originele namen (data, EventGeneratorModule) bewaard blijven bij het aanmaken van de
modules. Kopieër de VBA-code uit de template naar de juiste module, sla de presentatie op
en sluit daarna de presentatie af.
66
5.3 Het geven van een presentatie Start de presentatie op. Druk op ‘Enable Macros’ en vervolgens krijgt u onderstaand
formulier waar u het pad en de naam waar het presentatie-bestand moet komen, kunt
specifiëren.
Fig. 5-5 : geef een bestandsnaam en een pad op
Druk op F5 zodat de presentatie start. Vanaf dit moment worden de muisbewegingen
opgenomen. U kunt klikken om vooruit te gaan in de presentatie. Houd er wel rekening
mee dat niet kan worden teruggekeerd naar een vorige slide tijdens het presenteren. Op het
einde van de presentatie kunt u zoals normaal afsluiten door nogmaals te klikken of door
op de escape-toets te drukken. Bemerk dat nu twee bestanden aanwezig zijn in de map
waar de presentatie moet komen. Het ene bevat de informatie omtrent de muis (muis.txt)
en het andere de informatie omtrent het klikken (time.txt).
Start vervolgens de macro die de afbeeldingen moet exporteren.
Kies hiervoor Tools-> Macro->Macros.
67
Fig. 5-6 : het laden van de macro
Kies de juiste versie van macro naar gelang de versie van Office. U hebt de keuze tussen
ExtractImagesFromPresXP voor Office-XP en ExtractImagesFromPres97And2000 voor de
andere versies van Office. Voer de juiste macro uit door deze te selecteren en door
vervolgens op Run te klikken.
Fig. 5-7 : het het kiezen van de juiste macro
68
Laad vervolgens op dezelfde wijze de macro “elkeslide” en druk op Run om deze te laten
lopen. Bemerk dat na het uitvoeren van de ExtractImagesFromPres macro alle
afbeeldingen in de map staan en nadat de “elkeslide” macro uitgevoerd werd we in deze
map het SVG-presentatie-bestand terugvinden.
69
Hoofdstuk 6
Conclusie
De grote vraag bij het begin van mijn thesis was: is het mogelijk om PowerPoint om te
zetten naar SVG? Het antwoord hierop is een ja, maar …
De maar wordt veroorzaakt door een aantal tekortkomingen binnen SVG en de wereld rond
SVG.
Een opsomming van de grootste tekortkomingen:
• De spelers zijn gewoon niet krachtig genoeg als je ze vergelijkt met bijvoorbeeld de
gelijkaardige Flash speler.
• De ondersteuning van de <text>-tag kan verbeterd worden. Zo is het een
rompslomp om verschillende kleuren te definiëren binnen dezelfde tag. Een ander
probleem is het uitschrijven van tekst over verschillende lijnen. Als laatste puntje
wil ik aanstippen dat het niet mogelijk is om tekst in het midden van een tekstvak te
definiëren en ondertussen verschillende kleuren toe te passen. Het eerste deel zal
wel in het midden geallignieerd zijn, de rest zal er achter aanplakken. Vooral in
vergelijking met de vrijheid binnen tekstvakken in Flash kan hier nog veel
verbeterd worden.
Verder wordt de “maar” ook gestaafd door het grote aantal toeters en bellen binnen
PowerPoint. Indien men alles wat op een slide staat wil overzetten naar SVG bekomt men
slides die bijna niet meer in real-time te animeren zijn. Verder bezit SVG niet de
mogelijkheid om geluid te bevatten. Dus alle geluiden binnen PowerPoint worden niet mee
geëxporteerd. Men zou deze eventueel wel kunnen synchroniseren en afspelen via SMIL.
Persoonlijk geloof ik niet dat SVG ooit de sterke positie van Flash zal kunnen overnemen
op de website-markt maar als vector-formaat binnen bedrijven heeft het een grote kans om
gebruikt te worden. Vooral de eenvoud van de taal is hier een sterke troef. Binnen de markt
70
van de draagbare apparaten ligt echter volgens mij de grootste markt, vooral omdat het
daar omringd wordt door andere XML standaarden die zorgen voor een totaal-applicatie.
De volledige naam van SMIL zegt reeds genoeg over de capaciteiten van SMIL als
synchronisatie-taal. Deze XML-applicatie staat een mooie toekomst te wachten. Getuige
hiervan is het gebruik binnen MMS en de ondersteuning door de meeste giganten op het
gebied van streaming. Het grote nadeel is echter de gebrekkige ontwikkelings-software.
Hopelijk wordt aan dit euvel snel een mouw gepast zodat SMIL de toekomst glimlachend
kan betreden en beheersen.
Als afsluiter zet ik nog eens de voor- en nadelen van de twee architecturen, de huidige en
de nieuwe, op een rijtje.
huidig nieuw bestandsgrootte - + mogelijkheid tot aanpassen presentatie - + alles digitaal - + de presentatie blijft in vector-formaat - + animeren van de video + - identiek aan de oorspronkelijke presentatie
+ -
71
Appendices
Bijgevoegd zijn: Appendix A: de VBA-code Appendix B : de C++ code Appendix C : de SMIL-code
72
Appendix A : Formulieren : padform Private Sub ok_Click() Static pad As String pad = padform.pad.value naam = padform.naam.value data.setdata (pad) data.setnaam (naam) End Sub Modules : data Public Function setdata(data) As String Static pad As String Static value As Boolean padform.Hide If value Then 'do nothing value already set Else pad = data value = True End If setdata = pad End Function Public Function setnaam(naam) As String Static naambestand As String If naambestand = "" Then naambestand = naam End If setnaam = naambestand End Function Modules : helpfuncties Public Function rgb_to_color(intRGB) As String 'Converts VBA RGB integer to #rrggbb format string redRGB = Hex(intRGB Mod 256) 'red If Len(redRGB) = 1 Then redRGB = "0" & redRGB End If greenRGB = Hex(intRGB \ 256 Mod 256) 'green If Len(greenRGB) = 1 Then greenRGB = "0" & greenRGB End If blueRGB = Hex(intRGB \ 65536 Mod 256) 'blue If Len(blueRGB) = 1 Then blueRGB = "0" & blueRGB End If ' Return the hexadecimal value of the color rgb_to_color = "#" & redRGB & greenRGB & blueRGB End Function Public Function get_export_scaling_factor() As Single 'pica to pixel conversion factor, this is an estimated value get_export_scaling_factor = (0.65) End Function Public Function export_line_stuff(ByVal sh As Shape) As String
73
' This function getsused by function that exports lines. ' It tells you what the width and the colour With sh.Line ' Get linecolor and linesize strokewidth = .Weight strokecolor = .ForeColor.RGB strokecolorrgb = rgb_to_color(strokecolor) export_line_stuff = "stroke-witdh: " & strokewidth & "; stroke: " & strokecolorrgb & ";" End With End Function Modules : EventGeneratorModule ' This code contains a macro to convert PPT TO SVG ' Coding by Wim Provoost BC3TC 18/05/03 ' Define POINTAPI type Public Type POINTAPI x As Long y As Long End Type ' Get the library-functions that do the work Public Declare Function GetCursorPos Lib "user32" _ ( _ lpPoint As POINTAPI) As Long Public Declare Function SetTimer Lib "user32" ( _ ByVal hwnd As Long, _ ByVal nIDEvent As Long, _ ByVal uElapse As Long, _ ByVal lpTimerFunc As Long) As Long Public Declare Function KillTimer Lib "user32" ( _ ByVal hwnd As Long, _ ByVal nIDEvent As Long) As Long ' Define used variables Public time As Long Private TimerId As Long ' Do this when timer goes of Sub TimerProc(ByVal hwnd As Long, _ ByVal uMsg As Long, _ ByVal wParam As Long, _ ByVal lParam As Long) Dim aPoint As POINTAPI Dim result As Long Dim change As Boolean ' Variables that contain the x and y value during the previous 100 msec Static oldx As Integer Static oldy As Integer ' Get the mouse coordinates here ' Use GetCursorPos() API result = GetCursorPos(aPoint)
74
' Add 100 mesc to the time and reset value change time = time + 1 change = False ' If the new values are diffrent from the old values then export If oldx <> aPoint.x Then change = True oldx = aPoint.x ElseIf oldy <> aPoint.y Then change = True oldy = aPoint.y End If ' Exporting If change Then Dim filename As String Dim pad As String pad = data.setdata("") filename = pad & "\muis.txt" Open filename For Append As #1 Dim time_in_ms As Integer Dim time_in_ms2 As Integer time_in_ms = time \ 10 time_in_ms2 = time Mod 10 Print #1, "<set attributeName=""x"" to=""" & oldx & """ begin =""" & time_in_ms & "." & time_in_ms2 & "s"" fill=""freeze"" />" Print #1, "<set attributeName=""y"" to=""" & oldy & """ begin =""" & time_in_ms & "." & time_in_ms2 & "s"" fill=""freeze"" />" Close #1 End If End Sub Sub OnNewPresentation(ByVal Pres As Presentation) ' MsgBox "OnNewPresentation: New Presentation " + Pres.Name End Sub Sub OnPresentationClose(ByVal Pres As Presentation) ' MsgBox "OnPresentationClose: Presentation " + Pres.Name + " closed!" End Sub Sub OnPresentationNewSlide(ByVal Sld As Slide) ' MsgBox "OnPresentationNewSlide: New slide " + _ Trim(Str(Sld.SlideID)) + "/" + Trim(Str(Sld.SlideIndex)) + " inserted" End Sub Sub OnPresentationOpen(ByVal Pres As Presentation) ' MsgBox "OnPresentationOpen: Presentation " + Pres.Name + " opened!" padform.Show End Sub Sub OnPresentationPrint(ByVal Pres As Presentation) ' MsgBox "OnPresentationPrint: Presentation " + Pres.Name + " printed!" End Sub Sub OnPresentationSave(ByVal Pres As Presentation) ' MsgBox "OnPresentationSave: Presentation " + Pres.Name + " saved!" End Sub Sub OnSlideShowBegin(ByVal Wn As SlideShowWindow) ' Set the timer
75
TimerId = SetTimer(0, 0, 100, AddressOf TimerProc) ' MsgBox "OnSlideShowBegin: Beginning slide show: " + Wn.Presentation.Name End Sub Sub OnSlideShowEnd(ByVal Pres As Presentation) ' MsgBox "OnSlideShowEnd: Slide show ended: " + Pres.Name ' Kill the timer KillTimer 0, TimerId End Sub Sub OnSlideShowNextBuild(ByVal Wn As SlideShowWindow) ' MsgBox "OnSlideShowNextBuild: Showing next build: " + _ ' Wn.Presentation.Name + ":" + Str(Wn.View.Slide.SlideID) End Sub Sub OnSlideShowNextSlide(ByVal Wn As SlideShowWindow) ' If a click occurs then export the time Dim filename As String Dim pad As String pad = data.setdata("") filename = pad & "\time.txt" Open filename For Append As #1 Dim time_in_ms As Integer Dim time_in_ms2 As Integer time_in_ms = time \ 10 time_in_ms2 = time Mod 10 Print #1, time_in_ms & "." & time_in_ms2 & ";" Close #1 ' MsgBox "OnSlideShowNextSlide: Showing next slide: " + _ Wn.Presentation.Name + ":" + Str(Wn.View.Slide.SlideID) End Sub Sub OnWindowActivate(ByVal Pres As Presentation, ByVal Wn As DocumentWindow) ' MsgBox "OnWindowActivate: " + Pres.Name End Sub Sub OnWindowBeforeDoubleClick(ByVal Sel As Selection, Cancel As Boolean) ' MsgBox "OnWindowBeforeDoubleClick: " + Sel.Parent End Sub Sub OnWindowBeforeRightClick(ByVal Sel As Selection, Cancel As Boolean) ' MsgBox "OnWindowBeforeRightClick: " + Sel.Parent End Sub Sub OnWindowDeactivate(ByVal Pres As Presentation, ByVal Wn As DocumentWindow) ' MsgBox "OnWindowDeactivate: " + Pres.Name End Sub Sub OnWindowSelectionChange(ByVal Sel As Selection) ' MsgBox "OnWindowSelectionChange: " + Sel.Parent End Sub
76
' -------------------------------------------------------------------------------- ' Copyright ©1999-2002, Shyam Pillai, All Rights Reserved. ' -------------------------------------------------------------------------------- ' You are free to use this code within your own applications, add-ins, ' documents etc but you are expressly forbidden from selling or ' otherwise distributing this source code without prior consent. ' This includes both posting free demo projects made from this ' code as well as reproducing the code in text or html format. ' -------------------------------------------------------------------------------- Sub ExtractImagesFromPres97And2000() ' This macro exports all images of the presentation to a jpg file. ' When exporting a gif with a transparent background, that background will be replaced by a white one ' This version is for Office 97 and 2000 On Error GoTo ErrorExtract Dim oPres As Presentation Dim oSldSource As Slide Dim oShpImg As ShapeRange Dim oShpSource As Shape Dim oSld As Slide Dim oShp As Shape Dim Ctr As Integer Dim sPath As String ' Where to save the images after exporting sPath = data.setdata("") sPath = sPath & "\" Ctr = 0 For Each oSldSource In ActivePresentation.Slides ' Moving through the presentation For Each oShpSource In oSldSource.Shapes If oShpSource.Type = msoPicture Then ' Check if the shape is a picture Set oShp = oShpSource Set oPres = Presentations.Add(False) With oPres.PageSetup .SlideSize = ppSlideSizeCustom .SlideHeight = oShp.Height .SlideWidth = oShp.Width End With Set oSld = oPres.Slides.Add(1, ppLayoutBlank) oShp.Copy Set oShpImg = oSld.Shapes.Paste With oShpImg .Left = 0 .Top = 0 End With Ctr = Ctr + 1 ' The exporting ... Call oSld.Export(sPath & "img" & Format(Ctr, "00000") & ".JPG", "JPG") oPres.Close End If Next oShpSource Next oSldSource If Ctr = 0 Then MsgBox "There were no images found in this presentation", _ vbInformation, "Image extraction failed." End If
77
Exit Sub ErrorExtract: If Err.number <> 0 Then MsgBox Err.Description, vbCritical, "Error #" & Err.number End If End Sub Sub ExtractImagesFromPresXP() ' This macro exports all images of the presentation to a jpg file. ' When exporting a gif with a transparent background, that background will be replaced by a white one ' Work's only in PowerPoint XP On Error GoTo ErrorExtract Dim oSldSource As Slide Dim oShpSource As Shape Dim Ctr As Integer Dim sPath As String ' Where to save the images sPath = data.setdata("") sPath = sPath & "\" Ctr = 0 For Each oSldSource In ActivePresentation.Slides ' Moving through the presentation For Each oShpSource In oSldSource.Shapes ' Check if the shape is a picture If oShpSource.Type = msoPicture Then ' Hidden Export method, this is where the exporting happens ... Call oShpSource.Export(sPath & "img" & _ Format(Ctr, "0000") & ".JPG", ppShapeFormatJPG) Ctr = Ctr + 1 End If Next oShpSource Next oSldSource If Ctr = 0 Then MsgBox "There were no images found in this presentation", _ vbInformation, "Image extraction failed." End If Exit Sub ErrorExtract: If Err.number <> 0 Then MsgBox Err.Description, vbCritical, "Error #" & Err.number End If End Sub ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ' End of code Shyam Pillai ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' Private Function export_image(ByVal img As Shape) As String ' This fucntion writes the SCG-code to support the images
78
' an example <image xlink:href="img.jpg " x="30 " y="21 " width="594 " height="445 "/> ' where img.jpg is the name of the image (the number of the image is contained in tellerke which counts the number of images already outputted) ' x="30" is the xvalue, xcoord in the code ' y="21" is the yvalue, ycoord in the code ' width & height are self declarative, xwidth & yheight in the code xcoord = Int(img.Left) ycoord = Int(img.Top) xwidth = Int(img.Width * 0.9) yheight = Int(img.Height * 0.9) Static tellerke As Integer tellerke = tellerke + 1 number = Format(tellerke, "00000") Name = "img" & number & ".jpg" ' The actual image-tag gets formatted here export_image = "<image xlink:href=""" & Name & " "" x=""" & xcoord & " "" y=""" & ycoord & " "" width=""" & xwidth & " "" height=""" & yheight & " ""/>" End Function Private Function font_stuff(ByVal wd As TextRange, ByVal linecnt As Integer, ByVal wordcnt As Integer, ByVal dywaarde As Integer, ByVal xcoord As Integer, ByVal endline As Boolean) As String ' This function writes the tags for tspan elements ' An example: <tspan x="2 " dy="0 " style=" font-size: 7pt; stroke1 : #3333CC; fill : #3333CC">Test</tspan> ' Where x the x-position is, y the y-position, ' Style contains the colors, the size and the other style attributes such as bold, italic and underline ' Tspan is used if other sorts of fontcolors, size, ... are used whithin the textrange ' Export scaling factor pica to pixel conversion export_scaling_factor = get_export_scaling_factor() ' Reset the var that contains the fact that it is differnt to different = 0 Static fontnameold As String Static fontsizeold As String Static fontcolorrgbold As String Static italicold As Boolean Static boldold As Boolean Static underlineold As Boolean With wd.Lines(linecnt).Words(wordcnt).Font ' Checks to see if this text has different attributes then the ones declared in the textrange ' Check fontname If .Name <> fontnameold Then different = 2 End If fontnameold = .Name ' Check fontsize fontsizehelp = Int(.Size * export_scaling_factor) If fontsizehelp <> fontsizeold Then different = 2 End If fontsizeold = fontsizehelp ' Check fontcolor fontcolorrgbhelp = helpfuncties.rgb_to_color(.Color.RGB)
79
If fontcolorrgbhelp <> fontcolorrgbold Then different = 2 End If fontcolorrgbold = fontcolorrgbhelp ' Check italic If .Italic <> italicold Then If .Italic Then Style = " font-style:italic; " End If different = 2 End If italicold = .Italic ' Check bold If .Bold <> boldold Then If .Bold Then Style = Style & " font-weight:bold; " End If different = 2 End If boldold = .Bold ' Check unerline If .Underline <> underlineold Then If .Underline Then Style = Style & " text-decoration:underline; " End If different = 2 End If underlineold = .Underline ' Find the special charcters and translate them to their unicode For j = 1 To wd.Lines(linecnt).Words(wordcnt).Characters.Count If wd.Lines(linecnt).Words(wordcnt).Characters(j) = "’" Then message = message & "’" Else ' Still need to add more special characters message = message & wd.Lines(linecnt).Words(wordcnt).Characters(j) End If Next ' First line: always write a tspan tag If wordcnt = 1 Then different = 1 End If ' If it is different then plot a textrange If different = 1 Then ' If first line then also add the x value newlinex = "x=""" & xcoord & " "" dy=""" & dywaarde & " "" " font_stuff = "<tspan " & newlinex & " style=""" & Style & " font-size: " & fontsizehelp & "pt; stroke1 : " & fontcolorrgbhelp & "; fill : " & fontcolorrgbhelp & """>" & message ElseIf different = 2 Then font_stuff = "</tspan ><tspan style=""" & Style & " font-size: " & fontsizehelp & "pt; stroke1 : " & fontcolorrgbhelp & "; fill : " & fontcolorrgbhelp & """>" & message Else ' Else plot the text font_stuff = message
80
End If If endline Then font_stuff = font_stuff & "</tspan>" End If End With End Function Private Function export_text(ByVal sh As Shape) As String ' This function writes the tags for text ' An example: <text x="46" y="411 " width="167 " height="36 " style=" font-size: 15pt; stroke1 : #000000; fill : #000000">Dit is een thesis</text> ' Where x the x-position is, y the y-position ' Style contains the colors, the size and the other style attributes such as bold, italic and underline ' Define the variable that will contain the tag-information Dim sh_text As String ' Export scaling factor pica to pixel conversion export_scaling_factor = helpfuncties.get_export_scaling_factor() With sh.TextFrame.TextRange.Font vertical_offset = .Size xcoord = sh.Left ycoord = sh.Top + vertical_offset xwidth = sh.Width yheight = sh.Height ' Get some font info ' Declare it as static variables so when can usethem in other functions (to check if we use different font-styles) Static fontname As String Static fontsize As String Static fontcolorrgb As String fontname = .Name fontsize = Int(.Size * export_scaling_factor) largestfontsize = .Size fontcolor = .Color.RGB fontcolorrgb = helpfuncties.rgb_to_color(fontcolor) ' Reset the varaibles that contains the dy-value: the value of offset between 2 text-lines numlines = 1 dywaarde = 0 ' Output text-tag sh_text = "<text x=""" & xcoord & " "" y=""" & ycoord & " "" width=""" & xwidth & " "" height=""" & yheight & " "" style=""font-family:" & fontname & ";"">" txtline = sh.TextFrame.TextRange.Lines(1) numwords = sh.TextFrame.TextRange.Lines(1).Words.Count While txtline <> "" 'Check for different text_stuff For wordcounter = 1 To numwords ' Check for end of line to put </tspan> If wordcounter = numwords Then endline = True Else
81
endline = False End If ' Outputing ... sh_text = sh_text & font_stuff(sh.TextFrame.TextRange, numlines, wordcounter, dywaarde, xcoord, endline) Next ' Define dywaarde, this is the offset between to textlines ' There is a difference between emty lines en non empty If sh.TextFrame.TextRange.Lines(numlines).Words.Count <> 0 Then dywaarde = largestfontsize Else dywaarde = dywaarde + .Size End If ' Go to next line numlines = numlines + 1 numwords = sh.TextFrame.TextRange.Lines(numlines).Words.Count ' This part doesnt function correctly For wordcounter = 1 To sh.TextFrame.TextRange.Lines(numlines).Words.Count If largestfontsize < sh.TextFrame.TextRange.Lines(numlines).Words(wordcounter).Font.Size Then largestfontsize = sh.TextFrame.TextRange.Lines(numlines).Words(wordcounter).Font.Size End If Next txtline = sh.TextFrame.TextRange.Lines(numlines) Wend End With ' The exported text export_text = sh_text & "</text>" End Function Private Function export_square(ByVal sh As Shape) As String ' This function writes the tags for the rectangle ' An example: <rect x="253" y="265" width="90" height="67" style=" stroke-witdh: 0,75; stroke: #000000; fill : #00CC99;"/> ' Where x the x-position is, y the y-position, width the width and height the height ' Style contains the colors and linesize ' export scaling factor pica to pixel conversion export_scaling_factor = helpfuncties.get_export_scaling_factor 'xcoord = Int(sh.Left * export_scaling_factor) 'ycoord = Int(sh.Top * export_scaling_factor) xcoord = sh.Left ycoord = sh.Top xwidth = Int(sh.Width * export_scaling_factor) + 1 yheight = Int(sh.Height * export_scaling_factor) + 1 'Get fill color squarecolor = sh.Fill.ForeColor.RGB squarecolorrgb = helpfuncties.rgb_to_color(squarecolor) ' Get linecolor and linesize linestuff = helpfuncties.export_line_stuff(sh) ' Exporting time
82
export_square = "<rect x=""" & xcoord & """ y=""" & ycoord & """ width=""" & xwidth & """ height=""" & yheight & """ style=""" & linestuff & " fill : " & squarecolorrgb & ";""/>" End Function Private Function export_circle(ByVal sh As Shape) As String ' This function writes the tags for the ellipse ' An example: <ellipse cx="245" cy="226" rx="89 " ry="23" style=" stroke-witdh: 0,75; stroke: #000000; fill : #00CC99;"/> ' Where cx the x-position is, cy the y-position, rx the x-radius and ry the y-radius ' Style contains the colors and linesize ' export scaling factor pica to pixel conversion estimated value export_scaling_factor = 0.9 xcoord = sh.Left ycoord = sh.Top xwidth = sh.Width yheight = sh.Height ' calculate x- and y-coordinate and radius cx = Int((xcoord + (xwidth / 2)) * export_scaling_factor) cy = Int((ycoord + (yheight / 2)) * export_scaling_factor) rx = Int((xwidth / 2) * export_scaling_factor) ry = Int((yheight / 2) * export_scaling_factor) ' Get the fill color Ellipsecolor = sh.Fill.ForeColor.RGB Ellipsecolorrgb = helpfuncties.rgb_to_color(Ellipsecolor) ' Get linecolor and linesize linestuff = helpfuncties.export_line_stuff(sh) ' Exporting time export_circle = "<ellipse cx=""" & cx & """ cy=""" & cy & """ rx=""" & rx & " "" ry=""" & ry & """ style=""" & linestuff & " fill : " & Ellipsecolorrgb & ";""/>" End Function Private Function export_simple(ByVal sh As Shape) As String ' This function exports auto-forms ' At the moment there at 3 auto-forms included : ellipses, circles and rectangels ' Based on their type the apropriate export-function is called shape_square = 1 shape_circle = 9 If sh.AutoShapeType = shape_square Then 'shape is a square export_simple = export_square(sh) 'shape is a circle or ellips ElseIf sh.AutoShapeType = shape_circle Then export_simple = export_circle(sh) End If End Function Private Function export_line(ByVal sh As Shape) As String ' This function writes the tags for lines ' An example: <line x1 ="360" y1="258" x2="354" y2="174" style=" stroke-width:0,75; stroke:#000000;"/> ' Where x1, y1 the x,y-position is of the begin point, x2, y2 the x,y-position is of the end point ' Style contains the color and linesize
83
' Get Coordinates x1 = sh.Nodes(1).Points(1, 1) x2 = sh.Nodes(2).Points(1, 1) y1 = sh.Nodes(1).Points(1, 2) y2 = sh.Nodes(2).Points(1, 2) ' Get linecolor and linesize linestuff = helpfuncties.export_line_stuff(sh) ' Exporting time export_line = "<line x1 =""" & x1 & """ y1=""" & y1 & """ x2=""" & x2 & """ y2=""" & y2 & """ style=""" & linestuff & """/>" End Function Private Function main_select(ByVal s As Slide) As String ' This function evaluates the shapetype number and chooses, based on that number the right export-function ' Following names are substitutes for the number of thge shapetype shape_img = 13 shape_title = 14 shape_text = 17 shape_simple = 1 Shape_line = 9 For Index = 1 To s.Shapes.Count 'Shape is an image If s.Shapes.Item(Index).Type = shape_img Then main_select = main_select & export_image(s.Shapes.Item(Index)) 'Shape is a title ElseIf s.Shapes.Item(Index).Type = shape_title Then main_select = main_select & export_text(s.Shapes.Item(Index)) 'Shape is a text ElseIf s.Shapes.Item(Index).Type = shape_text Then main_select = main_select & export_text(s.Shapes.Item(Index)) ' Shape is an auto-form ElseIf s.Shapes.Item(Index).Type = shape_simple Then main_select = main_select & export_simple(s.Shapes.Item(Index)) ElseIf s.Shapes.Item(Index).Type = Shape_line Then main_select = main_select & export_line(s.Shapes.Item(Index)) End If Next End Function Private Function slide_effect(ByVal s As Slide, ByVal number As Integer, ByVal full_text As String) As String ' This function exports the silde effects ' At the moment 2 slide-effects are implemented left-to-right and right-to-left no_effect = 0 from_left_to_right = 1283 from_right_to_left = 1281 ' Export time full_time = Split(full_text, ";") If number <> 1 Then number = number - 1 slide_effect = "<set attributeName=""x"" to=""-640"" begin=""0"" fill=""freeze""/>""" With s.SlideShowTransition
84
If .EntryEffect = no_effect Then 'No transition effect defined slide_effect = slide_effect & "<set attributeName=""x"" to=""0"" begin=""" & full_time(number) & """ fill=""freeze""/>" ElseIf .EntryEffect = from_left_to_right Then 'from left to right slide_effect = slide_effect & "<animate begin=""" & full_time(number) & """ attributeName=""x"" from=""-640"" to=""0"" dur=""1s"" fill=""freeze""/>" ElseIf .EntryEffect = from_right_to_left Then 'from right to left slide_effect = slide_effect & "<animate begin=""" & full_time(number) & """ attributeName=""x"" from=""640"" to=""0"" dur=""1s"" fill=""freeze""/>" End If End With End If End Function Sub elkeslide() ' ' Macro created 28/02/02 by Wimpers ' Dim help As String Dim slid As Slide Dim slidenr As Integer Dim full_text As String ' Where is the time information for the next slides strFile = data.setdata("") & "\time.txt" ' Read this file an dsave it in the variable Open strFile For Input As #1 Do While Not EOF(1) Line Input #1, strText full_text = full_text & strText Loop Close #1 ' The dir where to write the different slides filename = data.setdata("") & "\" & data.setnaam("") ' Create begin svg file Open filename For Output As #1 help = "<?xml version=""1.0"" encoding=""iso-8859-1"" standalone=""no""?><svg with=""640"" height=""480"">" Print #1, help ' Output the color of the background BackColor = Application.ActivePresentation.SlideMaster.Background.Fill.ForeColor.RGB backcolorrgb = rgb_to_color(BackColor) help = "<g id=""background"" ><rect x=""0"" y=""0"" width=""640"" height=""480"" style=""fill: " & backcolorrgb & "; stroke : none; shape-rendering:optimizeSpeed""/></g>" Print #1, help Close #1 Open filename For Append As #1 Dim slides_output(1024) ' This for loop visits every slide and For Each slid In Application.ActivePresentation.Slides help = "<svg with=""640"" height=""480""><g id=""slide" & slid.SlideNumber & """><use xlink:href=""#background"" x=""0"" y=""0"" />" help = help & main_select(slid)
85
help = help & "</g>" ' export the slide effects help = help & slide_effect(slid, slid.SlideNumber, full_text) help = help & "</svg>" Print #1, help Next slid ' Where is the mouse information strFile = data.setdata("") & "\muis.txt" ' Read this file an dsave it in the variable Open strFile For Input As #2 Print #1, "<svg><g id =""muis""><image xlink:href=""pijl.gif"" x=""0"" y="" 0"" width=""15"" height=""15""/></g>" ' reset full_text full_text = "" Do While Not EOF(2) Line Input #2, strText full_text = full_text & strText Loop Close #2 help = full_text & "</svg></svg>" Print #1, help Close #1 End Sub
86
Appendix B : Msg2FMDHook.cpp // // Msg2FMDHook.cpp : Defines the entry point for the DLL application. // // Based on: // http://www.pgh.net/~newcomer/hooks.htm // SPY (a Microsoft source code sample) #include "stdafx.h" #define _COMPILING_AFX_STDAFX_H__E63ACBB0_A6E2_4505_8896_9AC4F40CFC4F__INCLUDED_ #include "Msg2FMDHook.h" // Common section for IPC (Interprocess Communication). // Not really necessary for this particular case: // only spying on one thread, not system wide. // // hSpyWnd: Handle for window to be spied on. // hServerWnd: Handle for window to be notified on receipt of a valid message. #pragma data_seg(".FMD") HWND hSpyWnd = NULL; HWND hServerWnd = NULL; #pragma data_seg() #pragma comment(linker, "/section:.FMD,rws") // Places a comment record into an object file or executable file. HINSTANCE hDllInstance; HHOOK hGetMessageHook; long n = 0L; MSG gmsg; // For MessageProc() MOUSEHOOKSTRUCT mhs; // For MouseProc() // The second parameter contains the size of the datastructure to which the third // parameter is pointing. COPYDATASTRUCT gcds = { 0, sizeof(MSG), &gmsg }; // For MessageProc() COPYDATASTRUCT mcds = { 0, sizeof(MOUSEHOOKSTRUCT), &mhs }; // For MouseProc() static LRESULT CALLBACK MessageProc(UINT nCode, WPARAM wParam, LPARAM lParam); static LRESULT CALLBACK MouseProc(UINT nCode, WPARAM wParam, LPARAM lParam); BOOL APIENTRY DllMain( HINSTANCE hInstance, DWORD ul_reason_for_call, LPVOID lpReserved ) { switch ( ul_reason_for_call ) { case DLL_PROCESS_ATTACH:
87
hDllInstance = hInstance; OutputDebugString("Msg2FMDHook.dll - DllMain(): Dynamic Link Library loaded.\n"); return TRUE; case DLL_PROCESS_DETACH: UninstallMsg2FMDHook(); OutputDebugString("Msg2FMDHook.dll - DllMain(): Dynamic Link Library unloaded.\n"); return TRUE; } return TRUE; } __declspec(dllexport) BOOL InstallMsg2FMDHook(HWND hTheSpyWnd, HWND hTheServerWnd) { // http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/msdn_hooks32.asp if ( hSpyWnd != NULL && hServerWnd != NULL ) { OutputDebugString("Msg2FMDHook.dll - InstallMsg2FMDHook(): Already hooked.\n"); return FALSE; } char * outputString = (char *)malloc(sizeof(char) * 255); if ( outputString == NULL ) { OutputDebugString("Msg2FMDHook.dll - InstallMsg2FMDHook(): Unsufficient memory.\n"); return FALSE; } hSpyWnd = hTheSpyWnd; hServerWnd = hTheServerWnd; n = 0L; sprintf(outputString, "Msg2FMDHook.dll - InstallMsg2FMDHook(): The received spy window handle is 0x%x.\n", hSpyWnd); OutputDebugString(outputString); DWORD dwThreadId = GetWindowThreadProcessId(hSpyWnd, NULL); sprintf(outputString, "Msg2FMDHook.dll - InstallMsg2FMDHook(): The retreived thread ID is 0x%x.\n", dwThreadId); OutputDebugString(outputString); if ( outputString != NULL ) free(outputString); // The SetWindowsHookEx function installs an application-defined hook procedure into a hook // chain. You would install a hook procedure to monitor the system for certain types of // events. These events are associated either with a specific thread or with all threads in // the same desktop as the calling thread. The return value is the handle to the hook // procedure. // WH_MOUSE // // Windows calls this hook when a GetMessage or a PeekMessage function is // called and Windows has a mouse message to process. Like the WH_KEYBOARD // hook, this filter function receives a hook code, which indicates whether
88
// the message is being removed (HC_NOREMOVE), an identifier specifying the // mouse message, and the x and y coordinates of the mouse. Filters can tell // Windows to discard the message. Filters for this hook must reside in a // DLL. // hGetMessageHook = SetWindowsHookEx(WH_MOUSE, (HOOKPROC)MessageProc, hDllInstance, 0); // hGetMessageHook = SetWindowsHookEx(WH_GETMESSAGE, (HOOKPROC)MessageProc, hDllInstance, 0); // WH_GETMESSAGE has the advantage that lParam contains the entire message structure. // Immediately before GetMessage and PeekMessage return a message to the calling application, a // test is performed to check for the presence of a WH_GETMESSAGE hook. If one is installed, the // hook is called. The hook is not called if PeekMessage finds no messages available and is about // to return a NULL value. From the hook procedure, it is impossible to tell whether GetMessage // or PeekMessage was called. hGetMessageHook = SetWindowsHookEx(WH_GETMESSAGE, (HOOKPROC)MessageProc, hDllInstance, dwThreadId); // hGetMessageHook = SetWindowsHookEx(WH_MOUSE, (HOOKPROC)MouseProc, hDllInstance, dwThreadId); if ( hGetMessageHook == NULL ) { OutputDebugString("Msg2FMDHook.dll - InstallMsg2FMDHook(): Failed to set hook.\n"); return FALSE; } static int counter; counter = 0; OutputDebugString("Msg2FMDHook.dll - InstallMsg2FMDHook(): Succeeded in installing hook.\n"); return TRUE; } __declspec(dllexport) BOOL UninstallMsg2FMDHook(void) { BOOL unhooked = FALSE; if ( hSpyWnd != NULL && hServerWnd != NULL ) { unhooked = UnhookWindowsHookEx(hGetMessageHook); if ( unhooked ) { n = 0L; hSpyWnd = NULL; hServerWnd = NULL; OutputDebugString("Msg2FMDHook.dll - UninstallMsg2FMDHook(): Uninstall of hook succeeded.\n"); } else { OutputDebugString("Msg2FMDHook.dll - UninstallMsg2FMDHook(): Uninstall of hook failed.\n"); OutputDebugString("Msg2FMDHook.dll - UninstallMsg2FMDHook(): Hook may already be uninstalled.\n"); } } else
89
OutputDebugString("Msg2FMDHook.dll - UninstallMsg2FMDHook(): Already uninstalled hook.\n"); return unhooked; } static LRESULT CALLBACK MessageProc(UINT nCode, WPARAM wParam, LPARAM lParam) { // http://msdn.microsoft.com/library/default.asp?url=/library/en-us/winui/winui/windowsuserinterface/windowing/hooks/usinghooks.asp n++; // For debugging purposes. // Read the documentation to discover what WPARAM and LPARAM // mean. For a WH_MESSAGE hook, LPARAM is specified as being // a pointer to a MSG structure, so the code below makes that // structure available. The code beneath will not work in the // case of WH_MOUSE. LPMSG msg = (LPMSG)lParam; char * outputString = (char *)malloc(sizeof(char) * 255); if ( outputString == NULL ) { OutputDebugString("Msg2FMDHook.dll - InstallHook(): Unsufficient memory.\n"); return FALSE; } // If the value of nCode is < 0, just pass it on. // This is required by the specification of hook handlers. if ( nCode < 0 ) { sprintf(outputString, "Msg2FMDHook.dll - MessageProc(): Passing event %d on for window handle 0x%x.\n", n, msg->hwnd); OutputDebugString(outputString); if ( outputString != NULL ) free(outputString); return CallNextHookEx(hGetMessageHook, nCode, wParam, lParam); } sprintf(outputString, "Msg2FMDHook.dll - MessageProc(): Processing event %d for window handle 0x%x.\n", n, msg->hwnd); // OutputDebugString(outputString); if ( outputString != NULL ) free(outputString); // Reason for check on wParam: // http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/msdn_getpeek.asp // // By default, both PeekMessage and GetMessage remove messages and events from the queues as each // message is returned to the application. There are times, however, when an application needs to // scan the queues for the existence of messages without removing the message from its queue. For // example, an application may be doing some background processing that it would like to terminate
90
// as soon as there are messages available to process. The code checking for the existence of // messages, however, may not be able to process the message. For this purpose, applications can // call PeekMessage with PM_NOREMOVE in the uRemove parameter. If PM_NOREMOVE is used, PeekMessage // will return messages as normal, but will not remove them from their queues. // // This should explain why the server application sometimes receives a WM_COPYMESSAGE twice (if // there's no check for PM_NOREMOVE in the code beneath). if ( wParam == PM_REMOVE ) { // If it is a mouse-click message, either in the client area or the non-client area // (frame or title bar), we want to notify the server that it has occurred. // The WM_CHAR message is posted to the window with the keyboard focus when a // WM_KEYDOWN message is translated by the TranslateMessage function. The // WM_CHAR message contains the character code of the key that was pressed. // WM_KEYUP necessary for capturing the usage of the arrow keys // (disadvantage: every other key stroke is received twice). if ( msg->message == WM_LBUTTONDOWN || /* msg->message == WM_NCLBUTTONDOWN || */ /* msg->message == WM_RBUTTONDOWN || msg->message == WM_NCRBUTTONDOWN || */ msg->message == WM_MOUSEMOVE) { /* msg->message == WM_CHAR) { */ // You'll never see the following message in the debug console. // Reason: the DLL-code loaded in the context of the process spied on doesn't // have access to the debug console (only our own app has full // access). OutputDebugString("Msg2FMDHook.dll - MessageProc(): click detected.\n"); // Copy the contents of the received message (*msg) to the datastructure that // is to be send to the server window. gmsg.hwnd = msg->hwnd; gmsg.lParam = msg->lParam; gmsg.message = msg->message; gmsg.pt = msg->pt; // gmsg.pt.x = n; // For debugging purposes (to be able to uniquely identify // a message) gmsg.time = msg->time; gmsg.wParam = msg->wParam; MessageBeep(1);
91
FILE *ofp; if ( msg->message == WM_LBUTTONDOWN ){ ofp = fopen("c:\\launcher\\klik.txt", "a"); fprintf(ofp, "%ld ;", msg->time); // time needs to be processed by VBA script } else { ofp = fopen("c:\\launcher\\muis.txt", "a"); fprintf(ofp, "%ld - %ld - %ld ;", gmsg.pt.x ,gmsg.pt.y, msg->time ); // time needs to be processed by VBA script } if (ofp){ fclose(ofp); }; // SendMessage(hServerWnd, WM_COPYDATA, 0L, (LPARAM)&gcds); } } // Another application could have installed a hook too (for instance Spy++). // So, pass the message on to the next hook in order to respect the logic. return CallNextHookEx(hGetMessageHook, nCode, wParam, lParam); } // The following function was only used for debugging purposes. static LRESULT CALLBACK MouseProc(UINT nCode, WPARAM wParam, LPARAM lParam) { n++; // For debugging purposes. LPMOUSEHOOKSTRUCT msg = (LPMOUSEHOOKSTRUCT)lParam; // If the value of nCode is < 0, just pass it on. // This is required by the specification of hook handlers. if ( nCode < 0 ) { OutputDebugString("Msg2FMDHook.dll - MouseProc(): Passing event on.\n"); return CallNextHookEx(hGetMessageHook, nCode, wParam, lParam); } mhs.hwnd = msg->hwnd; mhs.pt = msg->pt; mhs.wHitTestCode = msg->wHitTestCode; mhs.dwExtraInfo = msg->dwExtraInfo; SendMessage(hServerWnd, WM_COPYDATA, 0L, (LPARAM)&mcds); return CallNextHookEx(hGetMessageHook, nCode, wParam, lParam); }
92
Appendix C : <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout> <root-layout width="640" height="480" background-color="black" /> <region id="powerpoint" left="0" top="0" width="640" height="480" z-index="1" /> <region id="background" left="473" top="353" background-color="#000033" width="162" height="122" z-index="2" /> <region id="video" left="474" top="354" width="160" height="120" z-index="4" fit="fill"/> </layout> </head> <body> <par> <img id="svg" src="presentatie.svg" region="powerpoint" fill="freeze"/> <video id="fuse" src="fuse.mp4" region="video" repeat="indefinite" /> <animate targetElement="video" attributeName="width" from="160" to="640" begin="20s"
dur="4s" fill="freeze"/> <animate targetElement="video" attributeName="height" from="120" to="480" begin="20s"
dur="4s" fill="freeze"/> <animate targetElement="video" attributeName="top" from="354" to="0" begin="20s"
dur="4s" fill="freeze"/> <animate targetElement="video" attributeName="left" from="474" to="0" begin="20s"
dur="4s" fill="freeze"/> </par> </body> </smil>
93
Referenties [1] IVPV, IVPV, http://www.ivpv.ftw.rug.ac.be (2003).
[2] W3C, Extensible Markup Language (XML), http://www.w3.org/XML/ (2003).
[3] J. BOYE, XML – What’s in it for us? http://tech.irt.org/articles/js072/ (1998).
[4] N. WALSH, A technical introduction to XML,
http://nwalsh.com/docs/articles/xml (1998).
[5] W3C, W3C Synchronized Multimedia Home page,
http://www.w3.org/AudioVideo/ (2003).
[6] W3C, Press Release: W3C Issues First Public Draft of SMIL,
http://www.w3.org/Press/SMIL (1997).
[7] K. WIMPSETT,
Synchronized Multimedia Integration Language (SMIL): Multimedia Made Easy,
http://builder.cnet.com/webbuilding/pages/Authoring/Standards/ss01.html (1998).
[8] REALNETWORKS, Real.com – RealPlayer is now RealOne Player,
http://www.real.com/realone/index.html (2003).
[9] APPLE, Apple – QuickTime, http://www.apple.com/quicktime/ (2003).
[10] CONFLUENT TECHNOLOGIES INC.,
:: Fluition.com ::, http://www.fluition.com/ (2002).
[11] ACCESS, ACCESS, http://www.access.co.jp/english/ (2003).
[12] W3C, Scalable Vector Graphics (SVG) 1.0 Specification,
http://www.w3.org/TR/SVG/ (2001).
[13] IDEALLIANCE, XML Europe 2002 Conference & Exposition,
http://www.xmleurope.com/2002 (2002).
[14] A. QUINT, Hot and Fresh Technology for the
Enterprise, http://www.xml.com/pub/a/2002/04/17/svg.html (2002).
[15] W3C, SVG Document Object Model (DOM) - SVG 1.0 – 20010904,
http://www.w3.org/TR/SVG/svgdom.html (2001).
[16] E. VITIELLO, SVG: The New Flash,
http://www.digital-web.com/tutorials/tutorial_2002-04.shtml (2002).
94
[17] MACROMEDIA, Macromedia - Flash and Shockwave Players : Adoption Statistics,
http://www.macromedia.com/software/
player_census/flashplayer/version_penetration.html (2003).
[18] THEORY7, Theory7, http://www.theory7.com (2003).
[19] MICROSOFT, Microsoft Visual Basic for Applications – ISV,
http://msdn.microsoft.com/vba/prodinfo/backgrounder.asp (2003).
[20] D. KIELY, Programming Microsoft Office Object Models,
http://www.microsoft.com/officedev/articles/offobjpr.htm?&SD=GN&LN=NL-
BE&gssnb=1 (2000).
[21] PPT2HTML -- PowerPoint to HTML Converter, http://www.rdpslides.com/ppt2html/.
[22] YAHOO!, Yahoo! Groups : svg-developers Files,
http://groups.yahoo.com/group/svg-developers/files/ (2003).
[23] S. PILLAI, How to extract images from a presentation,
http://www.mvps.org/skp/pptxp002.htm (2003).
[24] UNICODE INC., Unicode Home Page, http://www.unicode.org/ (2003).
[25] MICROSOFT, Microsoft Office,
http://www.microsoft.com/office/powerpoint/default.asp (2003).
[26] OfficerOne: Event Generator,
http://officerone.tripod.com/eventgen/eventgen.html (2003)
Verder bronnen J. D. EISENBERG, SVG Essentials, O’Reilly (2002).
W3C, W3C Synchronized Multimedia Home page,
http://www.w3.org/AudioVideo/ (2003).
T. SPITZER, The VBA-Powered Desktop.
http://www.dbmsmag.com/9704d18.html (1997).
