Opi järjestämään, hallitsemaan ja muuntamaan objekteja Adobe Musessa. Seuraavassa kerrotaan, miten valokuvia optimoidaan Adobe Musea varten.

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 Musen objekteihin sisältyvät joko sisäisesti luodut tai ulkoisista lähteistä tuodut suunnitteluelementit. Verkkosivulle voidaan lisätä kuvia, tekstiä, kuvakehyksiä ja muuta sisältöä, ja niitä voidaan muokata Adobe Musen erilaisilla työkaluilla.

Eräs yleisimmistä työnkuluista on painikkeen luominen Adobe Photoshopissa ja sen tuonti Adobe Museen. Adobe Muse tunnistaa osaltaan Photoshopissa luodut tasot ja tasovedokset. Adobe Musessa voit määrittää nämä tasot painikkeen tiloiksi omassa verkkosivustossasi.

Voit lisätä verkkosivun piirtoalueelle lisättyihin objekteihin muunnoksia sivuston suunnittelutarpeiden mukaisesti. Voit myös määrittää sisäkkäisten elementtien välistykset eristämällä objektin ja lisäämällä siihen sopivat täyte- ja sarakevälit.

Kuvien käyttäminen Adobe Muse -projektissa

Kuvakehysten lisääminen Adobe Muse -projekteihin

Voit sijoittaa kuvakehyksiä suoraan Adobe Muse -projekteihin Kuvakehys-työkalulla. Napsauta Työkalut-paneelissa Kuvakehys-työkalua ja napsauta sitten haluamaasi kohtaa projektissasi.

  1. Napsauta Työkalut-paneelissa joko suorakulmiokehystyökalua tai soikiokehystyökalua.

    Adobe Musen kuvakehystyökalu
    Vedä ja pudota suorakulmio- ja soikiokuvakehyksiä Adobe Musessa.

  2. Napsauta kuvakehystyökalua ja sijoita kuvakehys projektiin vetämällä.

    Voit napsauttaa ja sijoittaa projektiisi useita kuvakehyksiä. Voit myös muuttaa kuvakehysten kokoa ja siirtää niitä suunnittelutarpeiden mukaan.

    Voit täyttää kehyksen värillä tai sijoittaa siihen kuvan. Sijoita kuva vetämällä ja pudottamalla kuva kehykseen. Kuva sovitetaan kehyksen kokoon.

    Suorakulmio- ja soikiokuvakehykset
    Suorakulmio- ja soikiokuvakehykset

Yksittäisen kuvan sijoittaminen sivulle

Musen työtila toimii samalla tavoin kuin Illustratorissa ja InDesignissa, joissa sijoitettava kuva ladataan ensin ja sen jälkeen napsautetaan sivua, jolla sen halutaan näkyvän. Jos haluat lisätä kuvatiedoston sijoittamalla sen suoraan sivulle, toimi seuraavasti:

  1. Valitse Tiedosto > Sijoita tai käytä pikanäppäintä komento-D (Mac) tai Ctrl-D (Windows), jotta Tuo-valintaikkuna avautuu.
  2. Valitse selaamalla esimerkkitiedostojen kansiossa oleva tiedosto made-with-muse.png. Valitse se ja sulje Tuo-valintaikkuna valitsemalla Avaa.

Sijoita kuva napsauttamalla kerran lähellä sivun alareunaa. Tässä tapauksessa haluat sijoittaa kuvan täydessä koossa, joten napsauta vain kerran. Jos kuitenkin haluaisit muuttaa sijoitetun kuvan kokoa, voisit skaalata kuvan tiettyyn kokoon napsauttamalla ja vetämällä. 

Vedä kuvaa valintatyökalulla kohti alatunnisteen ruudukon suorakulmion pystysuuntaista keskikohtaa. Punaiset apuviivat ja turkoosit mittaruudut näkyvät hetken ajan, jotta tasaaminen keskelle on helpompaa.

Kun nämä muutokset on tehty, alatunnistealue on lähes valmis.

