Flash 8 Video © Reiska, 2008. Flash 8 tekijäympäristö  Videotiedostojen on Flash Playerissa oltava FLV muodossa.  Koodaus FLV muotoon voidaan tehdä.

Esitys aiheesta: "Flash 8 Video © Reiska, 2008. Flash 8 tekijäympäristö  Videotiedostojen on Flash Playerissa oltava FLV muodossa.  Koodaus FLV muotoon voidaan tehdä."— Esityksen transkriptio:

1 Flash 8 Video © Reiska, 2008

2 Flash 8 tekijäympäristö  Videotiedostojen on Flash Playerissa oltava FLV muodossa.  Koodaus FLV muotoon voidaan tehdä kahdella tavalla: 1. Viime tingassa: Flash Video Import Wizard, sisäinen dialogi vasta Flash-esitystä tehtäessä, tai 2. Etukäteen: Tätä varten on erillinen Flash 8 Video Encoder, itsenäinen ulkoinen ohjelma.  Flash Video Import Wizard käynnistyy käskyllä File>Import> Import Video. Dialogit ohjaavat tarvittaessa videotiedoston muuntamisen FLV muotoon ja FLVPlayback komponentin asetukset.Dialogit ohjaavat tarvittaessa videotiedoston muuntamisen FLV muotoon ja FLVPlayback komponentin asetukset  Syntynyt FLVPlayback komponentti liittää Flash esitykseen ulkoisen lokaalin tai WWW-palvelimella olevan FLV videotiedoston (protokolla HTTP), tai Flash Media Serverin tuottaman videovirran, streamin (protokolla RTMP).

3 Flash 8 esitysympäristö  Palvelin voi olla tavallinen WWW-palvelin, tai sovellus palvelin – ja/tai erityinen Media/Streaming palvelin.  Asiakas on Flash Player, joka upotetaan selaimeen tai voi toimia itsenäisessä ikkunassa. Flash Player voi soittaa myös lokaaleja FLV tiedostoja.  Flash Player toistaa Flash Videota ilman mitään lisäosia muun Flash sisällön mukana. Flash Video on kuten mikä muu Flash symboli tahansa.  Dreamweaverissa on perustoiminnot sisältävä Flash Video Import mekanismi, jolla Flash Videon (FLV) voi upottaa Web-sivulle.

4 Flash 8 streamingympäristö  Flash Media Server on Macromedian Streaming Media Server, virtausmediapalvelin, joka tuottaa audio- ja videostreamin Flash Player 6+:n ymmärtämään muotoon.  Flash Video Streaming Service (FVSS) on kolmannen osapuolen tarjoama palvelu, johon kuukausimaksua vastaan voi toimittaa maailmanlaajuiseen jakeluun streameja.  Palvelu perustuu Flash Media Serveriin.  Palvelu vastaa Web-hotellipalvelua (Web hosting).

5 Flash Videon julkaiseminen  Flash Video voidaan tuottaa ja julkaista kahdella kahdella tapaa: 1. Videon tallennus etukäteen (pre-recorded) ja toisto tarvittaessa (on-demand). 1. Video voidaan upottaa Flash-esitykseen (Embedded in SWF), 2. tai video voidaan ladata progressiivisesti tai streamina ulkoisesta FLV-tiedostosta. Protokolla HTTP tai RTMP. 2. Videon tuottaminen ja toisto livenä (broadcasting live video) edellyttää aina Flash Media (Streaming) Serverin käyttöä. Protokolla RTMP.

6 Embedded, Progressive vai Streaming?

7 On-demand videotuotanto 1. Kuvaa itse video, tai hanki valmista videomateriaalia. 2. Koodaa video Flash Videoksi (FLV). 3. Päätä jakelutapa, upotettuna, progressiivisena vai streamina. 4. Lisää video WWW-sivulle ja julkaise sivu. Reaaliaikaisten videolähetysten (live broadcasts) tuotanto on eri tarina.

