Lue, miten voit käyttää liikkeen ja peittävyyden vieritystehosteita sivuelementeissä Adobe Musessa.

Huomautus:

Adobe Museen ei enää lisätä uusia ominaisuuksia ja sen tuki päättyy 26. maaliskuuta 2020. Lisätietoja ja tukea on kohdassa Adobe Musen elinkaaren päättymissivu.

Vieritystehosteiden käyttäminen sivuelementeissä

Vieritystehosteet-paneelissa on neljä välilehteä, joilla hallitaan liikettä, peittävyyttä, diaesityswidgetejä sekä Adobe Edge Animate -sisältöä sen mukaan, kuinka sivua vieritetään. Kun vieritystehosteita käytetään yhdessä toistensa kanssa ja kun jotkut elementit ovat kiinnitettyjä, leveydeltään 100-prosenttisia ja/tai järjestetty muiden elementtien yläpuolelle tai taakse Tasot-paneelissa, voit luoda laajan valikoiman vaikuttavia tehosteita.

Liikkeen vieritystehosteiden käyttäminen Vieritystehosteet-paneelin avulla

Vieritystehosteet-paneelin käyttöliittymä vastaa selaimen täytön ja taustan täytön Vieritystehosteet-paneelia. Käytä vieritystehosteita sivuelementissä käyttämällä Vieritystehosteet-paneelin Liike-välilehteä:

  1. Siirry Musessa Muoto-näkymään ja valitse Sivu > Sivun ominaisuudet
  2. Määritä Vähimmäiskorkeus-asetukseksi vähintään 2000 pikseliä, jotta sivu on riittävän pitkä vieritystä varten. 
  3. Tallenna muutokset ja sulje Sivun ominaisuudet -valintaikkuna valitsemalla OK.
  4. Piirrä Muoto-näkymässä sivulle suorakulmio tai tekstikehys.
  5. Lisää rinnakkain aseteltu tai yksittäinen taustakuva Täyttö-valikon Täyttö-välilehdessä. Voit myös valita täytöksi yhtenäisen värin tai liukuvärin.
  6. Avaa Vieritystehosteet-paneeli valitsemalla Ikkuna > Vieritystehosteet.
