Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

Flash-sivusto ja julkaiseminen

"Web-sivusto" Flashilla

Tehtävänä on luoda Flash-muotoinen web-sivuston malli navigaatioineen, jossa on selattavana kuvia (+ 1 video), kuunneltavana ääniä sekä klikkailtavana muutama linkki.

Valmiiksi tehty esimerkkiesitys löytyy c:\flashkurssi kansiosta nimellä demosivusto.fla

Avaa uusi movie, File/New. Käytetään esityksen oletusarvoista kokoa.

Rakenteen hahmottelu:
Seuraavaksi sinun tulee miettiä esityksen rakennetta.
Sivustolla on kolme selvästi erotettavaa osiota, jotka kannattaa jakaa omiin sceneihinsä. Mikäli osion sisällä liikutaan framejen välillä, tapahtuu liikkuminen kyseessä olevan scenen pääaikajanalla. Mikäli jokin kohta vaatii kestonsa takia enemmän kuin yhden framen, tehdään siitä Movie Clip -symboli.
* Suosittelen eri asioiden laittamista omille tasoilleen, jolloin ne löytyvät helposti työskentelyn aikana eikä sekoittumista tapahdu. Katso esimerkkitiedoston Layereita oheisesta kuvasta.

Ensimmäisessä osiossa on kolmen kuvan galleria, jolloin esityksen aikajanasta tulee kolme ruutua pitkä. Tällöin kaikkien tasojen sisältö tulee venyttää riittävän pitkälle, jotta ne näkyvät ja toimivat esityksen edetessä.

Toisessa skenessä riittää hyvin yhden framen kesto, sillä siellä on vain painikkeita, joista Event-ääni laukaistaan soimaan.

Kolmannessa osiossa riittää samoin yhden framen kesto, sillä siellä on ainoastaan linkkiskriptin sisältäviä painikkeita.

Voit aloittaa ensimmäisestä osiosta, ja monistaa sen. Ei haittaa, vaikka se on kestoltaan kolme framea, ylimääräiset ruudut on helppo deletoida (Remove frames) monistetuista sceneistä.

Scenet kannattaa nimetä johdonmukaisesti. Scene-nimiin voidaan viitata ActionScriptissä jo hyvissä ajoin (ennen kuin scenejä on vielä oikeasti tehty), kun nimet ovat tiedossa. Esimerkkitiedostossa nimet ovat, Sivu1, Sivu2 ja Sivu3.

Pohjagrafiikat:
Luodaan ihan ensimmäiseksi avoinna olevaan, esityksen ainoaan sceneen pohjagrafiikat eri piirtotyökalujen avulla. Näiden grafiikoiden päälle tulevat myöhemmin sisältö ja navigointipainikkeet.
Tee vasempaan laitaan tai ylälaitaan palkki sivuston sisäistä navigointia varten.

Painikkeet:
Tee kolme painiketta, jotka sijoitetaan navigaatiopalkkiin. Eli sinun täytyy tehdä kolme Button-symbolia tutulla tavalla. Painikkeissa voi olla kuva, tekstiä tai molempia. Painikkeessa voi olla, kuten esimerkkitiedostossa, muuttuva grafiikkaosa tekstin ollessa normaalina tekstinä painikkeen ulkopuolella. Tällöin on myöskin mahdollista käyttää vain yhtä button-ilmentymää, vaikka tekstit ovatkin erilaiset.

Painikkeiden skriptit:
Paina hiiren oikeaa nappia Stagella olevan painikkeen päällä ja avaa pikavalikosta kohta Actions. Poimi avautuvan paneelin vasemmalla puolella olevasta listasta alla näkyvän skriptin ainekset ja syötä oikeat arvot koodirivikohtaisiin kenttiin Actions-paneelin yläosaan (Tämä onnistuu silloin, kun koodi-ikkuna on Normal Modessa, mitä se oletusarvoisesti on. Vaihtoehtona oleva Expert Mode edellyttää enemmän suoraa kirjoittamista koodi-ikkunaan)

on (release) {
gotoAndStop("Sivu1", 1);
}

Vain scenen nimi, frame tai molemmat vaihdetaan jokaisen napin skriptiin. Et voi vielä testata nappiskriptien toimivuutta, sillä esityksen muita osioita ei ole tehty.

