Johan Andersson Video Caster - Uppsala universitet

Uppsala Universitet 

Datavetenskapliga Programmet 

Johan Andersson 

Video Caster 

– dynamisk videospelare i Flash 

Examensarbete 20 poäng 

HT 2005/VT 2006 

Handledare: 

Petter Bjelm 

Ämnesgranskare: 

Erik Borälv 

Examinator: 

Anders Jansson 

Institutionen för 

Informationsteknologi

UPPSALA UNIVERSITET 


Datavetenskapliga Programmet 8210087154 

Examensarbete HT2005/VT2006 

2





Abstract 

Today the market of gaming is enormous. To be a gamer has turned into a lifestyle, where 

the best are professionals and are playing games on Internet or LAN for a living. If you 

manage to reach all these gamers in some way you are guaranteed a big audience. There are 

a lot of advantages in having a video player on the Internet instead of showing the programs 

on regular TV. The most obvious one is that you can look at the shows whenever it fits you 

and as an owner you can deliver live shows anytime you like. 

This essay is done at request from EGAMES.TV, who would like to deliver videos and 

interviews about gaming, just like MTV delivers music to those who love music. The 

purpose of this essay is, therefore, to create an on demand streaming video player in Flash, 

which is integrated with a database. With this integration it is almost too easy to change the 

content and visual layout on the player since it is generated from the information in the 

database. The essay also discusses how the player can be used within advertisement and how 

it is possible to develop it further. 

There are a lot of possibilities in making an interactive video player, when you use such a 

widespread and dynamic application as Flash. If you do not want to use Flash’s own video 

format there is always a good idea to integrate Flash with some other player to get the 

interactivity possibilities. With the last version of Flash there are some great functions which 

enable you to easy interact with the browser. Accordingly, every player who is controlled by 

JavaScript can also be controlled by Flash. 

The final product of this essay is a video player that can play streamed video. The player is 

generated from a MySql database and it is, therefore, easy to create more than one player 

with different visual appearance and information. The player is also integrated with Windows 

Media Player thru JavaScript and has a lot of extra functions such as comments on a clip, 

subtitles and play lists. For the owner of the player it is also possible to change the 

advertisement and commercials that are played before and/or after a video clip. 

3





4





Innehållsförteckning: 

1 INLEDNING .................................................................................................................................................7 

2 BAKGRUND ..................................................................................................................................................9 

2.1 OLIKA FORMAT..........................................................................................................................................9 

2.1.1 Quicktime......................................................................................................................................9 

2.1.2 RealPlayer...................................................................................................................................10 

2.1.3 Windows MediaPlayer............................................................................................................10 

2.1.4 Macromedia Flash ...................................................................................................................11 

2.2 OLIKA VISNINGSALTERNATIV................................................................................................................12 

2.3 OLIKA VISNINGSALTERNATIV I FLASH ................................................................................................12 

2.4 STREAMING/PROGRESSIVE DOWNLOAD I FLASH (KODEXEMPEL) ..................................................14 

2.5 DATABASPHPXMLFLASH VS DATABASPHPFLASH...................................................................14 

2.6 LOADMOVIE VS LOADCLIP I FLASH .....................................................................................................16 

2.7 PLAYLIST..................................................................................................................................................17 

2.8 DATABASDESIGN ....................................................................................................................................17 

2.9 KODSTRUKTUR OCH EXEMPEL I FLASH................................................................................................17 

2.10 MÖJLIGGÖRA INTERAKTIVITET...........................................................................................................19 

2.11 BANNERS...............................................................................................................................................19 

2.11.1 clickTAG ....................................................................................................................................20 

2.12 SÄKERHET.............................................................................................................................................20 

2.12.1 Säkerhet i Flash ....................................................................................................................20 

2.12.2 Säkerhet i PHP.......................................................................................................................21 

2.12.3 Säkerhet i PHP/MYSQL.......................................................................................................22 

2.13 EXTERNAL INTERFACE API.................................................................................................................23 

2.14 LOADVARS............................................................................................................................................24 

2.15 LIKNANDE SPELARE .............................................................................................................................25 

3 RESULTAT...................................................................................................................................................27 

3.1 STEG 2 – FUNKTIONALITET I FLASH ................................................................................................31 

3.2 STEG 3 – LAYOUTEN .............................................................................................................................32 

3.3 STEG 4 – MER FUNKTIONALITET .........................................................................................................33 

3.4 BANNERS .................................................................................................................................................36 

3.4.1 clickTAG.......................................................................................................................................36 

3.5 INTEGRATION MED WINDOWS MEDIA PLAYER..................................................................................37 

3.6 EXTRA FUNKTIONER ...............................................................................................................................38 

3.6.1 Sökfunktion................................................................................................................................38 

3.6.2 Subtitlesfunktion .....................................................................................................................38 

3.6.3 Subtitleparser .........................................................................................................................38 

3.6.4 Dynamiska cuepoints ............................................................................................................38 

4 SLUTSATS...................................................................................................................................................41 

5 DISKUSSION OM RESULTATET ....................................................................................................43 

6 REFERENSER ............................................................................................................................................44 

5





6





1 Inledning 

I Sverige har 90 % av hushållen en PC-spelmaskin och det såldes nästan två spel/hushåll 

under 2005 (MDTS [18]). Att vara en ”gamer” har blivit en livsstil., en accepterad livsstil där 

de bästa är professionella yrkesutövare. Världsomspännande spelturneringar med enorma 

prissummor lockar miljontals som vill tävla med sina data- och spelfärdigheter. Eftersom det 

finns proffs så finns det fans, de flesta vill bli lika duktig eller bättre än deras idol, bara i USA 

spelar 75 % av hushållen dataspel enligt the Esa [1]. Så spelmarknaden är gigantiskt stor och 

det finns inga indikationer på att den ska minska, snarare visar statistiken hos the Esa [1] att 

marknaden kommer att bli ännu större. Eftersom marknaden är stor så är man garanterad en 

publik om man har något att visa upp och där kommer min interaktiva och genererade 

videospelare in. Denna uppsats behandlar hur man gör en dynamisk spelare i Flash som har 

stora möjligheter att inte bara visa video, utan också stora reklammöjligheter vad gällande 

banners, samt reklamklipp före och/eller efter en videofilm. Att informationen är genererad 

ifrån en databas gör det lätt att ändra både utseendet och innehållet på en spelare. Först 

behandlar uppsatsen olika teoretiska tekniker och svårigheter som finns med detta projekt, 

efter det så kommer den slutgiltiga lösning samt tankegångar på hur man kan utveckla det 

några steg vidare i framtiden. 

Uppsatsen kommer inte att ta upp de delar i Flash som behandlar hur man tillexempel ritar 

en linje och andra simpla saker, det finns bra hjälp i Flash hjälpavsnitt eller på Flash 

LiveDocs [2] där man snabbt kan lära sig grunderna såsom avancerade funktioner i Flash. 

7





8





2 Bakgrund 

EGAMES.TV [15] vill komma ut till ”gamers” på samma sätt som MTV [14] kommer ut till 

dem som älskar musik. Att sända ondemandTV där tittaren själv väljer när han/hon ska 

titta på programmen är ett bra alternativ för ”gamers” eftersom många av dem sitter mer 

vid en dator än vid en TV. Vidare så är avsaknaden av att man måste sända speciella tider 

bra när man vill sända live. 

Uppgiften består alltså av att göra en produkt i vilken man ska kunna kolla på strömmade 

filmklipp. Dessa filmklipp ska kunna väljas genom att klicka på tumnaglar som är genererade 

ifrån en databas och på det sättet blir dynamiska. Spelaren ska ha olika genres för sina 

filmklipp, specifika reklamannonser och bannerfunktionalitet samt att man som innehavare 

av spelaren ska ha möjlighet att bestämma en egen genre med tillhörande filmklipp, 

bakgrundsbild och färgsättning. 

Idag finns det en uppsjö av olika tekniker och varianter att välja på när man ska utveckla en 

sådan applikation. De har alla sina fördelar och nackdelar och det gäller att ha klart för sig 

vad det är man vill eftersträva innan man väljer tillvägagångssätt. 

2.1 Olika format 

Det finns en mängd olika klienter att spela upp video med. Alla med varierande egenskaper, 

ett fåtal har fler fördelar än de andra, en redogörelse för de mest kända applikationerna 