Avaa Vieritystehosteet-paneeli, jossa pääset muokkaamaan vieritystehosteiden asetuksia.
Avaa Vieritystehosteet-paneeli, jossa pääset muokkaamaan vieritystehosteiden asetuksia.

  1. Vieritystehosteiden käyttöönotto: Vieritystehosteet-paneelissa näkyy (kauimmaisena vasemmalla) Liike-välilehti. Kun sivulla oleva elementti on valittu, valitse Liike-valintaruutu.

    VIHJE: Huomaa, että Liike-valintaruudun valitseminen lisää elementtiin T:n muotoisen kahvan, joka on kiinni yläreunassa. T-kahva ilmaisee elementissä sovelletun vieritystehosteen perussijainnin. Vieritystehoste otetaan käyttöön, kun vierailija vierittää ikkunaa perussijainnin kohdalle.

    T-kahvan hallinta on oletuksena elementin yläpuolella. Voit kuitenkin napsauttaa ja vetää kahvaa, jos haluat liikuttaa sitä ylemmäs, tai vetää sitä alaspäin hallittavan elementin yläreunan kohdalle, tai vetää sen elementin alle.

  2. Perussijainnin määrittäminen T-kahvan sijoituksella: Määritä perussijainti vetämällä T-kahvaa. Tällä voit määrittää liikkeen, joka tapahtuu sitä ennen ja sen jälkeen, kun vieritettävä sivu saapuu T-kahvan yläosan kohdalle.

    Voit määrittää perussijainnin myös syöttämällä numeroarvon Perussijainti-kenttään, joka näkyy Vieritystehosteet-paneelin keskiosassa, kun Liike-välilehti on aktiivinen. Yllä olevassa kuvassa perussijainniksi on määritetty 200 pikseliä. 

    T-kahvan paikka merkitsee elementin perussijaintia. Kun sivua vieritetään pystysuunnassa, järjestelmä soveltaa Liike alussa -osiossa määritettyjä asetuksia siten, että elementin sijainti vastaa sen sijaintia Muoto-näkymässä.

    Kun vierailija vierittää sivua tai napsauttaa ankkurilinkkiä hypätäkseen elementin perussijainnin ohi, järjestelmä soveltaa Liike lopussa -osiossa määritettyjä asetuksia.

    Liike alussa -osiossa on joukko pysty- ja vaakasuuntaisia nuolia sekä nopeusasetuksia.

  3. Liike alussa -osion pystysuunnan määrittäminen: Valitse pystysuunta (ylös tai alas) napsauttamalla jotakin pystysuunnan painiketta. Syötä nopeuden arvo suuntanuolen vieressä olevaan kenttään. Syöttämäsi arvo määrittää nopeuden, jolla elementti liikkuu suhteessa sivun vieritysnopeuteen. Jos arvoksi syötetään 0, elementti ei liiku pystysuunnassa. Arvo voi olla myös prosenttiluku. Se määritetään desimaalipisteen avulla. Jos esimerkiksi syötät arvoksi 0.5, elementti liikkuu pystysuunnassa puolikkaalla nopeudella suhteessa sivun vieritysnopeuteen.

  4. Liike alussa -osion vaakasuunnan määrittäminen: Määritä elementin vierityksen vaakasuunta (vasemmalle tai oikealle) napsauttamalla nuoli vasemmalle- tai nuoli oikealle -painiketta. Tämä määrittää sen, mihin suuntaan elementti liikkuu ennen perussijainnin saavuttamista. Syötä nuolipainikkeiden oikealla puolella olevaan kenttään vaakasuunnan nopeusarvo. Jos et halua elementin liikkuvan vaakasuunnassa, määritä vaakasuunnan nopeuden arvoksi 0.

  5. Määritä Liike lopussa -osion suunta- ja nopeusasetukset toistamalla vaiheet 7 ja 8.

Alla olevassa esimerkissä perussijainniksi on määritetty 500 pikseliä. Kun selainta vieritetään, elementti liikkuu alaspäin määritettyyn sijaintiin samalla nopeudella kuin millä sivua vieritetään. Elementti asettuu paikoilleen, kun sivu vieritetään perussijaintiin. Kun sivua vieritetään perussijainnin ohi, elementti liikkuu oikealle kaksinkertaisella nopeudella sivun vieritysnopeuteen verrattuna.

Aseta vieritystehoste Adobe Musessa ottamalla liikeasetukset käyttöön
Aseta vieritystehoste ottamalla liikeasetukset käyttöön

  1. Voit testata vieritystehosteita napsauttamalla esikatselupainiketta tai valitsemalla Tiedosto > Esikatsele sivu selaimessa. Voit testata elementin liikkumista vierittämällä sivua alas- ja ylöspäin.
  2. Palaa testaamisen jälkeen Museen tai napsauta Muoto-painiketta, jos haluat jatkaa sivun muokkaamista.

Peittävyyden vieritystehosteiden käyttäminen Vieritystehosteet-paneelin avulla