Muut skriptit:
Pääaikajanalle tehtyyn actionScript-tasoon tulee pysäytyskoodi, jottei esitys karkaa eteenpäin. Paina hiiren oikeaa painiketta jossakin ko. tason framessa ja valitse pikavalikosta Actions. Poimi seuraava koodi paikalleen:

Stop();

Sisältö sceneen "Sivu1"
Ensimmäisen osion kuvagalleriassa on kolme kuvaa. Kuvat sijoitetaan frameihin 1, 2 ja 3.

Yksi kuvaruutu on videoleike (DSCF0003.AVI). Tee importoimastasi videoleikkeestä Movie Clip-symboli, jotta se mahtuu pääaikajanalla yhteen frameen.Videoleikkeen oma aikajana voi Movie Clip-symbolin sisällä olla kuinka pitkä tahansa.

Importoi myös kuvat r_kuva1.png ja r_kuva2.png. Näistä ei tarvitse tehdä symboleita.

Asettele importoimasi materiaali peräkkäisiin Keyframeihin. Nyt pitäisi luoda vielä navigaatio kolmen kuvasivun välille.

Tee jälleen Button-symboleita: Eteenpäin ja taaksepäin vievät nuolet. Sijoita nämä symbolit Stagelle siten, että jokainen nuolipari on omassa Keyframessaan, aivan kuten kuva-aineistokin. Himmennä ensimmäisen ruudun takaisin-painike ja viimeisen ruuden eteenpäin-painike Alpha-arvoa muuttamalla, sillä ne eivät vie minnekään (eikä niihin tule ActionScriptiäkään).

Syötä Actions-paneelin kautta seuraava skripti eteenpäin-painikkeiseen:

on (release) {
nextFrame();
}

ja vastaavasti takaisinpäin-painikkeisiin:

on (release) {
prevFrame();
}

Scene-monistus

Avaa Scene-paneeli näkyviin, monista skene klikkaamalla Duplicate Scene -painiketta. Nimeä molemmat osiot. Nimen pääsee vaihtamaan Scene-paneelissa tuplaklikkaamalla nimen päällä.

Kun on valmista, siirry sceneen 2

Sisältö sceneen "Sivu2"
sceneen 2 tulee ääninäytteitä. Ääninäytteille voit varmasti itsekin keksiä järkeviä sovelluksia. Tee sisältökenttään kolme painiketta (tekstiä, kuvia tai molempia), joita painamalla haluttu ääni toistetaan.

Ensimmäiseksi sinun täytyy poistaa ylimääräinen aineisto, joka periytyi kohdasta "Sivu1". Valitse "Kuvanuolet"-taso sen nimen kohdalta Timelineltä ja paina hiiren oikeaa painiketta: Valitse avautuvasta valikosta Delete Layer. Maalaa hiirellä tarpeettomat framet 2 ja 3 kokonaisuudessaan aikajanalta ja valitse hiiren oikean näppäimen kautta Remove Frames. Valitse lopuksi jäljellejääneestä frame 1:stä kuva Stagelta ja deletoi se.
Nyt sinulla pitäisi olla tyhjä pohja, aikajanakestoltaan 1 frame.

Luo äänen sisältävät painikkeet (muutama kappale) Stagelle samalla tavalla, kuin aiemmassa harjoituksessa (Äänten lisääminen painikkeisiin). Muista: äänet ovat Button-symboleiden sisäpuolella. Käytä tasoa jossa kuvat aiemmin sijaitsivat ja nimeä se uudelleen nimellä Äänet.

Kun on valmista, monistetaan Sivu2-scene. Nimeä uusi scene nimellä Sivu3

Sisältö sceneen "Sivu3"
Poista Äänet-tasolta nappulat pois ja nimeä taso nimellä Linkit.

Tehdään Stagen valkoisen alueen päälle (tasolle Linkit) tekstikappale, jonka tyyppi on Static Text. Kirjoittele tekstiä haluamasi määrä ja tee loppuun kolme selvästi erottuvaa linkkisanaa, kukin eri riville.
Maalaa linkkisana ja kirjoita linkin osoite Properties-paneelin linkkikenttään. Valitse vielä Target-kohtaan _blank, jotta antamasi www-sivu avautuu uuteen selainikkunaan. Sähköpostilinkkiin ei tarvitse määrittää Targettia ollenkaan. Flash ei valitettavasti automaattisesti alleviivaa linkkiä html-kielen tavoin.