följer. 

2.1.1 Quicktime 

QuickTime har fördelen att det är brukbart både för Mac och också PC, på deras hemsida 

står det att de har 25000 som kommer in på deras downloadsida varje dag. Därmed är det 

inte sagt hur många som verkligen laddar hem produkten. En fördel är att QuickTime oftast 

9





är integrerat med nya program som kommer ut. Enligt många filmproducerare är detta 

formatet som gäller medan andra inte tycker om det alls. Quicktime fungerar bra på en dator 

med operativsystemet Windows eller MacOS. 

2.1.2 RealPlayer 

RealPlayer har ett stort utbud av bredbands-tv som man kan få tillgänglighet till om man 

betalar (Real Player [4]). Detta utbud kan ju tänkas vara en möjlig utbyggnad i framtiden av 

spelaren. RealPlayer ser man oftast i ett eget programfönster mest för att de ska få fram sina 

egna reklamannonser. Den kan spela multipla filer efter varandra genom metaspråket SMIL 

som påminner mycket om XML. RealPlayers spelare spelar de flesta format (QuickTime 

inkluderat), det går att sätta nytt utseende på spelaren men den stora nackdelen är att 

spelaren inte har en komplett version som är gratis vilket har gjort att den populariteten den 

hade när den introducerades nästan helt har försvunnit. Det finns en gratisversion som de 

kallar för basic där man till exempel inte får lika bra kvalitet på ljudet eller videon. Vidare så 

beskylls Windows-versionen att vara en slags ad-aware för att den ibland låter reklam dyka 

upp i separata fönster (Answers [3]). Denna version har också fått dålig kritik för att om 

man registrerar sin gratisversion så blir man bombarderad med email. Båda dessa funktioner 

går dock att stänga av i programmet. 

2.1.3 Windows MediaPlayer 

Ännu en av Microsofts produkter som används brett i hela världen och som inte kommer att 

minska i popularitet är MediaPlayer. Eftersom de är marknadsledande inom det mesta så är 

detta ett säkert kort att satsa på. De nya produkter de utvecklar som till exempel Xbox360 är 

oftast integrerade med Microsofts andra applikationer. Med Xbox360 och MediaPlayer kan 

man streama musik och video till TV vilket gör att man lika gärna kan kolla på klippen med 

hjälp av tv. Spelaren kan också öppnas i fullskärm. MediaPlayer kan kontrolleras genom 

JavaScript. MediaPlayer stöds bäst av Internet Explorer men ska gå lika bra att använda i 

10





Netscape 7.1 dessutom är den lätt att uppdatera vilket gör att de flesta har den senaste 

versionen. Nackdelen med MediaPlayer är att Microsoft ofta byter format och standarder 

plus att med ett annat operativsystem än Windows/IE så blir det oftast problem. 

2.1.4 Macromedia Flash 

Macromedia Flash har ett eget videoformat som de kallar flv. Man måste ha Flash som ett 

gränssnitt om man ska se på flvvideor. Produkten Macromedia Flash är mest spridd, 

nedladdad samt går att köra på nästan vilken operativsystem och i vilken webbläsare som 

helst. Enligt Macromedia [6] har 97,7 % av alla internetburna datorer Flash installerat. Med 

Flash som gränssnitt kan man göra mycket vad gällande interaktivitet med videoklippen. 

Nackdelen är att programmen som man utvecklar i och streamingservrarna är dyra. Det är en 

hög inlärningströskel och flv går inte att spela separat så man blir bunden till Flash. När 

FlashPlayer7 kom ut så kom det en nyhet som heter progressive download vilket innebär att 

man börjar kolla på klippet medan den laddar hem. Detta funkar bra om man inte har många 

användare men man förlorar många fördelar jämfört med en streamingserver som till 

exempel att man kan sända live, kolla vilket hastighet som är den ultimata för användaren, 

man kan byta framerate och andra konfigurationer under runtime. Flv formatet är inget 

format som man redigerar själva filmklippet i, det gör man med sin favorit redigerare och sen 

konverterar man från ett annat videoformat till flv. En sista fördel med flv är storleken på 

filerna, jag konverterade en mpeg till bra kvalitet i flv formatet, och filen minskade från 

45mB till 12.5mB. Med Flash så slipper man oroa sig om man vill utveckla produkten i 

framtiden. Ett exempel kan vara att man har gjort ett grafiskt gränssnitt i Flash och använder 

flvformatet så att man har en videospelare med standardfunktionerna som alla videospelare 

har. Flash har inbyggda funktioner för detta så man kan göra en sådan spelare med fem 

musklick. Eftersom man har kontroll över gränssnittet som spelar upp videon så kan man 

lägga till valfri funktionalitet, ett exempel på detta är att man kan lägga till en chat eller 

kommentar-area liknande en gästbok till varje klipp som spelas upp. 

11





2.2 Olika visningsalternativ 

Med alla spelare så går det att göra en så kallad ”fast start/progressive download” med vilket 

menas att filen kommer i en ström till datorn vilket gör att minnet aldrig blir fullt och man 

kan spela upp stora videoklipp. Motsatsen till detta är att man laddar ned hela filen och sedan 

kollar på datorn. 

2.3 Olika visningsalternativ i Flash 

Det finns flera olika varianter för att se på video i Flash enligt Macromedia [6], nedan 

diskuteras dessa. 

Sedan Flash MX och Flash Player 6 kom ut så kan man bädda in video i sin Timeline i Flash 

och där sen utföra vanliga och traditionella operationer som till exempel 

gotoAndPlay(”frame nr”); för att gå till en speciell plats i filmen. Detta är väldigt lätt att 

implementera men det har många nackdelar, först och främst så får man väldigt lång 

laddningstid om filmen är lång eftersom Flash måste ladda in hela videon innan den kan 

börja spela. Om videon har en annan frames per second (fps) än vad Flash är inställt på så 

kommer det att låta osynkat och dessutom så får man en sämre kvalitet eftersom Flash 

använder sig av en codec som inte presterar lika bra kvalitet när man bäddar in video. En 

codec är en är en "uppackare/nedpackare" (decoder) för filmer som kan komprimera 

videoströmmar för att spara plats. Detta alternativ används därför sällan och de enda 

gångerna man ska använda detta är om man tycker att de följande metoderna är för svåra 

eftersom man med detta alternativ bara behöver ”klicka-dra-släppa” en videofil till tidslinjen 

i Flash. 

Ett bättre alternativ är något som kallas progressive download och med det menas att man 

med hjälp av ActionScript i Flash kan ladda in externa videoklipp och spela upp dem under 

runtime. Här laddas klippet ned till hårddisken och börjar spelas så fort den har fått nog med 

data. Med en bredbanduppkoppling till Internet kan man börja kolla på klippet efter några 

12





sekunder. Det irriterande väntandet som i vanliga fall finns när man ska kolla på filmklipp på 

nätet försvinner därmed vilket är ett stort plus. Eftersom den kompilerade swffilen och 

flvfilen är separata så försvinner också problemet med osynkat ljud. En nackdel är att om 

man har ett långt videoklipp så kan man inte spola i det innan hela filmen är nedladdad till 

datorns cacheminne. Att den laddas ned kan vara en fördel om man går in på sidan igen 

medan klippet ligger kvar i minnet, men det kan också ha sin nackdel eftersom klippet kan 

tas ur de temporära filer som Internet-browsers använder och därmed kan de digitala 

rättigheterna att man inte får ta andras signerade filmer brytas. Progressiv nedladdning är ett 

bra alternativ om man inte har så många besökare och vill ha en billig/gratis lösning. 

Om man däremot vill kunna visa upp filmklippet för 100-tals användare samtidigt, ha den 

bästa kvaliteten och alla funktioner så är det streaming som gäller. Att streama ett videoklipp 

i Flash är väldigt likt i kodningen för hur man använder progressiv nedladdning. Men sedan 

är likheterna inte många, med streaming så öppnar man en persistent koppling mellan datorn 

och streamingservern där man skickar data vilket spelas upp och sedan slängs bort. Eftersom 

man bara behöver veta vilken data som ska skickas så kan man spola direkt i en film eller 

göra avancerade playlists av olika delar av olika filmer till exempel. Därmed kan man lätt göra 

en automatiskt visare som visar de första 10 sekunder av ett filmklipp för en 

