Opit lisäämään monenlaisia vieritystehosteita, kuten palapelin, liukuvan valikon tai rullauksen.

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.

Ideoita vieritystehosteiden hyödyntämiseen

Tässä osassa tarkastellaan joitakin tapoja käyttää vieritystehosteita interaktiivisten ominaisuuksien, navigointitoimintojen ja liikkuvien kuvien lisäämiseen Muse-sivustoihisi.

Näillä ohjeilla pääse alkuun:

  1. Tutustu esittelysivuston esimerkkeihin napsauttamalla eri osioita. Vieritä jokaista esimerkkisivua ja katso, miten vieritystehosteet vaikuttavat sivun elementteihin.
  2. Esittelysivuston pääsivun alareunasta voit ladata .muse-tiedoston.
  3. Avaa esittelysivusto ja tutki projektia Muse-työtilassa.
  4. Avaa Tasot-paneeli ja laajenna Sisältö-osaa, jolloin näet elementit, joista kukin esimerkki on koottu.

Palapelitehoste

Tehosteessa yksittäiset elementit liukuvat osaksi sivua sitä mukaa, kun kävijä vierittää sivua. Kuvia ja tekstikehyksiä hallitaan vieritystehosteilla, ja niiden muodostama interaktiivinen kooste muistuttaa palapeliä. Tämä on kiehtova tapa esitellä tuotteen yksityiskohtia verkkosivulla.

Esimerkin elementit on saatu muodostamaan yhtenäinen kokonaisuus Vieritystehosteet-paneelin Liike-välilehden Liike alussa -asetuksilla. Kun kukin pala on liukunut omalle paikalleen, sen Liike lopussa -asetukseksi määritetään 0, jolloin edelliset elementit pysyvät paikoillaan uusien elementtien tullessa.

Voit luoda samankaltaisen palapelitehosteen seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 14 120 pikseliä.
  2. Luo tekstityökalulla tekstikehys ja kirjoita siihen haluamasi sisältö.
  3. Avaa Vieritystehosteet-paneelin Liike-välilehti ja valitse Liike-valintaruutu. Esimerkissä tekstikehys on määritetty Liike alussa -asetuksilla liikkumaan alaspäin paikalleen nopeudella, joka on neljännes vieritysnopeudesta (0,25-kertainen nopeus). Kun sivua on vieritetty tekstikehyksen perussijaintiin saakka, tekstikehys on sille Muoto-näkymässä määritetyllä paikalla. Tämän jälkeen Liike lopussa -asetukset (kummankin suunnan arvo on 0) kiinnittävät ensimmäisen elementin paikalleen.
  4. Tekstikehyksen alle tulee PNG-tiedosto, jossa on läpinäkyvä matkapuhelimen ääriviivakuva. Tämä elementti liukuu paikalleen sivun vasemmalta puolelta ja jää siihen Vieritystehosteet-paneelin Liike-välilehden asetusten mukaisesti.
  5. Puhelimen kuvan jäljessä seuraa pienempi valkoinen elementti, jonka liikerata on samankaltainen: se liukuu esiin sivun vasemmasta reunasta ja jää paikalleen. Valkoinen elementti kuvaa matkapuhelimen yläosassa olevaa kuuloketta. Kyseinen kohde (tiedostonimi phone-earpiece.png) on Tasot-paneelissa matkapuhelimen ääriviivakuvan yläpuolella, joten se näkyy animaatiossakin puhelimen kuvan päällä. 
  6. Heti kuulokkeen jälkeen tulee pieni valkoinen elementti, joka kuvaa puhelimen aloitusnäppäintä. Se liukuu paikalleen sivun oikeasta reunasta samalla tavoin kuin kuuloke ja näkyy animaatiossa matkapuhelimen kuvan päällä.
  7. Seuraavaksi tulee vaalea suorakulmio, jonka väri liukuu hienovaraisesti pystysuunnassa valkoisesta vaaleanharmaaseen. Se on ohjattu Vieritystehosteet-paneelin Liike-välilehden asetuksilla liikkumaan tarkasti paikalleen matkapuhelimen ääriviivakuvan keskellä olevalle läpinäkyvälle alueelle. Kun se on paikallaan, se kuvaa puhelimen näyttöä. Näyttöelementti (phone-screen.png) on Tasot-paneelissa alimmalla tasolla, eli se näkyy sivulla kaikkien muiden elementtien takana.
  8. Seuraavaksi paikoilleen siirtyy neljä suorakulmiota (väreiltään sininen, vihreä, keltainen ja punainen). Tavoitteena on ollut vaikutelma hajallaan olevista paloista, jotka muodostavat lopulta kokonaisuuden. Se on saatu aikaan määrittämällä elementeille eri tulosuunnat ja nopeudet Vieritystehosteet-paneelin Liike-välilehdessä. Sininen suorakulmio liikkuu alas ja oikealle, vihreä ja keltainen liikkuvat ylös ja oikealle. Liikeasetukset on määritetty Liike alussa -kohdissa. Kaikkien suorakulmioiden Liike lopussa -asetuksen arvo on 0 kummankin suunnan osalta, jolloin elementit pysähtyvät matkapuhelimen näytön päälle ja kiinnittyvät paikoilleen.
  9. Kun kaikki palat on koottu, toinen tekstikenttä liikkuu ylös ensimmäisen tekstikentän viereen. Sen nopeus on puolet sivun vieritysnopeudesta (0,5-kertainen).

Lopuksi sivun alaosaan tulee kaksi elementtiä: suorakulmio, jonka yhtenäinen väri on sama kuin sivun (eli se on käytännössä näkymätön), ja sen taakse jäävä objektiryhmä (keltainen suorakulmio, jossa on hehkulampun kuva).

Yhtenäisen värisen suorakulmion tarkoituksena on piilottaa sen takana oleva objektiryhmä.

Palapeli-vieritystehoste Adobe Musessa
Palapeli-vieritystehoste Adobe Musessa

Huomautus:

Kun molemmat elementit ovat valittuina, huomaat, miten valituille kentille yhteiset arvot tulevat näkyviin kenttiin. Esimerkissä sekä suorakulmion että objektiryhmän pystysuuntaisen liikkeen Liike alussa -asetus on 0 ja Liike lopussa -asetus 0,0. Liike alussa -kohdan vaakasuuntaisen liikkeen kentässä ei ole arvoa, koska objektiryhmä on määritetty liikkumaan nopeudella 1 suhteessa vieritysnopeuteen (eli samalla nopeudella), kun taas suorakulmiolla arvo on 0.  

  1. Suorakulmio on käytännössä kiinnitetty paikalleen, eikä liiku lainkaan, koska Liike alussa- ja Liike lopussa -kohtien molempien kenttien arvot ovat 0. Kun sivua vieritetään hehkulamppuryhmän perussijaintiin, ryhmä liikkuu vasemmalle ja tulee näkyviin, koska se poistuu suorakulmion alta. Hehkulamppuryhmä on ylemmällä tasolla kuin matkapuhelimen näytön elementit, mutta alemmalla kuin matkapuhelimen ääriviivakuva, joten ryhmä näyttää liukuvan paikalleen (vaikutelma on sama kuin pyyhkäistäessä oikean matkapuhelimen näyttöä vaakasuunnassa). Hehkulamppuryhmä peittää puhelimen näyttöä aiemmin kuvanneen liukuvärisen suorakulmion.

Tämä yksinkertainen esimerkki esittelee, miten luodaan animaatio, jossa liikkuvat palaset muodostavat kokonaisuuden sivua vieritettäessä. Tällaisen animaation luomiseen tarvitaan korkea sivu, Tasot-paneelissa järjestettyjä elementtejä sekä Vieritystehosteet-paneelin Liike-välilehti.

Liukuva valikko

