Responsiiviset HTML5-animaatiot

Abstract

Sivustoista tehdään nykyisin kaikille näyttökooille mukautuvia eli responsiivisia, mikä asettaa uusia vaatimuksia verkkosivujen sisällölle. Animaatio on yksi tällainen sisältötyyppi, jonka tekemiseen on olemassa valmiita ohjelmia, kuten Adoben Edge Animate ja Flash Professional. Molemmilla ohjelmilla voi toteuttaa HTML5-animaatioita. Tämä tutkimus selvittääkin, voiko alun perin Flash-animaatioiden tekoon tarkoitetun Flash Professionalin CC-versiolla toteuttaa animaatiot myös responsiivisesti kuten Edge Animatella, ja ennen kaikkea, miten responsiiviset animaatiot voidaan toteuttaa näillä ohjelmilla. Tutkimuksessa responsiivisia HTML5-animaatioita käsiteltiin ensin niiden taustalla vaikuttavien web-teknologioiden (HTML5, CSS3, JavaScript, jQuery) ja yleisesti responsiivisen suunnitteluun liittyvien tekniikoiden osalta. Yksityiskohtaisemmin tarkasteltiin responsiivista grafiikkaa. Lisäksi työssä vertailtiin Edge Animatea ja Flash Professionalia, joilla molemmilla toteutettiin tutkimustehtävänä kaksi animaatiota: infografiikka ja banneri. Niiden avulla selvitettiin responsiivisen animaatioon liittyvät tekniikat käytännössä. Tutkimus osoitti, ettei Flash Professionalista löydy tarvittavia ominaisuuksia responsiivisten animaatioiden tekoon. Näin ollen Edge Animate toimi ainoana ohjelmana niiden toteuttamistapojen selvittämisessä. Tutkimustehtävät tehtiin eri tavoilla mukautuviksi: infografiikka eli aikajana-animaatio skaalaantui kokonaisuudessaan ja bannerin leveyden osalta. Edge Animate osoittautui siis toimivaksi ja suhteellisen helpoksi ohjelmaksi responsiivisten animaatioiden toteutuksessa.

Websites are mostly responsive these days: they adapt to every screen size and that sets new requirements for the site content. An animation is one of these content types that can be made with a tool like Adobe Edge Animate or Flash Professional. HTML5 animations can be implemented with both packages. This thesis examined if it is also possible to implement responsive animations with the CC version of Flash Professional, which is originally made for Flash-content production. Edge Animate is namely made for responsive design, so the aim of the work was to study if it is really pre-eminent. And first and foremost, the thesis solved how responsive animations are possible to make with such software.

The work approached responsive HTML5 animations by processing the web technologies at their background (HTML5, CSS3, JavaScript, jQuery) and techniques related to general responsive design. Responsive graphics were observed in more detail. In addition Edge Animate and Flash Professional were compared to each other so that both were used to implement two animations: an infographic and a banner. The techniques related to responsive animations were studied with them in practice.

The examination proved that Flash Professional has not got the needed properties for making responsive animations. That is why Edge Animate worked as the only program for studying ways to implement that kind of animations. The examination tasks were made adaptive in different ways: the infographic, timeline animation, scaled as a whole and banner as regards to its width. Edge Animate was proven to be functional and relatively easy software for implementing responsive animations.