Tässä osiossa kerrotaan, kuinka vieritykseen voidaan lisätä elementin näkyvyyttä muokkaavia tehosteita. Tehosteiden avulla voidaan helposti korostaa ja piilottaa sisältöä. Kohteita voidaan himmentää ja tuoda esiin vierailijan vierittäessä sivua eteenpäin. Seuraavien ohjeiden avulla voit ottaa Vieritystehosteet-paneelin Peittävyys-välilehdessä käyttöön vieritystehosteita, jotka vaikuttavat sivuelementin läpinäkyvyyteen.

  1. Kun sivua muokataan Muoto-näkymässä, varmista, että Sivun ominaisuudet -kohdan Vähimmäiskorkeus-arvoksi on määritetty pikseliarvo, joka on suurempi kuin useimmat näytöt, esim. 2000 pikseliä. Voit myös lisätä sivuun niin paljon sisältöä, että sitä pystyy vierittämään.
  2. Piirrä Muoto-näkymässä sivulle suorakulmio tai tekstikehys.
  3. Lisää Täyttö-valikon Täyttö-välilehdessä valittuun sivuelementtiin taustakuva (yksi kuva tai sama kuva monta kertaa vierekkäin), täyttöväri tai liukuväri. (Halutessasi voit myös lisätä sivuun diaesityswidgetin tai Adobe Edge Animate OAM -tiedoston.)
  4. Kun elementti on valittu, napsauta Vieritystehosteet-paneelin Peittävyys-välilehteä (toinen välilehti vasemmalta) ja valitse Peittävyys-valintaruutu.
Ota peittävyyden vieritystehosteet käyttöön valitulle elementille valitsemalla Peittävyys-valintaruutu.
Ota peittävyyden vieritystehosteet käyttöön valitulle elementille valitsemalla Peittävyys-valintaruutu.

Kun peittävyystoiminto otetaan käyttöön, elementin päälle ilmestyy uudenlainen kahvasymboli. Aivan kuten T-kahvaa, jota käytetään perussijainnin määrittämiseen Liike-välilehdessä, tätäkin kahvaa voidaan napsauttaa ja vetää elementin yläpuolelle, samaan linjaan elementin yläreunan (tai muun elementin osan) kanssa tai elementin alapuolelle. Peittävyyskahvassa on kolme osaa, joita voidaan vetää toisistaan riippumatta. Niillä määritetään perussijainnin, häivytyssijainnin 1 ja häivytyssijainnin 2 arvot.

  1. Määritä perussijainti napsauttamalla ja vetämällä kahvan nelikulmaista keskiosaa. Alla olevassa esimerkissä perussijainniksi on määritetty 150 pikseliä.
Määritä perussijainti vetämällä kahvan nelikulmaista keskiosaa pystysuunnassa.
Määritä perussijainti vetämällä kahvan nelikulmaista keskiosaa pystysuunnassa.

  1. Aseta kahva haluamaasi kohtaan napsauttamalla ja vetämällä kahvan pyöreää yläosaa. Alla olevassa esimerkissä häivytyssijainniksi 1 on määritetty 100 pikseliä.
Aseta peittävyyskahvan häivytyssijainti 1
Määritä ensimmäinen elementin läpinäkyvyyteen vaikuttava sijainti napsauttamalla ja vetämällä pyöreää kahvaa sen vasemmasta yläreunasta.

  1. Aseta kahva haluamaasi kohtaan napsauttamalla ja vetämällä kahvan pyöreää alaosaa. Alla olevassa esimerkissä häivytyssijainniksi 2 on määritetty 200 pikseliä.
Aseta peittävyyskahvan häivytyssijainti 2
Määritä toinen elementin läpinäkyvyyteen vaikuttava sijainti napsauttamalla ja vetämällä pyöreää kahvaa sen oikeasta yläreunasta.

Huomautus:

Perussijaintia voidaan säätää vetämällä sitä häivytyssijaintien kahvojen mukana. Tällöin sen arvo saadaan samaksi kuin häivytyssijainnin arvo. Kahvojen vetämisen sijaan voit myös syöttää arvot numeroina Vieritystehosteet-paneelin kenttiin.

Tässä esimerkissä elementti on ensin täysin läpinäkyvä ja muuttuu vähitellen peittävämmäksi, kunnes se saavuttaa täydellisen peittävyyden perussijaintiin saapuessaan (perussijaintia vastaava peittävyysarvo on 100 %). Kun sivua vieritetään perussijainnin ohi, elementti muuttuu taas vähitellen läpinäkyvämmäksi ja häipyy kokonaan näkyvistä, kun sivua vieritetään 200 pikselin ohi.