Voit luoda liukuvan valikon käyttämällä samoja menetelmiä kuin palapelitehosteessa. Elementit saadaan liukumaan paikoilleen Vieritystehosteet-paneelin Liike-välilehden asetuksilla. Osa elementeistä on piilotettu suorakulmioilla, kunnes niiden on aika tulla näkyviin.

Esimerkissä vaikutelma monimutkaisesta kulmikkaasta muodosta on luotu taitavasti sijoitetuilla suorakulmioryhmillä.

Jos tarkastelet näytesivua selaimessa, näet lentokoneen lentävän vaakasuunnassa sivun yli oikealta vasemmalle. Sitä seuraa joukko tyyliteltyjä valikkovaihtoehtoja sekä liukuvärinen vinoraidoitettu tausta.

Voit luoda samankaltaisen liukuvan tehosteen seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 4 665 pikseliä.
  2. Lentokoneen kuva on ylemmällä tasolla kuin kaikki muu sivun sisältö, joten se on ylimpänä Tasot-paneelin luettelossa. Kuva on määritetty Vieritystehosteet-paneelin Liike-välilehden asetuksilla liikkumaan vasemmalle sekä ennen perussijaintiaan että sen jälkeen.
Liukuva valikko -tehoste Adobe Musen vieritystehosteissa
Liukuva valikko -tehoste Adobe Musen vieritystehosteissa

  1. Navigointivalikko muodostuu neljästä tekstikehyksestä, jotka on määritetty liukumaan pinoon vasemmalta. Jokaisen tekstikehyksen nopeus Vieritystehosteet-paneelin Liike-välilehden Liike alussa -osassa on sama (1,25 kertaa vieritysnopeus). Jokaisella tekstikehyksellä on kuitenkin eri perussijainti. Kun sivua vieritetään alaspäin, jokainen tekstikehys liukuu paikalleen, ja niiden reunat tulevat samaan linjaan kokonaisuuden vasemman reunan kanssa. Kaikkien tekstikehysten Liike lopussa -asetukset ovat 0,0, eli valikkokohdat kiinnittyvät paikoilleen.
  2. Tekstikehyksillä on yhtenäinen taustaväri. Ne näyttävät ensisilmäyksellä kuvilta, sillä niiden reunat on leikattu viistosti eikä suoraan. Vaikutelma saadaan aikaan kerrostamalla tekstikehysten päälle kolme suorakulmiota, jotka on täytetty yhtenäisellä värillä, joka on myös selaimen täyttöväri.
Voit luoda vinon vasemman ja oikean reunan ryhmittämällä ja järjestämällä suorakulmioita valikkokohtien yläpuolelle.
Voit luoda vinon vasemman ja oikean reunan ryhmittämällä ja järjestämällä suorakulmioita valikkokohtien yläpuolelle.

  1. Tekstikehysanimaatio on alun perin piilossa toisen suorakulmioryhmän alla, koska tekstikehykset on järjestetty kyseisen ryhmän alle Tasot-paneelissa. Ryhmä koostuu kolmesta suorakulmiosta: yhdestä suuremmasta, jossa on pystysuuntainen liukuväri, ja kahdesta pienemmästä (yksi neliö ja yksi kierretty), jotka on täytetty yhtenäisellä värillä, joka on sama kuin liukuvärin ylin väri.
  1. Jos vierität sivua alaspäin ja tarkastelet ryhmän alaosaa, havaitset neljä erilevyistä suorakulmiota, jotka on kierretty ja kohdistettu suuremman liukuvärisen suorakulmion oikean alakulman päälle.
Kierretyt suorakulmiot on täytetty sivun täyttövärillä ja niiden ansiosta näyttää siltä, kuin liukuvärillä täytetyn suorakulmion kulma olisi poistettu.
Kierretyt suorakulmiot on täytetty sivun täyttövärillä ja niiden ansiosta näyttää siltä, kuin liukuvärillä täytetyn suorakulmion kulma olisi poistettu.

Ryhmät mahdollistavat useiden elementtien yhdistämisen ja hallitsemisen yhtenä kohteena. Esimerkissä erilaisten suorakulmioiden ryhmille on määritetty vieritystehosteita, jotka saavat kunkin ryhmän liikkumaan yhtenä kokonaisuutena.

Kyseessä on myös hyvä esimerkki negatiivisen tilan hyödyntämisestä. Jos selaimen täyttöväriksi on määritetty yhtenäinen taustaväri, voit saada aikaan kiehtovia leikkaustehosteita kerrostamalla samalla värillä täytettyjä suorakulmioita toisten suorakulmioiden päälle. Sen sijaan että suunnittelisit kuvioita kuvankäsittelyohjelmassa ja sijoittaisit sivulle vain yhden kuvan, voit rakentaa kuvioita suoraan Muse-työtilassa suorakulmioiden avulla.

Häivytys

Esimerkissä auringonnousu ja -lasku on animoitu käyttämällä yhdessä kahta vieritystehostetta: liikettä ja peittävyyttä. Sivulla on liukuvärillä täytetty tausta, johon on sijoitettu yksi PNG-kuva auringosta. PNG-kuvassa on läpinäkyviä alueita, joiden läpi taustan täyttöväri näkyy.

Jos katsot esimerkkisivua selaimessa, näet kuinka sivun poikki liikkuva aurinko muuttuu täysin läpinäkyvästä peittävämmäksi. Liikeratansa huipulla aurinko on täysin peittävä, mutta kun sivua vieritetään alemmas, aurinko laskee. Se muuttuu samalla vähitellen läpinäkyvämmäksi ja lopulta häviää kokonaan.
Voit luoda samankaltaisen häivytystehosteen seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Jotta sivua voisi vierittää, määritä Vähimmäiskorkeus-kenttään arvo, joka on suurempi kuin mitä keskivertonäytössä voi näyttää. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 2 988 pikseliä.
  2. Aseta auringon kuva keskelle sivua. Määritä Vieritystehosteet-paneelin Liike-välilehdessä perussijainniksi 1 410 pikseliä. Muista myös Liike alussa- ja Liike lopussa -asetukset.
Määritä häivytystehosteen Liike alussa- ja Liike lopussa -asetukset.
Määritä häivytystehosteen Liike alussa- ja Liike lopussa -asetukset.

Näillä asetuksilla saat auringon liikkumaan puoliympyrän muotoisella radalla sivun vasemmasta alareunasta ylös sivun keskelle (eli perussijaintiin) ja sitten takaisin alas sivun oikeaan alareunaan.

  1. Ennen kuin poistat auringon valinnan, napsauta Peittävyys-välilehteä ja määritä asetukset. Häivytyssijainti 1 on 726 pikseliä (auringon yläpuolella). Häivytyssijainti 2 on 1 925 pikseliä (auringon alapuolella). Auringon peittävyys on aluksi 0 % (eli se on täysin läpinäkyvä), mutta se muuttuu täysin peittäväksi kun sivua vieritetään perussijaintiin. Kun sivua vieritetään auringon perussijainnin ohi, peittävyyden arvo muuttuu 100 prosentista 0 prosenttiin, jolloin aurinko näyttää häipyvän vähitellen näkyvistä.
Voit säätää läpinäkyvyyden määrää Vieritystehosteet-paneelin Peittävyys-välilehdessä.
Voit säätää läpinäkyvyyden määrää Vieritystehosteet-paneelin Peittävyys-välilehdessä.

  1. Testaa sivua valitsemalla Tiedosto > Esikatsele sivu selaimessa. Vieritä sivua ja katso, miten aurinko näyttää nousevan ilmestyessään vähitellen näkyviin ja sitten laskevan häipyessään vähitellen näkyvistä.
  2. Sulje selain ja palaa Muse-työtilaan.

Edge Animate

Esimerkki näyttää, miten Adobe Edge Animatesta vietyjä OAM-tiedostoja voi hallita vieritystehosteilla. Tässä esimerkissä sivun täyttöväri on pystysuuntainen liukuväri, joka alkaa vaaleasta turkoosista ja päätyy tummansiniseen.