Kuvan sijoittaminen Adobe Musessa
Alatunniste koostuu yhdestä suorakulmiosta, jossa on taustakuvien ruudukko ja sen päällä keskelle tasattu sijoitettu kuva.

Musen suorittama kuvien optimointi sivuston julkaisun tai viennin yhteydessä

Voit sijoittaa Adobe Musessa myös painokelpoisia kuvia, jotka muunnetaan verkkoon sopivaan muotoon. Kuvien sovittaminen verkkokäyttöön tarkoittaa kuitenkin usein, että kuvaa pakataan ja sen laatu heikkenee. Jos Museen asetetaan kuvia, joita ei ole valmisteltu verkossa käytettäväksi, ne pakkautuvat automaattisesti. Jos julkaiset tai viet sivuston etkä ole tyytyväinen automaattisiin tuloksiin, voit kokeilla luoda ja optimoida omat verkkoon sopivat kuvasi manuaalisesti Photoshopissa tai Adobe Fireworks® -ohjelmistossa. Poista alkuperäiset kuvat ja sijoita uudet optimoidut kuvat niiden tilalle, ja julkaise tai vie sivusto sitten uudelleen.

Huomaa, että muut Musessa tekemäsi muutokset, kuten rajaus, koon muutto tai viisteiden, varjojen tai hehkujen lisääminen saavat Musen luomaan kuvan uudelleen ja pakkaamaan sen automaattisesti. Jos haluat säätää optimointiprosessia tarkemmin, voit lisätä tehosteita kuvaan Photoshopissa tai Fireworksissa, optimoida tiedoston kuvanmuokkausohjelmistossa ja asettaa sitten kuvan Museen, jolloin saat säädettyä pakkauksen tasoa itse. Voit asettaa Photoshopin PSD-tiedostoja suoraan Museen sen sijaan, että veisit PNG-, JPG- tai GIF-tiedostoja, mutta myös tällöin Muse luo uuden kuvatiedoston automaattisilla pakkausalgoritmeillaan.

Kuvien optimointi verkossa näyttämistä varten

Jos linkitetty tiedosto on sijoitettu erittäin korkeatarkkuuksisena versiona ja skaalattu pienemmäksi sivua varten, seurauksena voi olla vientivirheitä ja viennin hitautta. Tätä työnkulkua ei suositella. Ongelmat esiintyvät selvemmin, jos sivulle asetetaan useita täyskokoisia (yli 2 000 kuvapisteen) kuvia, jotka skaalataan asetteluun sopiviksi.

Jos sijoitat erittäin suuren kuvatiedoston, Muse rajoittaa automaattisesti sen kokoa ja skaalaa tiedoston 2 048 kuvapisteen levyiseksi. Jos viet hiiren osoittimen kohteen nimen päälle Kohteet-paneelissa, työkaluvihjeessä näkyy sijoitetun kuvan alkuperäinen koko verrattuna kooltaan muutetun (enimmäiskokoon skaalatun) kohteen kokoon.

Paras käytäntö on käyttää kuvanmuokkausohjelmaa verkkoon tarkoitettujen grafiikkatiedostojen koon muuttamiseen ja optimointiin ennen niiden sijoittamista sivuille. Mitoiltaan erittäin suurten kuvatiedostojen sijoittaminen voi tehdä .muse-tiedostosta huomattavasti tarvittavaa suuremman. Tällöin .muse-tiedostossa joudutaan käsittelemään kuvapistetieto, jota ei tarvita kuvan näyttämiseen verkossa. Seurauksena voi olla pitempi käsittelyaika vietäessä ja julkaistaessa sivustoja. Joissakin tapauksissa erittäin suuri .muse-tiedosto voi aiheuttaa aikakatkaisun, kun kaikkien sen tiedostojen kokoa yritetään muuttaa ja optimoida vienti- tai julkaisuprosessin aikana. Seurauksena voi olla aikakatkaisuvirheitä.

