edocker CREATE! Käyttöohje

Transkriptio

1 edocker CREATE! Käyttöohje 1

2 Sisältö edocker TOOLS -InDesign-laajennuksen asennus...2 edocker CREATE! -ohjelman asennus...3 Aktivointi...3 Widgetit...4 Widgettien koko...4 Inline-muoto...5 Avaaminen pop-up-ikkunaan...6 Artikkelirakenne...8 InDesign edocker TOOLS Hyperlinkit...10 Hyperlinkin lisääminen InDesignissa...10 Expandable Image...11 Info-popupin tekeminen...12 Kuvaesitys (Slideshow)...13 Video...14 HTML-ikkuna (HTML Window)...15 Article / Reading Mode...16 Julkaisun vieminen edocker CREATE!iin...18 edocker CREATE! Projektin tuominen CREATE!iin...20 Hyperlinkin lisääminen...24 Kuvan lisääminen (Image)...25 Kuvaesityksen lisääminen (Slideshow)...26 Kuvaesityksen lisääminen...26 Videon lisääminen...28 HTML-ikkunan lisääminen...29 Vierivän tekstin lisääminen (Scrolling content)...30 HTML-katkelman lisääminen...31 Esikatselu ja tarkastaminen...32 Projektin julkaiseminen...33 Projektin vieminen palvelimelle...34 edocker TOOLS -InDesign-laajennuksen asennus 1. Kopioi edockerpublisher.zxp -tiedosto esim. työpöydällesi 2. Kaksoisnapsauta tiedostoa, jolloin Adobe Exchange Manager -ohjelman pitäisi alkaa avautumaan. 3. Ohjelmaa pyytää sinua hyväksymään käyttöehdot ja mahdollisesti antaa joitain muitakin ilmoituksia, vastaa kaikkiin kyllä HUOM! Toistaiseksi laajennus toimii vain InDesign CS6:n ja CC:n kanssa. Laajennuksen asennus vaatii sen että koneellesi on asennettu Adobe Exhange Manager. HUOM! Käytä InDesign-versiotasi vastaavaa Exchange Manageria. 2

3 Asennus edocker CREATE! -ohjelman asennus 1. Kopioi edocker_publisher_2.0.air -tiedosto esim. työpöydällesi 2. Kaksoisnapsauta tiedostoa ja seuraa ohjeita 3. Kun avaat ohjelman niin se pyytää sinua aktivoimaan lisenssisi, tarvitset siihen sarjanumeroa jonka olet saanut sähköpostilla (Voit käyttää ohjelmaa viikon ilman aktivointia) 4. Kun ohjelma aukeaa, sinun täytyy tuoda siihen vähintään yksi julkaisu ennenkuin voit tehdä mitään muuta ohjelmassa (ks. sivu XX) edocker CREATE! -ohjelman aktivointi Activointi Deaktivointi 1. Avaa edocker CREATE! 2. Napsauta Register -painiketta (tarvitset tässä vaiheessa sarjanumeron) 1. Paina kysymysmerkki-kuvaketta ruudun oikeassa yläkulmassa 2. Paina Deactivate License -painiketta ruudun alaosassa 3. Vahvista että haluat deaktivoida lisenssin Anna tilausvahvistuksen yhteydessä saamasi sarjanumero Fill in lisense key to register -kenttään ja paina Register 2 Tämän jälkeen edocker CREATE! ei toimi enää tällä koneella, mutta voit käyttää samaa serialia uudelleen toisella työasemalla. Tämän jälkeen edocker CREATE! avautuu ja voit käyttää sitä normaalisti. Muista että voit asentaa edockerin admin-käyttäjänä, mutta varsinainen rekisteröinti tulee suorittaa kirjautuneen sinä käyttäjänä joka edockeria käyttää tulevaisuudessa. 3

4 Widgetit Uusi CREATE! eroaa aiemmista Tablet Publishereista sillä, että interaktiivisia ns. widgettejä on nyt paljon aiempaa runsaammin. Lähes kaikki widgetit voi esittää kahdella eri näkymä-tavalla (appearance): inline-.muodossa eli sivulla siinä kohdassa/koossa mihin ne osoitetaan popup/lightbox -ikkunassa, jonka koon voi määritellä. Widgettien koko Widgettien kokoa (inline-alueet, popup-ikkunat, avaushotspotit yms) määritellessä täytyy tietää onko julkaisussa tarkoitus käyttää zoomia vai ei. Jos zoomi on käytössä, on ns. koko ruudun koko 1536x2008 px (pysty) tai 2048x1496 px (vaaka). Jos zoomi ei ole käytössä vastaavat luvut ovat 768x1004px ja 1024x749. Eli jos haluat esim. lähes koko ruudun levyisen popup-ikkunan, tulee sinun tietysti tietää onko koko ruudun leveys 768px vai 1536px px 700px leveä pop-up-ikkuna 2008px 700px leveä pop-up-ikkuna 768px 1536px 4