8 Koodekit  Koodekki (koodaus|dekoodaus) on pakkaus- ja purkualgoritmi, joka määrää, miten videotiedostot pakataan (koodaus, encoding) ja miten ne puretaan (dekoodaus, decoding) toistettaessa.  Flash Video Encoder koodaa videon On2 VP6 videokoodekilla (Flash Player 8), tai Sorenson Spark koodekilla (Flash Player 7).  Sorenson Spark koodekilla pakatun videon voi julkaista SWF 6 tai 7 muodossa, ja soittaa vastaavasti Flash Player 6-7 tai 7+ versioilla.  On2 VP6 koodekilla pakatun videon voi julkaista kaikilla SWF versioilla 6-8, mutta soittaa vain Flash Player 8+ versiolla.

9 Videon tallennus ja toisto  Ennen kuin On-demand videota voi lisätä Web-sivulle, video pitää koodata Flash Video (FLV) muotoon.  Videon voi tallentaa tavalliselle Web-palvelimelle tai virtauspalvelimelle (Flash Media Server tai FVSS).  Videon toistaa sama Flash Player, kuin muunkin Flash sisällön.  Live videon kaappaus ja jakelu edellyttää Flash Playerin ja Flash Media Serverin yhteiskäyttöä.  Video kaapataan ja lähetetään Flash Media palvelimelle Flash-ohjelmalla, joka on yleislähetyssovellus kuvaavassa päässä.  Live streaming sovellus Flash Media Serverillä (tai FVSS palvelu) ottaa lähetyksen vastaan.  Tehdään toinen SWF tiedosto, joka soittaa videostreamin ja julkaistaan se Web-sivulle, josta asiakkaat sen löytävät.

10 Video-symbolin käyttö  Videon soittamiseen käytetään Video-symbolia.  Ensimmäinen esimerkki on aikajanalle upotettu video.  Toinen esimerkki on ActionScriptillä ohjattu videon toistaminen.  HUOM! Esimerkeissä ei käytetä Flashin FLVPlayback komponenttia (tai vanhempia Flash Media komponentteja).

11 7 6 5 4 3 2 1 Vedä Stagelle Tämä on esimerkki Embed (upotetusta) videosta ilman valmiiden Flash komponenttien käyttöä.

12 8 7 6

13 Sama kuin edellä, mutta upotuksen (Embed) sijasta Action Script ohjattuna ulkoisena videona.

14

15 Flash Video tuodaan Flash Playerille NetConnection yhteysolion kautta, johon soitin liittyy. NetStream-olio käyttää yhteyttä. my_video on näyttämöllä oleva video-olio (Video- luokan instanssi), johon liitetään NetStream virrassa oleva video. Videoluokka luodaan kirjaston (Library) Popup-valikosta komennolla New Video (yksityiskohdat seuraavalla sivulla). Videovirralle asetetaan vielä 5 sekunnin puskuri ja kytketään se toiseen päähän, FLV tiedostoihin. Lopputulos on ohessa. Kokeile muitakin.

16 Esimerkkejä

17 Mediakomponentit  Flash 6-7 kehitysympäristössä käytössä ovat valmiit mediakomponentit  MediaDisplay  MediaController  MediaPlayback (edellisten yhdistelmä)  Mediakomponenttien avulla videoiden sisällyttäminen esitykseen on usein helpompaa. Mediakomponenttien avulla videoiden sisällyttäminen

18 FLVPlayback komponentti  Flash 8 kehitysympäristössä on uusi FLVPlayback komponentti, joka on vielä monipuolisempi ja helpompi käyttää kuin Media komponentit.  FLVPlayback komponentista on myös erillinen Custom UI versio, jossa videon ohjaimet, kontrollit voidaan valita erikseen.  Komponentti vedetään normaalisti Components paneelista Stagelle instanssiksi ja sille annetaan nimi.  Component Inspector paneelissa komponentille annetaan videon siirtoprotokolla ja sijainti (URL eli contentPath) sekä muut tarvittavat ominaisuudet.

19

20 skin videon ohjausnapeille voidaan valita valmiista listasta tai käyttää omia nappeja.

21 Component Inspector  contentPath voi olla  Lokaali tiedosto, esim. C:\fish.flv, tai  WWW palvelimella, esim. http://www.tp.spt.fi/ ~reiska/Friikki/Flash/sanfrancisco.flv, tai http://www.tp.spt.fi/ ~reiska/Friikki/Flash/sanfrancisco.flv  Streaming-palvelimella, esim. rtmp://localhost:1935/my_video/indeprop.flv  skin videon ohjausnapeille voidaan valita valmiista listasta tai käyttää omia nappeja.  P.S. Jos video ei ole FLV muodossa, Flash8 käynnistää Flash 8 Video Encoder ohjelman ja käy läpi dialogin, jolla muunnos suoritetaan. Samalla syntyy automaattisesti FLVPlayback komponentti ohjaimineen Stagelle.dialogin, jolla muunnos suoritetaan