Animaatiotehoste on luotu Liike- ja Edge Animate -välilehtien asetuksilla.

Sivulla on vierekkäin kolme saman OAM-tiedoston kopiota, jotka muodostavat animoidun kompassirivin. Kun avaat esimerkkisivun selaimessa, kaikki kolme kompassia nousevat näkyviin ja jäävät sitten paikoilleen. Jokainen kompassi näyttää pyörivän eri nopeudella kuin muut kaksi. Eri pyörimisnopeudet on määritetty Vieritystehosteet-paneelin asetuksilla, ei Edge Animation -tiedostossa.

Voit luoda samankaltaisen tehosteen kolmella OAM-tiedostolla seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 7 465 pikseliä.
  2. Valitse kaikki sivun kolme kompassikuvaa. Vieritystehosteet-paneelin Liike-välilehdestä näet, että jokaisen OAM-tiedoston perussijainti- ja liikeasetukset ovat samat, koska kaikki arvot ovat näkyvissä.
Luo animoitu tehoste OAM-tiedostoille vieritystehosteilla
Luo animoitu tehoste OAM-tiedostoille vieritystehosteilla

Jos esikatselet esimerkkiä selaimessa, näet, miten kaikki kolme OAM-elementtiä hyppäävät esiin samanaikaisesti ja jäävät sen jälkeen paikoilleen.

  1. Poista kompassien valinta napsauttamalla jotain muuta kohtaa sivulla ja valitse sitten ainoastaan vasemmanpuoleinen kompassi. Pidä vaihtonäppäintä painettuna ja valitse sitten oikeanpuoleinen kompassi, jolloin valittuna on kaksi kompassia. Avaa Vieritystehosteet-paneelin Edge Animate -välilehti ja tarkastele asetuksia.
Poista kaikkien kolmen kompassin valinta ja valitse vasemman- ja oikeanpuoleinen kompassi.
Poista kaikkien kolmen kompassin valinta ja valitse vasemman- ja oikeanpuoleinen kompassi.

Reunimmaiset kompassit on määritetty toistamaan aikajana-animaatiota silmukkana ja siirtymään seuraavaan kehykseen aina, kun sivua on vieritetty 350 pikselin verran.

  1. Poista reunimmaisten kompassien valinta. Valitse keskimmäinen kompassi, avaa Edge Animate -välilehti uudelleen ja varmista, että Ruutujen vaihtumisväli -asetus on 400 pikseliä. Tämä asetus saa keskimmäisen animaation liikkumaan hitaammin kuin kaksi reunimmaista kompassia.
Valitse keskimmäinen kompassi ja vieritystehosteasetus.
Valitse keskimmäinen kompassi ja vieritystehosteasetus.

Saat aikaan kiinnostavia animaatiotehosteita vaihtelemalla useiden sivulle sijoitettujen Edge Animate -animaatioiden nopeutta suhteessa sivun vieritysnopeuteen. Voit esimerkiksi luoda kalaparven, taivaan täynnä liikkuvia pilviä tai muita tehosteita käyttämällä useita saman OAM-tiedoston kopioita, joilla on erilaiset vieritystehosteasetukset.

Diaesitystehoste

Voit hallita, miten diaesityswidgetin kuvat näytetään suhteessa sivun vierittämiseen. Sitä varten sivulle on lisättävä diaesityswidget, minkä jälkeen diaesityksen asetukset on päivitettävä Vieritystehosteet-paneelin Diaesitys-välilehdessä.

Esimerkin diaesitys sisältää sarjan kuvia, jotka yhdessä muodostavat 360 asteen näkymän selkärepusta. Voit ottaa kuvia samantapaista diaesitystä varten käyttämällä jalustaa ja kuvaamalla pyörivälle alustalle asetettua esinettä. Tämä tehoste sopii hyvin interaktiiviseksi tuotekuvaukseksi, jonka avulla asiakkaat voivat nähdä tuotteen kaikista kulmista ennen ostopäätöstä.

Voit luoda samankaltaisen diaesityswidgetiä käyttävän tehosteen seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 7 465 pikseliä.
  2. Ensin sanan "Superpack" sisältävälle tekstikehykselle määritetään vieritystehosteet. Määritä Liike-välilehdessä Liike alussa -asetukset siten, että teksti liikkuu vasemmalta oikealle samalla nopeudella kuin sivua vieritetään. Määritä Liike lopussa -asetuksissa kummankin suunnan arvoksi 0, jolloin tekstikehys kiinnittyy lopuksi paikalleen.
     
Valitse Liike-valintaruutu ja määritä vieritystehosteet niin, että tekstikehys liikkuu oikealle.
Valitse Liike-valintaruutu ja määritä vieritystehosteet niin, että tekstikehys liikkuu oikealle.

  1. Avaa Widgetkirjasto ja vedä diaesityswidget keskelle sivua, tekstikehyksen lopullisen sijainnin oikealle puolelle.
  2. Valitse Asetukset-valikosta vaihtoehto Lisää kuvia ja valitse kuvatiedostot diaesitykseen. 

Kun Diaesitys on valittuna, voit valita diaesityswidgetin ja kiinnittää diaesityksen paikalleen Hallinta-paneelin Kiinnitä-vaihtoehdolla. Voit myös kokeilla koko näytön diaesityswidgetin hallitsemista vieritystehosteilla. 

  1. Valitse diaesitys, avaa sitten Vieritystehosteet-paneelin Diaesitys-välilehti ja valitse Diaesitys-valintaruutu.
  2. Määritä perussijainti joko vetämällä T-kahvaa tai kirjoittamalla arvo kenttään. Esimerkissä perussijainniksi on määritetty 1 066 pikseliä.
  3. Valitse Diojen vaihtumisväli -valintanappi ja määritä sen alla olevan kentän arvoksi 50 pikseliä.
Määritä diaesitys vaihtamaan kuvaa joka kerta, kun sivua vieritetään 50 pikselin verran alaspäin.
Määritä diaesitys vaihtamaan kuvaa joka kerta, kun sivua vieritetään 50 pikselin verran alaspäin.

  1. Kokeile sivua esikatselussa tai selaimessa. Vieritä sivua ja katso, kääntyykö selkärepun kuva. Käyttämällä diaesitykseen sarjaa samantapaisia, mutta hieman erilaisia, kuvatiedostoja voit luoda kuvia, jotka näyttävät lentävän ylöspäin tai putoavan alaspäin. Tarvittavat kuvat muistuttavat animoidun GIF-kuvan ruutuja.
  2. Kun olet testannut vieritystehosteet, jatka sivujen muokkaamista Musen suunnittelunäkymässä.

Rullaus

Vieritystehosteilla voi luoda erittäin pitkiä sivuja, jotka on jaettu ulkonäöltään hyvin erilaisiin osioihin. Kun kävijä vierittää sivua, uudet osiot näyttävät rullautuvan esiin. Niitä erottavat animoidut tekstit ja varjotehosteella luodut reunat.

Voit joko käyttää ankkurinimiötä tai vain lisätä huomautuksen, joka kertoo kävijöille, että sivun muut osiot avautuvat vierittämällä sitä alaspäin. Kun olet päässyt esimerkkisivun loppuun ja napsautat paluupainiketta, näet koko sivun ikään kuin pikakelautuvan taaksepäin, kun ankkurilinkki palaa sivun alkuun.

Voit luoda samankaltaisen rullaustehosteen seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 16 990 pikseliä.
  2. Valitse Selaimen täyttö -valikossa selaimen täyttöväriksi yhtenäinen sininen.
