Web-animaatiot

Tällä sivustolla on esimerkkejä tekemistäni erilaisista nettiin suunnitelluista animaatioista. Osa tuotoksista on todella vanhaa kokeellista tuotantoa ja tarkoituksena onkin lähinnä vain esitellä menneiden aikojen animointeja, ei päteä niillä :)

Muovailuvaha-animaatio #1

Vuonna 1999 Sony DVCAMilla ruutu ruudulta kuvattu animaatio. Käännetty digitaaliseen muotoon RM-videoksi Fast AV Master ohjelmistolla. Vaatii selaimelta tuen toimiakseen.

Muovailuvaha-animaatio #2

Edellisen kaltainen teos. Alkuperäiset AVI-tiedostot muutettiin helpommin striimattavaan RM-formaattiin johtuen tuolloin käytössä olleista hitaista nettiyhteyksistä. Videoiden heikko laatu johtuu tästä syystä.

PowToon

Online-työkalu PowToonilla on helppo tehdä animoituja esityksiä ääniraitoineen. Youtubeen lisäämässäni videossa kerrotaan yksinkertaisen esityksen tekemisestä.

Intro

Tämän vuoden 2014 animaation suunnittelin erilaisten videoideni introksi. Kuvat on käsitelty ensin Photoshopilla ja kasailtu videoksi erilaisine efekteineen Corel Video Studio Pro:lla.

Flash

Kokonaisia nettisivuja suunniteltiin aikoinaan toimiviksi Flashilla. Selainpohjaisia pelejä, bannereita ja esityksiä oli tarjolla paljon. Tietoturvasyyt ja ongelmat yhteensopivuuksissa ovat kuitenkin laskeneet Flashin suosiota. Korvaajaksi suositellaan HTML5-animaatioita.

Koodi

Näissä esimerkeissä Flash-objektien upottamisessa on käytetty seuraavanlaista koodia attribuutteineen:


<
object
type=
"application/x-shockwave-flash"
data="esimerkki.swf"
width=""
height=""

param name="movie"
value="esimerkki.swf"

/object
>

Flash-animaatiot

Linkit avautuvat uusiin ikkunoihin.

  • #1 .swf
  • #2 .swf
  • #3 .swf

  • Vuonna 2003 kasatut ääntä ja kuvaa yhdistelevät animaatiot oli suunniteltu omistamani darklander.net sivuston introiksi.

GIF

Graphic Interchange Format eli GIF-tiedosto on häviötön bittikarttagrafiikan tallennusformaatti. Varsinkin pienissä selainpohjaisissa animaatioissa GIF toimii edelleenkin hyvin. Nettisivujen animoidut painikkeet ja pienet esitykset olivat myös aikoinaan hyvin laajalti käytössä. Tämän linkin takana esitellään painikkeiden mouseover-efektejä.

Animoitu GIF #1

Animointi

Esimerkin GIF-animaatio koostuu useasta peräkkäin asetetusta Photoshopilla muokatusta kuvasta. Vuodelta 2001 oleva omaa pärstää hyödyntävä animaatio on kasattu Jasc Animation Shopilla.

CSS3

Cascading Style Sheets (lyh. CSS, kirjaimellisesti ”porrastetut tyyliarkit”) on erityisesti WWW-dokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi. CSS-tiedostojen pääte on yleensä .css. CSS3 on CSS:n uusin versio, johon on lisätty paljon ominaisuuksia. Näistä osa korvaa Flashin ja Appletit.

Liikkuva laatikko

Tämä ei toimi Internet Explorerilla.

Animointi

Vasemmalla olevassa iframessa väriä vaihtava laatikko on luotu muutamalla rivillä koodia:


style 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
    animation: myfirst 5s linear 2s infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}


@keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
/style

DHTML ja HTML5

Staattiseen HTML-rakenteeseen voidaan lisätä toiminnallisuutta käyttämällä erilaisia DHTML-tekniikoita.

Pong

DHTML-peli

Pelkillä CSS-tyylimäärityksillä ja lyhkäisellä koodilla voidaan nettisivulle luoda vaikka selaimella pelattava vanha klassinen Pong-peli.

DHTML-valokirjaimet

HTML-sivun tekstiin voidaan luoda neon efekti käyttämällä javascriptiä:

HTML5

HTML5-kieli on uusi versio verkkosivujen tekemiseen yleisesti käytetystä HTML-merkintäkielestä. HTML5 julkaistiin virallisesti 28. lokakuuta 2014 eli siitä tuli W3C:n suositus. Uudistuksina HTML5:ssä ovat mm. uudet canvas-, video- ja audio-elementit sekä SVG-muotoisen sisällön näyttäminen ilman -tägin käyttöä. Muita lisäyksiä HTML:ssä ovat dokumentin semanttisuutta rikastuttavat section-, article-, header- ja nav-tägit ja uudet attribuutit tägien määrittelyyn ja selkeyttämiseen.

Tässäkin responsiivisessa sivupohjassa on hyödynnetty useita eri HTML5-tekniikkalla toteutettuja animoituja juttuja. Näitä ovat mm. kuvien/tekstien/ikonien häivytykset, painikkeet, vasemman sarakkeen linkit (mobiilissa näkyvät sivun ylälaidassa) ja sivun scrollaus.
Sivustollani www.janilehtola.eu on myös esillä HTML5-tekniikalla toteutettu animaatio sivun ylälaidassa.



Google Web Designer on ilmainen työkalu, joka soveltuu hyvin erilaisten animoitujen sisältöjen tekoon. Yllä olevasta kuvasta klikkaamalla avautuu uudelle sivulle animoitu mainosbanneri. Oulun ammattikorkeakoulun web-animaatiot opintojaksolla tehty yksi harjoitustehtävä tästä linkistä.



Adobe Animate CC on ehdoton ammattilaisen valinta. Ohjelmalla voi saada aikaiseksi todella näyttäviä animaatioita. Käyttöliittymä on Adoben tuoteperheen muita sovelluksia pyörittäneille helposti hallittavissa. Klikkaa kuvaa ja näet ohjelmalla vartissa kasaillun yksinkertaisen mainosbannerin.


HTML5-banneri värkkäilty kasaan Tweenui.comin online-työkalulla.