Ongelman ratkaisemiseksi voit napsauttaa kohteiden nimiä hiiren kakkospainikkeella ja valita Optimoi kohteen koko, jolloin skaalatun kuvan näyttämisen kannalta tarpeeton tieto poistetaan.

Jos skaalaat optimoidun kuvan suuremmaksi sivulla, näyttöön saattaa tulla kohteen pikselimäärän suurentamista koskeva virhe. Voit ratkaista tämän ongelman valitsemalla Tuo suurempi koko, jolloin kuvadataa noudetaan lisää, jotta skaalattu kuva voidaan näyttää riittävällä tarkkuudella.

Paikkamerkkimuotojen piirtäminen

Paikkamerkkimuoto voi olla soikio, suorakulmio tai monikulmio, jonka voit täyttää kuvalla, tekstillä tai värillä.

  1. Valitse Työkalut-paneelista joko suorakulmiotyökalu tai soikiotyökalu.

    Vedä paikkamerkkimuotoja Adobe Musessa
    Valitse työkalupalkista suorakulmio- tai ellipsityökalu

  2. Sijoita suorakulmio- tai soikiomuoto Adobe Muse -projektiisi vetämällä.

    • Luo neliöitä pitämällä vaihtonäppäintä painettuna ja napsauttamalla suorakulmiotyökalulla.
    • Luo ympyröitä pitämällä vaihtonäppäintä painettuna ja napsauttamalla soikiotyökalulla.

    Voit täyttää muodot grafiikalla, tekstillä tai värillä.

  3. Määritä objektien sovitusasetukset valitsemalla suorakulmio tai soikio ja valitse sitten Objekti > Sovitus.

    Valittavissa ovat seuraavat sovitusvaihtoehdot:

    • Sovita sisältö suhteessa: muuttaa sisällön kokoa kehykseen sopivaksi ja säilyttää samalla sisällön mittasuhteet. Kehyksen mitat eivät muutu. Jos sisällön ja kehyksen mittasuhteet poikkeavat toisistaan, seurauksena on jonkin verran tyhjää tilaa.
    • Sovita kehys suhteessa: muuttaa sisällön koon koko kehyksen täyttäväksi ja säilyttää samalla sisällön mittasuhteet. Kehyksen mitat eivät muutu. Jos sisällön ja kehyksen mittasuhteet eroavat toisistaan, kehyksen muokkausalue rajaa osan sisällöstä.
    Sovita objektien sisältö suhteessa Adobe Musessa
    Sovita objektien sisältö suhteessa

    Sovita objektien kehys suhteessa (Adobe Muse)
    Sovita objektien kehys suhteessa

Photoshop-tiedoston asettaminen päälle siirryttäväksi painikkeeksi

  1. Valitse Tiedosto > Sijoita Photoshop -painike. Etsi PSD-tiedosto avautuvasta Photoshopin tuonti -valintaikkunasta. Valitse tiedosto napsauttamalla Valitse (Mac) tai Avaa (Windows).

  2. Photoshopin tuontiasetukset -valintaikkuna tulee näkyviin. Tutki hetken ajan, miten asetuksia käytetään. Valikoiden avulla voit määrittää, mitä Photoshop-tiedoston tasoa käytetään painikkeen normaalitilana (miltä painike näyttää sivun latautuessa), rollover-tilana (miltä painike näyttää, kun kävijät vievät hiiren osoittimen sen päälle) sekä hiiren painikkeen painamisen tilana (miltä painike näyttää, kun kävijät napsauttavat painiketta). Photoshop-tasojen nimet näkyvät kolmessa tilavalikossa ja miniatyyrit näyttävät visuaalisesti, miten kukin valittu taso tulee näkyviin.

  3. Tässä esimerkissä Photoshop-tasot on jo järjestetty oikein painikkeen tilojen mukaisesti. Valikon asetuksia ei tarvitse muuttaa. Hyväksy tilojen oletusasetus valitsemalla OK.

    Käyttämällä Photoshopin tuontiasetukset -valintaikkunaa voit liittää nykyiset Photoshopin tasot haluttuihin painikkeen tiloihin.
    Käyttämällä Photoshopin tuontiasetukset -valintaikkunaa voit liittää nykyiset Photoshopin tasot haluttuihin painikkeen tiloihin.

  4. Voit sijoittaa Photoshop-tiedoston alkuperäisessä koossaan napsauttamalla kerran A-sivupohjan ylätunnisteessa oikeassa yläkulmassa.

  5. Voit käyttää WebKit-pohjaista hahmonnusemulaattoria napsauttamalla Esikatselu-linkkiä. Tarkista A-sivupohjan näyttö. Kun tarkastelet sivua ensimmäisen kerran, näyttöön tulee painikkeen normaalitila. Jos viet osoittimen painikkeen päälle, sen ulkonäkö muuttuu hieman (ruskean pisaran väri muuttuu vaaleammaksi), ja jos napsautat painiketta, valkoinen teksti muuttuu vaaleanruskeaksi niin pitkäksi aikaa kuin hiiren painike on painettuna.

  6. Napsauttamalla Muoto-painiketta palaat muokkaamaan A-sivupohjaa Muoto-näkymässä.

