Black Week -kampanja käynnissä!

-50% valikoiduista kursseista 25.11.-6.12. 👉tästä kampanjasivulle!

Mainosbannerit HTML5 aikaan – helppoa Animate CC:llä

Webbimaailmassa ajanlasku menee hieman eri tahtia kuin yleensä. Vuoden parin takaiset asiat tuppaavat olemaan historiaa, ellei peräti esihistoriaa. HTML5 esiteltiin julkisesti tasan 11 vuotta sitten tänään – 22. tammikuuta 2008. Eli webbiajanlaskun mukaan jo ikuisuus sitten. W3C Recommended tason HTML5 määritys sai lokakuussa 2014. Historiaa jo sekin.

HTML5 yhtenä perusideana oli, että selainten tulee kyetä toistamaan kaikki sisältö ilman kolmansien osapuolien valmistamia lisäosia kuten Flash Player. Maailma muuttui paremmaksi monella tavoin mutta kaikella on hintansa. Mainosbannerien tuotannossa se tarkoitti sitä, että animoituja bannereita kykeni tekemään vain osaavat webbikoodarit ellei tyytynyt staattisiin kuvabannereihin tai animoituihin gif -kuviin.

Luulisi bannereiden jo olevan kaikkien HTML5 ajassa mutta ei.

Mikä HTML5 mainoksissa on haastavaa?

HTML5 bannerit ovat käytännössä sivuun linkitettyjä omia HTML-sivuja. Haaste on se, etteivät ne saisi hidastaa eikä häiritä isäntäsivun toimintaa. Aineisto-ohjeissa onkin kerrottu siitä millaisia JavaScript kirjastoja saa käyttää tai mitä funktioita ei pitäisi käyttää. Miten linkit tehdään ja marginaalit nollataan ja kaikkea vastaavaa teknistä. Aineisto-ohjeet on tehty kattamaan ne periaatteet, joita bannereiden on noudatettava. Selkeitä kädestä pitäen -ohjeita ei ole juurikaan tarjolla.

Aineisto-ohjeiden antamia ohjeita tulee osata soveltaa kulloinkin käytettyyn työkaluun.

Animate CC ja HTML5 julkaisu

Animate CC on todellisuudessa vain uudelleen nimetty Adobe Flash! Turha sitä on kierrellä, näin Adobekin sen ilmaisee, eikä siinä ole mitään pahaa. Animate CC käyttää HTML5 julkaisussaan HTML canvas-tekniikkaa, jossa koko esityksen (mainosbannerin) sisältö tuotetaan JavaScript -koodilla. Koodia ei tarvitse itse kirjoittaa mutta sen verran täytyy webbitekniikoita ymmärtää, että osaa kytkeä esityksen mainosjärjestelmiin aineisto-ohjeissa annetuilla koodimalleilla.

Animate CC työkaluna

Ilmoitusten valmistamisessa ei tarvita Animate CC:n kaikkia ominaisuuksia. Oikeastaan selvitään varsin pienellä osalla ominaisuuksia. On vain osattava käyttää niitä oikein.

Mitä täytyy osata?

Periaatteessa animaatiota sisältävien bannereiden tekeminen on helppoa. Varsinainen haaste tulee kuitenkin vastaan vasta kun banneri on valmis ja se julkaistaan. Eli miten banneri saadaan toimimaan mainosjärjestelmien kanssa yhteen Juuri tämä aihe onkin kurssillani tärkeässä osassa.

Ainakin seuraavat asiat on hallittava:

  1. Animaten piirtotyökalut ja piirtotilat (objektit ja muodot)
  2. Tasojen (layer) käyttäminen
  3. Symbolien luonti ja tyypit (symboleita voidaan animoida)
  4. Aikajanan muokkaus ja animaatiot
  5. Bannerin peittävän hiiren klikkaukset vastaanottavan tason luonti
  6. Klikkausten käsittely koodissa
  7. Julkaisuasetukset ja bannerin julkaiseminen
  8. Aineisto-ohjeen mukaisten koodien liittäminen banneriin
  9. Bannerin pakkaaminen ja toimittaminen

Kuulostaako paljolta? Ei se oikeastaan ole. Käsittelen kaikki nämä asiat ja vähän enemmänkin päivän kurssilla. Loppujen lopuksi käyttö on varsin helppoa, kunhan joku näyttää miten se tehdään. Tutustu Animate CC ilmoitusvalmistajalle kurssin sisältöön.

Olen kouluttanut ilmoitusvalmistajia Animaten käyttöön jo pitkään. Voin luvata, että kurssilla opit tekemään julkaisukelpoisen animoidun bannerin ja kytkemään siihen esimerkiksi Sanomien aineisto-ohjeiden mukaisesti klikkien käsittelyyn käytetyt koodit. Vastaavasti käsittelen myös bannerien julkaisemisen Googlen mainontaan ja opetan miten mainoksen toimivuus ja kelvollisuus testataan. Lisäksi saat kurssilta mukaasi valmiin koodiesimerkin, jota voit käyttää kaikissa tulevissa banereissasi.

Eiköhän laiteta bannerit taas liikkeelle.