Opi luomaan monipuolisia, vuorovaikutteisia Adobe Muse -sivustoja, jotka sisältävät Adobe Edge Animatella luotuja animaatioita ja vieritystehosteita.

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.

Adobe Edge Animate on web-vuorovaikutuksen suunnittelutyökalu, jonka avulla voit lisätä sivustoihin animoitua sisältöä käyttämällä HTML5:n kaltaisia web-standardeja. Animaten intuitiivisen aikajanakäyttöliittymän avulla voit visuaalisesti koostaa näyttäviä HTML5-animaatioita, jotka toistuvat kaikissa nykyaikaisissa selaimissa.

Animaatioiden valmisteleminen Animatessa

Ennen kuin siirrät sisältöä Animatesta Museen, voit tehdä Animate-tiedostoon eräitä esivalmisteluja, jotta sen upottaminen Museen tapahtuu saumattomasti. Toimi seuraavasti:

  1. Käynnistä Animate. Aloitusikkuna avautuu.

  2. Valitse Avaa tiedosto ja etsi lataamasi esimerkkitiedosto, jonka tiedostotunniste on .an. Voit halutessasi avata myös itse luomasi Animate-tiedoston.

    Adobe Musessa voi upottaa Edge Animate -animaatioita.
    Napsauta aloitusikkunan Avaa tiedosto -linkkiä.

  3. Avaa .an-tiedosto valitsemalla Avaa, jolloin avaamisvalintaikkuna sulkeutuu. Projekti tulee näkyviin Animate-työtilaan.

    Projekti tulee näkyviin
    Animate-projekti näkyy näytön keskellä.

    Animatella luodut animaatiot voidaan määrittää toistumaan automaattisesti (autoplay) tai edellyttämään, että käyttäjä käynnistää toiston napsauttamalla pysäytyskuvaa, kun animaatio on latautunut. SkyScraper-esimerkki on asetettu toistumaan automaattisesti, eikä se vaadi käyttäjän toimenpiteitä. Jos automaattinen toisto on poistettu käytöstä, sivulla näkyy staattinen kuva kunnes animaatiota napsautetaan. Animate Showcase sisältää esimerkkejä animaatioista, jotka eivät toistu automaattisesti.

    Huomautus:

    Voit määrittää, toistuuko animaatio välittömästi, valitsemalla pääikkunan ja valitsemalla tai poistamalla valinnan Ominaisuudet-paneelin Automaattinen toisto -valintaruudusta.

    Automaattinen toisto -valinta
    Ota automaattinen toisto käyttöön valitsemalla Autoplay-ominaisuus.

  4. Valitse taustakuva napsauttamalla sitä pääikkunassa. Kun taustakuva on valittuna, sininen laatikko tulee näkyviin ja vasemmalla oleva Ominaisuudet-paneeli näyttää kuvan ominaisuudet (tässä esimerkissä kuvan nimi on Image2). Poista taustakuvatiedosto painamalla askelpalautinta (Windows) tai Delete-näppäintä (Mac).

    Sininen laatikko
    Valitse taustakuva ja poista se.

  5. Kun pääikkuna on valittuna, napsauta sen värimallia Ominaisuudet-paneelissa ja määritä läpinäkyvyysasetus.

    Läpinäkyvyysasetus
    Aseta pääikkunan tausta läpinäkyväksi.

    Huomautus:

    Pääikkunan sisältö näkyy valkoisella taustalla. Läpinäkyvä tausta ei näy pääikkunassa, ellei animaatiota viedä tai esikatsella.

  6. Tallenna viimeaikaiset muutoksesi valitsemalla Tiedosto > Tallenna.

  7. Valitse Tiedosto > Julkaisuasetukset, jolloin julkaisuasetusten valintaikkuna tulee näyttöön.

  8. Poista valinta vasemman Julkaisukohde-sarakkeen Verkko-valintaruudusta ja valitse vaihtoehto Animate-käyttöönottopaketti.

  9. Tallenna muutokset ja sulje julkaisuasetusten valintaikkuna valitsemalla Tallenna.

  10. Julkaise projekti valitsemalla Tiedosto > Julkaise.

  11. Lopeta Animate. Etsi Animate-projektikansio tietokoneen kiintolevyltä Windowsin Resurssienhallinnan (tai Mac OS:n Finderin) kautta. Kun olet julkaissut projektin, etsi kansio nimeltä Animate Package. Tässä kansiossa olevaa .OAM-tiedostoa käytetään lisäämään Animate-sisältö Muse-sivustoosi.

  12. Kopioi .OAM-tiedosto ja tallenna se työpöydälläsi olevaan kansioon, joka sisältää myös muut verkkosivustosi kuvat ja kohteet. Kun animaatio on julkaistu ja tiedosto on tallennettu sivuston kansioon, jatka seuraavaan osioon, jossa Animate-sisältö sijoitetaan sivulle.