Määritä vieritystehosteiden peittävyysprosentti
Määritä peittävyysprosentti (0 % on täysin läpinäkyvä) Vieritystehosteet-paneelin Peittävyys-välilehdessä.

  1. Voit testata vieritystehosteita napsauttamalla esikatselupainiketta tai valitsemalla Tiedosto > Esikatsele sivu selaimessa. Vieritä sivua alas- ja ylöspäin. Näet, kuinka elementin peittävyys muuttuu sivua vieritettäessä.
  2. Palaa testaamisen jälkeen Museen tai napsauta Muoto-painiketta, jos haluat jatkaa sivun muokkaamista.

Vieritystehosteet-paneelin Diaesitys-välilehden käyttäminen

Yksi yleinen vieritysliiketehoste on diaesityksenä näytettävien kuvien yhdistäminen vieritykseen. Voit lisätä sivuun diaesityswidgetin ja määrittää sitten Vieritystehosteet-paneelin Diaesitys-välilehdessä vieritystehosteet. Voit esimerkiksi määrittää uuden kuvan näkymään automaattisesti aina, kun sivu vieritetään tiettyyn kohtaan.

Voit tarkistaa toiminnon asetukset Diaesitys-välilehdestä (kolmas välilehti vasemmalta).

Tätä vieritysliiketoimintoa käytetään tavallisesti siten, että sivuun kiinnitetään diaesityswidget. Diaesityswidget määritetään tavallisesti (Asetukset-valikossa) siten, että se näyttää ainoastaan diaesityksen suuren kuvan ja piilottaa pienoiskuvat ja Seuraava ja Edellinen-painikkeet.

Koko näytön diaesitys sopii erityisen hyvin tähän tehosteeseen. Sopivin diaesityswidgetin tyyppi valitaan kuitenkin aina sivuston mukaan.

Voit lisätä diaesityswidgetiin vieritystehosteita seuraavalla tavalla:

  1. Muuta sivun vähimmäiskorkeus Sivun ominaisuudet -valintaikkunassa riittävän suureksi, jotta sivua pystyy vierittämään. Voit myös lisätä sivuun sisältöä, jotta siitä tulee pidempi.
  2. Vedä diaesityswidget Widgetkirjastosta sivulle. Määritä diaesityksen asetukset Asetukset-valikossa. (Kun diaesityswidgeteihin lisätään vieritystehosteita, Seuraava-, Edellinen- ja Miniatyyri-valinnat ovat tavallisesti poissa käytöstä.)
  3. Lisää diaesityswidgetiin kuvia napsauttamalla Asetukset-valikon Kuvat-osion vieressä olevaa kansiokuvaketta. Luo kuvagalleria selaamalla ja valitsemalla tietokoneestasi kuvat, jotka haluat lisätä.
  4. Kiinnitä diaesitys paikalleen selainikkunaan Ohjauspaneelin kiinnitystyökalulla. Kun diaesitys on valittuna, napsauta yhtä kuudesta kiinnityssijainnista.
Käytä vieritystehosteita diaesityswidgeteissä
Kiinnitä diaesityswidget haluamaasi sijaintiin siten, että se pysyy paikoillaan selainikkunassa, kun sivua vieritetään.

Kun diaesitys on lisätty, määritetty ja kiinnitetty, voit lisätä siihen vieritystehosteita.

Valitse Vieritystehosteet-paneelin Diaesitys-välilehdessä Diaesitys-valintaruutu, kun diaesityswidget on valittuna.

Valitse Vieritystehosteet-paneelin Diaesitys-asetus.
Valitse diaesityswidget ja napsauta Vieritystehosteet-paneelin Diaesitys-valintaruutua.

Huomaa, että kun Diaesitys-valintaruutu on valittuna, perussijainnin säätökahva näkyy diaesityksen suunnittelunäkymässä. Jos haluat muokata perussijainnin arvoja, voit vetää kahvaa sen vasemmalta tai oikealta puolelta tai syöttää arvot Vierityksen perussijainti -kenttään. Voit muokata arvoa myös napsauttamalla Vieritystehosteet-paneelin ylä- ja alanuolipainikkeita.