5 Inline-muoto InDesignissa valitaan Appearance-kohtaan Inline, sijainti ja koko määritetään MSO:sta. CREATE!issa otetaan ruksi pois kohdasta Open in Popup ja määritetään sijainti ja koko numeroaalisesti tai hiirellä vetämällä. Inline-muodossa oleva elementti sijoittuu sivulle siihen kohtaan ja siinä koossa missä Multi State Object on InDesignissa tai mikä on määritelty TP:n X/Y/Width/Height-kentissä Kuvaesitys sijoittuu suoraan sivulle määritettyyn kohtaan 5

6 Avaaminen pop-up-ikkunaan Suurimman osan widgeteistä voi avata myös popup-ikkunaan, se onkin useimmissa widgeteissä suositeltava tapa. Se esim. kuormittaa laitteen ja selaimen näytönohjainta ja käyttömuistia vähemmän kuin inline-elementit ja on useimmiten käytettävyydeltään mukavampi tapa. CREATE!issa annetut X/Y/Width/Heigh -kenttien arvot määrittävät mihin popupin avaushotspot sijoitetaan. Kun käyttäjä napauttaa hotspottia, popup avautuu. InDesignissa kuvan päälle piirretty symboli, joka kertoo käyttäjälle että kyseessä ei ole yksittäinen kuva Popup avautuu 6

7 InDesignissa valitaan Appearance-kohtaan popup, avaamistriggerin sijainti ja koko määritetään MSO:sta. CREATE!issa laitetaan ruksi kohtaan Open in Popup ja määritetään popupin koko (leveys ja korkeus) ruksin alapuolelle ilmestyviin kenttiin. X/Y/Width/Heigh -kentillä mööritetään tällöin avaushotspotin koko ja sijainti. 7

8 edocker TOOLS InDesign-osa edockerin työnkulusta on muuttunut todella paljon. Aikaisemmissa versioissa InDesignista lähinnä vietiin edockeriin sivujen sisältö. Nyt uudessa versiossa InDesignissa voi tehdä paljon muutakin, esim. lisätä interaktiivisia elementtejä ja nimetä artikkeleita. Julkaisua ei voi enää myöskään viedä eteenpäin väärän kokoisena. Artikkelirakenne Aikasempien edocker-versioiden tapaan myös tässä uudessa versiossa voit määrittää julkaisusi sivut noudattamaan artikkelirakennetta. Se tarkoittaa sitä että kaikki julkaisun sivut eivät ole vierekkäin vaakasuuntaan ladottuna, vaan osa sivuista - eli artikkelin sivut - voivat olla sivumatriisissa myös alekkain. Siis mitä pidempi artikkeli, sitä useampi sivu artikkelissa on alekkain. Lyhyt artikkeli voi mahtua yhteenkin sivuun. Artikkelirakenne luodaan edelleen lisäämällä julkaisuun Sectioneita InDesignin omalla työkalulla. 1. Valitse Pages-paneelista artikkelin aloitussivu 2. Valitse Pages-paneelin valikosta Numbering&Sections Options 3. Paina OK Tästä sivusta eteenpäin kaikki sivut aina seuraavan sectionin alkuun sijoitetaan sivumatriisissa päällekkäin Pieni kolmio Pages-paneelin sivukuvakkeessa sitä että ko. sivusta alkaa uusi section ja näin ollen myös uusi artikkeli. 8

9 UUTTA! Nyt voit lisätä artikkelin nimen jo tässä vaiheessa. Kirjoita haluamasi nimi Section Marker -kenttään. Nimi kulkee paketin mukana CREATE!iin ja ilmestyy siellä kunkin artikkelin Article Name -kenttään ja lopulta julkaisun navigointipaneelin sisällysluetteloon. HUOM! jos aiot määrittää artikkelirakenteen jo InDesignissa, sinun tulee määrittää sectionit kauttaaltaan koko julkaisuun. Jos jätät sectioneiden lisäämisen kesken, sijoittuvat kaikki viimeisen sectionin aloitussivun jälkeiset sivut samaan artikkeliin eli päällekkäin! 9

10 Hyperlinkit Uudessa edockerissa voit määrittää hyperlinkit jos InDesignissa, jos haluat. Voit toki jättää linkkien määrityksen myös Tablet Publöisherin sivueditoriin. Hyperlinkin lisääminen InDesignissa 1. Määritä hyperlinkin aktivoitumisalue (hotspot) piirtämällä ko. kohtaan suorakulmio, jolla ei ole reunaviivaa eikä täyteväriä. 2. Käytä InDesignin Window>Interactive>Buttons&Forms -työkalua ja muuta suorakulmio painikkeeksi (Type:Button) 3: Määritä painikkeen toiminteeksi (Action) Go to URL (+-merkistä) 4. Määritä URL-kenttään - www-osoite -#a[artikkelin numero]p[alasivun numero], esim #a3p5 -mailto: -alkuinen linkki jos kyseessä on sähköpostilinkki 5. Avaa Window>Extensions>eDocker-tools paneeli 6. Valitse painike jonka teit äsken ja siirry edocker-tools-paneelissa Hyperlink-välillehteen 10