Animatella luotujen animaatioiden sijoittaminen Muse-sivulle

Voit lisätä animaation Muse-sivuston sivulle seuraavasti:

  1. Käynnistä Adobe Muse ja avaa sivusto, jota haluat muokata.

  2. Kaksoisnapsauta Suunnittele-näkymässä sen sivun nimeä, johon haluat lisätä animaation.

  3. Valitse Tiedosto > Sijoita... ja valitse sivuston kansiossa oleva .OAM-tiedosto.

  4. Sijoita animaatio sivulle napsauttamalla kerran haluamaasi kohtaa.

    Huomautus:

    Toisin kuin kuvia sijoitettaessa, et voi muuttaa Animate-animaation kokoa napsauttamalla ja vetämällä. Jos haluat sijoittaa sisällön eri kokoisena, päivitä Edge-projekti ja julkaise .OAM-tiedosto uudelleen.

  5. Valintatyökalun avulla voit sijoittaa animaation haluttuun kohtaan sivulla. Huomaa, että vaikka animaation tausta näyttää läpinäkymättömältä Musessa, se on läpinäkyvä, kun sivua esikatsellaan tai se julkaistaan.

  6. Valitsemalla Tiedosto > Esikatsele sivu selaimessa voit varmistaa, että animaatio näkyy oikein. Jos haluat tehdä muutoksia, palaa Museen ja muuta sivun elementtien sijoittelua. Kohteet-paneelissa voit havaita, että .OAM-tiedosto on lueteltu kohteiden joukossa. Edge Animatella luodut animaatiot voidaan linkittää uudelleen ja päivittää aivan kuten muut sivuston kohteet.

    Jos palaat Animateen, voit esimerkiksi avata projektin ja muuttaa sitä. Kun myöhemmin julkaiset .OAM-tiedoston uudelleen ja korvaat sivustokansiossa olevan version, Kohteet-paneelissa näkyy vanhentunut linkkikuvake. Tämä ilmaisee, että alkuperäistä tiedostoa on muokattu sen jälkeen, kun kohde on sijoitettu sivulle.

    Voit päivittää sijoittamasi tiedoston napsauttamalla .OAM-tiedoston nimeä Kohteet-paneelissa hiiren kakkospainikkeella ja valitsemalla Linkitä uudelleen.

    Linkitä uudelleen -vaihtoehto päivittää sijoitetun kohteen vastaamaan muokattua lähdetiedostoa. Tämä on helpompi tapa päivittää animaatio nopeasti sen sijaan, että poistaisit ja korvaisit tiedostot manuaalisesti.

  7. Napsauta ohjauspaneelin Julkaise-linkkiä. Valitse halutut vaihtoehdot ja julkaise sivuston päivitykset valitsemalla OK.

Lisätietoja HTML5-verkkosisällön ja animaatioiden koostamisesta Adobe Edge Animaten avulla on Adobe Edge Animaten ohjeaiheissa. Saat lisää vinkkejä Musen käyttämiseen tutustumalla opastusohjelmia esittelevään Musen Ohje ja opastusohjelmat -sivuun tai Musen Tapahtumat-sivuun, jolla on käynnissä olevia tai tallennettuja verkkoseminaareja.