Jaa-painike näyttää oikeat tilat. Seuraavassa osiossa opit kohdistamaan Jaa-painikkeen sivuston navigointiosion oikealla puolella näkyvän pisaran kuvan kanssa.

Seuraavassa osassa opit määrittämään sivupohjan ylä- ja alatunnistealueet.

Objektien kiinnittäminen selainikkunaan

Kun sijoitat kuvan tai lisäät grafiikkaa sivulle muulla tavoin, määrität sijainnin valintatyökalulla ja nuolinäppäimillä. Kun liikutat kuvaa, se liikkuu suhteessa sivun muihin elementteihin (kuviin, tekstiin ja mediaan). Voit liikuttaa myös muita elementtejä, mutta koko sivu toimii esitteen tai julisteen tavoin. Kaikki sivun kohteet sijaitsevat samalla tasolla. Jos sivu on pitkä (sisältää runsaasti sisältöä pystysuunnassa) ja vierailija vierittää sitä alaspäin, hän ei enää näe sivun yläreunassa olevia kuvia.

Olet todennäköisesti nähnyt kiinnitettyjä objekteja eri verkkosivuilla. Ne näkyvät aina samassa paikassa. Ne näyttävät kelluvan sivun muun sisällön päällä.

Kiinnitystyökalulla estät kohteiden siirtymisen muun sivun mukana. Sen sijaan, että asettaisit sen suhteessa muihin sivun elementteihin, määrität sille tietyn paikan selaimessa. Kiinnitetyt kuvat eivät liiku. Ne näkyvät aina samassa paikassa (esimerkiksi oikeassa yläkulmassa tai lähellä alareunaa) riippumatta muista vieritettävistä sivuelementeistä. Jos vierailija muuttaa selainikkunansa kokoa, kiinnitetyt kuvat näkyvät aina kiinnitetyssä sijainnissaan suhteessa selainikkunaan.

Kun kohde kiinnitetään, se ikään kuin irrotetaan sivun asettelusta ja liitetään selaimeen, vähän samaan tapaan kuin muistilappu kiinnitetään taululle. Kiinnitetty elementti liikkuu ja säilyttää paikkansa suhteessa selainikkunaan, jos vierailija muuttaa selainikkunan kokoa, mutta se ei liiku, jos vierailija vierittää sivun sisältöä vaaka- tai pystysuunnassa.