11 Expandable Image Laajeneva kuva on työkalu, jolla voit määrittää esim. -taitossa pienen kuvan suurenemaan pop-up-ikkunaan -tehdä esim. lisätitetoa tyyppisiä pop-up-ikkunoita Pienen kuvan laajentaminen suuremmaksi 1. Valmista kuva jota haluat käyttää toiminnon kanssa, tee se kuvankäsittelyohjelmassa tai vaikka toisessa InDesign-dokumentissa haluamaasi kokoon, esim. 600x400px kokoiseksi ja tallenna se JPG tai PNG-muotoon 2. Tuo kuva taittoon File>Place -komennolla tai vastaavalla tavalla 3. Valitse kuva ja napsauta edocker Tools -paneelista Expandable Image -välilehteä 4. Määritä haluatko että pop-ikkuna avautuu kun taitossa olevaa kuvaa napsautetaan (Open With: Invisible Hotspot) tai generoi kuvan yhteyteen painike (Open With: Button) 5. Lisää avautuvaan Pop-up-ikkunaan www-osoite johon ikkunan sisältöä napauttamalla pääsee (optio) 6. Määritä avautuvan pop-up-ikkunan koko HUOM! suosittelemme käyttämään juuri oikean kokoisia JPG/PNG-kuvia,, Jos valittuna on esim. PDF tai AI -tiedosto, edocker TOOLS pyrkii muuttamaan tiedoston automaattisesti PNG-muotoon. 11

12 Info-popupin tekeminen Valmista popupin sisälle avattava lisätietoikkunan sisältö kuvankäsittelyohjelmassa oikeaan kokoon, esim. 600x400px ja tallenna se JPG tai PNG -muotoon. Voit tehdä sisältökuvan myös InDesignissa ja käyttää InDesignin File>Export >>> JPG tai PNG -toimintoa. Tee kuten edellisessä ohjeessa, mutta pienennä taitossa oleva kuva hyvin pieneksi, ja sijoita kuvan päälle painike jossa lukee esim. Lisätietoa tai Avaa tästä lisätietoikkuna tms. Määritä Open With -kohtaan Invisible Hotspot. Pääasia on että painike peittää sen alle jäävän kuvan kokonaan. Tällöin CREATE!iin vietävään julkaisuun jää näkyviin pelkästään painike. Painikkeen alla oleva pikkukuva toimii edelleen avausnappina vaikka kuva ei näykään enää taitossa. Avautuvaan pop-ikkunaan se tulee luonnollisestikin näkyviin. tuo popupin sisältö kuvana taittoon ja pienennä se aivan pieneksi määritä sisältökuva Expandable Imageksi ja aseta pop-up-ikkunan koko Lisätietoa piirrä (tai tuo) kuvan päälle painike, jonka haluat näkyvän taitossa Katkoviiva kuvastaa painikkeen alla olevaa kuvaa, jonka isompi versio avautuu popup-ikkunaan lopullisessa julkaisussa. 12

13 Kuvaesitys (Slideshow) Kuvaesitys-työkalun avulla voit määrittää InDesignissa joukon kuvia toimimaan ns. kuvakarusellina valmiissa digijulkaisussa. Kuvakaruselli voi sijoittua suoraan sivulle, esim jonkun taitossa olevan kuvan tilalle (Appearance: Inline) tai avautua pop-up/lightbox.-näkymään. Kuvien määrittäminen kuvaesitykseksi 1) Valmista kuvat haluamaasi kokoon Photoshopissa tai toisessa oikean kokoisessa In- Design-dokumentissa, suositus on että kaikki esityksen kuvat ovat saman kokoisia, esim. 600x400px 2) Tup kaikki kuvat taittoon esim. InDesignin File>Place -komennolla 3) Sijoita kuvat päällekkäin nippuun, käytä tarvittaessa Window>Object&Layout>Align -paneelin työkaluja 4) Valitse kaikki nipun kuvat ja napsauta Window>Interactive>Object States -paneelista pientä paperiarkkikuvaketta paneelin alareunassa. Nyt kuvanippu on muutettu ns. Multi State Objectiksi. 5) Valitse Multi State Object ja määritä edocker Tools paneelista miten haluat kuvaesityksen toimivan valmiissa julkaisussa. Appearance voi olla Inline (sivulla taiton seassa) tai pop-up (aukeaa sivun päälle ikkunaan) Multi State Objectin tunnistaa paksuhkosta katkoviivasta Luo uusi Multi State Object valituista kuvista Jos valittuna on popup, voi avaaminen tapahtua painikkeella tai multistate-objektin päältä (Invicible Hotspot) 13 Huom! Voit määrittää myös piilossa olevan kuvaesityksen avautumaan napista pienentämällä Multi State Objektin todella pieneksi ja sijoittamalla sen painikegrafiikan taakse piiloon. Pop-up-ikkunan koon määrittely