Vieritystehosteet-paneelin Diaesitys-välilehdessä on kaksi painiketta. Niillä voit hallita diaesityksen kuvien toistoa kahdella eri tavalla. Voit määrittää diaesityksen toistumaan automaattisesti tai vaihtamaan kuvaa, kun sivua vieritetään tietyn sijainnin ohi.

Ensimmäinen tapa on määrittää haluttu perussijainti ja valita Automaattinen toisto -valintaruutu.

Kun sivua vieritetään perussijainnin ohi (tai kun vierailija napsauttaa ankkuritunnisteen linkkiä ja hyppää sivulla perussijainnin ohi), diaesitys käynnistyy. Automaattinen toisto jatkuu ja näyttää kuvasarjan aina uudelleen, kunnes vierailija vierittää sivun takaisin perussijainnin yläpuolelle tai poistuu sivulta.

Yllä olevan kuvan esimerkissä diaesitys käynnistyy, kun sivua vieritetään 100 pikselin ohi (tai minne tahansa tämän perussijainnin alapuolelle). Jos vierailija palaa perussijainnin yläpuolelle (<99 pikseliä), diaesitys pysähtyy.

Toinen tapa ohjata diaesityswidgetiä on perussijainnin määrittäminen ja Diojen vaihtumisväli -valintanapin valitseminen. Tällöin valintanapin alla olevaan kenttään on syötettävä pikselimäärä, joka määrittää diojen vaihtumisvälin sivua vieritettäessä.

Voit esimerkiksi kiinnittää diaesityksen pitkälle sivulle siten, että se pysyy paikoillaan sivua vieritettäessä. Kun Diojen vaihtumisväli -kohtaan syötetään luku, diaesitys näyttää uuden kuvan aina, kun määritetty pikselimäärä on ohitettu sivua vieritettäessä.

Yllä olevassa kuvassa perussijainniksi on määritetty 200 pikseliä. Kun sivua vieritetään ylhäältä 200 pikselin ohi, diaesityksessä näkyy uusi kuva aina, kun sivua vieritetään 30 pikseliä alaspäin.

Aseta diaesitysten vieritystehosteet Adobe Musessa
Määritä diaesitys vaihtamaan kuvaa aina, kun sivua vieritetään tietty pikselimäärä alaspäin.

Vieritystehosteet-paneelin Adobe Edge Animate -välilehden käyttö

Adobe Edge Animate on intuitiivinen suunnittelutyökalu, jolla voi luoda HTML5-pohjaisia verkkoanimaatioita. Edge Animate -käyttöliittymässä voit rakentaa koosteita silmukkana toistuvista liikkuvista kuvista ja symboleista. Voit viedä luomasi animaatiot Adobe Edge Animatesta OAM-tiedostoina ja sijoittaa ne Muse-sivustojesi sivuille. Kaikki Edge Animatella luodut animaatiot toistuvat selaimessa ilman liitännäisiä.

Adobe Edge Animatessa animaatioiden rakentaminen tapahtuu vetämällä ja pudottamalla elementtejä pääaikajanaan ja muokkaamalla niiden liikkeitä aikajanan avulla. Sen lisäksi, että lisäät elementtejä suoraan pääaikajanaan, voit myös luoda upotettuja elementtejä alielementeillä, jotka toistuvat omien sisäisten aikajanojensa mukaan. Lisätietoja Adobe Edge Animaten käytöstä on Adobe Edge Animaten tuotesivulla. Voit myös tutustua Adobe Edge Animate -opastusvideoihin Adobe TV:ssä.