Kiinnitystyökalua käytetään seuraavasti:

  1. Kun A-sivupohja on avoinna Muoto-näkymässä, valitse Facebook-kuvake valintatyökalulla.
  2. Napsauta hallintapaneelin Kiinnitys-valinnassa oikean yläkulman kiinnityssijaintia. Tämä asetus kiinnittää elementin sen oikean yläkulman nykyisen sijainnin perusteella.
  1. Kiinnitä toistamalla vaiheet 1 ja 2 Google+- ja Twitter-kuvakepainikkeet oikean yläkulman sijaintiinsa siten, että ne eivät liiku selainikkunassa, kun muuta sisältöä vieritetään.
  2. Tuo sivun miniatyyrit näkyviin valitsemalla Suunnittele. Kaikilla sivuilla näkyy nyt kolme sosiaalisen median kuvaketta, koska lisäsit ne sivupohjaan.
  3. Avaa food-sivu Muoto-näkymässä kaksoisnapsauttamalla sitä Suunnittele-näkymässä. Tai jos se on jo avoinna, aktivoi se napsauttamalla food-sivun välilehteä. Avaa sivu selaimessa valitsemalla Tiedosto > Esikatsele sivu selaimessa.
  4. Siirry pitkällä sivulla jälkiruokalistaan napsauttamalla Dessert-valikkokohdetta. Huomaa, että vaikka muita sivuelementtejä vieritetään, yhteisöpalvelujen painikkeet näkyvät samassa paikassa sivun oikeassa reunassa, koska ne on kiinnitetty.
Kiinnitä kohteet selainikkunaan Adobe Muse -sivustoissa
Objektien kiinnittäminen selainikkunaan

Siirry osioon Ensimmäisen verkkosivustosi luominen Musella, luku 6, jossa opit ryhmittämään objektijoukkoja siten, että ne käyttäytyvät yhtenä elementtinä. Viimeistelet myös Visit-sivun lisäämällä upotetun Google-kartan, josta vierailijat näkevät Katie's Cafen sijainnin. Kun olet viimeistellyt sivuston, huomaat, kuinka helposti sen pystyy lataamaan hosting-palvelimeen (Business Catalystiin) ja julkaisemaan verkossa. Voit kätevästi esitellä keskeneräistä työtäsi asiakkaille ja työtovereille.

Ensimmäisen verkkosivustosi luominen Musella -ohjeen luvussa 4 opit lisäämään ankkurinimiöitä ja linkittämään ne manuaalisen Vaakasuuntainen valikko -widgetin valikkokohteisiin. Opit myös estämään elementtien vierittämisen kiinnittämällä ne sivulle. Lisäksi opit lisäämään linkkejä tiedostoihin, jotta vierailijat voivat ladata niitä.

Lisäksi perehdyt objektien ryhmittämiseen ja ryhmien käyttöön. Tällä tavoin voit lisätä sivuille erilaisia sisältöjoukkoja. Jatkat myös upotetun HTML-koodin käyttöä. Tällä kertaa lisäät vuorovaikutteisen Google-kartan Visit-sivulle. Lopuksi näet, kuinka luot viimeistellyn vaikutelman lisäämällä suosikkikuvakkeen ja julkaisemalla kokeilusivuston Musen hosting-palvelimiin.

Objektien ryhmittäminen ja ryhmien liittäminen yhtenä yksikkönä

Kuten InDesignissa ja muissa suunnitteluohjelmissa, voit yhdistää useita objekteja ryhmäksi, minkä jälkeen niitä kohdellaan yhtenä yksikkönä. Tässä osiossa luot useista elementeistä (sijoitetuista kuvista ja tekstikehyksistä) koostuvan asettelun ja opit sitten, kuinka voit ryhmittää niitä. Tällöin niiden sijoittaminen tai kopiointi yhtenä yksikkönä on helppoa. Noudata seuraavia ohjeita:

  1. Avaa home-sivu Muoto-näkymässä kaksoisnapsauttamalla sitä Suunnittele-näkymässä.
  2. Valitse Tiedosto > Sijoita. Valitse esimerkkitiedostojen kansiosta tiedosto panel-open-bottom.png. Sulje Tuo-valintaikkuna valitsemalla Avaa, ja sijoita sitten grafiikka täysikokoisena napsauttamalla kerran etusivun alareunaa (Valolaatikko-koostewidgetin alapuolella ja alatunnisteen yläpuolella).