14 Video Video-työkalun avulla voit siirtää taittoon tuomasi H.264 enkoodatun MP4 videon lopulliseen julkaisuun ja määrittää -sen pyörimään sivulla taittoelementtien joukossa (Appearance:Inline) -avautumaan erilliseen pop-up/lightbox-ikkunaan kun videon poster-kuvaa napautetaan -avautumaan piilotetun videon avausnapista Voit myös käyttää esim. youtube tai Vimeo-tyyppisiä striimattavia videoita, mutta InDesignissa ne tehdään HTML Window -työkalulla. Huomaa että striimattavat videot vaativat aina online-yhteyden! Videon määrittäminen 1) Valmista videotiedosto esim. InDesignin mukana tulevalla Adobe Media Encoderilla tai jollakin muulla vastaavalla ohjelmalla, videon pitää olla H.264 enkoodattu MP4-video. 2) Valmista video oikeaan kokoon. älä tee liian suurta videota, koko kasvaa nopeasti liian suureksi online-käyttöön, sopiva leveys on yleensä n px. 3) Tuo video taittoon File>Place -komennolla 4) Määritä edocker Tools / Video -välilehdestä miten haluat videota käyttää Appearance voi olla Inline (sivulla taiton seassa) tai pop-up (aukeaa sivun päälle ikkunaan) Jos valittuna on pop-up, voi avaaminen tapahtua painikkeella (Button) tai videon poster-kuvasta (Invicible Hotspot) Pop-up-ikkunan koon määrittely Huom! Voit määrittää myös piilossa olevan videon avautumaan napista pienentämällä videon todella pieneksi ja sijoittamalla sen painikegrafiikan taakse piiloon. 14

15 HTML-ikkuna (HTML Window) HTML-ikkuna-työkalun avulla voit määrittää suorakulmion toimimaan paikanpitäjänä määrittelemällesi URL-osoitteelle. Lopullisessa julkaisussa suorakulmion paikalle haetaan sisältö ko. osoitteesta, tai suorakulmio voi toimia hotspottina, jota napauttamalla aukeaa pop-up/lightbox, jossa ko. URLin takaa löytyvä sisältö esitetään. Toiminnon avulla voi esim. hakea julkaisuun -online-videoita -lisätietosivuja internetistä -ostoskori-ikkunoita Haettavan sisällön kanssa tulee olla tarkkana että se soveltuu esitettäväksi valitun kokoisessa tilassa. Parjaiten toimii ns. responsiivinen sisältö, joka mukautuu käytössä olevaan tilaan. HTML-ikkunan määrittäminen 1) Piirrä suorakulmio haluamaasi kohtaan taitossa 2) Valitse suorakulmio ja avaa edocker Tools/ HTML Window välilehti 3) Määritä esitystapa (appearance) - inline tuo URLista haettavan sisällön suoraan sivulle suorakulmion sisään - pop-up tekee suorakulmiosta Hotspotin jota napauttamalla avautuu pop-up/lightbox-ikkuna, jonka sisällä URLista haettava sisältö esitetään 4) Määritä URL josta sisältö haetaan Appearance voi olla Inline (sivulla taiton seassa) tai pop-up (aukeaa sivun päälle ikkunaan) Suorakulmio Jos valittuna on pop-up, voi avaaminen tapahtua painikkeella (Button) tai videon poster-kuvasta (Invicible Hotspot) 15 URLin määrittely Pop-up-ikkunan koon määrittely

16 Article / Reading Mode Article / Reading mode on aivan uusi työkalu edockerissa. Sen avulla voit määritellä jo InDesignissa haluamasi tekstit ns. InDesign Artikkeleiksi. Nämä artikkelit siirtyvät julkaisun mukana tekstitiedostoina loppukäyttäjälle asti, joka voi avata kunkin artikkelin sivun päälle avautuvaan pop-up/lightbox-näkymään. Tällä tavalla tekstiä on helpompi lukea. Punaisella kehyksellä merkityt tekstit on vedetty Article 1:n alle, vihreällä kehyksellä merkitty teksti on vedetty Article 2:n alle. Kumpikin artikkeli sisältöineen avautuu omaan tekstin lukutilaikkunaansa. 1) Valitse artikkelin 1. tekstikehys 2) Avaa edocker Toolsin Article/Reading mode -välilehti ja määritä avataanko lukutila artikkelin 1. tekstikehystä napauttamalla (Invisible Hotspot) vai generoidaanko avaamista varten painike (Button) 3) Määritä lukutilaikkunan koko (Pop-up window size) 16

