Wanneer deze stappen doorlopen zijn heb je een Flash video die

Flash Video
Remy van Vugt & Tim Vervoort
Flash video
Namen: Remy van Vugt & Tim Vervoort
Vak: Multimediatechnieken 2
Datum:16-01-2011
Versie 1.1
1
Flash Video
Remy van Vugt & Tim Vervoort
Inhoudsopgave
Inleiding ................................................................................................................................................... 4
Voorbereiding.......................................................................................................................................... 4
Chroma key.......................................................................................................................................... 4
Oppervlak ............................................................................................................................................ 5
Camera .................................................................................................................................................... 5
Indoor en outdoor ............................................................................................................................... 5
Autofocus ............................................................................................................................................ 5
Tripod .................................................................................................................................................. 5
Resolutie .............................................................................................................................................. 5
Lichtgebruik ............................................................................................................................................. 5
Zacht licht ............................................................................................................................................ 6
Afstand ............................................................................................................................................ 6
Grootte lichtbron............................................................................................................................. 6
Schaduw .............................................................................................................................................. 6
Positie lichtbronnen ............................................................................................................................ 7
Positie .............................................................................................................................................. 7
Belichting van de persoon ............................................................................................................... 8
Positie van de persoon ............................................................................................................................ 9
Tips voor de acteur .............................................................................................................................. 9
Script.................................................................................................................................................... 9
Software ................................................................................................................................................ 11
MPEG Video Wizard .......................................................................................................................... 11
Adobe Premiere Pro .......................................................................................................................... 12
Croppen ......................................................................................................................................... 12
Color Key........................................................................................................................................ 13
Video's ........................................................................................................................................... 14
Exporteren ..................................................................................................................................... 14
Compressie ........................................................................................................................................ 17
Adobe Photoshop .............................................................................................................................. 17
Studio ................................................................................................................................................ 19
Adobe Flash ....................................................................................................................................... 21
2
Flash Video
Remy van Vugt & Tim Vervoort
Video afspelen ............................................................................................................................... 21
Interactiviteit ................................................................................................................................. 22
Resultaat................................................................................................................................................ 25
Ervaringen ............................................................................................................................................. 26
Slot ......................................................................................................................................................... 27
3
Flash Video
Remy van Vugt & Tim Vervoort
Inleiding
In dit document wordt beschreven welke stappen er ondernomen moeten worden om een Flash
video te maken waar een nieuwsitem gepresenteerd wordt. In de video zit een stuk interactiviteit, je
kunt bijvoorbeeld op de verslaggever klikken waarmee je een nieuw stuk film ziet. Deze video is
gemaakt als een schoolwerkstuk voor het Avans Hogeschool Den Bosch.
We gaan beginnen met de voorbereidingen die nodig zijn voordat er gefilmd kan worden. Hierin
worden enkele belangrijke punten behandeld die belangrijk zijn en doorgenomen moeten worden
voordat er gefilmd kan worden. We eindigen het verschil met uitleg over de verschillende
programma's die we hebben gebruikt en geven een paar stukken voorbeeld codes.
Voorbereiding
Chroma key
Chroma key is een techniek die wordt gebruik in de filmwereld om kleuren te filteren. Tijdens het
filmen van een onderwerp wordt er gebruikt gemaakt van een achtergrond met een egale kleur
zonder schaduwen. Meestal wordt er gebruikt gemaakt van een blauwe of groene achtergrond
omdat mensen deze kleuren weinig voorkomen in kleuren. Het is mogelijk om een andere kleur als
achtergrond te nemen alleen moet er wel gelet worden op de kleurkeuze. Nadat er gefilmd is kan je
met behulp van de chroma key techniek de achtergrond kleur verwijderen.
Nadat de techniek is toegepast zal er alleen maar
het onderwerp over zijn op de film. Je ziet dan
alleen nog maar het onderwerp in ons geval de
verslaggever op het scherm. Je kunt dan de
verslaggever op elke locatie neerzetten die je wilt,
dit wordt gedaan door de achtergrond van de film
te veranderen.. Je kunt zo het onderwerp overal
neerzetten in elke film.
Deze techniek wordt veel gebruikt in films of in
series, het wordt zelfs gebruikt bij het plaatselijke
weerbericht.
Zoals je hiernaast ziet geeft deze techniek veel
mogelijkheden voor films om illusies te vormen
of om kosten te besparen voor dure film sets.
Voor ons project hebben we een white screen
gebruikt omdat we een pas geverfde witte muur
tot onze beschikking hadden. Deze muur konden we ook gebruiken om te filteren. Het enigste waar
we voor moesten oppassen was dat we niks van wit aan mochten trekken tijdens het filmen.
4
Flash Video
Remy van Vugt & Tim Vervoort
Oppervlak
Het oppervlak van de achtergrond speelt een grote rol met het belichten van het oppervlak. Om het
oppervlak goed te kunnen belichten is een mat oppervlak nodig. Dit is omdat een glanzend oppervlak
het licht weerkaatst en ervoor kan zorgen dat een oppervlak niet egaal meer is door rare schaduwen.
Een mat oppervlak zorgt niet voor de verspreiding van het licht, hierdoor ontstaat er een egaler
oppervlak.
Camera
Voor het filmen van de film wordt gebruik gemaakt van een camera. Deze camera moet voldoen aan
de volgende eisen.
Indoor en outdoor
Wanneer je buiten gaat filmen moet je rekening houden met externe lichtbronnen. Dit licht verschilt
namelijk nogal eens van sterkte en locatie. Een oplossing is hiervoor om het witbalans in te kunnen
stellen op de camera. Een camera moet dus een optie hebben waar je het witbalans in kan stellen.
Autofocus
Een camera waar autofocus aanstaat zal automatisch focussen op een bepaald object op de
achtergrond. Dit kan lastig zijn wanneer je een opzetting verschillende keren gebruikt en de focus
verschilt. Dit kan een resultaat geven dat op sommige stukjes film een andere focus hebben. Om dit
op te lossen moet de camera een autofocus functie hebben die je aan en uit kunt schakelen.
Hierdoor kan je zelf de focus instellen en dus telkens dezelfde focus hebt op de opstelling.
Tripod
Om telkens vanuit dezelfde hoogte en positie te kunnen filmen kan je het beste
gebruik maken van een tripod. Hierop wordt de camera vastgezet zodat het beeld
niet beweegt en altijd vanuit dezelfde hoogte gefilmd wordt.
Resolutie
De resolutie van de camera die gebruikt wordt voor het filmen moet minimaal 640x480 zijn. Dit is
omdat het dan VGA kwaliteit is. Wij gaan de filmpjes gebruiken op het internet zodoende moeten ze
van lagere kwaliteit zijn. Wanneer de film lokaal wordt gedraaid dan zal kan je de eisen bijstellen van
de camera en een hogere kwaliteit nemen.
Lichtgebruik
Wanneer je tijdens het filmen gebruik gaat maken van een blue screen of white scheen moet er gelet
worden op het lichtgebruik. Zonder een goede verdeling van het licht krijg vreemde schaduwen of
andere problemen. We gaan hieronder uitleggen hoe je het beste het licht kunt gebruiken tijdens het
filmen.
5
Flash Video
Remy van Vugt & Tim Vervoort
Zacht licht
Voor het belichten van je scherm kan je het beste licht gebruiken dat van een zacht lichtbron
afkomstig is. De reden hiervoor is dat dit soort licht minder schaduw creëert. Dit soort lichtbron kan
je bereiken door de volgende stappen:
Afstand
Je moet rekening houden met de afstand van de lichtbron tegenover het scherm. Hoe dichter het
licht bij het scherm komt hoe zachter het licht is. Dus bij het belichten van een scherm moet je de
lichtbronnen zo dicht mogelijk bij het scherm zetten.
Grootte lichtbron
De afmetingen van de lichtbron heeft ook een veel invloed op de zachtheid van het licht. Hoe groter
de lichtbron is hoe groter de zachtheid van het licht is. Dit komt doordat het licht in meer richtingen
gaat naarmate de lichtbron groter is. Doordat het licht meerdere richtingen opgaat zal er meer
belicht worden en zodoende minder schaduw ontstaan. Je kunt het oppervlak van de lichtbron
vergroten door reflecterend materiaal te gebruiken.
Schaduw
Wanneer je het scherm fout belicht zal er schaduw ontstaan op de achtergrond. Deze schaduw geeft
problemen bij het bewerken van de film vanwege het feit dat het stuk met de schaduw een andere
kleur heeft. Dit kleurverschil levert problemen op omdat het stuk niet egaal is en een kleuroverloop
heeft waardoor het lastig is om het stuk te verwijderen. Wanneer dit geprobeerd wordt zal er
waarschijnlijk een stuk van de persoon meegenomen worden.
6
Flash Video
Remy van Vugt & Tim Vervoort
Deze positie levert een schaduw op waar op gelet moet worden tijdens het filteren van de groene
omgeving. Je ziet de schaduw van de presentator op het groene scherm.
Positie lichtbronnen
Het positioneren van de lichtbron heeft een grote invloed op de kwaliteit van het filmen. Wanneer
er te weinig lichtbronnen zijn zal er geen egale achtergrond zijn waardoor het lastig is om de
achtergrond te verwijderen. Er zullen dus genoeg lichten moeten zijn om de hele achtergrond egaal
te belichten.
Positie
De positie van de lichtbronnen is ook erg belangrijk voor de kwaliteit van het filmen. De lichten
moeten zo geplaatst zijn zodat er geen schaduw ontstaat. Hieronder staat een plaatje van een basis
opzet van de positionering van de lichtbronnen.
7
Flash Video
Remy van Vugt & Tim Vervoort
Zoals je ziet staat er aan de zijkanten van het scherm twee lampen die op het scherm gericht zijn. Dit
is om ervoor te zorgen dat de persoon geen schaduw veroorzaakt op het scherm. Er is ook een licht
boven het scherm opgehangen om de schaduw van de persoon te verwijderen. Het is mogelijk om
minder lampen te gebruiken om de schaduw te verminderen, maar om minder lampen te gebruiken
zul je moeten experimenteren met het aantal lampen en de positionering.
Belichting van de persoon
De persoon die gefilmd wordt moet goed worden belicht, want er mag ook geen schaduw ontstaan
op de persoon zelf, hiervoor zullen ook lichten gebruik moeten worden. De beste positie waar de
lichtbron opgesteld kan worden is recht voor de camera zodat er geen schaduw gefilmd wordt. Maar
wanneer de lichtbron hier neergezet wordt kan dit problemen opleveren met overbelichting van de
film. Een goede oplossing is om zacht licht te laten reflecteren zoals hierboven is gebeurt. Door deze
oplossing te gebruiken zal er bijna geen schaduw ontstaan en is er minder risico op overbelichting.
Het is mogelijk om meerdere lichtbronnen te gebruiken om de persoon te belichten zodat er geen
schaduw ontstaat, dit ligt aan het grootte van het film oppervlak en het aantal personen dat gefilmd
moet worden.
8
Flash Video
Remy van Vugt & Tim Vervoort
Positie van de persoon
Voordat je kan filmen moet de persoon of het onderwerp nog geplaatst worden. De positionering in
belangrijk voor de kwaliteit van de film. Het onderwerp moet minimaal even ver van het scherm af
staan als de zijlampen. Dit zorgt ervoor dat er geen schaduwen ontstaan op de persoon. De maximale
afstand van het onderwerp kan verschillen, dit licht aan het lichtgebruik en de positionering van de
lichtbronnen. Je kunt het onderwerp zo ver naar voren zetten zolang er genoeg licht is en het scherm
nog nut heeft voor het filmen.
Tips voor de acteur
Wanneer er een journaal gefilmd wordt dan zal er rekening gehouden worden met de omgeving.
Wanneer het object moet zitten achter een bureau dan zal er een soort van bureau moeten worden
gemaakt met dezelfde kleur zodat die weggehaald kan worden. Ook is het beter om te persoon te
laten zitten indien nodig. Zo creëer je een indruk dat het echt is.
Script
Voordat je gaat filmen moet je eerst een script klaar hebben waarin de acteurs hun teksten kunnen
vinden. Dit zorgt voor een beter filmresultaat en dan elke scene goed is uitgewerkt voordat je begint
met filmen.
Hier wordt het voorbeeld gegeven van het script dat is gebruikt in onze film:
<nieuwslezer>
Goedemorgen, hier is Tim Vervoort met de actuele nieuwsitems. Vandaag zullen we het hebben
over opmerkelijke onderwerpen die over de wereld gebeuren.
9
Flash Video
Remy van Vugt & Tim Vervoort
Algemene informatie
<nieuwslezer>
Bent u benieuwd naar de huidige ontwikkelingen in de wereld, kijk dan snel op een van de
onderliggende nieuwsitems
Nieuwsitem Irak
<nieuwslezer>
In Irak zijn vanmorgen vredesgesprekken aan de gang tussen de verschillende leider. We gaan nu
naar onze verslaggever Remy van vugt die vanuit Irak ons meer informatie geeft over dit
onderwerpt.
<nieuwslezer>
Goedemorgen Remy, want zijn de huidige ontwikkelingen?
<Verslaggever>
Goedemorgen Tim, op het moment verloopt alles vredig zoals u kunt zien achter mij en krijgen we
positieve berichten te horen over de vredesgesprekken.
<nieuwslezer>
Dat is goed om te horen, wanneer zal er iets bekend worden gemaakt over de huidige gesprekken?
<verslaggever>
We verwachten dat elk moment een afgevaardigde met meer informatie komt voor de pers.
<-- bom ontploft -->
<verslaggever>
< actie: zet ondertussen een helm op>
O my god, o my god. volgens mij is er een bom ontploft bij de vredesgesprekken, ik neem aan dat de
gesprekken zijn afgelast tot nader orde.
<nieuwslezer>
<heeft een helm op>
Dat is een minder prettige ontwikkeling, kun je iets aangeven over het aantal slachtoffers dat is
gevallen.
<verslaggever>
Nee Tim, dat is helaas nog niet mogelijk, maar de eerste cijfers zeggen dat er ongeveer 100 mensen
in het gebouw waren.
<nieuwslezer>
Is er al iets bekend over de daders van de aanslag?
<verslaggever>
Nee nog geen groepering heeft de aanslag opgeëist. Maar de experts zeggen dat de bom bestond uit
vuurwerk dat gemaakt is in België.
<nieuwslezer>
Dat is interessant om te horen moeten we hier vanuit gaan de terroristen Belgen zijn.
<verslaggever>
Daar durf ik niets over te zeggen maar de bommaker moet een expert geweest zijn met vuurwerk!
<nieuwslezer>
Dit is dus een minder plezante ontwikkeling zo gezegd.
10
Flash Video
Remy van Vugt & Tim Vervoort
Software
Voor het bewerken van de stukken films hebben we verschillende programma's gebruikt:
MPEG Video Wizard
Dit programma wordt gebruikt om makkelijk films in stukjes te knippen. Dit is makkelijk omdat het
gefilmde materiaal te groot is waardoor het ingekort moet worden. Wanneer het stukje film geknipt
is kan je het apart opslaan en zo makkelijk gebruiken voor het filteren van de achtergrond.
Tijdens het filmen zijn er waarschijnlijke verschillende bloopers gemaakt. Deze bloopers zitten soms
in hetzelfde filmbestand als de stukjes die gebruikt worden. Met dit programma is het heel simpel
om de stukjes eruit te knippen en deze stukjes op te slaan zonder alles opnieuw te renderen.
11
Flash Video
Remy van Vugt & Tim Vervoort
Adobe Premiere Pro
Voordat het programma geïnstalleerd wordt moet je opletten welke versie je gaat gebruiken. Tijdens
het maken van onze film hebben we gebruik gemaakt van CS4 versie omdat deze versie wel werkt op
een Windows 32 bit en de CS5 versie niet, dat dit niet werkt is een uitzondering van Adobe, want er
werken maar twee programma's van Adobe niet op een 32 bit machine, namelijk After Effects en
Premiere Pro. Dit kan problemen geven tijdens het werken aan het project op verschillende
computers. Het kan zijn dat sommige computer 32 bit zijn en daardoor geen CS5 hebben.
Met behulp van dit programma wordt de rest van de film bewerkt. Dit programma biedt
verschillende mogelijkheden om een film te bewerken. Hieronder geven we een overzicht van
mogelijkheden die we gebruikt hebben voor het bewerken van de film. Hieronder een overzicht van
Premiere Pro.
Croppen
Croppen geeft je de mogelijkheid om een stuk film in te korten zodat je een minder groot stuk film
hoeft te bewerken. Dit hebben we gebruikt om vervelende hoeken in de film weg te werken zodat
we hier later geen last meer van hebben.
12
Flash Video
Remy van Vugt & Tim Vervoort
De film die weergegeven wordt in de foto heeft een donkere hoek die niet gefilterd kan worden met
kleuren. Hiervoor is croppen een uitstekend oplossing om een goed resultaat te krijgen. De foto
hieronder zie je hoe er een selectie is gemaakt van de film dat overgebleven moet worden.
Je kunt een video croppen door bij effect de optie crop in de effect controls te slepen van de video.
Het is dan mogelijk om het venster te verslepen en te vergroten zodat je de goede afmetingen hebt
gekregen.
Color Key
Premiere pro bied je ook een mogelijkheid om bepaalde kleuren te filteren uit een film. Dit wordt
gedaan met een zogenoemde color key. Deze optie hebben we voornamelijk gebruikt om een stuk
film te bewerken.We geven hieronder een voorbeeld van hoe een color key te gebruiken is.
13
Flash Video
Remy van Vugt & Tim Vervoort
In de bovenste foto zie je een persoon tegen een grijze achtergrond en in de tweede foto zie je dat
de achtergrond verdwenen is. Dit is gedaan met de color key.
Je kunt een color key toevoegen door de optie color key op te zoeken bij effecten en deze naar Effect
controls te slepen. Je kunt dan met een pipetje de kleur bepalen die vervangen moet worden.
In de Effect controls kan je bepaalde waardes aanpassen van de color key waardoor je andere
beelden krijgt in de film.
Video's
Premiere pro bied de optie om meerdere media bronnen te gebruiken en ze in lagen af te laten
spelen. Deze functionaliteit hebben we gebruikt om de nieuwslezer in de studio te zetten. Hiermee
hebben we de achtergrond achter de nieuwslezer kunnen plaatsen en het bureau voor de
nieuwslezer. Je kunt verschillende media importen door de volgende mogelijkheden. De eerste
mogelijkheid is om onder file de optie import te gebruiken en de bestanden selecteren. De tweede
mogelijkheid is om bestanden in de project window met resources te droppen.
Exporteren
Om de bewerkte video's te kunnen gebruiken moeten de video's worden omgezet in flv of f4v. Ddeze
formaten kunnen beide worden afgespeeld in een Flash film. Het verschil tussen de twee formaten is
dat f4v metadata bevat waarmee het mogelijk is de filmeigenschappen te veranderen. Ook gebruikt
f4v een andere manier om de video te comprimeren. Deze nieuwe manier zorgt ervoor dat de
bestanden kleiner zijn en de kwaliteit blijft hetzelfde. Dit is omdat in deze bestanden de video en
audio op dezelfde manier gecodeerd is als een swf. Dit is nodig omdat deze bestanden worden
gebruikt in een flash video.
Premiere pro bied de mogelijkheid aan om een bewerkte video te kunnen exporteren naar een flv of
f4v. Hiervoor moet je de volgende stappen ondernemen.
Ga naar file -> export -> media
14
Flash Video
Remy van Vugt & Tim Vervoort
15
Flash Video
Remy van Vugt & Tim Vervoort
Wanneer premiere pro klaar is met laden krijg je het volgende scherm te zien:
In dit scherm kun je het formaat nog wijzigen tussen een FLV en F4V. Het is ook mogelijk om de video
nog te croppen zodat je de zwarte randen kan weghalen. Wanneer je klaar bent gebruik je de knop
ok om verder te gaan.
Adobe opent dan Adobe Media Encoder om het bestand om te zetten. Je krijgt na het openen het
volgende scherm. Je kunt hier de locatie van de output file bepalen door op de locatie te klikken. Het
omzetten start wanneer er op start qeue wordt gedrukt rechtsonder.
16
Flash Video
Remy van Vugt & Tim Vervoort
Compressie
Het is mogelijk om met Flash Player video’s af te spelen, maar ze moeten wel op een bepaalde
manier geëncodeerd zijn. Er zijn 3 codec’s geschikt voor bepaalde versies van Flash Player. Hieronder
staat een overzicht van welke codec bij welke Flash Player werkt.
De huidige Flash Player versie is 10.1. Alleen de On2 VP6 video codec heeft ondersteuning voor een
alpha kanaal. We zijn echter niet van plan om dat te gebruiken; we monteren de video van te voren
in een eigen virtuele studio. We ontwerpen dus geen omgeving waarin we staan te presenteren in
Flash zelf.
Sorenson Spark is verouderd wat een lagere compressieverhouding en minder mogelijkheden als
transparantie en streaming heeft maar veroorzaakt weinig processorbelasting.
H.264 is de nieuwst ondersteunde codec door Flash Player, maar kent geen transparantie. Het heeft
een relatief hoge belasting van de processor bij het afspelen, maar het beeldkwaliteit is hoog. Het
wordt gebruikt bij YouTube.
We hebben gekozen voor de On2 VP6 compressie aangezien de video is verwerkt in een Flash
website. Het is dus niet alleen de video opzich zoals bij YouTube, de video is slechts een onderdeel
van de website. Hoge beeldkwaliteit is niet direct onze prioriteit wat bij een videosite wel het geval is
en ON2 VP6 heeft minder processor belasting en hogere compatibiliteit. Bovendien is er veel goede
ondersteuning op internet te vinden voor deze compressie in combinatie met Flash (tutorials, forums
etc).
Adobe Photoshop
We hebben voor het project photoshop gebruikt om de nodige afbeeldingen te maken en te
bewerken voor ons nieuwsoverzicht. De belangrijkste afbeelding die wij hebben bewerkt voor ons
project is het bureau waar de nieuwslezer achter zit. We geven hier een kort overzicht van de
stappen die wij hebben doornomen om dit bureau te bewerken.
We zijn begonnen met het openen van het bureau in Photoshop:
17
Flash Video
Remy van Vugt & Tim Vervoort
Je ziet het bureau in photoshop, maar de achtergrond is te groot voor de afbeelding. We moeten dus
eerst de canvas kleiner maken. Dat kan op verschillende manieren maar wij hebben de afbeelding
gecropt met de crop tool zodat we alleen het bureau te zien krijgen.
Nu zijn we klaar om het bureau uit de afbeelding te knippen. Dit is nodig omdat we twee lagen nodig
hebben. Dat is omdat we de illusie moeten wekken dat de verslaggever achter bureau moet zitten.
Het is mogelijk om heel het bureau apart te selecteren en dan uit te snijden maar dit is vrij lastig dus
hiervoor hebben we niet gekozen. We hebben het bureau geselecteerd met de select tool en zo
uitgesneden. We krijgen hiermee het volgende resultaat:
18
Flash Video
Remy van Vugt & Tim Vervoort
Het is nu mogelijk om de foto's apart op te slaan. Hiermee kunnen we in Adobe Premiere Pro de
introductie film maken.
Studio
In onze flash film moeten we een soort van studio weergeven waarin alles afspeelt. We willen dat de
studio ook een uitstraling heeft van een nieuwsuitzending. We willen dit bereiken door onderaan het
scherm beursgetallen voorbij laten komen. Hieronder volgen de stappen die ondernomen zijn om
19
Flash Video
Remy van Vugt & Tim Vervoort
deze studio te verkrijgen. We zijn begonnen met het openen van het bureau in het scherm zodat we
een indruk krijgen van hoe de studio eruit moet komen te zien.
Hierna zijn we verder gegaan met het maken de beursnotie onderaan de pagina. Hiervoor hebben
we een witte balk onderaan toegevoegd. Vervolgens moesten we ook een menu hebben die het
mogelijk maakt om de gebruiker verschillende uitzendingen te kiezen. Hiervoor hebben we een
blauwe balk toegevoegd waar de menu items op komen. Deze zijn toe te voegen via een text tool.
Wanneer we de stappen hebben doornomen hebben we nu dit resultaat gekregen.
Wanneer we het bestand af hebben kunnen we het bestand opslaan zodat we het later kunnen
gebruiken in Adobe Flash.
20
Flash Video
Remy van Vugt & Tim Vervoort
Adobe Flash
Dit programma stelt je instaat om je flash video te ontwikkelen. Hiermee bedoelen we dat met
behulp van dit programma de programmeur in staat stelt om de Flash video te maken met de juiste
interactie. Wij hebben voor onze film Adobe Flash cs5 gebruikt omdat deze versie wel bruikbaar is op
beide windows bit versies.
Wanneer je een nieuw project opent kun je kiezen uit verschillende versies van actionscript. Onze
flash video is gemaakt met actionscript 3 en alle voorbeeld code is gemaakt voor actionscript 3.
Video afspelen
We willen zelf gemaakte films kunnen afspelen in ons project. Na wat onderzoek is het ons gelukt om
dit te bereiken. We hebben hiervoor Actionscript 3 gebruikt in ons project. We geven hieronder de
code waarmee het gelukt is om video's af te spelen maar voordat we dit doen gaan we eerst de
stappen doornemen waarmee je Actionscript 3 kunt toevoegen aan het project.
De eerste stap die genomen moet worden is naar de juiste frame te gaan waarin je de video af wilt
laten spelen. Dit wordt gedaan door op het juiste frameblokje te klikken. Hieronder is een afbeelding
met daarin de frames in Adobe Flash.
Wanneer je op de juiste frame staat moet je naar de actions tab gaan in Adobe Flash, deze tab is
gepositioneerd op de volgende plaats.
21
Flash Video
Remy van Vugt & Tim Vervoort
In de tab vind je de mogelijkheid om Actionscript te plaatsen. We hebben voor het project een stuk
code gebruikt om de films af te kunnen spelen. Hieronder wordt de code weergeven. Voor je eigen
project zul je misschien wat afmetingen moeten veranderen en de locatie van de film veranderen.
// video size
var vid:Video = new Video(800, 500);
irakflv.addChild(vid);// aad to movieclip
// make netconnection
var nc:NetConnection = new NetConnection();
nc.connect(null);// connect with nothing
var ns:NetStream = new NetStream(nc);// make netstream
vid.attachNetStream(ns);
// this part is needed to recieve any callback information
var meta:Object = new Object();
meta.onMetaData = function(meta:Object)
{
trace(meta.duration);// show duration of movie
}
// add the callback to the client
ns.client = meta;
// play the movie
ns.play("irakbegin.flv");
Interactiviteit
In onze film zit de nodige interactiviteit om de aandacht van de gebruiker te houden. Om de
interactiviteit in de film te stoppen hebben we gebruikt te gemaakt van Actionscript 3. Deze code kan
je toevoegen aan het project door de stappen te ondernemen die in de vorige subhoofdstuk staan.
We hebben ervoor gezorgd in de film dat de gebruiker op een locatie kan klikken waarmee er een
volgende film wordt afgespeeld. Om deze interactiviteit in je film te krijgen zul je moeten weten
wanneer je film gestopt is.
Wanneer je weet wanneer de film gestopt is moet de gebruiker de mogelijkheid krijgen om te klikken.
Dit wordt gedaan door een zogenoemde hotspot toe te voegen aan je film. Hiermee bedoelen we
een stuk film waarop je kan klikken en er een reactie van komt. De reactie is dan in onze film het
afspelen van een volgend stuk film.
Hieronder staat de code die gebruikt wordt om interactiviteit toe te voegen aan je project. Er wordt
gebruikt gemaakt van een ingestelde hotspot.
// add eventlistener
ns.addEventListener(NetStatusEvent.NET_STATUS, onstatusChange);
// event function
function onstatusChange(stat:Object) :void{
if(stat.info.code == "NetStream.Play.Stop")// check for stop
{
if(!isBomExplosionPlaying)
{
// when movie is done add new mouse click listener.
irakflv.addEventListener(MouseEvent.CLICK, checkHotSpot);
22
Flash Video
Remy van Vugt & Tim Vervoort
}
else
{
this.gotoAndStop("opening");// go to opening frame
}
}
}
// mousclick function
function checkHotSpot(e:MouseEvent)
{
var minx = 290;// top left x
var maxx = 420; // bottom right x
var miny = 80; // top left y
var maxy = 460;// top left x
// check if click is in rect
if(e.localX > minx && e.localX < maxx && e.localY > miny && e.localY < maxy)
{
// print coord
trace("coordinate: ("+ e.localX + ", " + e.localY + ")");
// play new movie
ns.play("irakeinde.flv");// next functie
// removes event listerener at the begin of playing
irakflv.removeEventListener(MouseEvent.CLICK, checkHotSpot);
}
}
Met deze code kun je muisklikken op de hotspots afhandelen. Je kunt de afmetingen van de hotspot
zelf instellen zodat je de goede spot krijgt. In dit voorbeeld wordt er een nieuw stuk film afgespeeld
wanneer er op de verslaggever wordt geklikt.
Met deze klassen kunnen we gaan beginnen met het creëren van de fla. We beginnen met het
importen van het Photoshop bestand dat we hebben gemaakt. Hiervoor gaan we naar file-->import-> to library. We zien dan het volgende scherm:
23
Flash Video
Remy van Vugt & Tim Vervoort
Je kunt hier aangeven welke lagen je wil importeren. Wanneer de juiste zijn geselecteerd ga je verder
door akkoord te gaan met de selectie. Hierna kun je aan de slag met het maken van de knoppen die
naar de andere uitzendingen gaan. Dit doe je door op de gewenste tekst te selecteren en op F8 te
drukken. Dit zorgt ervoor dat je een symbool aanmaakt. Je moet de mogelijkheid van de button
selecteren om ervoor te zorgen dat je naar het juiste frame gaat. Hieronder is een afbeelding van het
omzetten naar een symbool.
24
Flash Video
Remy van Vugt & Tim Vervoort
Vervolgens maken we een tweede frame aan dit doe je door op de timeline een nieuwe layer aan te
maken met de naam action. Hierin komt het actionscript die gebruikt wordt voor het filmpje.
Wanneer je dit gedaan hebt ga je ergens verder in de timeline een frame selecteren en druk je op F6.
Hiermee maak je een nieuw keyframe aan waarin je begint met de uitzending. Deze frame geef je
een bepaalde naam waaraan je de uitzending kan onthouden. Vervolgens vergroot je de rest van de
layers die nodig zijn voor de uitzending.
Om de buttons naar de het nieuwe frame te laten gaan moet de volgende code worden toegevoegd
in de action layer.
buttonnaam.addEventListener (MouseEvent.CLICK, this. gotoAndStop(" frame naam ");
Met deze code ga je naar het juiste frame zodat je daar je film kan afspelen. We gaan nu verder met
het maken van de beurskoers. Dit wordt gedaan door een textbox toe te voegen op op de witte
achtergrond in je flashbestand. Je moet zorgen dat de textbox rechts iets verder uitsteekt zodat het
net lijkt of er complete woorden inkomen.
Wanneer je klaar bent met de textbox klik je op de layer waarin je de textbox hebt gezet en voeg je
de volgende actionscript toe.
import flash.events.TimerEvent;
import flash.utils.Timer;
// text
var basicline = " ADX 0.2% || NASDEC 0.5% || DSM 1,5% || BAM 10.5% || ADSL 0.6% || MIEP 8.0%
|| CHP 0.4% || TFL 1.5% || MPD 0.58% || AJD 4.56% ||";
txteconomic.text = basicline;
var index = 0;
var end = basicline.length;
var timer:Timer = new Timer(150);
timer.addEventListener(TimerEvent.TIMER, updateText);
timer.start();
function updateText(e:TimerEvent):void{
var char = basicline.substring(0,1);
basicline = basicline + "" + char;
basicline = basicline.substring(1, end);
txteconomic.text = basicline;
}
Deze code zorgt ervoor dat de tekst van rechts naar links gaat onderin je scherm.
Resultaat
Wanneer je al deze stappen hebt doorlopen weet je hoe je een film kan laten afspelen en aan de film
een vorm van interactiviteit kan toevoegen. Hier in het kort nog de stappen die doorlopen zijn om
een Flash video te maken.
25
Flash Video
Remy van Vugt & Tim Vervoort
De gebruiker moet bij het maken van de voorbereidingen rekening houden met verschillen punten
zoals het lichtgebruik etc. Wanneer al deze stappen doornomen zijn kan er begonnen worden met
het filmen van het script.
Vervolgens moeten de films bewerkt worden om de achtergrond eruit te halen. Dit wordt gedaan
door een colour key of chroma key toe te passen in Premiere Pro. Hiermee wordt een kleurtint
verwijderd uit de film . Je houdt nu alleen nog maar de persoon die is gefilmd over in je film.
De volgende stap die genomen moet worden is het maken van je studio in Photoshop. We gebruiken
dit programma omdat Adobe Flash de mogelijkheid heeft om een bestand van Photoshop te
importeren.
Het laatste programma dat we gebruiken voor het project is Adobe Flash. Hiermee voegen we de
films en de interactiviteit toe. We starten met het importeren van het gemaakte bestand in
Photoshop. Je voegt eerst de opening film toe aan het document. Je kunt video's afspelen door
Actionscript 3 te gebruiken. De code hiervoor wordt gegeven in het hoofdstuk video afspelen. Je
kunt een nieuwe keyframe aanmaken en de code opnieuw gebruiken waardoor je een andere film
kunt afspelen in de frame.
Je kunt navigeren tussen de films door een menu te maken met knoppen die de gewenste acties
hebben. In dit document wordt uitgelegd hoe je een knop kunt maken met behulp van een symbool.
De laatste stap die genomen moet worden is het toevoegen van de interactiviteit. Dit wordt gedaan
door Actionscript 3 code toe te voegen. Deze code wordt gegeven in het hoofdstuk interactiviteit.
We kijken in de code naar het moment wanneer een stuk film is afgelopen. Hierna kan de gebruiker
op een bepaalde locatie klikken waarmee een nieuwe film wordt afgespeeld.
Wanneer deze stappen doorlopen zijn heb je een Flash video die een vorm van interactiviteit heeft.
Het is mogelijk om meerdere films toe te voegen en andere soort functionaliteit toe te voegen aan
het project.
Ervaringen
We hebben met plezier aan het project gewerkt, hierdoor hebben we nieuwe ervaringen opgedaan
met bewerken van films en het gebruiken van extern filmmateriaal in Flash. Er zijn ook punten
geweest in het project die minder goed verlopen zijn.
We hebben tijdens de eerste filmsessie geleerd dan we beter een soort van opstelling konden maken
waarachter de nieuwslezer zat. Dit is omdat dan de bewegingen kloppen van de nieuwslezer. We
konden de opstelling maken van een bureau en een wit doek die we eruit filteren.
We hadden ook gemerkt tijdens de eerste filmsessie dat we teveel schaduw hadden doordat we te
weinig licht gebruikt hadden. Dit zorgde voor veel ergernis tijdens het bewerken van films. We
konden beter eerst een testfilm maken met een opstelling en zo kijken of het licht goed was.
26
Flash Video
Remy van Vugt & Tim Vervoort
Slot
In dit document staan de stappen die genomen zijn om een eigen Flash nieuwsuitzending te maken.
We maken gebruik van echt filmmateriaal wat we gaan bewerken voordat we het gaan gebruiken in
de Flash film. Het resultaat is een Flash film waarin de acteur echt in meespeelt.
We beginnen met een uitleg over de voorbereidingen die getroffen moeten worden om het
gewenste filmresultaat te krijgen. Hierna gaan we verder met het bewerken van het filmmateriaal.
Hiervoor zijn verschillende stappen nodig die beschreven worden.
We eindigen het document met een uitleg van hoe je een gewenst nieuwsitem kan maken in Flash.
Wanneer deze stappen doorlopen worden moet de lezer in staat zijn om een eigen versie van een
nieuwsuitzending te maken.
27