Määritä selaimen täyttöväri Selaimen täyttö -valikossa.
Määritä selaimen täyttöväri Selaimen täyttö -valikossa.

  1. Valitse ensin koko sivu ja valitse sitten Täyttö-valikossa sivun väriksi ei mitään, jolloin selaimen sininen täyttöväri näkyy läpi.
  2. Vieritä sivua suunnilleen 2 248 pikselin päähän yläreunasta. Piirrä Suorakulmio-työkalulla 3 000 pikseliä leveä ja 2 000 pikseliä korkea suorakulmio. Keskitä valintatyökalulla suorakulmio sivulle siten, että sen molemmat sivureunat ulottuvat reilusti selainikkunan reunojen ulkopuolelle.
  3. Kun suorakulmio on edelleen valittuna, valitse Täyttö-valikosta yhtenäinen vihreä täyttöväri. Määritä varjotehoste Tehosteet-valikossa.
Tee suorakulmion reunasta näyttävämpi lisäämällä siihen varjotehoste.
Tee suorakulmion reunasta näyttävämpi lisäämällä siihen varjotehoste.

  1. Valitse ensin vihreä suorakulmio ja sitten Vieritystehosteet-paneelin Liike-välilehden Liike-valintaruutu. Vedä T-kahvaa ja kutista se niin, että suorakulmion perussijainti tulee sen yläreunaan, eli esimerkissä 2 248 pikselin kohdalle.
  1. Määritä Liike alussa -osassa suorakulmio liikkumaan alaspäin nopeudella, joka on 1,5 kertaa vieritysnopeus. Määritä kaikkien muiden suuntien asetukseksi 0.
  2. Luo lähelle suorakulmion yläreunaa tekstikenttä Teksti-työkalulla. Esimerkin tekstikentässä lukee: "This is the roll-up". Voit käyttää haluamaasi tekstiä ja muotoilua.
  3. Valitse tekstikehys ja ota käyttöön Vieritystehosteet-paneelin Liike-välilehti. Vedä T-kahvaa, kunnes se on vihreän suorakulmion yläreunan kohdalla, ja muokkaa asetuksia, jotka ohjaavat tekstikehyksen näkymistä sivun vierityksen mukaan.
Kohdista T-kahva vihreän suorakulmion yläreunaan.
Kohdista T-kahva vihreän suorakulmion yläreunaan.

  1. Määritä Liike alussa -kohdassa alaspäin suuntautuvan liikkeen asetukseksi 1,5 kertaa vieritysnopeus. Määritä kaikkien muiden paneelin asetusten arvoksi 0. Näin tekstikenttä liikkuu alaspäin samaan suuntaan ja samalla nopeudella kuin vihreä suorakulmio. Sekä vihreä suorakulmio että tekstikehys jäävät paikoilleen, kun sivu on vieritetty niiden perussijaintien ohi.
  2. Jos valitset Esikatselu, voit vierittää sivua ja näet, miten vihreä suorakulmio ja tekstikenttä rullautuvat esiin sivun yläreunasta. Kun olet testannut sivua riittävästi, valitse Muoto ja jatka sivun muokkaamista.
  3. Avaa Näytä-valikko ja loitonna sivua arvoon 10 %. Valitse vihreä suorakulmio ja tekstikenttä. Pidä optio-/Alt-näppäintä painettuna ja monista elementit vetämällä ne alemmas sivulle. Valitse suorakulmion kaksoiskappaleen täyttöväriksi tummansininen ja päivitä tekstikentän sisältö tekstityökalulla.
Määritä suorakulmion kaksoiskappaleen täyttöväri ja vaihda tekstikehyksen sisältö uutta sivun osaa varten.
Määritä suorakulmion kaksoiskappaleen täyttöväri ja vaihda tekstikehyksen sisältö uutta sivun osaa varten.

Esimerkissä tekstikehyksen kaksoiskappaleessa lukee: "Use it to drastically alter the appearance of your website". Voit kirjoittaa kehykseen minkä tahansa sivusi tummansiniseen osaan sopivan tekstin.

  1. Käytä valintatyökalua ja sijoita suorakulmion kaksoiskappale ja tekstikehys noin 5 448 pikselin etäisyydelle sivun yläreunasta.
  2. Valitse tummansininen suorakulmio ja valitse sitten Vieritystehosteet-paneelin Liike-välilehti. Perussijainti on päivittynyt automaattisesti suorakulmion uuteen sijaintiin (5 448 pikseliä). Liike alussa -kohdassa alaspäin suuntautuvan liikkeen nopeus on 1,5 kertaa vieritysnopeus, ja muiden suuntien arvo on 0. Jos tarkastat tekstikehyksen kaksoiskappaleen asetukset, havaitset, että alkuperäisen kehyksen vieritystehosteet ovat säilyneet.
  3. Toista vaiheet 12 ja 13 vielä neljä kertaa, jolloin saat kaikkiaan kuusi erilaista suurta suorakulmiota, joiden päällä on tekstikehys. Jokaisen suorakulmion varjotehoste ja vieritystehosteen asetukset on määritetty valmiiksi. Sijoita viimeiset neljä suorakulmiota seuraaviin perussijainteihin: 8 648 pikseliä, 11 852 pikseliä, 15 058 pikseliä ja 18 251 pikseliä. Kahden osan väli on aina suunnilleen 1 200 pikseliä.
  4. Määritä Täyttö-valikossa suorakulmioille eri täyttövärit. Käytä täyttöön sekä yhtenäisiä värejä että liukuvärejä, jotta sivun eri osat erottuvat selvästi muista.
  5. Päivitä kunkin osan tekstisisältö tekstityökalulla. Voit esimerkiksi kuvata tekstillä kyseisen osan taustaväriä: "Tämä on sininen osa."
  6. Testaa sivua valitsemalla Tiedosto > Esikatsele sivu selaimessa. Vieritä sivua, jolloin näet sen osien tulevan esiin ja vaihtuvan seuraavaan.
  7. Sulje selain ja palaa Muse-työtilaan.

Dynaaminen teksti

Voit luoda erikoisia typografisia elementtejä yhdistämällä vieritystehosteita ja Adobe Edge -verkkokirjasimia. Verkkokirjasimet tarjoavat käyttöösi laajan valikoiman erilaisia fontteja, jotka latautuvat sivun latautuessa. Sen sijaan, että käyttäisit sivulla kuvankäsittelyohjelmassa luotuja animoituja tekstejä, voit luoda näyttäviä ja helposti päivitettäviä sivuja Adobe Edge -verkkokirjasimien avulla. Lisäämällä vielä vieritystehosteita saat aikaan vaikuttavan animaation, joka toistuu sivua vieritettäessä.

Voit luoda samankaltaisen dynaamista tekstiä hyödyntävän tehosteen seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 4 854 pikseliä.
  2. Valitse sivun täyttöväriksi ei mitään. Selaimen täyttövärillä ei ole merkitystä, koska seuraavassa vaiheessa sivu peitetään pitkällä suorakulmiolla.
  3. Piirrä Suorakulmio-työkalulla suunnilleen 1 159 pikseliä leveä ja 4 854 pikseliä korkea suuri suorakulmio. Avaa Täyttö-valikko ja valitse suorakulmion täyttöväriksi yhtenäinen väri tai liukuväri. Esimerkissä täyttöväri on fuksianpunainen liukuväri. Keskitä suorakulmio valintatyökalun avulla niin, että se täyttää koko selaimen alueen. Voit halutessasi loitontaa sivua ja tarkistaa, että suorakulmio on varmasti keskellä.
Loitonna sivua ja sijoita suorakulmio pitkän sivun keskikohtaan.
Loitonna sivua ja sijoita suorakulmio pitkän sivun keskikohtaan.

  1. Kun olet keskittänyt suorakulmion, palauta Näytä-valikossa suurennukseksi 100 %.
  2. Luo sivun vasemmalle puolelle useita tekstikehyksiä tekstityökalulla. Esimerkissä tekstikehyksiä on viisi. Tekstikehysten sisällöt on lueteltu alla, mutta voit käyttää mitä tahansa haluamiasi tekstejä.
    • Five Frames
    • Scrolling
    • At Different Speeds Will
    • Create
    • Dynamic Tension