17 Tekstin lukutilan voi määrittää avautumaan artikkelin 1. tekstikehystä napauttamalla (Appearance:Invisible) tai erikseen generoituvasta painikkeesta (Appearance:Button) AAA Vapaamatkat on uusi Helsinkiläinen matkatoimisto, joka tarjoaa asiakkailleen todellisia matkaelämyksiä, huolista vapaana. Järjestämme viikon - kuukauden mittaisia lomia sekä kotimaahan että ulkomaille, idealla että kaikki aina järjestyy. Kun lähdet meidän mukaamme vapaamatkustajaksi, saat taatusti loman, joka on samaan aikaan rentouttava ja vilkas, rauhallinen ja vauhdikas, x 17

18 Julkaisun vieminen edocker CREATE!iin Kun olet tehnyt kaikki haluamasi toimenpiteet InDesignissa, on aika siirtää projekti edocker CREATE!iin, jossa voit jatkaa aineiston työstämistä. 1) Tallenna dokumentti, et voi viedä tallentamatonta projektia 2) Valitse Export to CREATE! -välilehti edocker Tools -paneelista. Tässä vaiheessa saatat saada pari erilaista varoitusta Tämän ilmoituksen saat jos dokumenttisi läpinäkyvyyksien sekoitus tila on CMYK. Pääsaantöisesti tästä ilmoituksesta ei tarvitse välittää, mutta jos julkaisussasi on paljon läpinäkyvyyttä sisältäviä elementtejä, voit vaihtaa ko. sekoitustilan kohdasta Edit>Transparency Blendspace Tämän ilmoituksen saat jos dokumenttisi ei ole juuri ipadin näytön muotoinen. Tällaisissa tapauksissa edocker Tools luo dokumentin reunoille valkoiset marginaalit niin että oikea sivun muoto saavutetaan. 18

19 3) Nyt avautuu varsinainen viennin asetusikkuna, sieltä sinun tulee asettaa zoomaus päälle jos haluat että julkaisua voi zoomata hyvälaatuisesti (kasvattaa julkaisupaketin kokoa) asettaa sivukuvien tallennuslaatu (medium tai high suositeltuja) määrittää mihin projektisi tiedostot tallennetaan (kohteen pitää olla tyhjä kansio) 4) Lopuksi paina Export. Nyt Tablet Exporter alkaa luomaan sivukuvia ja keräilemään interaktiivisiin elementteihin liittyviä kuvia, videoita, tekstejä yms. Aseta zoomi päälle tai pois Aseta laatu Aseta kohdekansio Paina Export Tablet Exporter kirjoittaa valitsemaasi kohdekansioon oheisen kuvan mukaiset alikansiot; Articles-kansioon tallennetaan lukutilaan avattavat tekstit, Images-kansioon kuvaesityksen ja laajenevan kuvan kuvat, Videos-kansioon videotiedostot. JPG-kansio pitää sisällään sivut, Thumbnails-kansio sivujen pienoiskuvakkeet. Content.json pitää sisällään kaiken metadatan (elementtien koot ja sijainnit, sivurakenteen, sivujen nimet jne) HUOM! Tarkista vielä varmuuden vuoksi että JPG-kansiossa olevat sivukuvat ovat kooltaan 1536x2008/2048x1496 (pysty/vaaka, zoom on) tai 768x1004/1024x748 (pysty/vaaka, 19 zoom off)

20 edocker CREATE! Seuraavaksi käymme läpi edocker CREATE!:n uudet ominaisuudet ja käytön. Uudessa työnkulussa on siis mahdollista tehdä monia asioita valinnaisesti joko InDesignissa tai CREATE!:ssa. InDesignissa luotua elementtiä voi myös korjata, täydentää, poistaa CREATE!:ssa. Projektin tuominen CREATE!iin Tämä toiminto ei ole näennäisesti muuttunut edellisestä versiosta. Tuontitoiminto löytyy edelleen CREATE!in avausnäkymästä, ruudun oikeasta alareunasta (+-merkki). Jos olet valmistellut projektin InDesignissa ja tallentanut sen avoimena kansioperustaisena projektina, käytä Import Folder -toimintoa, navigoi kansioon, jonka Tablet Exporter -In- Design-plugin on luonut ja paina OK. Jos olet käyttänyt edocker PDF2TABLET -konvertteria tai Package-toimintoa Tablet Exporter -InDesign-pluginnissa, käytä tällöin Import Archive -toimintoa ja navigoi projektin EDTP-tiedostoon (jotkut käyttöjärjestelmät suorittavat Import Archive-toiminnon automaattisesti konversion/exportin päätteeksi) 20

21 Onnistuneen tuonnin jälkeen julkaisun ensimmäisestä sivusta generoitu miniatyyrikuvake ilmestyy CREATE!in päänäkymään. Kuvaketta kaksoisnapsauttamalla pääset julkaisun sisälle julkaisunäkymään, tämä toimii täsmälleen samalla tavalla kuin CREATE!in aikaisemmatkin versiot. 21 Julkaisunäkymässä voit avata minkä tahansa sivun sivueditoriin kaksoisnapsauttamalla ko. sivun sivuminiatyyriä valopöydällä (ei thumbnail-paneelissa)