förhandstittning. Vidare kan man ta reda på vilken hastighet som används och justera 

videons kvalitet beroende på det. En annan fördel är att man kan sända live så att alla som 

tittar ser samma sak (jämför live sändning i tv). Men för att kunna använda sig av 

streamingtekniken i Flash måste man ha Flash Communication Server installerat och om 

man sedan lägger till kostnaden för att ha plats på ett bra streamingnätverk försvinner detta 

alternativ för entusiaster som bara vill ha en bra spelare eftersom ett prisexempel kan vara att 

det kostar 10000kr/terabyte i månaden (Akamai [19]). 

13





2.4 Streaming/Progressive download i Flash 

(kodexempel) 

Det finns egentligen två sätt att välja hur man ska se på streamad film i Flash, innan den 

senaste versionen av Flash kom ut så fanns det bara ett sätt och det var att köra med 

NetStream. Med NetStream så kontaktar man först servern man vill spela upp ifrån. Sedan 

fyller man den strömmen med olika videoklipp som man vill se. 

var connection_nc:NetConnection = new NetConnection(); 

connection_nc.connect(null); 

var stream_ns:NetStream = new NetStream(connection_nc); 

my_video.attachVideo(stream_ns); 

stream_ns.play("video1.flv"); 

Med connect(null) i detta exempel menas localhost. Sedan får man möjligheten att stanna, 

spela, stoppa videon och så vidare genom till exempel my_video.stop(); 

Numera finns det också en komponent som heter FLVPlayBack i och med Flash Player 8 

som egentligen kan ses som ett API för NetStream. Denna komponent har dock fördelen att 

man kan lägga in dynamiska ”actionscript” cuepoints i filmen som man sedan kan fånga upp 

när filmen spelas för att till exempel visa en subtitle eller byta en banner eller liknande. Detta 

gör att det blir otroligt dynamiskt eftersom det enda man behöver göra är att lägga till en ny 

cuepoint med ett nytt namn och fånga det namnet för att till exempel byta bakgrundsbild på 

sidan på en viss tidpunkt i en viss film. 

2.5 DatabasPHPxmlFlash vs DatabasPHPFlash 

Man kan anropa PHP-filer i Flash och få tag i det som PHP-filer skriver ut på standardout 

med till exempel denna rad: 

14





echo ”exjobb”; 

Om man vill tilldela en variabel titel som finns i Flash något värde ifrån PHP skriver man: 

echo ”&title=EnTitel”; 

Om man sedan vill ha fler variabler fyller man på med till exempel (Sepiroth [7]): 

echo ”&title=Entitel&titel2=TvåTitel&titel3=osv…”; 

Om man gör på detta sätt och ska sätta det mesta i Flash från sin databas får man en 

jättelång sträng som inte kommer att vara överskådlig plus att man måste ha skrivit rätt 

variabelnamn för att det ska fungera. Dessutom har man dålig koll på vad variablerna heter 

som kommer in, man kan ju mycket väl ha döpt en variabel till title i Flash redan, beroende 

på när man läser in så kommer den ena variabeln att bli överskriven. En annan variant är att 

låta PHP göra en xmlfil som output ifrån databasen och att Flash sedan hämtar den filen för 

att parsa den i Flash istället. Då kan man där ta ut vad man vill och strunta i det som den inte 

har användning för. Alltså kan man i detta tillvägagångssätt få en mer dynamisk lösning 

eftersom man inte behöver sätta alla variabler som kommer in, utan man kan göra en 

xmlparser som sätter allt som fanns i xml dokumentet. När man använder xmlfiler som 

kommunikation mellan Flash och PHP så är det lätt ifall man skulle vilja byta ut Flash emot 

ett annat gränssnitt som till exempel en JavaApplet. I båda fallen måste man vara 

uppmärksam på att det är en sträng man får in. Om man har läst in till exempel 

&number=13 och sedan utför operationen trace(number +7); i Flash så får man 137 som 

resultat eftersom + operatorn kan lägga ihop en sträng med ett tal. 

15





2.6 loadMovie vs loadClip i Flash 

För att ladda in Flashfiler eller bildfiler i Flash så har man egentligen två alternativ när man 

väl vet sökvägen till det som ska laddas in. Funktionen loadMovie() har fördelen att den är 

lättast att implementera, men den simplaste lösningen är oftast inte det ultimata inom 

datavärlden. Man förlorar möjligheten att undersöka när bilden har laddats klart samt att det 

movieclip som bilden laddas till förlorar alla sina egenskaper. Men med loadClip() går det 

däremot att göra just detta. Demonstrerar med följande kodutdrag från Flashcreations [8]: 

var loader:MovieClipLoader = new MovieClipLoader(); 

var loadHandler:Object = new Object(); 

loader.addListener(loadHandler); 

// define what should happen when the jpg/swf is completely loaded 

// use _mc to refer to the loaded jpg/swf 

loadHandler.onLoadInit = function(_mc:MovieClip) { 

// code here 

}; 

// define what should happen while the jpg/swf is loading 

// use _mc to refer to the jpg/swf and loaded & total to refer to the number of bytes 

// currently loaded and to be loaded, respectively 

loadHandler.onLoadProgress = function(_mc:MovieClip, loaded:Number, total:Number) { 

// code here 

}; 

// start loading specified jpg/swf into blank movieclip holder_mc on stage 

loader.loadClip("somepic.jpg", holder_mc); 

I och med att avseendet för spelaren var att ladda in små bilder till filmklippens tumnaglar så 

skulle det gott räcka med loadMovie(). Men med tanke på att man i framtiden kanske vill 

ladda in större bilder som till exempel en bakgrundsbild så är det ett bättre alternativ att 

implementera loadClip varianten. 

16





2.7 Playlist 

En playlist görs lättast som en array där det är det första elementet i arrayen som ska spelas 

härnäst. Som en FIFO kö alltså (first-in-first-out), när en film har spelats klart så tittar man 

bara om det finns ett objekt i arrayen och spelar då upp detta. Eftersom det räcker med en 

sökväg för att spela upp en film så duger det att spara sökvägen som en sträng i arrayen. Det 

kan däremot vara smart att spara hela filmklippobjektet som har blivit inläst ifrån databasen 

eftersom man då får mer valmöjlighet när man ska spela upp klippet. Man kan till exempel 

ange om filmklippet är ett reklamklipp för att kanske dölja eventuella knappar som sköter 

spolning och sökning i filmen. 

2.8 Databasdesign 

Det finns en hel del att tänka på när man designar en databas. Men i detta ämne som denna 

uppsats handlar om så är designen inget avancerat så man kan följa med i resonemanget utan 

att kunna databasdesign. Om man däremot ska göra ett större system så är det en klar fördel 

att från grunden ha en bra databasdesign för att till exempel underlätta framtida utbyggningar 

av systemet. 

2.9 Kodstruktur och exempel i Flash 

Man kan liksom i de flesta språk koda på olika sätt, men i Flash är det mer märkbart 

eftersom det hela tiden kommer ut nya versioner av språket ActionScript samt att de som är 

nybörjare och mest vill hålla på med grafik men som ibland måste skriva lite kod får lära sig 

ett sätt som inte är lämpligt när man ska göra större projekt. Så det finns ingen standard 

egentligen men det finns två olika sätt att skriva för att få samma funktionalitet. Om man till 

exempel vill att när man klickar på ett movieclip så ska den ändra en text samt att en annan 

text hela tiden uppdateras beroende på var musens x-koordinat befinner sig kan man skriva 

såhär i själva movieclip instansen: 

17





onClipEvent(mouseDown){ 

} 

_root.testtext_txt.text =”Ändrade texten…”; 

onClipEvent(enterFrame){ 

} 

_root.musx_txt.text = _root._xmouse; 

Eller så här i roten av tidslinjen om movieclip instansen heter test_mc: 

test_mc.onMouseDown=function(){ 

_root.testtext_txt.text =”Ändrade texten…”; 

} 

test_mc.onEnterFrame=function(){ 

_root.musx_txt.text = _root._xmouse; 

} 

Det som talar för det första alternativet är att man får den kod som tillhör själva instansen i 

instansen så att det är lätt att hitta den kod som hör till just det aktuella objektet eftersom det 

bara är att klicka med musen i den grafiska vyn för att få upp all aktuell kod. Med detta sätt 

så blir det lättare att förstå vad kodsnuttarna hör till men om man gör ett större projekt så 