22 FLVPlayback ohjelmointi  FLVPlayback komponenttia (nimettyä instanssia siitä) voi myös ohjelmoida ActionScriptillä, kuten muitakin symboleita tai komponentteja.  FLVPlayback komponentin saa sovelluksen kirjastoon helpoimmin vetämällä Components paneelista instanssin Stagelle.  Instanssille pitää antaa nimi Properties- tai Component Inspector paneeliin (se voidaan antaa myös AS-koodissa).  Seuraavaksi on ensin esimerkki erillisten kontrollinappien ohjelmoinnista. Sitten on lopuksi esimerkki videon tietojen näyttämisestä ja videolistan soittamisesta. Tutki!

23

24 Lopuksi esimerkki, jossa näytetään FLVPlayback soittimen ajoaikaiset ominaisuudet ja soitetaan soittimella videolistaa …

25 this.createTextField("status_txt", 999, 0, 0, 200, 200); status_txt.autoSize = "left"; status_txt.multiline = true; FLVsoitin.onEnterFrame = function() { status_txt.text=""; status_txt.text += "\nactiveVideoPlayerIndex: " + FLVsoitin.activeVideoPlayerIndex ; status_txt.text += "\nbytesLoaded: " + FLVsoitin.bytesLoaded ; status_txt.text += "\nbytesTotal: " + FLVsoitin.bytesTotal ; status_txt.text += "\ncontentPath: " + FLVsoitin.contentPath ; status_txt.text += "\nheight: " + FLVsoitin.height ; status_txt.text += "\npaused: " + FLVsoitin.paused ; status_txt.text += "\nplayheadTime: " + FLVsoitin.playheadTime ; status_txt.text += "\nplaying: " + FLVsoitin.playing ; status_txt.text += "\npreferredHeight: " + FLVsoitin.preferredHeight ; status_txt.text += "\npreferredWidth: " + FLVsoitin.preferredWidth ; status_txt.text += "\nscaleX: " + FLVsoitin.scaleX ; status_txt.text += "\nscaleY: " + FLVsoitin.scaleY ; status_txt.text += "\nstate: " + FLVsoitin.state ; status_txt.text += "\nstopped: " + FLVsoitin.stopped; status_txt.text += "\ntotalTime: " + FLVsoitin.totalTime ; status_txt.text += "\nvolume: " + FLVsoitin.volume ; status_txt.text += "\nwidth: " + FLVsoitin.width ; status_txt.text += "\nx: " + FLVsoitin.x ; status_txt.text += "\ny: " + FLVsoitin.y ; } FLV soittimen ominaisuudet näkyville!

26 var videos:Object = new Object(); videos.list = new Array(); videos.list[0] = "http://www.helpexamples.com/flash/video/water.flv"; videos.list[1] = "http://www.helpexamples.com/flash/video/clouds.flv"; videos.list[2] = "http://www.helpexamples.com/flash/video/lights_long.flv"; videos.list[3] = ""; videos.list[4] = ""; videos.list[5] = ""; videos.list[6] = ""; videos.loop = true; videos.length = 1; videos.loaded = false; var m = this.FLVsoitin; m.contentPath = videos.list[0]; videos.ready = function( evt:Object ):Void { if(!this.loaded){ this.loaded = true; for( var n=1; n<this.list.length; n++ ){ if( videos.list[n].indexOf(".flv") != -1 ){ m.activeVideoPlayerIndex = n; m.contentPath = videos.list[n]; this.length++; } m.activeVideoPlayerIndex = 0; } Videolistan soittaminen. AS-koodi.

27 m.addEventListener("ready",videos); // Set a 'complete' event handler to load the next video videos.complete = function( evt:Object ):Void { var nextIndex = Number(evt.vp)+1; if( nextIndex == this.length){ if( this.loop ){ nextIndex = 0; }else{ return; } m.activeVideoPlayerIndex = nextIndex; m.visibleVideoPlayerIndex = nextIndex; m.play(); } m.addEventListener("complete",videos); // End Set Videos Behavior