22 Lisää uusi sivu artikkeliin Takaisin kirjastonäkymään Poista artikkeli Napsauta artikkelia niin se aktivoituu, sininen reuna kuvastaa artikkelin valintaa Merkki kertoo että sivulla on käytetty vuorovaikutteista indikaattoria Video Hyperlink HTML-ikkuna Kuvaesitys Popup-kuva Vieritettävä sisältö Miniatyyrikuvat Piilota miniatyyrikuvat 22

23 Vaihda artikkelin nimi (klikkaa kynää) Helppi Vaihda sivun miniatyyrikuva Nimeä artikkeli. Nimet näkyvät julkaisun navigointipaneelissa. Vedä sivuja jos haluat vaihtaa järjestystä Artikkelin kuvaus Lisää poista sivuja Esikatselu Julkaise 23

24 Hyperlinkin lisääminen Tämä toiminto on säilynyt lähes ennallaan. Uutta on se että nyt hyperlinkin hotspot-arean koon ja sijainnin voi määrittää jo luontivaiheessa kun aikaisemmin se piti luoda ensin, ja sen jälkeen käydä editoimassa sitä, jolloin X/Y/Width/Heigth -kentät tulivat käyttöön. Voit käyttää myös #a[artikkelin numero] p[alasivun numero], (esim #a3p5) ja mailto: osoite-tyyppisiä linkkejä kaikkia lisättyjä elementtejä voi aiemmista versioista tuttuun tapaan myös liikutella ja skaalata hiirellä vetämällä. Edit-tilaan pääsee takaisin kun vie hiiren elementin päälle ja napsauttaa esiin ilmestyvää kynä-kuvaketta.. Elementin poisto tapahtuu samassa tilassa näkyvästä ruksista. Muokkaa Poista 24

25 Kuvan lisääminen (Image) Kuva-toiminnolla voit lisätä julkaisuun piilotetun kuvan, jonka käyttäjä voi avata napauttamalla määriteltyä hotspot-aluetta tai painiketta sivulla olevan kuvan, jos kuva on isompi kuin sille määritetty tila, voi käyttäjä vierittää kuvaa alueella (ei toimi vielä, tällä hetkellä isompi kuva pienennetään mahtumaan määritettyyn alueeseen) 1) Hae Image -kohtaan haluamasi kuva, jos haluat aukaista kuvan pop-up-ikkunaan, tee se valmiiksi oikeaan kokoon. 2) Laita Link-kohtaan osoite, jos haluat että kuvaa napauttamalla käyttäjä siirtyy jollekin www-sivulle (ei toimi vielä tässä versiossa) - Paina Save Link (optio) - laita tähän linkki johon kuvan napauttaminen johtaa Title - ei näy muualla kuin CREATE!issa Image - hae tähän kuvatiedosto Esikatselu Koko & sijainti Avaa pop-up-ikkunaan. Jos päällä niin ruksin VINKKI! Voit piirtää taittoon InDesignissa esim. i-painikkeen, lisätä CREA- TE!issa kuvan, määritellä sen avautumaan pop-up-ikkunaa ja piirtää i-napin päälle näkymättömän avaus-hotspotin. VINKKI! Jos sijoitat inline-kuvan kuvaa pienempään tilaan, tulee siitä automaattisesti vieritettävä kuva. 25 alapuolella voi määritellä avautuvan ikkunan koon. Jos Avaa pop-up-ikkunaan -ruksi ei ole ruksattu niin elementti sijoitetaan ns. inline-muodossa suoraan sivulle X/Y/Width/ Heigth -arvojen mukaiseen kohtaan ja kokoon Jos Trigger Icon -kohta jätetään tyhjäksi niin X/Y/Widht/ Height -arvoilla määritetty alue toimii näkymättömänä hotspottina, jota napauttamalla pop-up aukeaa. Jos kohtaan on haettu painike, niin silloin painike toimii avaustriggerinä.

26 Kuvaesityksen lisääminen (Slideshow) Kuvaesitys-työkalulla voit lisätä julkaisun sivulle 2 tai useammasta kuvasta muodostuvan kuvaesityksen. Kuvaesitys voi olla suoraan sivulla tai avautua pop-up-ikkunaan (Open in pop -ruksi päällä tai pois) Käyttäjä näkee kuvaesityksestä ensimmäisen kuvan, seuraavat kuvat saa näkyviin tietokoneella hiirellä ja tablet-laitteissa sormella pyyhkäisemällä. Kuvaesityksen lisääminen 1) Paina Add New Slideshow-painiketta ja anna kuvaesitykselle nimi ja koko-&sijaintitiedot, paina Save. Voit myös määrittää jo tässä vaiheessa haluatko että kuvaesitys avautuu pop-up-ikkunaan vai esitetäänkö se sivulla haluamassasi kohdassa 26