Halutessasi voit lisäksi monistaa joitakin tekstikehyksiä ja muuttaa niiden muotoilua hieman. Esimerkissä sanan "Create" sisältävä tekstikehys on monistettu ja kaksoiskappaleet on asetettu päällekkäin, mikä luo vaaleansinisen heittovarjon.

  1. Valitse kukin tekstikehys tekstityökalulla. Teksti-paneelissa (tai Hallinta-paneelin tekstinmuokkausasetuksissa) voit muokata tekstin ulkonäköä valitsemalla erilaisia verkkokirjasimia, kirjasinkokoja, värejä ja muita typografisia tehosteita.
  2. Valitse kaikki tekstikehykset. Kun kehykset ovat valittuina, avaa Vieritystehosteet-paneelin Liike-välilehti. Määritä sama numeroarvo kaikkien valittujen tekstikehysten perussijainniksi. (Esimerkissä perussijainniksi on määritetty 1 372 pikseliä.) Määritä sitten sekä Liike alussa- että Liike lopussa -asetusten vaakasuuntaisen liikkeen suunnaksi oikea. Määritä Liike alussa- ja Liike lopussa -asetusten kaikkien pystysuuntaisten liikkeiden asetukseksi 0, jolloin tekstikehykset eivät liiku pystysuunnassa.
  3. Napsauta jotain kohtaa tekstikehysten ulkopuolella ja napsauta sitten kutakin kehystä erikseen. Anna jokaiselle tekstikehykselle hieman erilaiset arvot. Seuraavassa luettelossa ensimmäinen arvo on Liike alussa -asetuksen nopeusarvo ja toinen arvo Liike lopussa -asetuksen vaakasuuntaisen liikkeen (suunta oikealle) nopeusarvo.
    • Five Frames: 0,9x, 0,1x
    • Scrolling: 0,12x, 0,5x
    • At Different Speeds Will: 0,7x, 0,17x
    • Create: 1,1x, 0,005x
    • Dynamic Tension.: 1x, 0,01x

Huomautus:

jos olet luonut heittovarjotehosteen johonkin tekstikehykseen monistamalla sen, voit vieritystehosteiden määrittämistä varten yhdistää vähintään kaksi saman kehyksen kaksoiskappaletta ryhmäksi ja hallita niitä kuin yhtä elementtiä.

  1. Luo tekstikenttä tekstityökalulla ja kirjoita sivun oikealle puolelle numero 5. Myös tässä voit halutessasi monistaa tekstikehyksen ja muokata kaksoiskappaleiden värejä ja muotoilua saadaksesi aikaan viistettyjä reunoja ja varjoja. Jos monistat tekstikehyksen muotoilua varten, yhdistä kehyksen kaksoiskappaleet yhdeksi ryhmäksi, jolloin voit määrittää vieritystehosteet koko ryhmälle yhtä aikaa.
  2. Valitse tekstikenttä, jossa on numero 5 ja valitse sitten Vieritystehosteet-paneelin Liike-välilehden Liike-valintaruutu. Määritä perussijainti antamalla numeroarvo tai vetämällä T-kahvaa (esimerkissä perussijainti on 1 425 pikseliä). Määritä Liike alussa -kohdassa elementti liikkumaan vasemmalle nopeudella, joka on sama kuin vieritysnopeus. Määritä Liike lopussa -kohdassa elementti liikkumaan vasemmalle nopeudella, joka on 0,1 kertaa vieritysnopeus.
  3. Testaa sivua valitsemalla Tiedosto > Esikatsele sivu selaimessa. Vieritä sivua ja katso, miten viisi tekstikehystä tulevat sivulle vasemmalta ja numeron 5 sisältävä tekstikehys oikealta. Tarkastele tekstikehysten animointia vierittämällä sivua ylös ja alas.
  4. Sulje selain ja palaa Muse-työtilaan.
     

Pinottu valikko

Vieritystehosteiden avulla voit tehdä sivulla navigoinnista mielenkiintoista. Valikkopalkki voi esimerkiksi muodostua sivulle liukuvista painikkeista. Esimerkissä sivun alareunasta nousee vieritettäessä neljä päällesiirtymispainiketta, jotka asettuvat paikoilleen pystysuuntaiseksi valikkopalkiksi.

Kun painikkeet ovat paikoillaan, valikko-osan taustasisältö (hehkulampun kuva, värillinen tausta-alue, tekstikehys ja kulman vinoraidoitus) liukuu sivulle kummastakin reunasta.

Vaikka painikkeet eivät tässä esimerkissä ole linkitettyjä, voit halutessasi lisätä linkit Hyperlinkki-pudotusvalikosta. Linkit voivat viedä kävijän joko kokonaan uudelle sivulle tai ankkurinimiöiden avulla toiseen kohtaan nykyisellä sivulla.

Voit luoda samankaltaisen pinotun valikon seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 7 465 pikseliä.
  2. Valitse sivun täyttöväriksi ei mitään ja määritä selaimelle yhtenäinen täyttöväri. Esimerkkisivussa selaimen täyttöväriksi on valittu vaaleanruskea.
  3. Luo uusi tekstikehys tekstityökalulla. Kirjoita siihen "Home" (tai haluamasi muu teksti). Lisää tekstikehykseen taustaväri Hallinta-paneelin muotoiluasetuksilla. Päivitä myös tekstin tyyli muotoiluasetuksilla. Säädä painikkeen mittoja sen sivuilla olevilla kahvoilla niin, että leveydeksi tulee noin 300 pikseliä ja korkeudeksi 115.
Muokkaa tekstikehyksen tyyliä Hallinta-paneelin asetuksilla.
Muokkaa tekstikehyksen tyyliä Hallinta-paneelin asetuksilla.

  1. Avaa Tilat-paneeli. Luo päällesiirtymispainike valitsemalla Päällesiirtymisen tila ja toinen täyttöväri tai tyyli.
Valitse päällesiirtymisen tila ja määritä painikkeelle normaalista tilasta poikkeava ulkoasu.
Valitse päällesiirtymisen tila ja määritä painikkeelle normaalista tilasta poikkeava ulkoasu.

  1. Kun olet päivittänyt päällesiirtymisen tilan asetukset, valitse taas normaali tila.
  2. Avaa Vieritystehosteet-paneelin Liike-välilehti. Valitse painike ja valitse sitten Liike-valintaruutu. Määritä perussijainti vetämällä T-kahvaa tai antamalla numeroarvo. Määritä Liike alussa -kohdassa ylöspäin suuntautuvan liikkeen nopeudeksi 0,75 kertaa vieritysnopeus. Jätä kaikkien muiden kenttien arvoksi 0.
Ota vieritystehosteet käyttöön Liike-välilehdessä ja määritä liikkeen suunta ja nopeus.
Ota vieritystehosteet käyttöön Liike-välilehdessä ja määritä liikkeen suunta ja nopeus.

  1. Pidä optio-/Alt-näppäintä painettuna ja vedä Home-tekstin sisältävä painike alemmas sivulla. Tämä luo painikkeen kaksoiskappaleen. Varmista, että kaksoiskappale on pystysuunnassa samassa linjassa alkuperäisen Home-painikkeen kanssa. Kun elementit ovat samassa linjassa ja kaksoiskappale on valittuna, sivun keskiosassa näkyy tummansininen älykäs apuviiva.
Pidä optio-/Alt-näppäintä painettuna ja vedä sitten painikkeen kaksoiskappale pystysuunnassa samaan linjaan alkuperäisen kanssa.
Pidä optio-/Alt-näppäintä painettuna ja vedä sitten painikkeen kaksoiskappale pystysuunnassa samaan linjaan alkuperäisen kanssa.

  1. Siirrä painikkeen kaksoiskappaletta alaspäin sivulla, kunnes se on suunnilleen 460 pikseliä alkuperäisen alapuolella.
  2. Luo painikkeesta vielä kaksi kaksoiskappaletta toistamalla vaiheet 7 ja 8, minkä jälkeen sivulla pitäisi olla tasaisin välein neljä painiketta. Muokkaa toisen, kolmannen ja neljännen painikkeen tekstejä tekstityökalulla. Esimerkissä tekstisisällöt ylhäältä alas ovat "Products, Photos, Contact Us".