Voit esikatsella esitystäsi tässä vaiheessa. Seuraavaksi kuitenkin julkaisemme sen, jotta voit katsella sitä oikeassa selainympäristössä html-sivun kautta.

Julkaiseminen

Julkaisu tapahtuu valitsemalla File/Publish Settings
Avautuvasta ikkunasta voi määrittää, missä kaikissa muodoissa esitys julkaistaan.

Publish-painikkeen klikkaaminen julkaisee esityksen valitsemissasi formaateissa samaan kansioon .fla-työtiedoston kanssa. OK-painike ainoastaan tallentaa asetukset, eikä vielä julkaise mitään.

Tärkeimmät asetukset koskevat Flash- ja Html-muotoista julkaisemista.


Oleellisimpia valintoja Flash-julkaisuasetuksissa:

Version: Voit valita esityksen julkaisemisen tietyssä Flash Player -versiomuodossa

Protect from import: Tämä estää .swf-tiedoston tuomisen takaisin Flash MX:ään. Www-sivuille vietävät esitykset voi suojata tällä toiminnolla, jotta kukaan ei pysty suoraan hyväksikäyttämään esitystä ja sen sisältöjä.

Compress Movie: Tämä toimii ainoastaan, mikäli Version-kohtaan on määritelty Flash Player 6 -asetus. Toiminto pienentää vielä lisää esityksen kilotavukokoa.

JPEG-Quality: Voit säätää bittikarttakuvien pakkausta: mitä pienempi arvo, sitä vähemmän kilotavuja ja surkeampi laatu. Suosittelen 80-100 asetusta.

Audio Stream ja Audio Event: Voit määrittää kaikille esityksen Stream- ja Event-äänille pakkausasetukset painamalla Set-painiketta.

Override Sound Settings: Tämä painike ohittaa kaikki Library-paneelin Properties-ikkunassa äänille tehdyt pakkausmäärittelyt ja käyttää vain ja ainoastaan edellisessä kohdassa tehtyjä asetuksiaWww:ssä oleva Flash-esitys tarvitsee pohjakseen HTML-sivun, johon .swf-tiedosto on sijoitettu, ja joka aktivoi esityksen ja määrittää selainasetukset. Voit antaa Flashin generoida tarvittavat html:t tai tehdä ne kokonaan itse.
Tärkeimpiä valintoja HTML-julkaisuasetuksissa ovat seuraavat:

Template: Tämä määrittää Flash-esityksellesi sopivan template-pohjan. Mikäli sinulla ei ole joitain erityisiä asetuksia, käytä Flash Only vaihtoehtoa.

Dimensions: Tästä valikosta määritellään esityksen Width- ja Height-asetukset (HTML-koodin OBJECT ja EMBED tageihin)
- Match Movie: Säilyttää esityksen kokoasetukset, joten lähes aina järkevin vaihtoehto
- Pixels: Koko pikseleinä
- Percent: Koko prosentteina, eli skaalataanko selaimessa näkyvää esitystä

HTML Alignment: Määrittää Flash-esityksen sijainnin selainikkunassa. Default-arvo sijoittaa esityksen keskelle selainta.

Scale: Skaalataanko esitystä selainikkunan kokoa muutettaessa. Default-arvo pitää esityksen oikeassa koossa niin kauan kuin suinkin on tilaa. No Scale-asetuksella voit taata esityksen skaalautumattomuuden.

Käy lopuksi etsimässä julkaistut tiedostot esiin tiedostonhallinnasta ja katsele html-tiedosto selaimella. Nyt näet todellisen lopputuloksen. Voit muokata html-tiedostoa halutessasi lisää, pohjatyö on jo kuitenkin valmis.

LOPPUSANAT:

Monimutkaisemmaksi menevät Flash-esitykset ja julkaiseminen osana webbisivua ovat enemmänkin tapauskohtaista ongelmanratkontaa, sillä mahdollisia muuttujia on valtavasti. Tekemiseen on vaikea löytää yhtä oikeaa lähestymistapaa, ja usein se oikea tai yksi monista löytyy vain pienen kokeilemisen jälkeen.

Toivon, että tämän peruskurssin jälkeen uskallatte ottaa ohjelman itsenäisesti esiin, kerrata ja opetella lisää. Vain harjoittelemalla ja työskentelemällä oppii! Ja muistathan, että mediapajasta voi kysyä neuvoa.