27 2) Skaalaa sivulle ilmestynyt harmaa neliö haluamaasi kohtaan ja skaalaa se haluttuun kokoon. 3) Napsauta pientä kynäkuvaketta, joka ilmestyy näkyviin kun viet hiiren harmaan suorakaiteen päälle. 4) Hae kuvaesityksen kuvat yksi kerralaan. Suosittelemme, että valmistat kuvaesitykseen tulevat kuvat oikeaan kokoon ennen tuontia esim. Photoshopissa. 5) Paina lopuksi Save VINKKI! Voit piirtää taittoon InDesignissa esim. Katso tästä kuvat -painikkeen, lisätä CREA- TE!issa kuvaesityksen, määritellä sen avautumaan pop-up-ikkunaan ja piirtää Katso tästä kuvat -painikkeen päälle näkymättömän avaus-hotspotin. HUOM! Jos olet lisännyt kuvaesityksen jo InDesignissa, näkyy se tässä vaiheessa sivulla samalla tavalla kuin jos olisit tehnyt sen CREATE!issa. Voit muokata InDesignissa lisättyä kuvaesitystä CREATE!issa, tai esim. poistaa sen. 27

28 Videon lisääminen Aikasemmissa CREATE!in versioissa on voinut lisätä MP4-videon julkaisun sivulle. Uudessa versiossa toimintoa on kehitetty aiempaa paremmaksi ja monipuolisemmaksi. Uutta on mm. voit avata videon sulkupainikkeella varustettuun pop-up-ikkunaan voit sijoittaa videon myös sivulle, jolloin se näkyy paikallaan jos se käynnistetään voit käyttää MP4-videoiden lisäksi myös esim. youtube-videoita 1) Paina Add New Video -painiketta 2) Hae kiintolevylläsi oleva H.264 enkoodattu MP4 -videotiedosto (Local video ruksattuna) tai anna linkki youtube-videoon (Local video ei ruksattuna) 3) Määritä avautuuko video popup-ikkunaan vai esitetäänkö se paikallaan sivulla Jos Local Video File on ruksattuna, tulee Video-kenttään hakea H.264 enkoodattu MP4-video. Tee video oikeaan kokoon jossain enkooder-ohjelmassa, esim. InDesignin mukana tulevassa Adobe Media Encoderissa. Suositeltava leveys videolle on n px HUOM! Jos otat ruksin pois kohdasta Local Video File, muuttuu Video-kenttä Video URL-kentäksi. Voit syöttää tähän kenttään youtube-videon URLin, Sen pitää EHDOTTOMASTI olla muotoa videoid esim. 3VIdrRQVI. HUOM! Muista että youtube-videot eivät toimi jos käyttäjällä ei ole online-yhteyttä julkaisua lukiessa! MP4-videot toimivat myös offlinessa jos julkaisu on julkaistu edocker Libraryyn ja sitä luetaan edocker Readerilla. 28

29 HTML-ikkunan lisääminen Aikasemmissa CREATE!in versioissa on voinut lisätä sivulle ns. iframe-ikkunan, jonka sisällä on voinut esittä lokaaleja HTML-tiedostoja tai hakea sisältöä URL-osoitteesta.. Uudessa versiossa toimintoa on kehitetty aiempaa paremmaksi ja monipuolisemmaksi. Uutta on mm. se että voit avata valitun sisällön sulkupainikkeella varustettuun pop-up-ikkunaan 1) Paina Add New HTML-content -painiketta 2) Anna Link-kenttään URL-josta sisältö haetaan TAI hae Local content -kenttään zip-pakattu lokaali HTML-aineisto (zip-paketin juuresta pitää löytyä index.html) Nämä ovat siis vaihtoehtoja keskenään. 3) Voit myös määrittää Fallback-kuvan, joka esitetään URLin tilalla jos käyttäjällä ei ole nettiyhteyttä Muilta osin (koko, sijainti, popup-ikkunaa avaus yms) tämä toimii samalla tavalla kuin edellisetkin elementit Käytä jompaakumpaa HUOM! Tarkista aina huolellisesti että HTML-ikkunaan haettava sisältö toimii määrittämäsi kokoisessa alueessa. Parhaiten yleensä toimivat ns. responsiiviset html-tiedostot, jotka on tarkoitettu esitettäväksi eri kokoisissa ympäristöissä. HTML-ikkuna käyttää tällaisessa tapauksessa usein ns. matkapuhelinversiota sivusta. 29