Muokkaa tekstikehysten tekstejä niin, että kaikki painikkeet ovat erilaisia.
Muokkaa tekstikehysten tekstejä niin, että kaikki painikkeet ovat erilaisia.

Kun teit kaksoiskappaleen ensimmäisestä painikkeesta ("Home"), myös tekstikehyksen tyyli ja sisältö sekä vieritystehosteiden asetukset kopioituivat kaksoiskappaleeseen. Jos valitset jonkin kaksoiskappalepainikkeista ja avaat Vieritystehosteet-paneelin, näet että Liike-välilehden asetukset ovat täsmälleen samat kuin alkuperäisen painikkeen ("Home") ja painikkeen perussijainti on 460 pikseliä edellisen painikkeen sijainnin alapuolella (kaikkien sivun painikkeiden välinen etäisyys on sama).

  1. Kun kaikki neljä painiketta ovat lopullisilla paikoillaan, laske painikeryhmän kokonaiskorkeus laskemalla yhteen painikkeiden korkeudet ja välit. Esimerkissä painikkeet ovat 116 pikseliä korkeita ja niiden välillä on 4 pikseliä. Valmiin pystysuuntaisen valikkopalkin kokonaiskorkeus on siis 476 pikseliä. Piirrä suorakulmiotyökalulla suorakulmio, jonka leveys on sama kuin sivun osan haluttu leveys ja korkeus sama kuin valikkopalkin korkeus. Esimerkissä suorakulmion leveys on 931 pikseliä ja korkeus 476 pikseliä.
  2. Jos haluat käyttää samaa väritystä kuin esimerkissä, valitse suorakulmion täyttöväriksi haalea vaaleanpunainen. Joka tapauksessa värin on oltava vaaleampi kuin painikkeiden Normaalin tilan väri. Voit halutessasi myös pyöristää kulmat syöttämällä Hallinta-paneeliin sopivan kulman säteen arvon. Esimerkissä arvo on kaikissa kulmissa 10 pikseliä.
Valitse suorakulmio ja määritä pyöristettyjen kulmien kulman säde.
Valitse suorakulmio ja määritä pyöristettyjen kulmien kulman säde.

  1. Kohdista suorakulmio valintatyökalulla siten, että sen yläreuna on noin 5 094 pikselin etäisyydellä sivun yläreunasta. Varmista myös, että suorakulmion vasen reuna on samassa linjassa painikkeiden vasemman reunan kanssa. Esimerkissä sekä suorakulmio että painikkeet ovat 14 pikselin etäisyydellä sivun vasemmasta reunasta. Voit tarkastella näitä asetuksia valitsemalla jonkin elementin ja avaamalla Muunnos-paneelin. Arvo X on etäisyys vasemmasta reunasta (14 pikseliä) ja arvo Y on etäisyys sivun yläreunasta (5 094 pikseliä).
  2. Kun suorakulmio on edelleen valittuna, avaa Vieritystehosteet-paneeli ja valitse Liike-välilehden Liike-valintaruutu. Määritä perussijainniksi 4 979 pikseliä.
  3. Määritä Liike alussa -kohdassa oikealle suuntautuvan liikkeen nopeus samaksi kuin vieritysnopeus. Jätä kaikkien muiden Liike-välilehden kenttien arvoksi 0.
Ohjaa vieritystehosteiden avulla suorakulmio liukumaan sivulle vasemmalta, liikkumaan oikealle ja pysähtymään paikoilleen.
Ohjaa vieritystehosteiden avulla suorakulmio liukumaan sivulle vasemmalta, liikkumaan oikealle ja pysähtymään paikoilleen.

  1. Varmista, että suorakulmio on painikkeiden takana, valitsemalla ensin suorakulmio ja sitten Objekti > Vie taakse.
  2. Valitse Tiedosto > Sijoita ja valitse kuvatiedosto. Sijoita se paikalleen napsauttamalla sivua kerran. Esimerkissä kuva esittää hehkulamppua ja on läpinäkyvä. Hehkulamppu tulee suuren suorakulmion päälle sen oikeaan reunaan, joka ei jää painikkeiden alle. Esimerkissä kuva on 501 pikselin etäisyydellä vasemmasta reunasta (arvo X) ja 5 245 pikselin etäisyydellä sivun yläreunasta (arvo Y).
  3. Varmista, että kuva on painikkeiden takana. Valitse ensin kuva ja sitten Objekti > Vie taakse. Tarkoitus on, että kuva on suuren suorakulmion päällä mutta painikkeiden takana.
  4. Valitse paikallaan oleva kuva ja avaa sitten Vieritystehosteet-paneelin Liike-välilehti ja valitse Liike-valintaruutu. Määritä haluamasi perussijainnin arvo. Esimerkissä se on 4 979 pikseliä.
  5. Määritä Liike alussa -kohdassa oikealle suuntautuvan liikkeen nopeudeksi 0,75 kertaa vieritysnopeus. Määritä kaikkien muiden suuntien arvoksi 0.
Määritä Liike alussa -asetukseksi liike oikealle ja nopeudeksi sama kuin suorakulmiolla.
Määritä Liike alussa -asetukseksi liike oikealle ja nopeudeksi sama kuin suorakulmiolla.

  1. Luo tekstikehys tekstityökalulla. Esimerkissä tekstikehyksen sisältö on: "Stack linked text frames with high contrast roll-overs to create unusual menus". Voit käyttää mitä tahansa haluamaasi tekstiä. Muokkaa tekstin tyyliä Hallinta-paneelin muotoiluasetuksilla. Esimerkissä tekstikehyksessä ei ole käytetty taustan täyttöväriä.
  2. Aseta tekstikehys paikalleen kuvan oikealle puolelle valintatyökalun avulla. Esimerkissä tekstikehyksen arvo X on 357 pikseliä (etäisyys vasemmasta reunasta) ja arvo Y 5 136 pikseliä (etäisyys yläreunasta). Kehyksen todellinen sijainti määräytyy valitsemasi tekstisisällön ja sen muotoilun mukaan.
  3. Valitse tekstikehys ja valitse sitten joko Objekti > Vie taaksepäin tai vaihda sen paikkaa Tasot-paneelissa. Kehyksen on tarkoitus näkyä painikkeiden takana, mutta suuren suorakulmion päällä.
  4. Valitse Vieritystehosteet-paneelin Liike-valintaruutu. Määritä perussijainti vetämällä T-kahvaa tai antamalla numeroarvo. Esimerkissä perussijainti on 4 979 pikseliä, eli perussijainti on sama kuin sivulle sijoitetun kuvan (hehkulamppu).
  5. Määritä Liike alussa -kohdassa tekstikehys liikkumaan vasemmalle nopeudella, joka on puolet vieritysnopeudesta. Määritä kaikkien muiden kenttien asetukseksi 0.
Määritä tekstikehys liikkumaan hitaasti vasemmalle (päinvastaiseen suuntaan kuin suorakulmio ja siihen sijoitettu kuva).
Tekstikehys on määritetty liikkumaan hitaasti vasemmalle.

Perustason pinottu valikko on nyt valmis. Voit kuitenkin lisätä vielä yhden elementin. Se tapahtuu lisäämällä suuren suorakulmion oikean alanurkan päälle useita kierrettyjä suorakulmiota samalla tavoin kuin Liukuva valikko -esimerkissä, jolloin tuloksena on vinoraidoitus.

  1. Piirrä suorakulmiotyökalulla useita erilevyisiä suorakulmioita. Valitse suorakulmioiden täyttöväriksi selaimen taustavärinä oleva täyttöväri. Tällä tavoin suorakulmiot ovat näkymättömissä siihen saakka, kunnes suuri suorakulmio liikkuu vasemmalta niiden päälle. Voit halutessasi yhdistää vinot suorakulmiot ryhmäksi ja käsitellä niitä yhtenä elementtinä.