PNG-tiedoston peittävyys on pienempi, joten toistuva taustakuvio näkyy osittain läpinäkyvän kukkagrafiikan läpi.

  1. Valitse uudelleen Tiedosto > Sijoita. Valitse tällä kertaa tiedosto spoon-map.png. Sijoita se valitsemalla Avaa ja napsauttamalla sitten kerran ylhäällä keskellä olevaa terälehteä.
  2. Kun lusikkakuva on valittuna, kopioi se pitämällä optionäppäintä (Mac) tai Alt-näppäintä (Windows) painettuna ja vetämällä se sen terälehden kohdalle, joka on oikealla puolella lähimpänä keskustaa. Toista tämä vaihe uudelleen: kopioi keskimmäinen lusikkakuva ja vedä kopio vasemmalla olevan terälehden kohdalle. Määritä valintatyökalulla kolmen lusikan paikka kuten alla olevassa kuvassa.
Sijoita kolme lusikkakuvaa grafiikan kolmen ylimpään terälehteen.
Sijoita kolme lusikkakuvaa grafiikan kolmen ylimpään terälehteen.

  1. Vedä tekstityökalulla tekstikehys keskimmäiseen terälehteen ja kirjoita seuraavat tiedot:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

  1. Määritä tekstille seuraavat muotoiluasetukset Teksti-paneelissa:
    • Kirjasin: Droid Serif (tai mikä tahansa pääteviivallinen kirjasin)
    • Kirjasinkoko: 14
    • Kirjasinväri: #222222 (osassa 5 annoit tälle värille nimeksi katieblack)
    • Kirjasimen tasaus: Keskitetty
    • Rivivälistys: 120 %
  1. Valitse sitten viimeiset kaksi riviä (jotka alkavat viikonpäivillä) ja määritä kirjasinväriksi punainen (#A6342A).
  2. Valitse tekstikehys valintatyökalulla. Kopioi tekstikehys pitämällä optionäppäintä (Mac) tai Alt-näppäintä (Windows) painettuna ja vetämällä se oikealla puolella lähimpänä olevan terälehden kohdalle lusikkakuvan yläpuolelle. Toista tämä vaihe uudelleen: kopioi keskimmäinen tekstikehys ja vedä kopio vasemmalla olevan terälehden kohdalle. Sijoita valintatyökalulla kolme tekstikehystä siten, että ne on kohdistettu kolmen lusikan yläpuolelle kuvan tavoin.
Objektien ryhmittely Adobe Musessa
Sijoita kolme osoitetta siten, että ne näkyvät kolmen lusikan yläpuolella grafiikan kolmessa ylimmässä terälehdessä.

  1. Vaihda tekstityökaluun. Valitse vasemman osoitteen teksti ja kirjoita seuraavat tiedot:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

  1. Valitse tekstityökalulla oikeanpuoleisen osoitteen teksti ja kirjoita seuraavat tiedot:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Nyt, kun suunnittelu on valmis, valitset elementit ja ryhmität ne.

  1. Napsauta ja vedä valintatyökalulla koko kukkagrafiikan yli. Varmista, että valitset sijoitetun kukkakuvan, kolme lusikkakuvaa sekä kolme tekstikehystä. Napsauta hiiren kakkospainiketta ja valitse pikavalikosta Ryhmä. Halutessasi voit myös valita Objekti > Ryhmä.

Huomaa, että kun olet ryhmittänyt objektien joukon, hallintapaneelin vasemmassa yläkulmassa näkyvässä valintaosoittimessa näkyy sana Ryhmä.

  1. Kopioi valittu ryhmä. Palaa Suunnittele-näkymään napsauttamalla Suunnittele-painiketta, ja avaa sitten Visit-sivu Muoto-näkymään kaksoisnapsauttamalla sen miniatyyria. Sijoita koko elementtiryhmä samaan paikkaan valitsemalla Muokkaa > Liitä sijaintiin.

Kuten saatat havaita tästä lyhyestä esimerkistä, ryhmät ovat hyödyllisiä, kun olet saanut suunnittelun valmiiksi ja haluat käyttää sitä yhtenä elementtinä: muuttaa sen paikkaa sivulla tai liittää sen toiselle sivulle.

Ryhmityksen ohella saatat hyötyä myös lukitustoiminnoista, kun olet saanut suunnittelun valmiiksi. Napsauta hiiren kakkospainikkeella ryhmää tai valittua elementtijoukkoa ja lukitse se valitsemalla pikavalikosta Lukitse. (Vaihtoehtoisesti voit valita Objekti > Lukitus). Lukitus varmistaa, ettet vahingossa liikuta tai poista sivun valmiita elementtejä, koska tällöin ne eivät enää ole valittavissa. Jos sinun on myöhemmin muokattava lukittuja elementtejä, valitse Objekti > Poista kaikkien lukitus sivulla.

Kun olet liittänyt kukkagrafiikan Visit-sivuston alareunaan, sivun sisältö on osittain valmis. Seuraavassa osiossa jatkat Visit-sivun muokkaamista lisäämällä vuorovaikutteisen karttaliittymän, jonka avulla vierailijat löytävät lähimmän kahvilan.

Animaation lisääminen 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. Staattisesta kuvasta on apua animaation suorakulmion sijoittamiseen, mutta älä unohda poistaa staattista sijoitettua logon kuvaa sen jälkeen, kun olet upottanut rich media -elementin.

  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 tasannut uuden SWF-ikkunan, jonka sijoitit juuri 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.

Tilapaneelin käyttäminen

Välit-paneelissa voit hyödyntää CSS:n täyte (padding)- ja palstaväli (gutter) -ominaisuuksia. Täyte määrittää tyhjän alueen elementin sisällön ympärillä (reunusten sisäpuolella). Elementin taustaväri vaikuttaa täytteeseen.

Täyte voidaan määrittää, ylös, oikealle, alas ja vasemmalle erillisillä arvoilla. Voit myös yhtenäistää kaikki täytearvot ja muokata niitä samanaikaisesti.

  1. Avaa Välit-paneeli valitsemalla Adobe Musessa Ikkuna > Välit.
Avaa Adobe Musen Välit-paneeli
Avaa Adobe Musen Välit-paneeli

  1. Määritä täytearvot vasemmalle, oikealle, ylös ja alas. Jos haluat syöttää eri arvot, poista valinta -painikkeesta.
Määritä täytteen ja palstavälin asetukset Välit-paneelissa.
Määritä täytteen ja palstavälin asetukset Välit-paneelissa.

  1. Voit halutessasi määrittää myös vaaka- ja pystysuuntaisen sarakevälin.

Objektien skaalaaminen ja kiertäminen Muunnos-paneelissa

Adobe Musessa voit soveltaa objekteihin 2D-muunnoksia. Voit sijoittaa, skaalata ja pyörittää objekteja X- ja Y-akselilla.

Muunnos-paneelin 100 % leveys -vaihtopainikkeella voit määrittää objekteille 100 % leveyden. Voit myös määrittää skaalautuvat objektit ulottumaan selaimen koko leveydelle ja sovittaa ne tietokoneen näyttöön.

Sovella muunnoksia valittuun objektiin seuraavasti:

  1. Valitse Adobe Musessa Ikkuna > Muunnos.
Avaa Adobe Musen Muunnos-paneeli.
Avaa Adobe Musen Muunnos-paneeli.

  1. Kun objekti on valittuna, voit käyttää mitä tahansa seuraavista muunnoksista:
    • Sijainti: Sijoita objekti haluamaasi paikkaan sivulla X- ja Y-arvojen avulla.
    • Skaalaus: Syötä objektin leveys- ja korkeusarvo. Voit myös skaalata objektin leveyttä ja korkeutta toisiinsa suhteutettuina napsauttamalla -painiketta.
    • Pyöritys (: syötä objektin pyörityskulma.
    • 100 % leveys (): voit määrittää objektin leveydeksi 100 %, jotta objekti skaalautuu ja se mukautuu selaimen koko leveyteen.

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ö