30 Vierivän tekstin lisääminen (Scrolling content) Kokonaan uusi ominaisuus on mahdollisuus määrittää sivulle joko sivun seassa näkyvä ruutu tai piilotettu ikkuna, joka sisältää esim. tekstiä ns. lukutilassa. Tällöin: teksti on oikeata tekstiä eikä siis kuvaksi rasteroitua jos tekstiä on enemmän kuin näkyvään tilaan mahtuu, se vierii popupissa käyttäjä voi myös suurentaa/pienentää fonttia ja teksti juoksee käytössä olevassa tilassa sen mukaisesti mitä fonttikokoa käytetään tekstiä voi muotoilla html-tageilla tekstin sekaa voi lisätä myös esim. kuvia käyttämällä html-tageja 1) Painaa Add New Scrollingcontent 2) Kirjoita tai copy/pasteta tekstikenttään tekstiä (tiedostosta tuontimahdollisuus on tulossa) 3) Teksti esitetään Verdanalla (ei bold, ei italic)... jos haluat luoda tekstiin esim. otsikoita, käytä h1-h3 tageja kuvan mukaisesti (tähänkin on tarkoitus tehdä pieni työkalu jolla muotoilut voi tehdä tekstiin) Jos Open In Popup on ruksattu, avautuu teksti haluamasi kokoiseen popup-ikkunaan, jossa sulkupainike ja fontin koon säätimet. X/Y/Width/Heigh -kenttien arvot määrittelevät tällöin ns. avaustriggerin paikan ja koon. Jos ruksia ei ole ruksattu, esitetään teksti suoraan sivulla X/Y/Width/Heigh -kenttien arvojen mukaisessa ja kokoisessa suorakulmiossa. Vinkki! Jos käytät Open in Popup-.tapaa, voit piirtää jo taittovaiheessa sivulle esim. jonkinlaisen tekstin lukutila -symbolin ja viedä avaushotspottia kuvastavan (käyttäjille näkymättömän) harmaan laatikon ko. elementin päälle. Tällöin käyttäjä saa popupin auki kun napauttaa ko. kohtaa sivulla. 30

31 HTML-koodinpätkien lisääminen sivulle Monista palveluista kuten esim. sosiaalisesta mediasta, voi käydä generoimassa pieniä HTML-koodikatkelmia, joiden avulla voidaan esimerkiksi liittää tykkäys- tai jakopainikkeita, keskustelufeedejä yms sisältöä www-sivulle. Näitä samoja katkelmia voi lisätä myös edocker CREATE! -projektin sivuille käyttämälle Scrolling Text -työkalua ns. Inline-muodossa (Open in Popup pois päältä) 1) Kopioi haluamasi HTML-katkelma leikepöydälle 2) Painaa Add New Scrollingcontent 3) Peistaa tekstikenttään kohdassa 1 kopioimasi koodinpätkä 4) Napsauta Open in popup pois päältä ja paina ok 5) Vedä harmaa paikanpitäjälaatikko siihen kohtaan ja kokoon mihin haluat HTML-katkelman tuottaman toiminteen näkyviin HUOM! Toiminto on vielä kokeellinen ja ei toimi minkä tahansa HTML-koodin kanssa. Kannattaa testata huolellisesti. HUOM! Jos HTML-koodissa on viittauksia URL-osoitteisiin, vaatii sisällön toimiminen käyttäjältä online-yhteyden. 31

32 Projektin esikatselu Issues-näkymän alareunassa on kaksi kuvaketta: Esikatselu Julkaiseminen Esikatselutoiminnolla julkaisua ja sen toiminteita voi tarkastella ennen julkaisemista. Huom! Tietoturvasyistä ja rajoituksista johtuen, videot eivät toimi esikatselussa. Jos haluat esikatsella videoita tietokoneella ennen palvelimelle vientiä, julkaise projekti kiintolevyllesi ja avaa projektin index.html tiedosto selaimeen. Suosittelemme Chrome-selainta ns. lokaaliin testailuun, siinä on vähiten rajoituksia. Tässä esimerkissä esikatsellaan yhdelle julkaisun sivulle liitettyä tekstin lukutilaikkunaa. 32

33 Projektin julkaiseminen Kun kaikki palaset ovat paikallaan, jää jäljelle projektin julkaiseminen. Se tapahtuu Issue-näkymän oikean alakulman oikeanpuoleisesta kuvakkeesta. Sitä painamalla avautuu CREATE!:n Publish-ikkuna. CREATE!sta voi julkaista projektin kahdella eri tavalla web-julkaisuna tietokoneen (desktop) ja ipadin käyttäjille. edocker PUBLISH! -palveluun, jossa julkaisusta voi tehdä myös maksullisen, yksityisen tai tilaajille tarkoitetun 33

34 Web-julkaisun vieminen palvelimelle edocker CREATE! tallentaa web-julkaisun avoimena tiedostopakettina. Tämä paketti pitää siirtaa www-palvelimelle esim. FTP-ohjelmalla. Kun paketti on palvelimella, syntyy sille samantien URL-osoite. Kaikki jotka tietävät tämän osoitteen, voivat lukea julkaisua www-selaimella. Osoitetta voi jakaa esimerkiksi sähköpostilla tai sosiaalisessa mediassa. Jos edocker CREATE!n Publish-ikkunassa oli valittuna myös edocker PUBLISH! -palvelu, tuottaa CREATE! julkaisun myös edtp-tiedostona. Tämä tiedosto voidaan julkaista edocker PUBLISH! palveluun. Loppukäyttäjät näkevät palveluun viedyt julkaisut edocker READ! lukuympäristössä, www-selaimella tai READ!-mobiiliapplikaatiolla. 34