Tackling Rich Media for tabletter med Adobe CS5: Del 1
Del
Del
Del
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Tabletter er dagens Big Thing. Jada, kan iPad ikke Flash, men det er bare den første av en bølge. Adobe InDesign CS5 kan gjøre massevis av interaktive ting som er perfekt for den store skjermen plass av en tablett, så sparke den over til Flash for tilpasning og forbedring. I denne opplæringen, vil vi se hvordan du arbeider med InDesign siden av ting.
Innledning
Når Adobe fløt sin iPhone Compiler for Flash på Max i fjor jeg må innrømme jeg ble, kort, blåst bort. Så snudde jeg til fyren ved siden av meg i salen og sa: ". Dette kommer til å være stor til Apple finner en måte å slå den av" Som liksom forklarer hvorfor Apples "April Shock" egentlig ikke overraske meg. Hvordan de gjorde det var en overraskelse, men slå den ned var ikke uventet.
Et par uker senere Richard Galvan Flash Product Manager var på scenen på FlashintheCan viser frem noen heller "whizzy" ting som Flash CS5 kan gjøre. I løpet av sin presentasjon demoed han hvordan InDesign CS5 kan nå gjøre massevis av interaktive ting som kan da være lett svingte over til Flash CS5 som en FLA eller rett og slett skutt ut av InDesign som en fullstendig interaktiv swf. Jeg skal innrømme at jeg hadde samme reaksjon som mange av dere har: ". Gi meg en pause Det er ingen måte en Flash-utvikler /designer verdig tittelen kommer til å lage en stor, tuting swf fra InDesign."
Etter Richard presentasjon cornered jeg ham og spurte hvorfor han ble demoing noe som var ensbetydende med å gi en gal mann en pistol. Hans ett ord svar vugget meg tilbake.
Tablets.
sa han.
Hvis det er en fundamental regel jeg prøver å slå meg inn i studentenes hoder det er at når det kommer til grappling med problemer "starte med det åpenbare og strikk tilbake til det obskure." Richard svar var så utrolig opplagt at jeg følte meg litt flau.
Selv om iPad er en seriøst kul enhet vi har en tendens til å glemme at tabletter er en ny teknologi. Google, HP og andre kommer til å komme ut med en vanlig overflødighetshorn av disse tingene, og de alle vil være Flash aktivert. Tack på denne Flash Player 10.1 utgivelse som kommer til å starte dukker opp på hver mobile enhet bortsett fra Apples tilbud, og det er ikke mye av en strekning å anta at det er bare et spørsmål om tid før våre kunder klatre opp på den mobile bandwagon.
Bare fordi Apple var først ut av blokken med sin "leketøy for kule barna", betyr ikke at det er referanseindeksen. Hvis disse tingene ta av det bare kan være Apple som har produsert en "nisje" produkt.
Hvilket bringer meg til denne opplæringen. Tablettene har mye plass på skjermen, som er ganske darn nær på størrelse med et vanlig ark kastet ut av din laserskriver. Det er fornuftig, (og Wired er allerede viser dette av,) til å betrakte trykte publikasjoner som noe mer enn sidene av "innhold" og å bruke Flash Player for å slå en heller passiv medium til en rik medieopplevelse.
I løpet av de neste månedene, vil det være en rekke nye Android-mobiler og nettbrett treffer markedet denne sommeren. Linjen opp inkluderer Notion Ink Adam, men det finnes andre også, inkludert Marvell Moby, WePad og Dell Mini 5, for å nevne noen.
I løpet av denne todelt serie du skal å finne ut hvorfor Flash CS5 hadde molekylene vrengt og omorganisert med nye XFL format; hvordan InDesign CS5 har plutselig endret fra en statisk layout app til en med en mengde interaktive funksjoner og hvordan den nye TextLayout Work i Flash er mye mer enn en ganske nysgjerrig tillegg til oppstillingen. Naturligvis skal vi begynne å sette sammen eiendelene i InDesign. Ved slutten av dette stykket håper jeg mange av dere vil oppdage hvor " kult " den interaktive InDesign egentlig er og, enda viktigere, hvorfor de er der i utgangspunktet. La oss komme i gang:
Trinn 1: Kom opp med et konsept
OK. Jeg er lat. Jeg la min iPhone håndtere den. Brendan Dawes ut av MagneticNorth i britisk slått meg til en ganske interessant iPhone app - addLib - som tar et bilde du mate den og sparker ut noen ganske interessante varianter av hvordan den kan brukes. Ettersom hvordan jeg ønsket å demo noen av funksjonene i InDesign CS5 Jeg trodde en tur jeg laget til en liten landsby i Kina - Huo Guo - ville passe regningen, og bildet av den gamle fyr peering over veggen på meg er en av mine favoritter fra den turen. Jeg matet bildet inn addLib og jeg likte den siste behandling.
Basert på at design jeg visste akkurat det verktøyet for jobben var Illustrator CS5 og at bilde ble gjøres best i ... få satt for det . ... Fyrverkeri CS5
Trinn 2: Endre størrelse på bilde
Når bildet åpnet den første som må gjøres var å få det til en mer håndterlig størrelse. Det opprinnelige bildet fra min Nikon D200 var 2 896 av 1944 piksler som ikke hadde tenkt å jobbe enten i Illustrator CS5 eller Fireworks CS5. Jeg valgte bildet på fyrverkeri lerret, valgte Endre > Canvas > bildestørrelse og endret punktdimensjonene til de som er vist i figuren. Med bildet skaleres jeg klikket på Tilpass lerret knappen i Properties panelet for å sikre at det var ingen ekstra lerret i det endelige bildet
Trinn 3:. Fargekorrigering
Bildet er ganske mørkt og kunne bruke litt fargekorrigering. Jeg valgte bildet på lerret og i de Properties panel utvalgte Filters > Juster Farger > Nivåer. Histogrammet fortalte meg at jeg trengte å klippe noe av det hvite på høyre side av grafen. Flytte White Point, som vist i figuren, lysnet opp bildet. Bildet ble lagret som CoverColor.jpg.
Opprette en gråskala versjonen var også et blunk. Med den valgte på lerret bilde valgte jeg Filters > Juster Farger > Hue /Saturation og satt metningsverdien til -100 som fjernet fargen fra bildet. Dette bildet ble deretter lagret som CoverGrey.jpg
Trinn 4:. Resize Images for lysbilde
Jeg trodde menneskemengden et fotogalleri i InDesign var en no brainer, og ville demo denne funksjonen i programmet. Selvfølgelig 12 bilder, samme størrelse som cover bildet ikke skulle fly og skalere dem, for hånd, er ikke gøy.
En av mine favoritt-funksjoner i Fireworks CS5 er Batch Processing: Fil > Batch Process ... Det er en veldig enkel arbeidsflyt. Identifisere bildene, bestemme skalering beløpet og la Fyrverkeri stikke skalert ned versjoner i en egen mappe. Dette tok mindre enn 30 sekunder å oppnå
Trinn 5:. Lag cover i Illustrator CS5
addLib designet var utrolig lett å gjenskape i Illustrator CS5. Ved hjelp av en kombinasjon av enkle figurer, masker og typen jeg var i stand til å trekke dette sammen på under 30 minutter. Den store avgjørelsen involvert output format. Jeg gikk med ai formatet fordi både Flash og InDesign tillate meg å rundtur tilbake til Illustrator til å gjøre endringer. Hvis dette var bestemt for en web-app med et stopp i Catalyst eller Flex, ville jeg ha gått med FXG over hele linja i Fireworks, Flash og Illustrator.
Med eiendelene samlet det var på tide å begynne å jobbe i InDesign
Trinn 6:. Hvorfor InDesign CS5
jeg om jeg ville ta et minutt eller to for å få? litt dypere inn i dette temaet før jeg ruller inn i prosjektet fordi, helt ærlig, som mange av dere, jeg så det som en utskriftslayout verktøy som satt på verktøyet benk i stedet for ett i min interaktivt verktøy boks. Likevel, å være litt av en type narkoman, noe frustrerte meg mer enn å være i stand til å bruke fin typografi teknikker på utskrifts siden av gjerdet, mens vi måtte liksom "fake it" på den interaktive side. For ikke å nevne at forsøk på å få en multicolumn layout eller grid system å jobbe i Flash var noe mine grafikk kolleger på utskriftssiden av gaten aldri unnlot å nevne for meg.
InDesign CS5 slags stopper dette vennlige nåling . Blant funksjonene i InDesign CS5 som jeg bare grave er:..
Evnen til å innlemme animasjon inn i dokumentet
Muligheten til å legge interaktivitet - knapper, navigasjonselementer og så videre -. til dokumentet
er Typografi nå tilgjengelig takket være det faktum både InDesign og Flash dele den nye TextLayoutFramework. Dette er stort.
Gjør ingen feil om det folkens. Disse tingene er ikke whiz bang, umotivert eye candy funksjoner lagt til appen garner refreng av "Cool" fra Fan Boyz på demoer og konferanser. Dette er, som du er i ferd med å oppdage, industrial-grade funksjoner som beveger seg sømløst inn i en SWF eller Flash. Faktisk, for dere codies, du trenger ikke engang å røre Flash eller Catalyst. InDesign dokumenter kan sendes ut som gode gamle XML.
Når det er sagt, er dette en ny arbeidsflyt som vil, spesielt for Flash mannskap, krever ekstra arbeid fra din side. Jeg ser på dette som en "god ting" fordi, som du er i ferd med å se, sparker ut en Flash dokument fra InDesign ikke gjøre en en Flash artist. Du får de bare bein og hvis Flash-ferdigheter er minimal du er, i hovedsak, døde i vannet.
Til slutt, dette er ikke en InDesign opplæringen. Det er hensikten er å vise deg hvordan den interaktive InDesign er lagt til en side, og hvordan en doc er utgang til SWF og Fla formater.
La oss fortsette med det ...
Trinn 7: Interaktivitet
Åpne InDesign CS5 og velg Window > Workspace > . Interaktiv å åpne Interaktivitet panel
Her, i grove trekk, er hva hvert element i panelet gjør:
Animasjon: Bruk dette panelet for å sette ting i bevegelse. Hvis du er en Flash-bruker, standardinnstillingene er de som brukes i Flash Motion Presets panel
Timing:.. Dette panelet brukes til å bestemme "når" ting skjer, i hvilken rekkefølge og hvor lenge
Preview: Dette er en veldig interessant panel. Den bygger en SWF inne i panelet, og gjør at du kan ta prosjektet for en prøvetur.
Media: Dette panelet ikke bare lar deg forhåndsvise video og lyd, men også legge den og gi den slike egenskaper som plakat rammer og kontrollere
Objekttilstander:. Typiske knappene har tre, kanskje fire, stater. Tenk på disse tingene som knappe statene på steroider. Dette panelet er ideell for ting som lysbildefremvisning
Knapper. Dette panelet lar deg slå noe inn en knapp (tror klikkbart) og deretter legge til hva som skjer når objektet er klikket
.
Trinn 8: Fly Fra Top
Nå skal vi bruke en animasjon effekt til bildetekst. Velg objektet som skal animere, åpne animasjonspanelet og velg animasjon fra Preset pop ned. Når du gjør det et par ting skje:
Bevegelsen banen, i grønt, er vist på siden og en forhåndsvisning av animasjonen er brukt til sommerfuglen i panelets forhåndsvisningsvinduet. Disse bevegelsesbaner kan redigeres med Pen Tool og en veldig ryddig aspekt av dette er noen Custom Paths du kan lage i Flash kan brukes her, og vice versa. Bruk navnet området for å gi animasjonen et navn og velg når arrangementet - På side Load, På side Click, On Click (Selv), On Roll Over (Selv) - vil oppstå fra aktiviteter (er) pop ned Du får også velge varigheten og hvor ofte det skjer, og selv om animasjonen er å sløyfe. Speed pop ned er der du får bruke lettelser. Egenskaper, hvis du er en Flash designer, ser ganske kjent. Animate pop ned kan du bestemme hvordan animasjonen fungerer - fra eller til gjeldende utseende eller Til gjeldende sted. Og Animate Å området tillater deg å bruke rotasjon og skalering til den endelige tilstanden til objektet i bevegelse Testing animasjoner eller interaktivitet i tidligere versjoner av InDesign var smertefullt. Du ville skape animasjon, kompilere SWF og la InDesign for å forhåndsvise arbeidet i Flash Player. Forhåndsvisning-panelet setter alle disse trinnene i ett sted. Når du er ferdig med din Animation, klikker du bare på panel-knappen Preview og panelet vil vises. Det vil først være blank. Dette er fordi InDesign er å skape en swf som vil spille i panelet. Når siden vises, klikker du på Start-knappen i nedre venstre hjørne og bildetekst lysbilder i. Hvis panelet virker for lite, bare dra ut et hjørne for å forstørre det utsikten. De 12 bildene vi forberedt tidligere bruker Batch prosessering i Fireworks CS5 kan nå bli brakt inn i dokumentet og brukes i en lysbildefremvisning. Dette er en to-trinns prosess: Ta i bildene og justere dem på siden og deretter konvertere dem til et Multi State objekt. Slik gjør du: Velg Rediger > Place, finn mappen som inneholder den skalerte bilder, og med Shift-tasten holdes nede, velg dem alle, og klikk OK. Du vil se en liten "pistol" som inneholder et miniatyrbilde av et bilde. Klikk på den og bildet i miniatyr slippes på til siden og "pistol" viser deg de neste bildet i bunken. Grovt flytte alle bildene inn der lysbildene vises, og med alle de valgte bildene, åpner Align panelet ved å trykke F7. Justere bildene av deres topp og venstre kant. Etter å ha opprettet "stack", åpner Objekttilstander-panelet og klikk på "Konverter utvalg til multi-state objekt" -knappen - siden med slått opp hjørnet nederst i panelet - og alle bildene vil vises i panelet. Gi objektet et navn, og hvis du ønsker det, omorganisere bilder ved å dra dem, i panelet, til forskjellige "lag" i bunken En stabel er ubrukelig hvis du ikke sette det til å fungere. I dette tilfellet Frem- og tilbakeknapper opprettet i Fireworks CS5 er importert for oppgaven. InDesign, som mange av de CS5 apps inneholder et bibliotek med "pre-valset" knapper - Vindu > Eksempel knapper - men ingen passer design. De ble hentet inn ved hjelp av Fil > Place og flyttet inn i sine endelige posisjoner på side For å lage en knapp du åpne Knapper-panelet, og med objektet valgt, klikk på "Konverter objektet til en knapp" -knappen - det er rett ved siden av papirkurven på Knapper-panelet. Når dette skjer panelet lyser opp og du kan tilordne knappen enkelte eiendommer. Det første som må gjøres er å gi knappen et navn. Deretter kobler du til en hendelse til knappen. Det er seks hendelser, hvorav to er strengt for PDF-prosjekter, å velge mellom. "På Slipp" er en sikker vinner. Det neste trinnet er å tildele en handling til en hendelse. Klikk på + tegnet i handlinger og et pop gardinlisten vises. Dette er en lysbildefremvisning så det er fornuftig å tildele en "Gå til neste stat" handling. Det som er viktig å merke seg her er at Handlinger er gruppert etter endt bruk. I dette tilfellet skal vi SWF og Flash slik at valget vil fungere. Når handlingen er valgt Knapper panel vil endres til å spørre deg hvilket objekt er å bli kontrollert av knappen. I dette tilfellet vil det være Village stabelen. Du kan også klikke på "Stopp på Siste State" -knappen for å sikre brukeren faktisk stopper på det siste bildet i bunken. Gjenta denne prosessen for tilbakeknappen og teste lysbildefremvisning i Forhåndsvisning-panelet. Legge til et lydspor til en side er død enkel. Du kan enten bruke Fil > Place menyen eller klikk en gang på Medier-panelet og bruke Legg inn en lyd- eller videofil knappen - den ene i nederste høyre hjørne av panelet - noe som vil åpne Place media dialogboksen. Bare husk det eneste lydformat du kan bruke er mp3. Når filen er importert en liten lyd container vises på scenen. På mange måter denne beholderen er lik hvordan Flash styrer lyd på scenen. Beholderen kan plasseres hvor som helst, fordi det er mer av en plassholder enn noe annet. Audio panelet lar deg teste lyden ved å klikke på Start-knappen og alternativene er litt selvforklarende. Det beste alternativet, hvis du kommer til den interaktive rute, er å velge de to første alternativene. Hvis du ikke vil lydfilen fortsette å spille selv når du forlater siden Enkle UX design prinsipper sier at hvis du spiller av en lydfil Du bør gi brukeren muligheten til å drepe den. I dette tilfellet en pause og en avspillingsknappen ble opprettet i Fireworks CS5 og konvertert til knapper i InDesign CS5. Så snart du koble knappen til en kilde, gjenkjenner det en lydfil og du blir presentert med lyd kontrollalternativene vist i figuren. En virkelig fin funksjon i Knapper-panelet er ikonet i nedre venstre hjørne. Klikk på den og Forhåndsvisning-panelet åpner for å la deg bestemme om knappen gjør hva du vil den skal gjøre Video - FLV, F4V, MP4 - kan legges til InDesign like lett som en lydfil og videoegenskapene er satt i media panel. Likevel er det noen aspekter ved dette som du trenger å vite. Selv om du får to avspillingsalternativer, hvis du kommer til å gi brukeren en kontroller, la dem deaktivert. Alternativet Plakat lar deg velge en ramme fra video eller et annet bilde skal vises i dokumentet. I dette eksempelet jeg brukte scrubber i panelet for å identifisere den rammen som vises i oppsettet. Du kan også velge en controller - de SkinOver skinn fra Flash er dine eneste valg - og om ikke kontrolleren vises når markøren beveges over video på siden. Du kan også legge cue punkter - InDesign kaller dem Navigation Points -. Til videoen eller de kan legges ved hjelp av Adobe Media Encoder CS5 Den andre tingen du trenger å vite om dette video-funksjonen, spesielt hvis du bruker video i Flash, er videoen må klikket på scenen for at det skal begynne å spille eller å avsløre huden. Det kan ikke være en dårlig idé, hvis du kommer til å bli sende ut bare en swf, for å legge en liten bildetekst eller ikon som forteller brukeren til å klikke på bildet for å starte video avspilling. Til slutt bruker Forhåndsvisning-panelet å teste video. I denne artikkelen jeg viste deg hvordan du bruker alle funksjonene i InDesign CS5 Interactive panel. Jeg viste deg hvordan du kan lage knapper, legge til lyd og video, og hvordan du slår en bunke med importerte bilder til en lysbildefremvisning. Du ble også vist hvordan du bruker knappene til å styre lyd og hvordan du legger en hud til en video. Jeg har også tatt med hvor mange av eiendelene ble opprettet i Fireworks CS5 og Illustrator CS5 og forberedt for plassering i InDesign CS5 prosjektet. I neste utgaven av denne serien vil jeg lede deg gjennom de nødvendige skritt for å sende ut en interaktiv InDesign-dokument for avspilling i en nettleser eller for videre "tweaking" i Flash. Takk for lesing!
Trinn 9:. Test animasjons
Trinn 10: Lag en lysbildeserie
Trinn 11: Konverter til Object
Trinn 12:. Navigasjonsknapper
Trinn 13:. Legge Button Funksjonalitet
Trinn 14: Legg til et lydspor
Trinn 15:. Audio-kontrollknapper
Trinn 16:. Legge til dokument
Konklusjon