Kierrä suorakulmiojoukkoa niin, että ne luovat vinoraidoituksen suuren suorakulmion oikeaan alanurkkaan.
Kierrä suorakulmiojoukkoa niin, että ne luovat vinoraidoituksen suuren suorakulmion oikeaan alanurkkaan.

  1. Määritä suuri suorakulmio näkymään sivun kaikkien muiden elementtien takana joko Tasot-paneelin avulla tai valitsemalla Objekti > Vie taakse.
  2. Testaa ratkaisujesi toimivuus aika ajoin napsauttamalla Esikatselu-painiketta tai esikatselemalla sivua selaimessa ja vierittämällä sitä alaspäin, jolloin pinottu valikko liikkuu paikalleen. Kun olet testannut sivua tarpeeksi, palaa Museen. 

Motion bg

Voit luoda sivullesi liikkuvan taustan peittämällä pitkän sivun useilla suurilla suorakulmioilla, jotka on täytetty rinnakkaisilla taustakuvilla. Esimerkissä liikeasetuksia ei määritetä Vieritystehosteet-paneelin Liike-välilehdessä, vaan Täyttö-valikon Vieritys-välilehdessä.

Voit luoda samankaltaisen liikkuvan taustan seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 6 254 pikseliä.

Huomautus:

Esimerkissä selaimen täyttövärillä ei ole merkitystä, koska suorakulmiot peittävät koko sivun. Määritä sivun täyttöväriksi ei mitään.

  1. Piirrä suorakulmiotyökalulla sivun yläreunaan suuri suorakulmio. Esimerkissä suorakulmion leveys on 1 159 pikseliä ja korkeus 1 312 pikseliä. Keskitä valintatyökalulla suorakulmio sivulle siten, että sen molemmat sivureunat ulottuvat reilusti selainikkunan reunojen ulkopuolelle.
  2. Kun suorakulmio on edelleen valittuna, määritä taustakuva Täyttö-valikossa. Valitse Sovitus-valikosta Rinnakkain, jolloin kuvat asettuvat rinnakkain.
Täytä suorakulmio rinnakkaisilla kuvilla.
Täytä suorakulmio rinnakkaisilla kuvilla.

  1. Voit halutessasi luoda suorakulmiolle näyttävän reunan määrittämällä varjotehosteen Tehosteet-valikossa.
  2. Valitse suorakulmio ja avaa sitten Täyttö-valikon Vieritys-välilehti. Valitse Liike-valintaruutu ja määritä perussijainti joko vetämällä T-kahvaa tai antamalla numeroarvo kenttään. Esimerkissä perussijainniksi on määritetty 512 pikseliä. Halutessasi voit myös kutistaa kahvan ja kohdistaa sen suorakulmion yläreunaan.
  3. Valitse Liike alussa -kohdassa liike alaspäin ja liike vasemmalle ja määritä kummankin liikkeen nopeudeksi 0,2 kertaa vieritysnopeus. Käytä samoja asetuksia myös Liike lopussa -kohdassa. 
Määritä Liike-asetukset Täyttö-valikon Vieritys-välilehdessä.
Määritä Liike-asetukset Täyttö-valikon Vieritys-välilehdessä.

  1. Luo toinen täytetty suorakulmio toistamalla vaiheet 2–6. Aseta uusi suorakulmio välittömästi ensimmäisen suorakulmion alapuolelle niin, että selaimen täyttöväri ei näy lainkaan eikä suorakulmioiden väliin jää tilaa. Valitse uusi kuva ja täytä uuden suorakulmion tausta rinnakkaisilla kuvilla.
  2. Luo kolmas suuri suorakulmio toistamalla vaihe 7 ja aseta se välittömästi toisen suorakulmion alapuolelle. Valitse Täyttö-valikossa uusi kuva rinnakkain asetettavaksi taustakuvaksi. Jos loitonnat sivua Näytä-valikossa, pystyt helpommin näkemään kaikki suorakulmiot ja kohdistamaan ne samaan pystylinjaan.
Loitonna sivua ja sijoita kolme suurta suorakulmiota samaan pystylinjaan valintatyökalun avulla.
Loitonna sivua ja sijoita kolme suurta suorakulmiota samaan pystylinjaan valintatyökalun avulla.

Huomautus:

Esimerkissä kolmas suorakulmio on kahta ensimmäistä pidempi. Voit joko lisätä kolmanteen suorakulmioon korkeutta vetämällä kahvoja tai luoda neljännen suorakulmion täyttämään sivun alaosan tyhjän tilan.  

  1. Valitse toinen suorakulmio ja avaa sitten Täyttö-valikon Vieritys-välilehti. Määritä Liike alussa -kohdassa suorakulmio liikkumaan oikealle 0,3-kertaisella vieritysnopeudella. Käytä myös Liike lopussa -kohdassa samoja asetuksia: suorakulmio liikkuu oikealle 0,3-kertaisella vieritysnopeudella. Jätä molempien pystysuuntaisen liikkeen kenttien arvoksi 0.
Määritä Liike alussa- ja Liike lopussa -asetuksilla toinen suorakulmio liikkumaan oikealle.
Määritä Liike alussa- ja Liike lopussa -asetuksilla toinen suorakulmio liikkumaan oikealle.

  1. Valitse kolmas suorakulmio ja muokkaa sen asetuksia Täyttö-valikon Vieritys-välilehdessä. Määritä Liike alussa -asetuksiksi liike ylöspäin 0,25-kertaisella vieritysnopeudella ja liike vasemmalle 0,6-kertaisella vieritysnopeudella. Valitse samat asetukset myös kolmannen suorakulmion Liike lopussa -kohdassa.
  2. Testaa sivua valitsemalla Tiedosto > Esikatsele sivu selaimessa. Vieritä sivua, jolloin näet, miten rinnakkaisilla kuvilla täytetyt suorakulmiot näyttävät liikkuvan vinottain sitä mukaa, kun vierität sivua alaspäin. Suorakulmiot liikkuvat myös sivua ylöspäin vieritettäessä.
  3. Sulje selain ja palaa Muse-työtilaan.

Maskit

Esimerkissä pylväsdiagrammi ilmestyy esiin animoituna. Vaaleanpunainen nuoli mutkittelee ylöspäin diagrammin pylväiden lomassa. Vaikka pylväät näyttävät kasvavan ylös diagrammin alareunasta, ne ovat tosiasiassa väriltään yhtenäisiä suorakulmioita, joiden vieritystehosteet saavat ne paljastumaan suurempien valkoisten suorakulmioiden takaa (suorakulmioiden yhtenäinen valkoinen täyttöväri on sama kuin sivun taustaväri).

Esimerkissä on vieritystehosteiden lisäksi käytetty myös monia muita tekniikoita. Elementit on järjestetty toistensa eteen ja taakse Tasot-paneelissa. Kuvaelementtien päällä on valkoisia suorakulmioita. Kun valkoiset suorakulmiot ovat pylväsdiagrammin päällä, ne peittävät pylväät ja nuolen näkyvistä, eli toimivat niiden maskina. Sekä valkoisten suorakulmioiden että diagrammin pohjan vieritystehosteiden liikeasetusten arvot ovat 0, eli ne pysyvät paikallaan sivua vieritettäessä. Suorakulmioiden alla olevien pylväiden ja vaaleanpunaisen nuolen vieritystehosteiden liikeasetukset saavat ne liikkumaan ylöspäin ja tulemaan näkyviin pylväsdiagrammin muodostuessa.