blir både svårt att hitta det man söker samt svårt att ändra funktionerna. Med det andra 

alternativet så får man all kod i hela projektet på samma ställe och kan vara säker på att inga 

variabler skrivs över i ett movieclip som ligger långt in i trädstrukturen och som kanske till 

och med är dolt. I denna uppsats används enbart det senare alternativet. 

Man kan också argumentera för att använda objektorienterad programmering i Flash, det är 

väldigt likt Java men är inte fullt lika utvecklat. Med denna teknik så kan man på ett lätt sätt 

återanvända kod och ärva objekt. Om man göra stora och väldigt invecklade applikationer så 

är denna teknik att föredra. Det som kan tala emot den i detta fall är att det inte är en så svår 

applikation som ska utvecklas och att om man inte har testat på objektorienterad 

programmering förut så är det svårt att sätta sig in i det sättet att tänka. Eftersom 

EGAMES.TV hellre vill jobba med en produkt som ser ut som de känner igen så har jag valt 

att inte utveckla spelaren på detta sätt. 

18





2.10 Möjliggöra interaktivitet 

Ett måste med ett dynamiskt system är att man har ett gränssnitt där man kan ändra 

innehållet i spelaren, en administrationssida. Denna sida ska enbart visa informationen i 

databasen samt ge möjlighet för en användare att lägga till, ta bort eller ändra den 

informationen. Eftersom det är viktigt att inte fel värden hamnar i databasen så är det viktigt 

att man tittar att allt är rätt innan man ändrar i databasen. Ett bra knep är att använda 

kryssrutor och listfönster istället för textrutor där man får skriva in ett id nummer för en 

speciell rad i en annan tabell. På det sättet kan användaren i alla fall inte skriva otillåtna 

värden eftersom alla värden som man kan välja på är riktiga. Det är också viktigt att ha ett 

bra hjälpavsnitt där man med exempel visar hur alla delar i systemet kan se ut. 

2.11 Banners 

För att få den bästa dynamiska bannermöjligheten så borde bannerytorna också läsas in från 

en databas. Om man hela tiden ser till att banners kommer under spelaren så kan man lägga 

”specialsydda” banners bakom spelaren. Sedan när man vill byta banner så skickar man in 

den nya banneradressen samt vilken position den ska ha via cuepoints. 

Jag har gjort så att man har tre valmöjligheter när man ska ange att en banner ska bytas ut i 

en film: 

- Man kan ange en siffra för att få ut en banner ur bannerstabellen med samma id. 

- Man kan skriva en text utan http:// för att leta reda på alla banners ur 

bannerstabellen med samma genre som texten och sedan ta en slumpvis banner ur 

dessa. 

- Man kan skriva en full länk med http://www.example.com/banner.jpg. 

Eftersom Flash lika gärna laddar in en bildfil som jpg eller png som en Flashfil med samma 

funktion så behöver man inte göra någon koll på vad som laddas in. Funktionaliteten att den 

tar en slumpvis banner gör att spelaren kommer att se mer flexibel ut om det inte är samma 

banner nästa gång man spelar upp ett klipp. 

19





2.11.1 clickTAG 

Det finns enligt FlashBannerNow [9] en standard inom bannerannonsering och Flash som 

heter clickTAG. Med det menas att så fort man öppnar en länk i Flash så ska man öppna 

adressen som ligger i variabeln clickTAG istället för att skriva in webbadressen manuellt. 

Hela poängen med det är att får möjligheten att logga bannerklick och visningar om man 

anropar ett script som tar clickTAG adressen, loggar rätt banner i en databas och sedan 

skickar vidare till den ursprungliga webbadressen. 

2.12 Säkerhet 

När man jobbar med Flash som kommunicerar med PHP vilket i sin tur anropar en databas 

så finns det många säkerhetsaspekter att ta upp. Graden av säkerhet beror på vilken 

applikation man gör, en gästbok behöver inte ha samma säkerhet som en pokerklient där 

säkra transaktioner för alla överföringar är ett måste. 

2.12.1 Säkerhet i Flash 

I och med Flash 8 så kan man bara anropa script och liknande i sin egen domän. Tidigare 

visste man inte om Flash läste något från hårddisken och skickade iväg det till en server. Det 

går att ändra så att man kan anropa andra domäner också men man måste alltså ange det 

explicit via ActionScript. En klar nackdel med Flash är att det finns dekompilerare som tar 

en publicerad Flashfil (.swf) och gör om den till den riktiga Flashfilen (.fla) som den var 

innan. Detta gör att vad man än gör för säkerhetsgrejer i Flash så är det lätt för vem som 

helst att gå in och kolla hur man har gjort. Visserligen ska det till lite extra kunskap för att 

göra detta, men man måste ändå tänka på detta och inte skriva in lösenord eller dylikt i 

Flashen. Man kan använda sig av kodförvanskningsprogram om man vill, med ett sådant så 

byter man namn på alla variabler och dylikt till nästan lika och långa variabelnamn. Till 

exempel om man har rad i koden: var my_str:String=_root.textField.text; så kan den bytas ut 

20





mot: var asdffasdfasdf:String = _root.asdfasdfffafaf.text;, och om all kod ser ut på detta sätt så är 

det svårt att förstå vad som händer. Om inte annat så gör man det svårare för den som vill 

kopiera/läsa koden. 

2.12.2 Säkerhet i PHP 

Enligt Zend [10] är det viktigt att i PHP veta varifrån de variabler man använder faktiskt 

kommer ifrån. Man måste verkligen garantera sig själv om att de är de rätta variabler som 

man faktiskt vill ha in och inte några som är satta så att de ska kunna få tag i information 

som inte var ämnat för dem. Om man till exempel gör ett PHP script som ska ta en sida som 

input som den sedan ska visa upp så att länken ser ut såhär: 

http://example.com/page.phpi=aboutus.html 

Så måste man direkt tänka på massa saker för säkerhetens skull, vad händer till 

exempel om man sätter i till i=../../../etc/passwd Man måste kolla att .html är med 

i variabeln i. Vidare måste man kolla att inte http:// eller liknande är med, annars 

skulle man kunna bli utsatt för något liknande detta: 

http://example.com/page.phpi=http://evilhacker.org/exec.html 

Där exec.html innehåller några rader kod: 

 

Med dessa rader så får alla i mailroten ett email i sin inpost. Vidare om man vill göra en 

typisk ”tell-a-friend” funktion som skickar ett email till en person som tipsar om en bra sida 

så ska man tänka på att dessa ofta används av spammare. Eftersom en sådan funktion oftast 

får alla inparametrar skickade till sig, såsom avsändare, mottagare, meddelande och så vidare 

så kan det vara en smart idé att göra någon form av koll innan man skickar iväg mailet. Ett 

21





ganska simpelt sätt att göra detta är att ta längderna av strängarna som PHP scriptet får in 

och göra ett tal av dem som till exempel ((mottagare * avsändare * meddelande-22)) % 200, 

om man gör detta tal i Flash och skickar med det som extra parameter till sin funktion så kan 

man göra samma uträkning i PHP och kolla så att de stämmer överens. Med detta så måste 

man ändra den extra parametern till rätt tal om man skickar in godtryckliga indata. Detta gör 

att det i alla fall tar lite extra tid för den som inte är behörig att använda funktionen. 

2.12.3 Säkerhet i PHP/MYSQL 

En databas kopplat till PHP gör att man kan göra många dynamiska applikationer, med det 

blir också många säkerhetshål som uppkommer. Om man har en funktion som får in 

parametrar och sedan gör en fråga till databasen via dessa så måste man förvissa sig om att 

parametrarna innehåller rätt saker. Eller rättare sagt måste man vara säker på att de inte 

innehåller fel saker, till exempel om man har en fråga som bara ska uppdatera en räknare i 

databas: 

”UPDATE table SET counter=counter+1 where id=5;” 

Om table hade varit en inparameter så hade man lätt kunna sätta den till något liknande 

detta: ”users set pwd=1#” vilket gör att alla lösenord i tabellen users sätts till ”1”. 

Eftersom ”#” markerar att allt efter det är en kommentar så bryr sig inte MySql om 

det och den ursprungliga funktionen som bara skulle uppdatera en räknare har fått 

en helt ny innebörd. Detta sätt att förvanska en MySql fråga kallas MySql injektion och 

