Responsiivisen videon upottaminen Moodleen

Moodleen ohjeistetaan usein upottamaan videoita iframe-upotuskoodilla. Upotuskoodin pystyy yleensä luomaan videoalustalla. Jos videoita katsotaan eri laitteilla, ongelmaksi voi muodostua se, että upotuskoodiin on usein määritelty kiinteät width- ja height-määreet, joten ne eivät käyttäydy responsiivisesti niille videoille varattun tilan mukaisesti. Vimeossa ongelman voi välttää valitsemalla upotuskoodia tehtäessä responsive-asetuksen, mutta esimerkiksi Youtubessa vastaavaa asetusta ei kirjoitushetkellä ole. … Lue lisää

Kategoriat Moodle Avainsanat , , ,

WordPress-käyttöliittymän valikot

WordPressin hallintapaneelin (dashboard) käyttöliittymä voi aluksi tuntua hieman sekavalta, mutta yleensä sen periaatteet avautuvat käytännön työn kautta. Käyttöliittymän valikot on nimetty jokseenkin loogisesti, joten usein toiminnot alkavat löytyä, kun lukee valikkojen tekstit ja pohtii, mikä niistä liittyy tekemääsi työvaiheeseen. Alla olevassa H5P-demossa pyritään kuvaamaan valikoiden toimintoja ja käyttöliittymän logiikkaa. Käyttöliitymän toimintaa kuvataan vain ensimmäisen tason … Lue lisää

Kategoriat Web Avainsanat

Kuvan pakkaaminen verkkoa varten

Tämän artikkelin tarkoitus on antaa yleiskuva, miksi ja miten kuvaa pakataan verkkoviestintää varten. Käymme myös läpi tärkeimmät tiedostotyypit. Miksi kuvia pakataan Mediatiedostoja pakataan, koska pakkaamaattomat mediatiedostot ovat suuria ja niiden siirtäminen verkossa sellaisenaan olisi hidasta ja rasittaisi yhteyksiä tarpeettomasti. Pakkaamisen periaate on , että laatua huononnetaan siten, ettei ihmisen aistit huomaa eroa. Äänistä pyritään poistamaan … Lue lisää

Kategoriat Web Avainsanat , , ,

Photoshop-animointi: Ruutuanimaatio

Photoshop on tunnetumpi kuvankäsittelyn ominaisuuksistaan kuin animaatio-ohjelmana, mutta ohjelmassa on myös animaation tekoon tarkoitettu Aikajana-paneeli (Timeline panel). Paneelissa on mahdollista tehdä ruutu (frame) kerrallaan piirrettäviä ruutuanimaatioita tai keyframeihin perustuvia aikajana-animaatioita. Tämän ohjeen tavoiteena on antaa yksi käytännön esimerkki GIF-animaation tekemisestä Photoshopilla. Ruutuanimaation tekeminen Tässä esimerkissä käytämme osoitteesta https://freesvg.org/walking-man-figure löytyvää spritesheetia, jota sai kirjoitushetkellä käyttää ilmaiseksi. … Lue lisää

Kategoriat Photoshop Avainsanat , ,

Näin teet Wix-portfolion

wix-portfolio

Wix.com on julkaisujärjestelmä, jolla voi tehdä omat verkkosivut. Alkuun pääsee ilmaiseksi, mutta aika pian käytön jälkeen on siirryttävä maksavaksi asiakkaaksi, koska oman domainin ja useiden käyttökelpoisten laajennusten käyttö on maksullista. Samankaltaisia palveluja ovat esimerkiksi LiquidBlox, Squarespace ja Weebly. Wixin eduksi on usein katsottu käytön helppous ja heikkoudeksi toimintojen rajallisuus.

Kategoriat Web Avainsanat , ,

Adobe Animate -animaation tekeminen

Tässä artikkelissa kerrotaan, miten animaatioita voi tehdä Adobe Animatella, mutta monet periaatteet soveltuvat myös muihin animaation tekemisen ohjelmiin.

Adobe Animate on animaatio-ohjelma, jolla voi tehdä esimerkiksi HTML5-bannereita tai mainosanimaatioita videotauluihin. Usein printti- tai verkkomedian puolelta tulevien tekijöiden on ollut helppoa omaksua animaation perusteita Adobe Animaten kautta. Erilaisia animaatio-ohjelmia on ladattavissa runsaasti. Animate on järkevä valinta, jos käyttäjällä on kokemusta Adoben ohjelmista ja etenkin jos Photoshop tai Illustrator on hallussa.

Kategoriat Animate Avainsanat , ,

Classic Tween -animaation tekeminen

Classic tween on Adobe Animaten tweeneistä useimmille helpoin omaksua. Sitä voi käyttää animaatioissa, joissa on suoraviivaisia ja -kulmaisia liikkeitä. Yläpuolella olevaa simppeliä lentokone-animaatiota varten on ensin tehty uusi HTML5-animaatio, jonka stagen koko on 400px 400 px. Tämän jälkeen stagelle on tuotu taustan pilvet ja etualalla liikkuva potkurikone omille layereilleen. Sen jälkeen animaation voi tehdä seuraavissa vaiheissa:  Lisää 20 framea Timelinelle klikkamalla … Lue lisää

Kategoriat Animate Avainsanat , ,

Motion Tween -animaation tekeminen

Adobe Animaten Motion Tween -animaatio soveltuu parhaiten kaareviin liikeratoihin, joissa animoidaan erikseen useita ominaisuuksia. Se on Adobe Animaten tweeneistä monipuolisin, mutta myös vaikein oppia. Yllä näkyvän yksinkertaisen raketin liikkeen voi toteuttaa Motion Tween-animaationa alla kuvatulla tavalla. Sitä varten on ensin luotu uusi HTML5-animaatio, jonka stagen leveys ja korkeus on 500 px. Tämän jälkeen stagelle on tuotu … Lue lisää

Kategoriat Animate Avainsanat , ,

Shape Tween -animaation tekeminen

Shape tween soveltuu animaatioihin, joissa vektorigrafiikan muoto muutetaan joksikin toiseksi. Tästä on käytetty myös morph-animaatio-nimitystä. Muista Adobe Animaten tweeneistä poiketen shape tweeniä käytettäessä animoitavaa grafiikkaa ei tule konvertoida symboliksi, vaan se täytyy muuntaa vektorimuotoon. Alla on yksinkertainen esimerkki, jossa tanssijan hahmo muuttuu R-kirjaimeksi. Animaatiota varten on ensin tehty uusi Animate-tiedosto, jonka stagen koko on 400px … Lue lisää

Kategoriat Animate Avainsanat , ,