Voit luoda samankaltaisen maskitehosteen seuraavien ohjeiden avulla.

  1. Valitse Muoto-näkymässä Sivu > Sivun ominaisuudet. Määritä Vähimmäiskorkeus-kenttään huomattavasti suurempi arvo. Esimerkkisivustossa sivun vähimmäiskorkeudeksi on määritetty 6 076 pikseliä.
  2. Määritä sekä sivun että selaimen täyttöväriksi yhtenäinen valkoinen (tai mikä tahansa muu haluamasi väri, kunhan muistat käyttää samaa väriä myös maskina toimivien suorakulmioiden täyttämiseen).
  3. Piirrä suorakulmiotyökalulla sivulle suuri suorakulmio. Esimerkissä suorakulmion leveys on 804 pikseliä ja korkeus 489 pikseliä.
  4. Valitse suorakulmion täyttöväriksi ei mitään. Valitse haluamasi viivan väri. Määritä Viiva-valikossa suorakulmion vasemman reunan ja alareunan näkyvien viivojen paksuudeksi 20 ja oikean reunan ja yläreunan viivojen paksuudeksi 0, jolloin ne jäävät näkymättömiin. Olet nyt luonut pohjan pylväsdiagrammille.
     
Määritä suorakulmion vasemman reunan ja alareunan viivat Viiva-valikossa.
Määritä suorakulmion vasemman reunan ja alareunan viivat Viiva-valikossa.

  1. Valitse suorakulmio ja avaa sitten Vieritystehosteet-paneelin Liike-välilehti. Määritä perussijainti ja anna kaikkien neljän kentän arvoksi 0. Tämä merkitsee, että suorakulmio ei liiku ennen perussijaintiaan eikä sen jälkeen, vaan pysyy paikallaan.
Kiinnitä suorakulmio sivulle kirjoittamalla kaikkiin kenttiin 0.
Kiinnitä suorakulmio sivulle kirjoittamalla kaikkiin kenttiin 0.

  1. Piirrä suorakulmiotyökalulla kaksi suurempaa suorakulmiota. Piirrä ensimmäinen suorakulmio samaan linjaan diagrammin vasemman reunan kanssa. Esimerkissä tämän suorakulmion leveys on 657 pikseliä ja korkeus 1 810 pikseliä.
  2. Piirrä toinen suorakulmio diagrammin alle samaan linjaan sen alareunan kanssa. Esimerkissä tämän suorakulmion leveys on 1 002 pikseliä ja korkeus 1 541 pikseliä.
  3. Määritä kummankin suorakulmion täyttöväriksi valkoinen (tai sama väri, jonka valitsit selaimen täyttöväriksi) ja viivan paksuudeksi 0. Asettele suorakulmiot valintatyökalulla samaan linjaan diagrammin reunojen kanssa.
Aseta suuremmat suorakulmiot diagrammin vasemmalle puolelle ja alapuolelle.
Aseta suuremmat suorakulmiot diagrammin vasemmalle puolelle ja alapuolelle.

  1. Valitse suorakulmiot, napsauta hiiren kakkospainiketta ja yhdistä suorakulmiot ryhmäksi valitsemalla Objekti > Ryhmä.
  2. Valitse suorakulmioryhmä ja avaa sitten Vieritystehosteet-paneelin Liike-välilehti. Määritä perussijainti (esimerkissä se on 1 516 pikseliä) ja anna kaikkien muiden neljän kentän arvoksi 0. Tämä merkitsee, että valkoisten suorakulmioiden ryhmä ei liiku ennen perussijaintiaan eikä sen jälkeen. Ryhmä pysyy paikallaan diagrammin ulkoreunojen tavoin.
  3. Piilota ryhmä tilapäisesti ja lukitse se Tasot-paneelissa.
  4. Vieritä sivua alaspäin ryhmän alapuolelle ja piirrä suorakulmiotyökalulla kaikkiaan viisi samanlevyistä suorakulmiota pylväiksi. Esimerkissä kaikki pylväät ovat 74 pikseliä leveitä, mutta niiden korkeus vaihtelee. Vasemmalta oikealle esimerkin viiden pylvään korkeudet ovat 141, 188, 292, 444 ja 583 pikseliä. Kaikki pylväät on täytetty samalla vihreällä värillä, jota käytettiin diagrammin vasenta reunaa ja alareunaa merkitsevässä viivassa.
Aseta viisi suorakulmiota sivulle yksi kerrallaan.
Aseta viisi suorakulmiota sivulle yksi kerrallaan.

  1. Seuraavassa on lueteltu suorakulmioiden sijainnit vasemmalta oikealle X- ja Y-arvoina.
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. Valitse sitten yksi suorakulmio kerrallaan. Aloita vasemmanpuolimmaisesta ja etene oikealle. Valittuasi suorakulmion valitse Vieritystehosteet-paneelin Liike-välilehden Liike-valintaruutu ja anna perussijainnin arvo seuraavasta luettelosta (arvot ovat järjestyksessä).
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Valitse kaikki suorakulmiot ja valitse Vieritystehosteet-paneelin Liike alussa -kohdassa liike ylöspäin vieritysnopeudella. Määritä kaikkien muiden kenttien asetukseksi 0.
Määritä kaikkien viiden suorakulmion liikeasetukset samalla kertaa Vieritystehosteet-paneelissa.
Määritä kaikkien viiden suorakulmion liikeasetukset samalla kertaa Vieritystehosteet-paneelissa.

  1. Aseta sivulle PNG-tiedosto, jossa on läpinäkyvyystehoste. Esimerkissä PNG-tiedosto on kuva ylöspäin mutkittelevasta vaaleanpunaisesta nuolesta. Esimerkin PNG-kuva on 695 pikseliä leveä ja 443 pikseliä korkea. Kun se on sivulla, siirrä se kohtaan, jonka X-arvo on 78 ja Y-arvo 3 427 pikseliä.
  2. Järjestä PNG-tiedosto Tasot-paneelissa vasemmalta lukien ensimmäisen ja kolmannen pylvään alapuolelle, mutta toisen, neljännen ja viidennen pylvään yläpuolelle.
Tasot-paneelissa voit määrittää nuolen PNG-kuvan kiemurtelemaan diagrammin pylväiden lomassa.
Tasot-paneelissa voit määrittää nuolen PNG-kuvan kiemurtelemaan diagrammin pylväiden lomassa.

  1. Valitse nuolen kuva ja avaa sitten Vieritystehosteet-paneelin Liike-välilehti ja valitse Liike-valintaruutu. Määritä perussijainti (esimerkissä se on 3 238 pikseliä). Määritä Liike alussa -kohdassa liikesuunniksi ylöspäin ja oikealle ja molempien kenttien nopeusarvoksi 0,25 kertaa vieritysnopeus. Määritä Liike lopussa -kohdassa molempien kenttien arvoksi 0.
Muokkaa liikeasetuksia Vieritystehosteet-paneelissa.
Muokkaa liikeasetuksia Vieritystehosteet-paneelissa.

  1. Avaa Tasot-paneeli, tuo näkyviin kaksi aiemmin piilottamaasi ja lukitsemaasi suorakulmiota ja poista niiden lukitus. Siirrä tämä ryhmä muiden elementtien yläpuolelle, jolloin se näkyy sivun kaiken sisällön päällä. Koska ryhmä on päällimmäisenä, se toimii maskina, joka päästää diagrammin pylväät ja nuolen näkyviin vasta, kun ne liikkuvat diagrammin reunojen sisään.
  2. Testaa sivua valitsemalla Tiedosto > Esikatsele sivu selaimessa. Sivua vierittäessäsi näet, miten pylväsdiagrammin osat näyttävät liikkuvan paikoilleen. Ne tulevat esiin valkoisten suorakulmioiden alta vasta, kun ne ovat diagrammin reunojen sisällä.
  3. Sulje selain ja palaa Muse-työtilaan.

Esimerkkejä sivustoista, joissa käytetään vieritystehosteita

Katso Demential Lab -sivustosta, miltä vieritystehosteet näyttävät käytännössä.

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ö