Näin teet bannerin

Eräs merkittävimpiä Flashin käyttökohteita ovat bannerit. Flashilla saavutettavat edut muihin bannerityyppeihin ovat animoitavuus pienellä tiedostokoolla. Seuraavassa tehdään perusbanneri Flashilla yksinkertaisella animaatiolla.

Vaihe 1

Avaa uusi dokumentti ja aseta näyttämön kooksi 468x60 pikseliä. Sujuvan animaation vuoksi laitetaan animaation nopeudeksi 36 ruutua sekunnissa.

Vaihe 2

Jos sinulla ei ole valmiina paria kuvaa, tee sellaiset Fireworksilla tai muulla käyttämälläsi grafiikkasovelluksella. Tee niistä 468x60 pikselin kokoisia.

Vaihe 3

Tuplaklikkaa Layer 1 ja nimeä se "Kuvat1".

Vaihe 4

Tuo ensimmäinen kuva näyttämölle (File > Import tai Komento-R (Mac) / CTRL-R (Win)). Keskitä kuva Align-ikkunan avulla pysty- ja vaakasuoraan.

Kohdistaminen tapahtuu "Distribute" rivin keskimmäisillä painikkeilla. Muista painaa "To Stage" ennen kohdistamista, jotta kohdistus tapahtuu näyttämön mukaan. "Align" rivin painikkeet kohdistavat objekteja keskenään.

Vaihe 5

Lisää uusi taso ja nimeä se "ruutu1". Aktivoi taso ja tee sen ensimmäiseen ruutuun (frame) "Rectangle Tool'lla" esim. 8x8 pikselin kokoinen ruutu, värillä ei ole väliä. Varmista objektin koko ja paikka "Properties" ikkunasta - X:0.0 Y:0.0 W:8 H:8.

Vaihe 6

Siirry aikajanalla ruutuun 25 ja tee avainruutu. Muuta nyt tässä 25. ruudussa objektinleveydeksi 468 – anna muiden arvojen olla ennallaan. Tämän jälkeen tee avainruutu kohtaan 40 ja muuta siinä objektin arvoiksi H:60.

Vaihe 7

Tee tasoon "Ruutu1" Shape Tween animaatio ensimmäiseen ruutuun ja samoin 25 ruutuun.

Vaihe 8

Vedä katselupäätä (punainen ruutu aikajanan päällä - punainen viiva kaikkien tasojen yli) ja näet mitä suunnilleen tapahtuu näyttämöllä. Jos avainruutujen väliin on muodostunut katkoviiva, animaatio ei toteudu, vain kiinteä viiva osoittaa toteutuneen animaation.

Vaihe 9

Tee tasolle "Ruutu1" uusi avainruutu kohtaan 100 ja toinen kohtaan 115 sekä kolmas kohtaan 140. Aktivoi aikajanan ruutua 115 ja klikkaa kasvatettua väripalkkia. Anna sille "Properties" ikkunassa uudet arvot – W:468, H:6, X:0 ja Y:54 – ja lopuksi mene kohtaan 140 ja anna taas uudet arvot väripalkille – W:6, H:6, X: 462 ja Y: 54. Viimeistele vaihe luomalla kohtiin 100 ja 115 Shape Tween animaatio. Tallenna ja testaa elokuva. Värillisen palkin tulee peittää kuva animoidusti ja paljastaa se jälleen.

Vaihe 10

Nyt tee uusi taso, vie se alimmaksi aikajanalla. Anna tason nimeksi Kuvat 2 ja tuo sille toinen kuva (File > Import tai Komento-R (Mac) / CTRL-R (Win)). Keskitä kuva Align-ikkunan avulla pysty- ja vaakasuoraan. Tuplaklikkaa tason "Ruutu1" ikonia ja avautuvasta dialogista valitse "Mask".

Paina OK ja tuplaklikkaa tason "Kuvat1" ikonia, tee siitä nyt vuorostaan "Masked". Nyt sinulla on sekä maski että maskattu – tätä työvaihetta tarvitset varmasti monissa muissa töissä usein.

Vaihe 11

Jos nyt vilkaiset työtä esikatselulla, näkyy sinulla vain tyhjä ikkuna johon tulee näkyviin tuo maskattu kuva – on siis lisättävä sinne myös lisää materiaalia. Lisätään mukaan uusi kuva – sellainen joka on näkyvisä heti ladataessa ja joka jää maskatun kuvan alle kun maski tuodaan esille ja tulee taas esille kun maski siirretään syrjään.

Lisätään projektiin uusi taso ja viedään se alimmaksi. Nimeä se vaikka "Kuvat2" . Tuo uusi kuva näyttämölle samoin kuin ensimmäinen (File > Import tai Komento-R (Mac) / CTRL-R (Win)) ja keskitä se Align-ikkunan avulla pysty- ja vaakasuoraan.

Vaihe 12

Vielä pari elementtiä lisää jotta työ saa lisää eloa. Lisätään Kuva2 tason päälle vielä kaksi uutta tasoa - nimeä ne "Väritausta" ja "Teksti". Tee molempiin tasoihin avain ruutu samaan kohtaan jossa maskitasossa maski alkaa siirtymään pois Kuva1:n päältä – tässä esimerkissä siis kohtaan 100.

Tee "Väritausta" tasoon koko bannerin kokoinen, kuvan väreihin sopiva väripalkki "Rectangle Tool" työkalulla ja tee siitä symboli, symbolin muodoksi sopii Graphic sangen mainiosti. Siirry "Teksti" tasoon ja kirjoita mainokseen tuleva tekti kohtaan avainruutuun 100. Tee tästäkin elementistä symboli, myös tämän muodoksi sopii Graphic.

Siirry ruutuun 150 ja tee "Teksti" tasoon uusi avainruutu. Lisää vielä uusi avainruutu kohtaan 175. Aktivoi teksti elementti ruudussa 175 ja muuta sen Alpha-kanava 0% (Properties-ikkuna > Color > Alpha >0%) ja tee ruutuun 150 Motion Tween. Toista samat asiat Väritausta tasolla kohdissa 155 ja 180. Viimeistele työ lisäämällä tarvittaessa ruutuja siten että koko työn kesto kaikilla tasoilla on 200 ruutua.

Vaihe 13

Nyt muuten valmis banneri tarvitsee enää toiminnallisuuden, joka tässä tapauksessa on linkki halutulle sivulle. Se tehdään ns. näkymättömän painikkeen avulla.

Koko työn päälle tehdään vielä yksi taso ja nimetään se vaikka "Näkymätön". Tämän kestoksi tulee koko työn kesto eli vedetään se 200 saakka. Ensimmäiseen ruutuu tehdään Rectangle Tool avulla koko työn kokoinen palkki. Muunnetaan se symboliksi ja muodoksi valitaan "Button". Nimeksi voidaan tälle symbolille antaa varmuuden vuoksi vaikka "Linkki". Kun symboli on valmis, tuplaklikataan sitä Library-paneelissa, jolloin tullaan painikkeenmuokkaustilaan.

Painikkeita – Button – muokattaessa aikajana on hieman erilainen (kts. yllä). Tartu avainruutuun kohdassa "Up" ja vie se kohtaan "Hit". Palaa takaisin Sceneen. Nyt sinulla on sinertävä, läpinäkyvä huntu koko työn päällä. Tämä huntu on äsken tehty painike. Viimeisenä silauksena vielä lisätään toiminnallisuus ja tähän tarvitaan Actions-ikkunaa. Avaa se Windows > Actions.

Aktivoi tämä viimeisenä luotu taso ja sen elementti ja kirjoita Actions ikkunan skripti-ikkunaan:

on (release) {
getURL("http://www.haluamasi_osoite.com/", "_blank");
}

Lopuksi tallenna työ ja julkaise siitä .swf. Olemme valmiit.

Valmis työpohja: sumppi.fla