används flitigt för att få tag i information eller för att helt enkelt förstöra (MySql [11]). En 

funktion som är användbar och gör om en inparameter till ett riktigt uttryck följer: 

// makes a string safe for mysql 

function quote_smart($value) 

{ 

// Stripslashes 

if (get_magic_quotes_gpc()) { 

22





} 

} 

$value = stripslashes($value); 

// Quote if not integer 

if (!is_numeric($value)) { 

} 

$value = "'" . mysql_real_escape_string($value) . "'"; 

return $value; 

2.13 External Interface API 

I och med senaste versionen av Flash (Flash 8) så kan man kommunicera med den 

kompilerade Flashfilen med till exempel JavaScript. Det omvända har länge fungerat 

eftersom man kan skriva och exekvera JavaScript i Flash. Men för att tala med Flash så 

använder man sig av ett API som heter External Interface. Man kan skicka godtryckligt med 

variabler och man kan returnera ett värde till JavaScriptet. Ett exempel på detta kan se ut 

såhär: 

import Flash.external.ExternalInterface; 

ExternalInterface.addCallback("testMe", null, testMeFlash); 

function testMeFlash() { 

trace(”Got a function call from external source”); 

ExternalInterface.call("tick_counter"); 

} 

Med detta så får JavaScript tillgång till en funktion som heter testMe och som i sin tur 

anropar en Flash funktion som heter testMeFlash som anropar en funktion i JavaScriptet 

som heter tick_counter(). 

På JavaScriptets sida så kan man ha en funktion som gör om funktionsanropet till rätt syntax 

beroende på vilken webbläsare man har: 

function thisMovie(movieName) { 

if (navigator.appName.indexOf("Microsoft") != 1) { 

return window[movieName] 

23





} 

} 

else { 

} 

return document[movieName] 

Sedan anropar man funktionen testMe() i Flash genom (förutsatt att identitetsnamnet för 

Flashfilen är ”container”): 

thisMovie("container").testMe(); 

External Interface är så pass integrerat att det inte sker någon fördröjning alls, det går lika 

snabbt att använda JavaScript i Flash som det går att få samma resultat från en funktion i 

Flash. 

Detta interface gör att man öppnar upp för fler möjligheter med Flash. Spelaren som 

utvecklades i detta exjobb utnyttjar detta för att faktiskt integrera Windows Media Player 

som ett ytterligare format i Flash. Eftersom Windows Media Player alltid kommer över alla 

andra objekt i webbläsaren så kan man bädda in deras spelare på exakt den position som 

Flash spelaren ligger på. Sedan när man klickar på en playknapp i Flash så ser man vad det är 

för sorts fil som ska spelas, om det är en Windows Media Playerfil anropar man ett 

JavaScript som sätter igång filmen, annars kör man med Flash flvplayback komponenten. 

Med Windows Media Player får man fördelen att man kan köra i riktig fullscreen som inte 

går med Flash. Detta gör att man lika gärna kan ta ut filmklippen på tv som man kan se det 

på skärmen. Vidare kostar det en tiondel så mycket att fixa plats på en streamingserver med 

Windows Media Playerformat än Flashformat. Detta är ett bra alternativ för den som inte 

har råd men som ändå vill sända streamat. 

2.14 LoadVars 

För att få Flash att kommunicera med till exempel en PHPsida så finns det i något som kallas 

LoadVars som kan ses som att man skickar ett object till PHP sidan. Ett exempel kan vara 

24





att den sidan man skickar informationen till heter test.php och att den vill ha en text som 

den kallar för test_text. Nedan följer hur detta ser ut i Flash ActionScript: 

var testLoadVars = new LoadVars(); 

testLoadVars.test_text= _root.test_text.text; 

