Share
Tabletter er dagens store ting. Jo, iPad kan ikke gjøre 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 det store skjermrommet på en nettbrett, og deretter sparke det over til Flash for tweaking og forbedring. I denne veiledningen ser vi hvordan du arbeider med InDesign-siden av ting.
Når Adobe flyte sin iPhone Compiler for Flash på Max i fjor, må jeg innrømme at jeg ble kort blown away. Så snudde jeg meg til fyren ved siden av meg i publikum og sa: "Dette kommer til å bli bra til Apple finner en måte å stenge den på." Hvilken slags forklarer hvorfor Apples "April Shock" virkelig ikke overrasket meg. Hvordan de gjorde det var en overraskelse, men det var ikke uventet å stenge det ned.
Et par uker senere var Richard Galvan, Flash Product Manager, på scenen på FlashintheCan som viste noen ganske "whizzy" ting som Flash CS5 kan gjøre. I løpet av sin presentasjon døde han hvordan InDesign CS5 kan nå gjøre massevis av interaktive ting som så lett kan svinges over til Flash CS5 som en .fla eller bare skutt ut av InDesign som en fullstendig interaktiv swf. Jeg kommer til å innrømme at jeg hadde den samme reaksjonen som mange av dere har: "Gimme a break. Det er ingen måte en Flash-utvikler / designer verdt titelen skal lage en stor, honking swf fra InDesign."
Etter Richards presentasjon jeg cornered ham og spurte hvorfor han demoer noe som var ensbetydende med å gi en gal mann en pistol. Hans ettord svar svarte meg tilbake.
tabletter.
han sa.
Hvis det er en grunnleggende regel, prøver jeg å slå inn i elevers hoder, det er at når det gjelder å gripe med problemer, start med det opplagte og jobber tilbake til det uklare. Richard svar var så darn åpenbart at jeg følte meg litt fårlig.
Selv om iPad er en alvorlig kul enhet, har vi en tendens til å glemme at tabletter er en fremvoksende teknologi. Google, HP og andre kommer til å komme ut med en vanlig avstand fra disse tingene, og de vil alle bli Flash-aktiverte. Takket være dette er Flash Player 10.1-utgaven som kommer til å begynne å poppe opp på hver mobil enhet, bortsett fra Apples tilbud, og det er ikke mye av en strekk å anta det. Det er bare et spørsmål om tid før kundene klatrer seg på mobilvognen.
Bare fordi Apple var først ute av blokken med sin "leketøy for kule barn", betyr det ikke at det er referansen. Hvis disse tingene tar av det, kan det bare være Apple som har produsert et "nisje" -produkt.
Som bringer meg til denne opplæringen. Tabletter har mye skjermrom, noe som er ganske darn nær størrelsen på et vanlig papirark som er sparket ut av laserskriveren. Det er fornuftig, (og Wired viser allerede dette,) for å betrakte trykte publikasjoner som ikke noe mer enn sider med "innhold" og å bruke Flash Player til å slå et ganske passivt medium inn i en rich media-opplevelse.
I løpet av de neste månedene vil det bli en rekke nye Android-mobiler og -tabletter som rammer markedet i sommer. Line-up inkluderer Notion Ink's ADAM, men det finnes også andre, inkludert Marvell Moby, WePad og Dell Mini 5, for å nevne noen få.
I løpet av denne todelte serien kommer du til å oppdage hvorfor Flash CS5 hadde molekylene vendt inn og omorganisert med det nye XFL-formatet; hvordan InDesign CS5 har plutselig blitt forandret fra en statisk layout-app til en med en mengde interaktive funksjoner og hvordan det nye TextLayout Framework i Flash er mye mer enn et ganske nysgjerrig tillegg til linjen. Naturligvis skal vi begynne å samle eiendelene i InDesign. Ved slutten av dette stykket håper jeg at mange av dere vil oppdage akkurat hvor "kule" de interaktive funksjonene til InDesign egentlig er, og enda viktigere, hvorfor de er der i utgangspunktet. La oss komme i gang:
OK. Jeg er lat. Jeg la min iPhone håndtere den ene. Brendan Dawes fra MagneticNorth i U.K. viste meg til en ganske interessant iPhone-app - addLib - som tar et bilde du bruker, og spretter ut noen ganske interessante variasjoner av hvordan den kan brukes. Å se hvordan jeg ville 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 fyren som peering over veggen på meg, er en av Mine favoritter fra den turen. Jeg har matet bildet i addLib, og jeg likte den siste behandlingen.
Basert på den designen visste jeg bare at verktøyet for jobben var Illustrator CS5 og at bildet var best gjort i ... bli satt for det ... Fyrverkeri CS5.
Når bildet åpnet det første som skulle gjøres, var å få det til en mer overskuelig størrelse. Det opprinnelige bildet fra min Nikon D200 var 2896 med 1944 piksler, som ikke skulle fungere enten i Illustrator CS5 eller Fireworks CS5. Jeg valgte bildet på fyrverkeri-lerretet, valgt Endre> Lerret> Bildestørrelse og endret pikselmålene til de som vises i figuren. Med bildet endret jeg klikket på knappen Tilpass lerret i Egenskaper-panelet for å sikre at det ikke var noe ekstra lerret i det endelige bildet.
Bildet er ganske mørkt og kan bruke litt fargekorrigering. Jeg valgte bildet på lerretet og i panelet Egenskaper valgte filtre> Juster farger> Nivåer. Histogrammet fortalte meg at jeg trengte å klippe noe av det hvite på høyre side av grafen. Flytting av det hvite punktet, som vist i figuren, lyste opp bildet. Bildet ble lagret som CoverColor.jpg.
Å lage en gråskala versjon var også et snap. Med bildet valgt på lerretene jeg valgte filtre> Juster farger> Fargetone / Metning og sett metningsverdien til -100 som fjernet fargen fra bildet. Dette bildet ble deretter lagret som CoverGrey.jpg.
Jeg trodde at heaving et fotogalleri i InDesign var en no brainer og ville demo denne funksjonen av applikasjonen. Selvfølgelig 12 bilder, samme størrelse som dekselet bildet skulle ikke fly og skalere dem, for hånd, er ikke morsomt.
En av mine favorittfunksjoner i Fireworks CS5 er Batch Processing: File> Batch Process ... Det er en veldig enkel arbeidsflyt. Identifiser bildene, bestem målestørrelsen og la fyrverkeri holde de nedkalkede versjonene i en egen mappe. Dette tok mindre enn 30 sekunder å oppnå.
AddLib-designen var bemerkelsesverdig enkelt å replikere i Illustrator CS5. Bruk av en kombinasjon av enkle former, masker og type jeg klarte å trekke dette sammen på under 30 minutter. Den store beslutningen innebar utdataformat. Jeg gikk med ai-formatet fordi både Flash og InDesign tillater meg å tur tilbake til Illustrator for å gjøre endringer. Hvis dette var bestemt for en webapp 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 var det på tide å komme seg til jobb i InDesign.
Jeg skjønner at jeg tar et minutt eller to for å få litt dypere inn i dette emnet før jeg ruller inn i prosjektet, fordi helt ærlig, som mange av dere, så jeg det som et utskriftsoppsettverktøy som satt på verktøykanten i stedet for en i min interaktive verktøykasse. Likevel, noe som var litt av en type junkie, frustrerte meg ikke mer enn å kunne bruke fine typografiteknikker på utskriftssiden av gjerdet mens vi måtte "fake it" på den interaktive siden. For ikke å nevne at forsøk på å få et flerfargede layout eller rutenett system til å fungere i Flash, var noe mine grafikkollegører på utskriftssiden av gaten aldri unnlatt å nevne meg.
InDesign CS5 slags stopper denne vennlige nålingen. Blant funksjonene til InDesign CS5 som jeg bare graver er:
Gjør ingen feil om det folkens. Disse tingene er ikke whiz bang, gratuitous eye candy funksjoner lagt til app for å skaffe seg choruses of "Cool" fra Fan Boyz på demoer og konferanser. Disse er, som du er i ferd med å oppdage, industrielle karakteregenskaper som beveger seg sømløst inn i en SWF eller til Flash. Faktisk, for deg codies, trenger du ikke engang å berøre Flash eller Catalyst. InDesign-dokumenter kan leveres som god gammel XML.
Når det er sagt, er dette en ny arbeidsflyt som, spesielt for Flash-mannskapet, krever ekstra arbeid fra din side. Jeg anser dette som en "god ting" fordi, som du er i ferd med å se, skaper et Flash-dokument fra InDesign ikke en Flash-artist. Du får de bare beinene, og hvis dine Flash ferdigheter er minimal, er du i det vesentlige død i vannet.
Endelig er dette ikke en InDesign opplæring. Formålet er å vise hvordan de interaktive funksjonene til InDesign legges til på en side, og hvordan en doc blir utført til SWF- og Fla-formatene.
La oss fortsette med det ...
Åpne InDesign CS5 og velg Vindu> Arbeidsområde> Interaktiv for å åpne Interaktivitetspanelet.
Her er det i bred grad hva hvert element i panelet gjør:
Nå skal vi bruke en animasjonseffekt til bildeteksten. Velg objektet som vil animere, åpne animasjonspanelet og velg animasjonen fra forhåndsinnstilt popup-ned. Når du gjør det, skjer noen ting:
Bevegelsesbanen, i grønt, vises på siden, og en forhåndsvisning av animasjonen blir brukt på sommerfuglen i panelets forhåndsvisningsvindu. Disse bevegelsesbanene kan redigeres med pennverktøyet, og et veldig pent aspekt av dette er noen tilpassede baner du kan lage i Flash, her og omvendt. Bruk navnområdet til å gi animasjonen et navn og velg når hendelsen - På sidebelastning, På side Klikk, På Klikk (Selv), På Rullover (Selv) - kommer fra hendelsen (e) pop ned.
Du får også til å velge varigheten og hvor ofte det oppstår, og selv om animasjonen er sløyfe. Hastigheten pop-down er hvor du kommer til å søke Easing.
Egenskapene, hvis du er en Flash-designer, ser ganske kjent ut. Med Animate-knappen kan du bestemme hvordan animasjonen fungerer - fra eller til nåværende utseende eller til nåværende plassering. Og området Animate To kan du bruke rotasjon og skalering til den endelige tilstanden til objektet som er i bevegelse.
Testing av animasjoner eller interaktivitet i tidligere versjoner av InDesign var smertefullt. Du vil opprette animasjonen, kompilere SWF og la InDesign forhåndsvise arbeidet ditt i Flash Player. Forhåndsvisning-panelet legger alle disse trinnene på ett sted.
Når du er ferdig med animasjonen, klikker du bare på forhåndsvisningspanelet og panelet vises. Det vil først være tomt. Dette skyldes at InDesign lager en swf som skal spilles i panelet. Når siden vises, klikker du på Spill av i nederste venstre hjørne og bildeteksten glir inn.
Hvis panelet virker for lite, drar du bare et hjørne for å forstørre visningen.
De 12 bildene vi forberedte tidligere ved å bruke Batchbehandling i Fireworks CS5, kan nå hentes inn i dokumentet og brukes i et lysbildefremvisning. Dette er en to-trinns prosess: Ta inn bildene og juster dem på siden og konverter dem deretter til et Multi State-objekt. Dette er hvordan:
Velg Rediger> Plasser, finn mappen som inneholder de skalerte bildene, og hold nede Skift-tasten, velg alle og klikk OK. Du vil se en liten "pistol" som inneholder et miniatyrbilde av et bilde. Klikk på det og bildet i miniatyrbildet blir tapt på siden, og "pistolen" viser deg det neste bildet i stakken. Flytt omhyggelig alle bildene til hvor lysbildene vil dukke opp, og med alle de valgte bildene, åpne panelet Juster ved å trykke på F7-tasten. Juster bildene med topp og venstre kant.
Etter å ha opprettet stakken, åpner du Objektstats-panelet og klikker på knappen "Konverter utvalg til flertallsobjekt" - siden med det oppviste hjørnet nederst på panelet - og alle bildene vises i panelet. . Gi objektet et navn, og om ønskelig, omorganisere bildene ved å dra dem, i panelet, til forskjellige "lag" i stakken.
En stabel er ubrukelig hvis du ikke legger den til jobb. I dette tilfellet importeres frem- og bakknapper som er opprettet i Fireworks CS5 for oppgaven ved hånden. InDesign, som mange av CS5-appene inneholder et bibliotek med "pre-rolled" knapper - Vindu> Eksempelknapper - men ingen passer til designet. De ble brakt inn med File> Place og flyttet inn i sine endelige stillinger på siden.
For å opprette en knapp åpner du panelet Knapper, og med det valgte objektet klikker du på knappen "Konverter objekt til en knapp" - det er rett ved siden av Papirkurven på Knapper panelet. Når dette skjer, lyser panelet og du kan tilordne knappen noen egenskaper.
Det første du må gjøre er å gi knappen et navn. Deretter legger du til en hendelse på knappen. Det er seks arrangementer, hvorav to er strengt for PDF-prosjekter, å velge mellom. "On Release" er en trygg innsats. Det neste trinnet er å tilordne en handling til en hendelse. Klikk på + -tegnet i handlingsområdet, og en popup-liste vises. Dette er et lysbildefremvisning, så det er fornuftig å tildele en "Gå til neste stat" -handling. Det viktige å merke seg her er at Handlingene er gruppert etter sluttbruk. I dette tilfellet skal vi SWF og Flash, så valget vil fungere.
Når handlingen er valgt, endres knappene panelet for å spørre hvilket objekt som skal styres av knappen. I dette tilfellet vil det være landsbystakken. Du kan også klikke på "Stopp ved siste stat" -knappen for å sikre at brukeren faktisk stopper ved det siste bildet i stakken.
Gjenta denne prosessen for Back-knappen og test lysbildefremvisningen i Forhåndsvisning-panelet.
Å legge et lydspor til en side er dødt enkelt. Du kan enten bruke Fil> Plass-menyen eller klikke en gang på Mediepanelet og bruke Plasser en lyd- eller videofil-knapp - den nederst til høyre på panelet - som åpner dialogboksen Plasser medie. Bare husk det eneste lydformatet du kan bruke er mp3.
Når filen er importert, vises en liten lydbeholder på scenen. I mange henseender svarer denne beholderen til hvordan Flash styrer lyd på scenen. Beholderen kan plasseres hvor som helst fordi den er mer en plassholder enn noe annet.
Lydpanelet lar deg teste lyden ved å klikke på Play-knappen og alternativene er noe selvforklarende. Din beste innsats, hvis du går den interaktive ruten, er å velge de to første alternativene. Hvis du ikke vil lydfilen din fortsetter å spille, selv når du forlater siden.
Enkle UX-designprinsipper sier at hvis du spiller en lydfil, bør du gi brukeren muligheten til å drepe den. I dette tilfellet ble en Pause og en Play-knapp opprettet i Fireworks CS5 og konvertert til knapper i InDesign CS5. Så snart du knytter knappen til en kilde, gjenkjenner den en lydfil, og du blir presentert med lydkontrollalternativene vist i figuren. En veldig fin funksjon av panelet Knapper er ikonet nederst i venstre hjørne. Klikk på den og forhåndsvisningspanelet åpnes for å la deg avgjøre om knappen gjør det du vil at den skal gjøre.
Video - FLV, F4V, MP4 - kan legges til InDesign like enkelt som en lydfil, og videoegenskapene er satt i mediepanelet. Likevel er det noen aspekter av dette som du trenger å vite.
Selv om du får to avspillingsalternativer, hvis du skal gi brukeren en kontroller, må du la dem avvelges. Med alternativet Plakat kan du velge en ramme fra videoen eller til og med et annet bilde som skal vises i dokumentet. I dette eksemplet brukte jeg skrubbemaskinen i panelet for å identifisere rammen som vil vises i oppsettet. Du kan også velge en kontroller - SkinOver-skinnene fra Flash er dine eneste valg - og om kontrolleren vil vises når markøren ruller over videoen på siden. Du kan også legge til cue-poeng - InDesign kaller dem Navigasjonspoeng - til videoen, eller de kan legges til ved hjelp av Adobe Media Encoder CS5.
Den andre tingen du trenger å vite om denne videofunksjonen, spesielt hvis du bruker video i Flash, må videoen klikkes på scenen for at den skal begynne å spille eller for å avsløre huden. Det kan ikke være en dårlig ide, hvis du skal skrive ut bare en swf, for å legge til en liten bildetekst eller et ikon som forteller brukeren å klikke på bildet for å starte videoavspilling.
Til slutt bruker du forhåndsvisningspanelet til å teste videoen.
I denne artikkelen viste jeg deg hvordan du bruker alle funksjonene i InDesign CS5s interaktive panel. Jeg viste deg hvordan du lager knapper, legger til lyd og video, og hvordan du setter en stabel importerte bilder inn i et lysbildefremvisning. Du ble også vist hvordan du bruker knapper til å kontrollere lyd og hvordan du legger til en hud i en video.
Jeg har også tatt med hvor mange av eiendelene ble opprettet i Fireworks CS5 og Illustrator CS5 og forberedt på plassering i InDesign CS5-prosjektet.
I neste utgave av denne serien vil jeg gå gjennom trinnene som trengs for å utgive et interaktivt InDesign-dokument for avspilling i en nettleser eller for ytterligere "tweaking" i Flash. Takk for at du leste!
Accentsconagua