Multimedia

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 piirrä siihen hotspotit linkkeineen. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com.

• Esimerkkisivusto
• Harjoitusmateriaali
• DreamWeaverin malli

1. Muuta harjoitustyö 1:n mallia siten, että navigointilinkit ovat vasemmassa palstassa, tiedot keskellä ja paikalliset linkit oikeassa palstassa. Ohje: Siirrä linkit allekkain, valitse linkit, valitse Insert Div Tag, lisää uusi ID nimellä Navigointi ja valitse New CSS rule, muuta Box leveydeksi esim. 10% ja Float Left. Tee samaan tapaan kaksi muuta lohkoa, joiden leveydet ovat 80% ja 10%.
2. Tee navigointilinkit uudestaan CSS Menu Builderilla.
3. Tee etusivulle kuvagalleria Lightboxilla.
4. Pakkaa sivustokansio zip-muotoon ja palauta osoitteeseen heikkilaakso@yahoo.com.

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.

1) Tee piirtotyökaluharjoitus.

2) Tee mainosbanneri.

3) Tee animaatioharjoitus.

4) Tee MERA09 lopputyön 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.

Bonustehtävä. Suunnittele oma animaatio, esimerkiksi biljardipöytä.

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.

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.

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

 

Tallenna sivustopaketti koneellesi ja pura se hiiren oikealla näppäimellä. Siirrä omat swf-tiedostosi flash-kansioon. Avaa tiedosto index.html Dreamweaver -ohjelmalla. Noudata ohjeita. Muuta sivun ulkonäköä CSS STYLES-paneelista. Avaa muutkin sivut ja noudata niiden ohjeita. Testaa muutettu sivusto F12-näppäimellä. Lähetä flash-kansio lopuksi pakattuun kansioon ja palauta osoitteeseen heikkilaakso@yahoo.com..