testLoadVars.sendAndLoad(”test.php", testLoadVars, 'POST'); 

testLoadVars.onLoad = function(success) { 

if (success) { 

trace("sended ok"); 

_root.test_text.text = testLoadVars.return_string; 

} 

Med den näst sista raden visas också hur man tar emot ett svar ifrån PHP sidan, det blir helt 

enkelt ett attribut till objektet LoadVars. 

2.15 Liknande spelare 

Denna genre av applikation är populär hos alla grupper som har med nyheter att göra. Än så 

länge är det inte så många som har tillgång till en dynamisk spelare, men som det ser ut så 

kommer det fler och fler hela tiden. Jag har inte hittat en liknande spelare hos de stora 

tidningarna utomlands men de svenska tidningarna såsom Aftonbladet och Expressen har 

båda en spelare som de kallar för webb-tv. Det som skiljer deras båda spelare åt är att 

Expressen [12] använder Windows Media Player integrerat med Flash som gränssnitt och 

Aftonbladet [13] använder sig av progressivt nedladdningsbara klipp i Flashformat. Min 

spelare klarar båda formaten och dessutom klarar den att spela Windows Media Playerklipp i 

Mozilla Firefox om man installerar en ActiveX komponent. En spelare som har en något 

annorlunda struktur än vad min har är MTVs spelare [14]. De kallar den Overdrive och 

förutom att den har en snygg design så fungerar deras funktioner verkligen bra. De har 

liksom Expressen valt att använda Windows Media Player, de får då möjligheten att visa sina 

videoklipp i fullskärm vilket måste vara en bra funktionalitet när man ska visa musikvideor. 

Nyhetsjätten CNN har en likadan lösning som Expressen fast de har integrerat spelaren mer 

med sin vanliga webbplats, de har med en flashversion av spelaren som bara visar de första 

25





tio sekunderna av filmerna. När man sen vill se mer så klickar man så att spelaren öppnas i 

ett nytt fönster. 

Det verkar som om att just nu är det en klar majoritet som använder sig av Flash som 

gränssnitt men sedan Windows Media Player för att spela upp själva videon. Det har nog att 

göra med att man vill kombinera det bästa av två världar. FlashVideo har nackdelen att det 

tar tid att konvertera till detta format och det går inte att köra i fullskärm när den spelas upp. 

Eftersom en nyhetssida har bra ruljans på videoklippen så måste det vara lätt att lägga upp 

nya videoklipp så att använda ett annat format än FlashVideo snabbar upp den processen. 

Flash har i sin tur fördelen att det är lätt att göra en egen design och lägga till egen 

interaktivitet i spelaren. 

26





3 Resultat 

EGAMES.TV [15] som jag har gjort examensarbetet åt ville undersöka hur man gör en 

interaktiv och dynamisk spelare i Flash och som har många valmöjligheter vad gäller reklam. 

För att beskriva spelaren och hela systemet är uppsatsen delad i flera delar, börjar från 

grunden med databasen, bygger sedan på med funktionaliteten och avslutar med de visuella 

tankebanorna. 

När projektet startade var databasen väldigt liten och hade bara en tabell som hette 

movieclips. Men man insåg snabbt att det kommer att behövas mycket mer så en bra start är 

att tänka ut från början vad hela spelaren ska ha för funktionalitet och göra en tabellhierarki 

över detta. Det är dock inte så avancerad databashantering som behövs och är ganska 

elementärt att räkna ut, en spelare ska ha flera videoklipp och så vidare. Om man hela tiden 

tänker sig att oberoende saker inte ska vara i samma tabell blir det oftast inte så mycket 

bekymmer med tanke på att MySql anser att en tabell på två miljoner rader är liten. Nedan 

följer ett sorts diagram som anger vilka tabeller som finns och vilka som har något att göra 

med varandra. Denna tabell kan med fördel användas i fortsättningen för att förstå hur 

spelaren är uppbyggd. Alla tabeller måste ha en kolumn som har unika värden och som 

därmed kallas för tabellens nyckel. För att sedan referera till en annan tabell så anger man 

den andra tabellens unika nyckel nummer. Det är så alla tabeller som har något att göra med 

varandra hänger ihop rent strukturmässigt (nyckeln heter id i alla tabeller). 

27





[ Umldiagram över databasstrukturen ] 

28





Diagrammet visar den slutgiltiga spelaren som uppsatsen kommer att beskriva mer om, i 

början så innehöll diagrammet bara det väsentligaste, som movieclips- och players-tabellen. 

Nästa steg i utvecklingen var att fundera ut hur man skulle få in informationen som nu hade 

sparats i databasen in till Flash. Man kan välja lite olika tekniker, främst beroende på hur 

mycket data som ska transporteras. Om man har jättemycket som ska överföras så ska man 

välja att bara överföra det som är viktigt, men i detta fall fungerar det bättre om man överför 

all data som finns i den raden man frågar efter i databasen och sen avgör i Flash om man vill 

använda allt eller inte. Detta gör att så fort man ändrar databasstrukturen så behöver man 

inte bekymra sig över att Flash inte har likadan information vilket underlättar framtida 

utbyggningar samt minskar felsökningar så jag gjorde ett PHP script som tar en databasfråga 

och som returnerar svaret på frågan uttryckt i XMLformat. I avsnittet ”Databas-PHP-xml- 

Flash vs Databas-PHP-Flash” högre upp så får man tillgång till allt som PHP skriver ut med 

echo; vilket gör att man också kan skriva ut en XMLfil och sedan parsa den i flash. Därför 

var nästa steg att göra en funktion i Flash som tog en XMLfil, parsade den och returnerade 

svaret som objekt i en array. 

// 

// Loads an xml file and returns all values as an array with objects. 

// xmlnode is the outer node to check for in path. 

// 

function loadXml(path, xmlnode) { 

var xmlArray:Array = new Array(); 

var Xml:XML = new XML(); 

Xml.onLoad = handleLoad; 

Xml.ignoreWhite = true; 

Xml.load(path); 

function handleLoad(status) { 

if (Xml.firstChild.nodeName.toString() == "error") { 

xmlArray.push("error"); 

return xmlArray; 

} 

if (Xml.firstChild.nodeName == xmlnode) { 

for (var eNode:XMLNode = Xml.firstChild.firstChild; eNode != null; eNode = eNode.nextSibling) 

{ 

29





object = new Object(); 

} 

for (var iNode:XMLNode = eNode.firstChild; iNode != null; iNode = iNode.nextSibling) { 

if (iNode.nodeName == "cuepoints") { 

if (iNode.firstChild.toString() == "1") { 

object.cuepoints = "1"; 

} else { 

object.cuepoints = "0"; 

} 

} else { 

object[iNode.nodeName] = iNode.firstChild; 

} 

} 

xmlArray.push(object); 

} 

} 

} 

xmlArray.reverse(); 

return xmlArray; 

Nu är det lätt att få tag i valfri data ifrån databasen, om man till exempel vill ha alla 

movieclips som finns i databasen lagrade i en array skriver man bara: 

var query:String = "select * from movieclips"; 

var _root.movieclips_array:Array = loadXml(dbtoxml.phpquery=" + query + "&table=movieclips", 

"movieclips"); 

Sedan får man en specifik information genom att skriva arrayen efterföljt av ett index och 

valfritt id för ett objekt. Om man vill ha ut innehållet i databasens första rad och kolumnen 

med namnet genre så skriver man: 

_root.movieclips_array[0].genre; 

Hela den här biten är ganska simpel, men den är helt klart kraftfull ändå. Det är bra att tänka 

på att man ska ta all information man ska använda ifrån databasen direkt, dels så att man inte 

fastnar i tankebanor där man hårdkodar allt och sedan underlättar det eftersom man får in all 

information och att det inte kommer att bli fel eftersom det är något som fattas. Givetvis ska 

man inte lägga in hela databasen det första man gör när man laddar spelaren, en användare 

30





tar hellre flera små laddningar och får därmed valmöjligheten vad han/hon vill ladda istället 

för att ha en lång laddning i starten av spelaren. 

Eftersom det nu finns en ”brygga” mellan Flash och PHP som är standardiserad genom att 

man använder XML så kan man se det som två olika applikationer. En i PHP och en i Flash 

vilket gör att det går att ändra logiken på till exempel PHPsidan så att Flashsidan ändå 

fungerar, den gör sitt vilken data den än får in, man kan se det som om det är PHPsidans 

uppgift att ge den korrekt data. 

3.1 Steg 2 – Funktionalitet i Flash 

För att få en besökare att stanna på en sajt ska man skapa så mycket interaktivitet som 

möjligt, samt givetvis ha ett bra innehåll. Man kan göra hur mycket som helst för att få en 

besökare intresserad, jag har valt att bygga funktionalitet så att man kan kommentera 

filmklipp, delta i olika pollningar och berätta för en vän om sidan (typisk tellafriend 

funktion), allt för att aktivera besökaren. Om man studerar UML-diagrammet av databasen 

ovan så får du en aning om hur jag har gjort, för kommentarer har skapats en egen tabell 

som anger vilket filmklipp det tillhör, sedan används funktionen loadXML() för att få in rätt 

kommentarer. En typisk fråga för att få alla kommentarer som gäller filmklipp med id=10 

ser ut såhär: 

query = "select * from comments where movieclip_id='10' order by date desc”; 

För att kunna skriva in kommentarer och se pollnings alternativ däremot måste man göra 

något med den informationen som finns i databasen, det räcker inte med att ha all 

information om man inte vet vad man ska göra med den. För att fortsätta beskriva hur man 

dynamiskt kan skapa och ändra på Flashobjekt måste uppsatsen först handla om lite layout 

så att man förstår ”vart” man menar när tar upp till exempel höger banneryta eller 

kontrollknapparna till spelaren. 

31





3.2 Steg 3 – Layouten 

En sak till som är kraftfullt med Flash är att det oerhört lätt att ändra design och layout, man 

kan köra med ”klicka och dra” principen med allt. När man har sin bakomliggande logik och 

funktionalitet klar så är det inte svårt att testa olika möjligheter i layouten. I min spelare har 

jag några självklara areor som måste vara med eftersom det är en filmspelare. Man måste ha 

med någon form av tumnagelvisare där man kan se information och välja att spela ett klipp, 

vidare måste det finnas en area för att spela upp filmen i samt en kanal/genreväljare. Sedan 

tillkommer det plats för kommentarerna, pollningarna samt bannerytorna. Efter diskussion 

med EGAMES.TV [15] så kom vi fram till följande layout: 

[Bild på spelaren] 

32





3.3 Steg 4 – Mer funktionalitet 

När man har skapat sina movieclips i Flash såsom en tumnagel för filmklipp finns det en del 

olika sätt att kopiera detta klipp och för att flytta det till rätt ställe. Om man har ”dragit” ut 

ett movieclip ifrån biblioteket och sedan döpt det till thumb_clip0 så kan man kopiera och 

placera kopian under den genom att skriva: 

duplicateMovieClip(thumb_clip0, "thumb_clip1", this.getNextHighestDepth()); 

thumb_clip1._y = thumb_clip0._y+thumb_clip0._height; 

Man kan senare ta bort duplikatet genom att skriva: 

removeMovieClip(thumb_clip1); 

Ett annat alternativ och i mitt fall ett bättre alternativ är att skapa ett tomt movieclip och 

sedan ”lägga till” andra movieclips i den med hjälp av attachMovie(). Detta är bättre för att 

man får alla movieclips samlade i ett ”super movieclip” eller en ram om man så vill som man 

sedan kan referera till när man ska införa maskningar så att movieclips bara kan ses inom 

vissa områden. Visar med ett utdrag ur Flash där genre/kanal informationen har lästs in från 

databasen och sedan används funktionen makeGenres för att duplicera, sätta ut och ange 

attribut samt funktionalitet för de olika knapparna. 

// 

// Makes genres 

// 

function makeGenres(array:Array) { 

var arrLength = array.length; 

for (s = 0; s < arrLength; s++) { 

makeGenre(s); 

} 

// Set the mask 

_root.genres_mc.setMask(_root.genresHolder_mc); 

} 

// 

// Makes one genreclip with id i. 

// 

function makeGenre(i) { 

33





var spacer:Number = 0; 

} 

var duplicate:MovieClip; 

var newY:Number = genresHolder_mc._y; 

var newX:Number = genresHolder_mc._x; 

for (z = 0; z < _root.genres_array.length; z++) { 

newX += _root.genres_array[z]._width + spacer; 

} 

var duplicate:MovieClip = _root.genres_mc.attachMovie("genreClip", "genreclip" + i, i); 

duplicate.genre_txt.text = duplicate.link; 

duplicate.bg_mc._width = duplicate.genre_txt._width + 5; 

duplicate._x = newX; 

duplicate._y = newY; 

duplicate.onPress = function() { 

changeGenre(duplicate.info, true); 

duplicate.bg_mc._alpha = 60; 

}; 

// For easy scrolling. 

genres_array.push(duplicate); 

Variabeln duplicate som attachMovie() returnerar är alltså en movieclipinstans som man kan 

använda för att sätta attribut för det movieclips som man har lagt till ifrån biblioteket. Vidare 

finns det en text i genre instansen som heter genre_txt som sätts till värdet som kom ifrån 

databasen och redan är lagrad i en array som heter genrelinks_array. Sist sätts hela klippet till 

en mask som fungerar som en ”ram” så att man bara ser movieclipinstansen inom den 

ramen. Man kan argumentera för att man borde ha en generell funktion som tar massa 

parametrar och duplicerar samt placerar movieclips och där man sedan skriver de särskilda 

funktionera som till exempel onPress efteråt. En annan infallsvinkel är dock att även om det 

blir lite kodduplicering så är det mycket lättare att förstå hur det hela hänger ihop om man 

gör nya funktioner när man till exempel ska göra tumnaglarna. Eftersom de skiljer på så 

mycket i funktionalitet så blir det ändå lika mycket kod, det enda som händer är att det är 

svårare att få en överblick samt utveckla vidare. 

Eftersom jag använde ”ram” alternativet istället är det nu simpelt att göra en scrollerknapp 

till genre/kanal-knapparna eftersom de ligger i ett enda klipp. 

scroll_right_btn.onPress = function{ 

34





} 

genreClip._x = 25; 

Jag anropar en funktion som heter changeGenre() med ett genreobjekt som parameter i 

makeGenre(). Man kommer ganska långt om man jobbar med objekt som man skapat från 

databasen, nu när man skickar in ett genreobjekt som parameter till changeGenre() så har 

den automatiskt all information den behöver för att till exempel ändra alla banners, sätta 

igång en vinjett för just den genren och lista alla aktuella filmklipp med hjälp av den redan 

klara makeThumbnails(). Nu när man har tankegången klar för sig så kan man göra 

funktioner för att ändra banners, läsa in/lägga till kommentarer till filmklipp eller precis den 

funktionalitet man vill ha. Eftersom uppsatsen ska handla mer om bannerdelen så visar jag 

funktionen changeBanner() också, Flash laddar en Flashfil eller en bildfil på samma sätt 

vilket gör att funktionen blir lätt att förstå: 

// 

// Loads and changes the correct banner area. 

// 

function changeBanner(bannerlocation:String, newbanner:String, link:String) { 

if (bannerlocation == "top" || 

(bannerlocation == "right" && !superrightbanner) || 

(bannerlocation == "bottom" && !superbottombanner)) { 

if (!_root.maxvideo || bannerlocation == "top") { 

_root[bannerlocation + "banner_mc"].banner_area.loadMovie(newbanner); 

if (link != "" && bannerlocation != "top" && link != undefined) { 

_root[bannerlocation + "banner_mc"].onPress = function() { 

getURL(link, _blank); 

}; 

} 

// dont show the bottombanner if the user is browsing the comments. 

if (_root.comments && bannerlocation == "bottom") { 

_root[bannerlocation + "banner_mc"]._visible = false; 

} 

} 

} 

} 

35





3.4 Banners 

Enligt Mediable [16] finns det en mängd olika standardstorlekar på banners. Ett 

tillvägagångssätt att få en dynamisk bannermöjlighet i systemet är att ha en bannerstabell i 

databasen där man har x- och y-koordinater, storlek samt länkar till bannerbilden och vart 

man ska ta vägen när man klickar på bannern. Sen läser man in den banner som till exempel 

hör till en viss genre/kanal och sedan skapar man ett movieclip i Flash som man sedan sätter 

en klickfunktion på. Den enda nackdelen med detta sätt är att det blir för dynamiskt. 

Eftersom man antagligen vill att användare inte ska kunna sätta en banner över sin egen logo 

eller gömma något annat så gjorde jag fasta bannerplatser istället. Man läser dock in en länk 

till bilden och till destinationen när man klickar på länken. De flesta banners har idag egna 

knappar i sin banner, så om man lämnar destinationsfältet tomt i databasen får man se till att 

inte lägga på en egen klickfunktion i Flash som överskuggar de egentliga knapparna. Det 

man tjänar pengar på med en banner är hur många gånger den visas samt hur många gånger 

en besökare klickar på bannern. Därför är det naturligtvis ett måste att man på något sätt 

registrerar visningar samt klick. Detta är inget problem eftersom det bara kommer att 

fungera som en räknare som ökas på i en databas. Det finns avancerade bannersystem som 

hjälper en med det här och de fungerar på de flesta system eftersom man anropar deras 

script som ökar räknaren med en parameter vart man egentligen skulle, så systemet ökar rätt 

räknare och skickar sen vidare besökaren till rätt plats. I den spelare som denna uppsats 

handlar om så integrerade jag bannerbiten med ett opensource-bannersystem som heter 

phpAdsNew [17]. Med det programmet kan man lägga upp vad de kallar zoner och lägga in 

banners i dessa. Sedan kan man få en banner genom ett script som tar hänsyn till en massa 

parametrar som till exempel kan vara vilket land man är i, vilket operativsystem man 

använder eller vilken banner som visades innan. 

3.4.1 clickTAG 

Det blev lite problem att använda clickTAG som det står beskrivet högre upp. Egentligen är 

det meningen att man ska skicka in clickTAG variabeln efter i filnamnet till flashen. Nedan 

visas ett exempel: 

36





Testflash.swfclickTAG=http://www.egames.tv/ 

Funktionen som laddar andra Flashfiler i Flash struntar dock i allt som kommer efter men 

lyckligtvis så är ett movieclip i Flash ett objekt som allt annat så det gick att lösa genom att 

parsa ut clickTAG ur länken som Flash fick in och sedan sätta det som en variabel där 

bannen blev laddad. 

_root.rightbanner_mc.clickTAG= parsed_clickTAG; 

Jag har tänkt att om man inför all funktionalitet i detta system så får man ju ett eget separat 

system vilket gör att om man vill använda logiken ifrån ett befintligt system så kommer det 

att gå att kommunicera mellan dessa så länge båda arbetar emot samma databas eller ser till 

att de är varandras spegelbilder på den information som är väsentlig. 

3.5 Integration med Windows Media Player 

Det är alltid intressant att integrera en kraftfull applikation med en annan. Med hjälp av 

Flash 8 kan man som uppsatsen tidigare beskrivit anropa externa JavaScript samt returnera 

information tillbaka till Flash. Eftersom det går att bädda in Windows Media Player i en 

htmlsida och använda sig av JavaScript för att kontrollera spelningen av filmen så kan man 

lika gärna sköta anropen till JavaScripten ifrån Flash. Detta gör att man kan ha samma 

gränssnitt för både vanliga Flashfilmer samt för Windows Media Playerfilmer. Windows 

Media Player stöds bäst av Internet Explorer och Netscape men om man installerar en 

ActiveX komponent så går det att använda Firefox också. Eftersom många ”gamers” just nu 

hellre använder Firefox så är detta viktigt att veta att det går att utföra. 

37





3.6 Extra funktioner 

3.6.1 Sökfunktion 

Eftersom det nu finns funktioner för att hämta data samt göra tumnaglar så är det lätt att 

göra en sökfunktion som söker genom moviecliptabellen och tar ut de filmklipp som 

matchar sökkriteriet. 

3.6.2 Subtitlesfunktion 

En bra funktion som man skulle kunna implementera är att man laddar en 

flvplaybackkomponent med ett filmklipp och börjar spela det. När man sedan klickar på 

musknappen så ska man stanna filmen och ge en dialogbox där man får skriva in en subtitle 

för den tiden. Sen fortsätter filmen och om man till exempel klickar på musen igen så ska 

man skriva i nästa subtitle (eller tom sträng för att ta bort den). När man har gått igenom 

hela filmen så ska dessa subtitles automatiskt läggas in till rätt filmklipp i databasen. 

3.6.3 Subtitleparser 

Att få subtitles att passa i en film som står beskrivet ovan är inte svårt men det är mycket 

petigt. Om man skulle få lov att införa alla subtitles manuellt i databasen med rätt värden så 

skulle det vara ännu petigare. Eftersom Flash använder sig av sekunder och vanliga standard 

subtitles har ett format som liknar en digitalklocka (22:33:12,341) så måste man även 

konvertera detta innan man sätter in rätt värde i databasen. Därför är det en väldigt bra idé 

att ha en parser som tar en standard subtitlefil och gör om den till det format som Flash 

känner igen och sedan lägger in det i databasen med rätt värden. 

3.6.4 Dynamiska cuepoints 

Med Flash 8 så har det kommit en funktion som tillåter en programmerare att lägga till 

dynamiska cuepoints i ett filmklipp. Detta gör att ägaren av spelaren kan göra egna cuepoints 

38





och sen fånga upp den i en viss film och göra en speciell sak. Ett exempel kan vara att det är 

en explosion i en film, då kan man anropa en JavaScriptfunktion som skakar på hela fönstret. 

Men ett bättre exempel är att man kan fånga upp en cuepoint som vill byta en banner 

eftersom filmen just nu visar den produkten som bannern riktar sig till. Även om man inte 

använder denna funktion så är det bra om den finns i databasen, i framtiden när spelaren 

utvecklas så kommer det att bli smidigt att ha den. Om man börjar ta betalt för att titta på 

klipp så kanske man vill kunna göra så att de första tio sekunderna är gratis eller liknande. 

Med dynamiska cuepoints så går det snabbt att införa godtrycklig funktionalitet som rör 

videoklippen. 

39





40





4 Slutsats 

För att nå ut till en bred internationell publik måste man finnas på flera ställen, en spelare 

som har möjligheten att byta ut sitt visuella gränssnitt kan ligga på flera sajter men ha en 

central knytpunkt. Med den knytpunkten tillkommer att man har stor kontroll över vad som 

visas och funktionerna i spelaren. Till exempel kan man styra alla banners och reklamklipp. 

Det är det bra att satsa på den applikationen som de flesta använder. Flash finns på 97,7 % 

av jordens internetburna datorer (Macromedia [5]). I och med senaste versionen så kan man 

också kommunicera med JavaScript och spela upp video på ett enkelt sätt. 

Det finns andra spelare som också har många användare, men eftersom nästan alla spelare 

går att bädda in i ett HTMLdokument och sedan kontrolleras genom JavaScript, så kan man 

lika gärna använda Flash som gränssnitt även om det inte är Flash Video man spelar upp. 

Detta tillvägagångssätt gör att man får en vektorbaserad layout på sin spelare som är lätt att 

göra dynamisk och byta ut. Perfekt för att nå ut till en bred publik och göra skräddarsydda 

layouter. 

För att spelaren ska få tillgång till den information som den behöver ifrån en databas så det 

en fördel att först göra om informationen till en XMLfil. På detta sätt så kan man utan vidare 

byta ut databasen till en annan och man behöver inte oroa sig för att några variabler skrivs 

över i Flash eftersom man bara behöver parsa ut dem som man vill använda. 

Vad gällande bannermöjligheterna så är det bästa att använda sig av ett befintligt och 

avancerat system för själva uppläggningen och registreringen av banners. Sedan behöver man 

bara möjligheten att i Flash ladda in en banner på valfritt ställe. Visserligen är denna uppsats 

projektspelare mer gjord så att spelaren är en egen applikation och har alla funktioner som 

den kan tänkas behöva. Men det är nog ingen nackdel eftersom man kan tänka sig att man 

någon gång skulle vilja lägga in en banner manuellt. 

41





42





5 Diskussion om resultatet 

Eftersom det är meningen att spelaren ska kunna klara av i princip hur många tittare som 

helst så kan det vara viktigt att hålla nere på antal serveranrop man gör ifrån Flash. Men för 

att undersöka om servern som spelaren ligger på klarar av detta så måste det göras ett test 

som har till avsikt att testa maxkapaciteten av vad spelaren klarar av. 

Tanken med spelaren är att man ska kunna ”äga” sin egen version av spelaren som ska ha sitt 

eget utseende och innehåll. Detta fungerar bra att göra genom att skicka med en parameter 

som berättar vilken spelare det är man vill se, dock hade det varit bättre att kolla varifrån 

besökaren kommer ifrån för att komma till spelaren. I PHP finns det en global variabel som 

heter $_SERVER['HTTP_REFERER'] som jag använde för just detta till en början, det visade sig 

senare att den inte var tillförlitlig i alla system eftersom den ibland inte skickas alls och den är 

lätt att förvanska. Detta kan bli ett problem i framtiden för spelaren eftersom en rimlig 

utbyggnad av spelaren kommer att innefatta att det ska finnas möjlighet att ta betalt för att 

visa ett visst klipp. Eftersom man inte säkert kan veta att de personer som ser klippen är från 

den sidan som har betalt eller om de är någon som bara har rätt länk så måste man införa en 

annan sorts betalsystem. Ett sådant kan vara att besökaren får skriva in användarnamn och 

lösenord i en ruta för verifiering innan klippet visas. 

Det visade sig medan projektet fortgick och EGAMES.TV försökte sälja sin spelare att de 

flesta ville ha en helt egen layout på sin spelare för att de skulle vara riktigt intresserade. Man 

kan ju förstå att de vill att spelaren ska passa in till resten av sidan, men att göra en ny layout 

för varje kund är ohållbart. Ett sätt att lösa det på är att ladda externa .swf filer där grafiken 

för det aktuella objektet finns så att kunden själv får ändra layouten på sin spelare där de 

tycker att det behövs. Problemet blir då att de lätt kan dölja sådant som är meningen att ska 

synas eller lägga in egen funktionalitet som kan bli en säkerhetsrisk. 

Spelaren verkar ha en begränsning vad gällande progressivt nedladdningsbara videoklipp, 

alltså att man inte använder en streamingserver. Ibland så stannade hela spelaren upp när 

man tittade på ett klipp som var runt fem sekunder långt. Men det berodde mer på klippet än 

på spelaren för när jag testade ett annat klipp som var lika långt fungerade det galant. Så man 

måste vara vaksam när det ska konverteras ifrån ett vanligt format till FlashVideoformat. 

Det är vanligt att en videospelare på nätet kan anpassa kvaliteten på videofilerna beroende på 

vilken uppkoppling man har. Denna koll är bra om det går automatiskt men det blir problem 

om man inför en sådan eftersom det är hastigheten mellan streamingservern och besökaren 

som är viktig. En lösning är att besökaren själv får välja vilken uppkopplingshastighet som 

gäller och som sen sparas i till exempel en cookie. 

43





6 Referenser 

Verifierade den 18 maj 2006 

[1] The ESA 

URL: http://www.theESA.com/ 

[2] Flash LiveDocs 

URL: http://livedocs.macromedia.com/ 

[3] Answers 

URL: http://www.answers.com/topic/realplayer/ 

[4] Real Player 

URL: http://www.real.com 

[5] Macromedia Flash Player Statistics 

URL: http://www.macromedia.com/software/player_census/flashplayer/. 

[6] Macromedia Flv 

URL: http://www.macromedia.com/devnet/Flash/articles/flv_download.html 

URL: http://www.macromedia.com/cfusion/knowledgebase/index.cfmid=tn_14571 

[7] Sepiroth Tutorials 

URL: http://www.sephiroth.it/tutorials/flashPHP/IWE_GB/page003.php 

[8] Flash-creations 

URL: http://Flashcreations.com/notes/dynamic_loadjpg.php 

[9] FlashBannerNow 

URL: http://www.flashbannernow.com/help/macromediaflashadvertisingalliance.php 

44





[10] Zend 

URL: http://www.zend.com/zend/art/artoertli.php 

[11] MySql Injektion 

URL: http://dev.mysql.com/techresources/articles/guidetoPHPsecuritych3.pdf 

[12] Expressens Webb-tv 

URL: http://www.expressen.se/webbtv/ 

[13] Aftonbladets Webb-tv 

URL: http://www.aftonbladet.se/atv/player.html/ 

[14] MTV Overdrive 

URL: http://www.mtv.com/overdrive/ 

[15] EGAMES.TV 

URL: http://www.egames.tv/ 

[16] MediaBle 

URL: http://www.mediable.net/se/res/standards_200103_iab.html 

[17] PhpAdsNew 

URL: http://phpadsnew.com/ 

[18] MDTS 

URL: http://www.mdts.se/index.phpp=9 

[19] Akamai 

URL: http://www.akamai.com/ 

45

Johan Andersson Video Caster - Uppsala universitet

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?