Animaation lisääminen sivustoon upottamalla multimediasisältöä

  1. Kaksoisnapsauta Suunnittele-näkymässä MasterFlash-miniatyyria, jotta se avautuu muokattavaksi Muoto-näkymässä. Huomaa, että koska monistit A-sivupohjan aiemmin, staattisen logon kuva on edelleen mukana. Voit käyttää apuna staattista kuvaa animaatiosuorakulmiota sijoittaessasi. Varmista kuitenkin, että poistat staattisen logokuvan sen jälkeen, kun olet upottanut multimediaelementin.

  2. Valitse Tiedosto > Sijoita. Siirry Tuo-valintaikkunassa Kevins_Koffee_Kart-kansioon ja valitse tiedosto nimeltä logo.swf.

  3. Sijoita SWF-tiedosto vasempaan yläkulmaan olemassa olevan logon kuvatiedostoa vastaavaan kohtaan.

  4. Kun olet kohdistanut uuden SWF-ikkunan, jonka juuri sijoitit vanhan staattisen logon avulla, poista staattinen logo valitsemalla se ja painamalla Delete-näppäintä.

  5. Voit tarkistaa, miltä koko sivusto näyttää aloitussivun uusien muutosten kanssa, valitsemalla Tiedosto > Esikatsele sivusto selaimessa ja testaamalla logon näkymisen eri sivuilla. Voit työskennellä paikallisesti omalla koneellasi julkaisematta sivustoa ja esikatsella sitten sivuston selaimessa napsauttamalla kaikkia sivuja sivuston navigoinnissa. Huomaa, että animaatio (SWF-tiedosto) näkyy kerran aloitussivulla ja pysähtyy. Jos napsautat muita sivuja, niillä näkyy vain staattinen logo.

    Huomautus:

    Jos valitset Tiedosto > Esikatsele sivu selaimessa, uusi selainikkuna latautuu nopeammin näyttämään aloitussivun, mutta esikatselussa näkyy vain aktiivinen sivu (aloitussivu). Valitse tämä vaihtoehto, jos haluat tarkistaa sivuston yhden sivun koko sivuston sijaan.

Vieritystehosteiden lisääminen animaatioihin

Adobe Musen avulla voit lisätä Adobe Edge Animatella luomiasi animaatioita verkkosivuille. Jos haluat käyttää Adobe Edge Animate -vieritystehosteita, sinun on ensin luotava tähän tarkoitukseen sopiva animaatio.

Adobe Musessa voit lisätä vieritystehosteita OAM-tiedostoihin. Ne vaikuttavat pääaikajanalle lisättyihin animaatioihin. Voit suunnitella animaation strategisesti ja luoda interaktiivisia animaatioita siten, että vain ne kohteet, joiden haluat liikkuvan sivua vieritettäessä, ovat pääaikajanalla. Muut elementit on tällöin sijoitettava sisäkkäisiin aikajanoihin. Kun kävijä vierittää sivua, vieritystehosteen asetukset vaikuttavat ainoastaan pääaikajanan animoitujen elementtien toistoon.

Lisätietoja Adobe Musen vieritystehosteista on kohdassa Vieritystehosteet.

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

  1. Vie OAM-tiedosto Animatesta ja tallenna se sivustosi kansioon. Tietoja OAM-tiedostojen viemisestä Animatesta on artikkelissa Animaatioiden sijoittaminen Adobe Musessa.
  2. Käynnistä Muse ja avaa sivu Muoto-näkymässä kaksoisnapsauttamalla sitä. Varmista, että sivu on tarpeeksi pitkä vieritettäväksi, muokkaamalla vähimmäiskorkeusasetuksia Sivun ominaisuudet -valintaikkunassa.
  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, valitse Edge Animate -valintaruutu.
Vieritystehosteet-paneeli
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 700 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 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 ruutu jokaista sivun vieritettyä 10 pikseliä kohti. Mitä nopeammin kävijä vierittää sivua, sitä nopeammin animaatio toistuu.

Huomautus:

Vieritystehosteasetukset eivät vaikuta animoituihin objekteihin, jotka on asetettu sisäkkäin Animate-koosteen pääaikajanalle tai joihin on luotu linkki siitä. 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.

Esimerkki

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. Voit ladata esimerkkitiedoston osoitteesta ScrollEffects.com.

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. 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ä.
Samat perussijainti- ja liikeasetukset
Kompassit liikkuvat, kunnes sivua vieritetään niiden perussijaintiin saakka, minkä jälkeen ne pysyvät paikoillaan, vaikka sivua vieritettäisiin alaspäin.

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.
Kehyksen vaihtaminen 350 pikselin välein
Sekä vasemman- että oikeanpuoleinen kompassi on määritetty vaihtamaan kehystä 350 pikselin välein.

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.
Kehyksen vaihtaminen 400 pikselin välein
Keskimmäinen OAM-tiedosto on määritetty vaihtamaan ruutua 40 pikselin välein.

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.

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ö