Multimedia

MERA09 lopputyö

Tee ylläolevan kaltainen mainosbanneri ja palauta se fla-tiedostona nimellä omanimi.fla osoitteeseen heikkilaakso@yahoo.com.

Flash tehtävät

1) Tee piirtotyökaluharjoitus.

2) Tee mainosbanneri.

3) Tee animaatioharjoitus.

4) Tee sivun yläreunan kaltainen mainosbanneri. Pysäytys: Lisää omalle tasolleen aikajanan loppuun avainkehys ja valitse oikealla Actions. Kirjoita stop();

Painikkeen teko: Insert, New Symbol, Button. Piirrä painike, lisää avainkehykset painikkeen eri tiloille ja muuta ulkonäköä eri kehyksissä. Sulje symboli napsauttamalla Scene 1. Valitse Library. Vedä painike stagelle. Valitse painike ja anna sille Properties -ikkunassa nimeksi nappi. Lisää omalle tasolleen aikajanan loppuun avainkehys ja valitse oikealla Actions. Kirjoita koodi:

nappi.addEventListener(MouseEvent.CLICK,vaao);
function vaao(event:MouseEvent):void
{
    navigateToURL(new URLRequest("http://www.vaao.fi"),"_blank");
}

Vedä Librarysta painike viimeiseen avainkehykseen ja anna Properties- välilehdestä sen nimeksi nappi.

5) Tee animaatio, jossa on muodonmuutos (Shape tween). Tee esimerkiksi sykkivä sydän.

6) Tee animaatio, jossa on ympyrämäinen liike.

7) Tee animaatio, jossa pallo "pomppii" seinästä seinään.

8) Tee tikku-ukkoanimaatio.

9) Tee animaatio valmiita malleja käyttäen (Window, Motion presets).

10) Selvitä Bone-työkalun käyttö ja tee sillä tikku-ukkoanimaatio.

Tee tehtävät 5-10 samaan tiedostoon eri tasoille ja palauta.

11) Tee painikesymboli ilman tekstejä ja lisää stagelle 4 esiintymää (Instance). Anna esiintymille nimet ja liitä niihin haluamasi linkit tehtävän 4 mallin mukaan. Kirjoita painikkeille tekstit omalle tasolleen. Anna tiedostolle nimeksi linkit.

12) Liitä edellisen tehtävän linkit.swf www-sivulle.

Ohjeita

Motion tween

1. Tee uusi Flash File (ActionScript 3.0).
2. Piirrä stagelle kuvio.
3. Valitse kuvio nuolella.
4. Valitse hiiren oikealla näppäimellä Create Motion Tween. 
5. Flash pyytää muuttamaan kuvion symboliksi ja luo sitten 24 framea ts. kehystä eli yhden sekunnin pituisen ajanjakson.
6. Siirrä kuviota nuolella.
7. Muokkaa käyrää vetämällä sitä hiirellä.
8. Hidasta animaatiota vetämällä viimeisen framen oikeasta reunasta. Flash luo uusia kehyksiä.

Käyrän muokkaus: Valitse kehys aikajanan puolesta välistä. Valitse kuvio, älä liikerataa. Siirrä kuvio toiseen paikkaan. Käyrän kaarevuutta voi muuttaa valitsemalla Pen Tool, Convert Anchor Point Tool. Vedä käyrän päätepisteistä.

Shape tween

1. Piirrä stagelle kuvio.
2. Lisää avainkehys aikajanalle (Insert keyframe)..
3. Muuta kuvion muotoa tai korvaa kuvio toisella.
4. Siirry kehykseen 1.
5. Valitse kuvion kohdalla hiiren oikealla Create Shape Tween.
6. Voit lisätä uusia avainkehyksiä ja Shape Tween-toimintoja aikajanalle.

Kehysanimaatio

1. Piirrä jotain
2. Lisää avainkehys
3. Muuta piirrosta
4. Jatka samaan tapaan.

DAT09 harjoitustyö 1

Toteutuksen vaiheet:

• Luo sivustollesi kansio ja sen sisään kansio kuville
• Luo sivusto (Site)
• Luo sivumalli (template)
• Tee sivuja malliin perustuen
• Etusivun nimi pitää olla index.html
• Ohje

Rakenna matkailusivusto. Sivuston pitää perustua malliin. Sivuja on etusivun lisäksi 8, kaikissa on kuvia. Lisää etusivulle Flash-banneri, jossa kohteiden kuvat vaihtuvat. Yhden kohteen pitää näkyä yksin 3 sekunnin ajan ennen kuin vaihtuminen alkaa. Lisää myös pikkukuvat, joista on linkki joko kohdesivuille tai isoihin kuviin. Ota googlemapsin maailmankartasta kuvankaappaus (Prnt Scrn), liitä se Photoshopiin , rajaa kuva, merkitse matkakohteet karttaan ja tallenna se sivustosi kuvakansioon jpg-muodossa. Lisää kartta etusivulle ja lisää siihen linkkialueet. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com. Esimerkki. Harjoitusmateriaali. DreamWeaverin malli.

Arvioitavat asiat:

• Sisältö
• Muotoilutyylien ja sivumallin käyttö
• DreamWeaver
• Kuvien käyttö
• Photoshop
• Illustrator
• Bannerin toteutus
• Flash

 

DAT09 harjoitustyö 2

1. Muuta harjoitustyö 1:n mallia siten, että kohteet ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa.
2. Tee kohdelinkit CSS Menu Builderilla.
3. Tee kuvagalleria Lightboxilla.
4. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com.

DAT09 harjoitustyö 3

Suunnittele sivusto jollekin tapahtumalle, esimerkiksi rockfestivaalille. Tee sivusto käyttämällä jotain Dreamweaverin valmista mallia. Muokkaa mallin värimaailmaa. Lisää Spry-navigointivalikko ( Insert, Spry, Spry Menu Bar ).Tee esimerkiksi aikataulusivulle haitari ( Insert, Spry, Spry Accordion ) ja eri lavoille välilehdet ( Insert, Spry, Spry Tabbed panels ). Esiintyjille voi tehdä linkit omille sivuille, esiintyjäsivulle voi myös upottaa Youtube-videoita. Tarvitaan myös karttoja, ajo-ohjeita, ravintoloita ym. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com.