Jos haluat käyttää Adobe Edge Animaten vieritysliikeominaisuutta, sinun on ensin suunniteltava siihen tarkoitettu kooste. Vieritysliiketehosteita voi käyttää OAM-tiedostoissa, ja ne vaikuttavat pääaikajanan animaatioihin. Voit luoda interaktiivisia animaatioita suunnittelemalla animaation siten, että vain ne kohteet, joiden haluat liikkuvan sivua vieritettäessä, ovat pääaikajanalla ja animaation muu sisältö upotetuilla symboliaikajanoilla. Kun kävijä vierittää sivua, vieritystehosteen asetukset vaikuttavat ainoastaan pääaikajanan animoitujen elementtien toistoon.

Tietoja animaatioiden luomisesta nimenomaisesti Adobe Muse -sivustoja varten on artikkelissa Adobe Edge Animate -sisällön lisääminen.

Toimi näin, kun käytät Vieritystehosteet-paneelin Diaesitys-välilehteä:

  1. Vie OAM-tiedosto Adobe Edge Animatesta ja tallenna se sivustosi kansioon.
  2. Käynnistä Muse ja avaa sivu Muoto-näkymässä kaksoisnapsauttamalla sitä. Tarkista, että sivu on riittävän pitkä vieritettäväksi, päivittämällä sen vähimmäiskorkeusasetukset Sivun ominaisuudet -valintaikkunassa. Voit pidentää sivua myös lisäämällä sille sisältöä.
  3. Valitse Tiedosto > Sijoita ja etsi OAM-tiedosto sivuston kansiosta.
  4. Avaa Vieritystehosteet-paneeli. Tuo esiin tämän osan asetukset napsauttamalla Adobe Edge Animate -välilehteä (neljäs välilehti vasemmalta).
  5. Kun OAM-tiedosto on valittuna, lisää valintamerkki Edge Animate -valintaruutuun.
Animaatioiden vieritystehosteiden määrittäminen Adobe Musessa
Määritä Edge Animate -animaatio alkamaan, kun sivua vieritetään tiettyyn sijaintiin, tai määritä se vaihtamaan kehystä aina, kun sivua vieritetään tietty matka (määritetään pikseleinä).

Yllä olevassa kuvassa perussijainniksi on määritetty 50 pikseliä. Voit muokata sitä vetämällä T-kahvaa tai antamalla toisen arvon Perussijainti-kenttään.

Kun olet määrittänyt perussijainnin, voit hallita animaation toistoa kahdella asetuksella:

  • Automaattinen toisto: Jos valitset tämän asetuksen, pääaikajanan animaatio käynnistyy heti, kun selain vieritetään perussijaintiin, riippumatta pääaikajanalla olevien kehysten määrästä. Animaation toisto jatkuu, kunnes sivua vieritetään perussijainnin yläpuolelle.
  • Ruutujen vaihtumisväli: Jos valitset tämän asetuksen, pääaikajanan animaatio etenee 1 kehyksen verran aina, kun sivua vieritetään tietyn pikselimäärän verran. Jos esimerkiksi olet luonut 3000 pikseliä korkean sivun ja määrität arvoksi 10, pääaikajanan animaation toistonopeus on 1 kehys jokaista sivun vieritettyä 10 pikseliä kohti. Mitä nopeammin kävijä vierittää sivua, sitä nopeammin animaatio toistuu.

Huomautus:

Vieritysliiketehosteen asetukset eivät vaikuta Adobe Edge Animate -koosteen upotettuihin tai pääaikajanasta linkitettyihin animoituihin kohteisiin. Voit siis käyttää joko liikkumatonta taustaa tai jatkuvasti silmukkana toistuvia elementtejä, jotka liikkuvat koko ajan huolimatta siitä, vierittääkö kävijä sivua.

  1. Kun olet määrittänyt asetukset Vieritystehosteet-paneelin Edge Animate -välilehdessä, valitse Tiedosto > Esikatsele sivu selaimessa (tai napsauta Esikatselu-painiketta). Vieritä sivua ylös ja alas ja katso, miten Edge Animate -animaation pääaikajanaan lisätty sisältö toistuu.
  2. Jos haluat muokata animaatiota, palaa Museen (tai napsauta Muoto-painiketta) ja muuta asetuksia Vieritystehosteet-paneelissa.

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö