ANIMAATIO JA PELIT: lokakuuta 2013

NGpk11

Tällä kurssilla teemana on sosiaalisen median työkalujen avulla tapahtuva verkkoviestintä ja markkinointi.

*Valmiit tehtävät tallennetaan Yhteiset > Verkkoviestintä2 > kansioon, jolle annetaan nimeksi oma nimi.*

Julkaisuvälineitä

Tehtävä 1.

Kirjoita vastaukset seuraaviin kysymyksiin Word-dokumenttiin:

BitTorrent Sync ja Google Drive
Mitä niillä voi tehdä ja miten ne eroavat toisistaan?

Issuu ja Prezi
Mitä niillä voi tehdä ja miten ne eroavat toisistaan?

MailChimp
Mihin sitä käytetään?

Blogit ja Wix
Mitä niillä voi tehdä ja miten ne eroavat toisistaan?

Skype ja WhatsApp
Mitä niillä voi tehdä ja miten ne eroavat toisistaan?

Facebook
Miten yritys voi tehdä oman sivun Facebookiin? Miten Facebookissa voi mainostaa ja mitä se maksaa? Voiko mainontaa kohdentaa tietyille ryhmille ja miten?

deviantART
Mihin sitä käytetään?

Tehtävä 2.

Mitä edellämainituista sovelluksista itse käytät? Mihin tarkoituksiin? Käytätkö joitain muita sovelluksia, joita pidät parempina? Miksi ne ovat mielestäsi parempia?

Tekijänoikeudet

Tutustu tekijänoikeuksiin täällä:

https://wiki.aalto.fi/display/copyright/Muotoilu%2C+arkkitehtuuri+ja+graafinen+suunnittelu

Kirjoita vastaus seuraavaan kysymykseen Word-dokumenttiin:

Tehtävä 3.

Creative Commons
Mistä on kysymys ja mitä hyötyä siitä voi olla?

Nettisivupohjan tekeminen Photoshopilla

*Tätä tehtävää ei tarvitse tehdä, jos olette aiemmilla kursseilla käyneet asian läpi*

Tehtävä 4.

Tehtävä käydään ensin tunnilla yhdessä läpi.

Tee itse tai etsi Internetistä kuva, jota haluat käyttää verkkosivujen pohjana. Avaa se Photoshopiin.

Huomioi kuvan koko, esim. 1024x768 kuvasta näkyy selainikkunassa 955x600.

Lisää kuvaan tarvittaessa läpinäkyvyyttä.

Jaa kuva tarvittaviin osiin (napit, otsikot, yms.) Slice-työkalulla. Kuva muutetaan osien mukaiseksi taulukoksi tallennettaessa.

Valitse File-valikosta Save for Web & Devices. Valitse kuvaformaatti ja säädä laatu.

Pelien julkaiseminen verkossa

Kirjoita vastaus seuraavaan kysymykseen Word-dokumenttiin:

Tehtävä 5.

Etsi kolme ohjelmaa, joilla voi tehdä verkossa pelattavia pelejä eri käyttöjärjestelmille. Miten ne eroavat toisistaan? Ovatko ne maksullisia?

Sähköinen lehti

Tunneilla tutustutaan Issuu -julkaisusovellukseen ja sen käyttömahdollisuuksiin.

Tehtävä 6.

Suunnitellaan ja toteutetaan NGpk11 -ryhmän oma lehti, joka julkaistaan Issuussa. Tehtävä tehdään pienryhmissä, jotka vastaavat tekstin ja kuvien tuottamisesta, sekä taitosta. NGpk10 -ryhmä tuottaa sarjakuvan lehteen.

Tehtävä aloitetaan yhteisellä suunnitelukokouksella, jossa ideoidaan lehden sisältö ja sivumäärä, sekä sovitaan taittoon ja ulkoasuun liittyvistä asioista.

Projektilla on Facebookissa suljettu ryhmä SÄKKITUOLI.

Pojektinhallintadokumentti, jossa on määritelty projektin tehtävät ja käytännöt, löytyy Yhteiset > Verkkojulkaisu2 > Lehtiprojekti.docx. Dokumenttia päivitetään projektin edetessä.

Uuutiskirjeet (Newsletters)

Mailchimp (www.mailchimp.com) on ohjelma uutiskirjeiden tekemiseen ja postittamiseen. Käyttäjätunnuksen tekeminen on ilmaista.

Klikkaamalla ohjelman etusivun yläreunassa Support saat näkyviin Mailchimpin omat ohjeet postituslistojen (Lists), uutiskirjeiden (Newsletters) ja kampanjan (Campaigns) tekemisestä.

Kun olet kirjautuneena omalle sivullesi, voit aloittaa uuden kampanjan klikkaamalla oikeassa reunassa Create Campaign ja valitsemalla kampanjatyypin. Seuraavaksi kysytään mille postituslistalle uutiskirjeet lähetetään, joten jos et ole vielä tehnyt yhtään listaa klikkaa vasemmassa reunassa Lists.

Postituslistalle voi lisätä vastaanottajia yksitellen tai esimerkiksi exel-tiedostoista.

Kun lista on tehty kampanjan määrittämistä voidaan jatkaa (klikkaa uudelleen Create Campaign).

Seuraavaksi kampanjalle annetaan nimi ja määritellään mm. lähettäjä, lähettäjän sähköpostiosoite ja viestin aihe.

Sitten suunnitellaan uutiskirjeen ulkoasu. Voit käyttää omia aikaisemmin tekemiäsi pohjia, käyttää valmiita malleja, tai aloittaa suunnittelun tyhjästä ja käyttää nettisivustosi ulkoasua suunnittelun pohjana.

Tämän jälkeen tarkistetaan miltä uutiskirjeesi näyttää tekstinä, jos vastaanottaja ei voi tai halua vastaanottaa html-sisältöä.

Lopuksi lähetetään kampanjan uutiskirjeet.

Mailchimp tarjoaa runsaasti tilastotietoa kampanjan etenemisestä ja tuloksista (Reports).

Täällä hyvä ohje:

http://redrokk.com/2013/02/25/tutorial-email-marketing-campaign-mailchimp/

Ja täällä suomeksi:

http://outinecommerce.blogspot.fi/2012/02/mailchimp-ohjeistukset-screencastina.html

Tehtävä 7.

Tee MailChimp -sovelluksessa postituslista, suunnittele ja toteuta mainoskanpanjan visuaalinen ulkoasu tekemällä se itse tai käyttämällä valmiita malleja, ja toteuta kampanja.

Portfolio

Tunneilla tutustutaan Wix -nettisivujentekosovellukseen, ja pohditaan sen soveltuvuutta esimerkiksi oman portfolion toteuttamiseen.

Tehtävä 8.

Tee itsellesi oma portfolio Wix-sovelluksella.

Adobe Flash

Tämä tehtävä on vapaaehtoinen.

Tunneilla käydään läpi Flash-ohjelman käyttöliittymä, tehdään tuntiharjoituksia, nappien tekeminen ja ohjelmointi, sekä harjoitellaan www-sivujen ja käyttöliittymän tekoa.

Tuntiharjoituksia:

Graafinen symboli
- piirrä haluamasi kuvio tai tuo kuva File-valikon Import-komennolla
- valitse piirros tai kuva
- muuta se graafiseksi symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)
- siirrä symboli työskentelyalueen vasempaan reunaan
- klikkaa kuvapaikkaa 100
- kopioi edellinen pääkuva (kuvapaikasta 1) painamalla näppäintä F6
- siirrä symboli (kuvapaikassa 100) työskentelyalueen oikeaan reunaan
- klikkaa kuvapaikkaa 1 hiiren oikealla napilla ja valitse Create Classic Tween
- paina Enter-näppäintä niin symbolisi lähtee liikkeelle

Kiihtyvyys ja hidastuvuus
- klikkaa kuvapaikkaa 50
- kopioi edellinen pääkuva (kuvapaikasta 1) painamalla näppäintä F6
- klikkaa kuvapaikkaa 1
- muuta oikeassa reunassa (Properties > Tweening) Ease-arvoksi -100 (Ease In = kiihtyvyys)
- klikkaa kuvapaikkaa 50
- muuta oikeassa reunassa (Properties > Tweening) Ease-arvoksi 100 (Ease Out = hidastuvuus)
- paina Enter-näppäintä niin symbolisi lähtee liikkeelle

Läpinäkyvyys
- klikkaa kuvapaikkaa 1
- klikkaa graafista symbolia (valitse se)
- valitse oikeassa reunassa (Properties > Color Effect) Style.pudotusvalikosta Alpha ja säädä sen arvoksi 0 %
- klikkaa kuvapaikkaa 100
- klikkaa graafista symbolia (valitse se)
- valitse oikeassa reunassa (Properties > Color Effect) Style.pudotusvalikosta Alpha ja säädä sen arvoksi 0 %
- symbolisi on nyt animaation alussa ja lopussa läpinäkyvä

Polku

- piirrä kärpänen

- muuta se graafiseksi symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)

- klikkaa kärpäsen Layeriä hiiren oikealla napilla ja valitse Add Classic Motion Guide

- piirrä uudelle Guide Layerille mutkitteleva viiva työskentelyalueen vasemmasta alareunasta oikeaan yläreunaan

- klikkaa kuvapaikkaa 50 ja tee uusia välikuvia painamalla näppäintä F5

- valitse kärpäsen Layer klikkaamalla sitä hiiren vasemmalla napilla

- siirrä kärpäsen symboli viivan päälle vasemmassa alareunassa, mistä viiva alkaa

- klikkaa kuvapaikkaa 50 ja kopioi pääkuva painamalla näppäintä F6

- siirrä kärpäsen symboli viivan päälle oikeassa yläreunassa, minne viiva loppuu

- klikkaa kärpäsen Layerin ensimmäistä kuvapaikkaa hiiren oikealla napilla ja valitse Create Classic Tween

- piilota polku (viiva) klikkaamalla hiiren vasemmalla napilla pientä palloa silmän kuvan alapuolella Guide Layerillä

Napin ulkoasu

- voit tehdä napin piirroksesta, tekstistä tai kuvasta

- valitse piirroksesi/tekstisi/kuvasi

- muuta se Button-symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)

- tuplaklikkaa Button-symbolia, niin pääset symbolin editointitilaan

- kuvajanalla on vain neljä kuvapaikkaa: Up, Over, Down ja Hit

- Up-kuvapaikassa määritellään miltä nappi näyttää, kun mitään ei tapahdu

- Over-kuvapaikassa määritellään miltä nappi näyttää, kun hiiren kursori on napin päällä

- Down-kuvapaikassa määritellään miltä nappi näyttää, kun hiiren kursori on napin päällä ja hiirtä klikataan

- Hit-kuvapaikassa määritellään napin vaikutusalue (tämä ei näy käyttäjälle)

- muuta napin ulkoasua haluamallasi tavalla (muista: F6 kopioi edellisen pääkuvan, F7 tekee uuden)

- pääset pois napin editointitilasta klikkaamalla Scenen nimeä vasemmassa yläreunassa

Napin äänet

- tuplaklikkaa Button-symbolia, niin pääset symbolin editointitilaan

- tee napille uusi Layer vasemman alanurkan New Layer-painikkeella

- ääniä kannattaa laittaa vain Over ja Down kuvapaikoille

- tuo haluamasi äänet File > Import > Import to Library)

- tee uudet pääkuvat uudelle Layerille Over ja Down kuvapaikalle klikkaamalla kuvapaikkaa ja sitten painamalla F7

- klikkaa Over-kuvapaikan pääkuvaa uudella Layerillä (valitse se)

- valitse oikeassa reunassa (Properties > Sound) Name-pudotusvalikosta haluamasi ääni

- toista sama Down.kuvapaikassa

- pääset pois napin editointitilasta klikkaamalla Scenen nimeä vasemmassa yläreunassa

Napin testaaminen

- valitse Control-valikosta Enable Simple Buttons

- nyt nappisi toimii

Napin Actionscript

- valitse Button-symboli klikkaamalla sitä

- valitse Window-valikosta Actions

- avaa vasemman reunan Global Functions-valikko klikkaamalla sen vasemmalla puolella olevaa pientä nuolta

- avaa Movie Clip Control-valikko samalla tavalla

- tuplaklikkaa valikon on-komentoa

- valitse ilmestyvästä parametrivalikosta release tuplaklikkaamalla sitä

- koodi-ikkunassa pitäisi näkyä on (release) { }

- klikkaa aaltosulkujen välissä (seuraava komento lisätään sinne)

- avaa vasemman reunan Browser/Network-valikko klikkaamalla sen vasemmalla puolella olevaa pientä nuolta

- tuplaklikkaa valikon getURL-komentoa

- kirjoita koodi-ikkunassa komennon kaarisulkujen väliin lainausmerkeissä haluamasi nettiosoite (esim. "http://www.google.fi")

- jos käytät nappia sähköpostin lähettämiseen kaarisulkujen väliin kirjoitetaan lainausmerkeissä mailto: ja sähköpostiosoite (esim. "mailto:etunimi.sukunimi@sataedu.fi")

- jos haluat avata napista toisen nettisivun kaarisulkujen väliin kirjoitetaan lainausmerkeissä tiedoston nimi (esim. "etusivu.html")

- jos napista siirrytään toiseen Frameen tai Sceneen, käytetään komentoa gotoAndPlay tai gotoAndStop (esim. gotoAndPlay (1) tai gotoAndPlay ("tokascene",1)

- parasta on kuitenkin nimetä (Label) kuvapaikat joihin hypätään eli klikkaa kuvapaikkaa ja kirjoita sille nimi kohdassa Properties > Label > Name ja käytä sitten komentoa gotoAndPlay ("nimi")

VALOKUVAUSKOULUTUKSEN BANNERI

Banneri mainostaa Sataedun tammikuussa alkavaa, aikuisille suunnattua valokuvauskoulutusta.

Banneri tulee Kamera-lehden sivuille (http://www.kamera-lehti.fi/banneripaikat/)

Bannerin koko: 140 x 350 px (suurtaulu)

Bannerissa kannattaa lukea klikkaa tästä tai klikkaa, tutkitusti se toimii.

Bannerissa toimii sama sääntö kuin ulkomainonnassa. Kun mitään ei voi ottaa pois, se on valmis.

Mahdollisimman vähän liikkuvia osia ja animaatiota! Mutta esim. kahden kuvan karuselli on vielä ok.

Ulkoasusta ja sisällöstä: te tunnette mahdolliset hakijat. Mikä heidät sytyttää! Käyttäkää sitä.

Banneri on näkyvillä kaksi viikkoa.

Linkki suoraan valokuvauksen sivulle: www.sataedu.fi/valokuvaus

Tehtävä 9.

Benchmarkkaa valokuvaukseen liittyviä nettisivustoja, mainoksia ja kuvia. Mieti miten voisit visuaalisesti (kuvina) esittää valokuvauksen ja koulutuksen bannerissa.

Ideoi ja tee konsepteja bannerista.

Tarjoamme asiakkaalle 2-3 parasta vaihtoehtoa png tai gif-tiedostoina.

QR-KOODI

Täällä saat helposti tehtyä qr-koodeja:

http://goqr.me/

Koodin lukuapplikaation saat ladattua ilmaiseksi oman älypuhelimesi kauppapaikasta.

Tehtävä 10a.

Tee qr-koodi, jonka lukemalla pääsee Wixillä tehtyyn portfolioosi.

Tehtävä 10b.

Tehkää kolmen ryhmissä Adobe Flashillä qr-koodeja käyttävä tietovisa. Visassa pitää olla kymmenen omaan ammattialaan liittyvää kysymystä, joiden vastaukset löytyvät qr-koodien kautta puhelimeen avautuvilta nettisivuilta. Jokaiseen kysymykseen on kolme vastausvaihtoehtoa. Visan lopussa ilmoitetaan prosentteina, kuinka moneen kysymykseen osasi vastata oikein.

Esimerkkitiedosto QrVisa.fla, jossa on kommentoidut koodirivit, löytyy Yhteiset > Verkkoviestintä2 > QrVisa -kansiosta.

Miettikää ensin visaan tulevat nettisivut, kysymykset, ja jokaiseen kysymykseen kolme vastausvaihtoehtoa.

Tehkää qr-koodit.

Suunnitelkaa visan ulkoasu.

Käynnistä Flash ja avaa uusi ActionScript 2.0 -dokumentti.

Uusia kuvapaikkoja saa tehtyä näin: F5 = välikuva, F6 = kopio edellisestä pääkuvasta, F7 = tyhjä pääkuva.

Uusia layereitä saa tehtyä Layer-ikkunan vasemman alareunan kuvakkeella.

Tarvitaan kolme layeriä, joista ensimmäisellä ovat tausta ja otsikko (pelin nimi).
- tausta voi olla yksivärinen tai kuva, jonka saa tuotua File > Import > Import to Stage
- otsikko on kirjoitettua tekstiä

*** Kaikille käyttämillesi fonteille pitää tehdä Embed -toimenpide joka sisällyttää ne osaksi Flash-dokumenttia. Tämän saat tehtyä klikkaamalla Embed -painiketta Properties-välilehdellä, kun sinulla on tekstityökalu käytössä ja haluamasi fontti valittuna. Valitse sitten klikkaamalla tarvitsemasi versiot fontista (esim. Upper Case jne.) kohdasta Character Ranges. Klikkaa Ok ***

Toiselle layerille tulevat qr-koodikuvat,kysymykset, vastausvaihtoehdot, dynaamiset tekstikentät ja napit. Jokaisella vastausvaihtoehdolla on oma tekstikenttä ja vastausnappi. Jokaisella kysymyssivulla on nappi, jolla pääsee siirtymään seuraavaan kysymykseen (seuraavalle sivulle eli seuraavaan kuvapaikkaan). Viimeiselle sivulle tulee vain yksi tekstikenttä ja paluunappi, jolla pääsee visan alkuun.
- tuo qr-koodikuvat File > Import > Import to Library. Raahaa ne Library-välilehdeltä oikeille kysymyssivuille sitä mukaa kun visan tekeminen etenee
- kysymykset ovat kirjoitettua tekstiä
- vastausvaihtoehdot ovat kirjoitettua tekstiä
- tekstikentän saat tehtyä tekstityökalulla vetämällä hiirtä vasen nappi pohjassa. Kun tekstikenttä on valittuna vaihda oikean yläreunan Properties-välilehdellä tekstikentän tyypiksi Dynamic Text.Kirjoita tekstikentälle nimi Identifier-kenttään (esim. teksti1). Tee samat asiat kaikille tekstikentille.
- voit tehdä napit itse tai käyttää valmiita nappeja, jotka löytyvät Window > Common Libraries > Buttons. Raahaa sitten valitsemasi napit Library-välilehdelle. Napit saa käyttöön raahaamalla ne kirjastoikkunasta työskentelyalueelle. Tarvitaan kolme erilaista nappia: vastausnappi, nappi jolla siirrytään seuraavaan kysymykseen ja nappi jolla pääsee palaamaan alkuun viimeiseltä sivulta. Nappeihin tarvittavat koodit saat esimerkkitiedostosta (huom! oikea vastaus -napin koodi on erilainen kuin väärä vastaus -napin). Valitse nappi klikkaamalla, avaa koodi-ikkuna (Window > Actions) ja liitä koodi esimerkkitiedostosta nappiin (Copy > Paste)
- nappeihin tarvitaan myös pari äänitiedostoa, jotka saat tuotua Import > Import to Library.
- vaihda tarvittaessa nappien koodista tekstikenttien Identifier -nimet ja äänitiedostojen nimet

*** Kaikille äänitiedostoille pitää tehdä Embed -toimenpide joka sisällyttää ne osaksi Flash-dokumenttia. Tämän saat tehtyä klikkaamalla Library-välilehdellä äänitiedostoa hiiren oikealla napilla ja valitsemalla Properties, sitten valitse ActionScript -välilehti ja klikkaa Export for Actionscript -valintakytkin päälle (kohdassa Linkage). Klikkaa Ok ***

Kolmannelle layerille tulee pelkkää koodia, joka laitetaan kuvapaikkoihin.
- valitse kuvapaikka klikkaamalla, avaa koodi-ikkuna (Window > Actions) ja liitä koodi esimerkkitiedostosta kuvapaikkaan (Copy > Paste)

Testaa visa valitsemalla Control > Test Movie > in Flash Professional.

MAINONTA FACEBOOKISSA

Käy läpi Facebook-mainoskampanjan tekemisen vaiheet.

Mainonta Facebookissa (www.facebook.com) on tehokasta ja edullista. Alkuun pääset valitsemalla asetukset (rattaankuva) ja sieltä mainosta.

Tehtävä 11a.

Jos sinulla on yritys, mutta sillä ei vielä ole omaa sivua, voit tehdä sen täällä (Asetukset > Mainosta > Vaihe 1: Suunnittele Facebook-sivu). Jos sinulla ei ole omaa yritystä niin keksi sellainen ja tee sille sivu.

Facebookissa yksityishenkilön seinä, yrityksen sivu, ryhmä ja tapahtuma näyttävät periaatteessa samanlaisilta, mutta sisältö ratkaisee.

Tehtävä 11b.

Mieti, mitä tuotteita yrityksesi tekee ja kenelle.Tee sitten mainoskampanja, jossa mainostat miettimällesi kohderyhmälle yrityksesi tuotteita Pirkanmaalla järjestettävillä messuilla.

Klikkaamalla Luo useita mainoksia (Asetukset > Mainosta > Vaihe 2: Luo yhteys ihmisiin) pääset aloittamaan. Aseta ensin kampanjallesi tavoite, kerro mitä sivua haluat mainostaa, ja valitse kohderyhmä sijainnin, iän, kiinnostusten yms. perusteella. Täällä voit myös asettaa kampanjasi budjetin.

Lisäksi saat käyttöösi raportteja ja kaavioita, joilla voit seurata kampanjasi etenemistä ja sen tuloksia.

Tässä Facebookin omat ohjeet mainosten tekemiseen:

https://www.facebook.com/business/connect

SIVUSTON NÄKYVYYDEN PARANTAMINEN GOOGLESSA

Sivuston näkyvyyden parantaminen Googlessa (www.google.fi) onnistuu pienilläkin parannuksilla. Kuitenkin, mitä syvemmälle asiassa menee sitä monimutkaisemmaksi asia muuttuu.

Tässä asioita, jotka vaikuttavat siihen, miten esimerkiksi Google löytää nettisivusi:

1. Sivuston kieli (käytätkö samoja sanoja kuin hakukoneen käyttäjät)
2. Tärkein sisältö tekstinä!
3. Kuvat, videot ja äänet ovat hakukoneille hankalia (näillä pitäisi olla myös kuvaava nimi alt-parametrilla)
4. Muiden linkit sivustoosi parantavat näkyvyyttä.
5. Testaa, miltä sivustosi näyttää Googlen cache-toiminnolla (tällaisina hakukone "näkee" sivusi)
6. Hakukoneen pitää päästä sivustosi jokaiselle sivulle (linkitys kuntoon)
7. Tärkeimmät hakusanat sivun otsikkoon ja sivun alkuun
8. Meta-kuvaus sivustosta
<head>
<meta name="description" content="Here is a description of the applicable page">
</head>
9. Sivuston osoitteen on hyvä olla lyhyt (www.url.fi)
10. Sivuston rakenteellinen, mahdollisimman kuvaileva ohjelmointi (hakukoneoptimointilinkki chapter 4)

Kattava selvitys hakukoneoptimoinnista:

http://www.seomoz.org/beginners-guide-to-seo

Tässä mainio ohje näkyvyyden parantamiseen:

http://helsinkipromo.com/internet-nakyvyys-ilmaiseksi/

Ja tässä Googlen oma virallinen ohje verkkovastaaville:

https://support.google.com/webmasters/answer/35769?hl=fi

Tehtävä 12a.

Etsi esimerkki sivustosta, joka on optimoitu huonosti. Etsi myös esimerkki sivustosta, joka on optimoitu hyvin. Perustele valintasi!

Tehtävä 12b.

Tarkista oman Wixillä tehdyn portfoliosivustosi näkyvyys Googlessa. Käy läpi vaiheet 1-10 ylläolevasta luettelosta.

ANIMAATIO JA PELIT

maanantai 7. lokakuuta 2013

MAX3Dn pikanäppäimiä

tiistai 1. lokakuuta 2013

VERKKOVIESTINTÄ 2