Share
Tabletter är dagens stora sak. Visst kan iPad inte göra Flash, men det är bara den första av en våg. Adobe InDesign CS5 kan göra massor av interaktiva saker som är perfekta för ett storskärmsutrymme på en surfplattform, och sparka sedan över till Flash för tweaking och förbättring. I den här handledningen ser vi hur man arbetar med InDesign-sidan av saker.
När Adobe flyttade sin iPhone Compiler for Flash at Max förra året måste jag erkänna att jag kort sagt blåses bort. Sedan vände jag mig till killen bredvid mig i publiken och sa: "Det här kommer att bli bra tills Apple hittar ett sätt att stänga ner det." Vilket slags förklarar varför Apples "April Shock" verkligen inte överraskade mig. Hur de gjorde det var en överraskning men att stänga av det var inte oväntat.
Ett par veckor senare var Richard Galvan, Flash Product Manager, på scenen på FlashintheCan som visade några ganska "whizzy" saker som Flash CS5 kan göra. Under sin presentation avslöjade han hur InDesign CS5 nu kan göra massor av interaktiva saker som sedan enkelt kan svängas över till Flash CS5 som en .fla eller helt enkelt sköt ur InDesign som en helt interaktiv swf. Jag kommer att erkänna att jag hade samma reaktion som många av er har: "Gimme a break. Det finns ingen väg som en Flash-utvecklare / designare värd titeln kommer att skapa en stor, honking swf från InDesign."
Efter Richards presentation hörde jag honom och frågade varför han demonstrerade någonting som stod för att ge en galen man en pistol. Hans ettordsvar svarade mig tillbaka.
tabletter.
han sa.
Om det finns en grundläggande regel jag försöker slå in i mina elever är det att när det gäller att gripa med problem "börja med det självklara och arbeta tillbaka till det oklara." Richard svar var så darn uppenbart att jag kände mig lite fårig.
Även om iPad är en seriös cool enhet tenderar vi att glömma att tabletter är en framväxande teknik. Google, HP och andra kommer att komma ut med en vanlig snickning av dessa saker och de kommer alla att bli Flash-aktiverade. Tack till det här Flash Player 10.1-utgåvan som kommer att börja dyka upp på alla mobila enheter utom Apples erbjudanden och det är inte så mycket av en sträcka att anta det är bara en fråga om tid innan våra kunder klättrar på mobilvagnen.
Bara för att Apple var först ur blocket med sin "leksak för coola barn", menar inte att det är riktmärket. Om dessa saker tar slut kan det bara vara Apple som har producerat en "nisch" -produkt.
Vilket ger mig till denna handledning. Tabletter har mycket skärmutrymme, vilket är ganska darn nära storleken på ett vanligt pappersark som sparats av din laserskrivare. Det är vettigt att (och Wired visar redan detta), för att betrakta tryckta publikationer som ingenting annat än sidor med "innehåll" och att använda Flash Player för att göra ett ganska passivt medium till en rich media-upplevelse.
Under de närmaste månaderna kommer det att finnas ett antal nya Android-mobiler och tabletter som slår på marknaden i sommar. Linjen upp inkluderar Notion Ink ADAM, men det finns andra också, inklusive Marvell Moby, WePad och Dell Mini 5, för att nämna några.
Under denna tvådelade serie kommer du att upptäcka varför Flash CS5 hade sina molekyler vände inuti och omordnade med det nya XFL-formatet. hur InDesign CS5 plötsligt har ändrats från en statisk layout app till en med en mängd interaktiva funktioner och hur det nya TextLayout Framework i Flash är mycket mer än ett ganska nyfiken tillägg till linjen upp. Naturligtvis ska vi börja montera tillgångarna i InDesign. I slutet av den här delen hoppas jag att många av er kommer att upptäcka hur "cool" de interaktiva funktionerna i InDesign verkligen är och, viktigare, varför de är där i första hand. Låt oss börja:
OK. Jag är lat. Jag låter min iPhone hantera den där. Brendan Dawes från MagneticNorth i Storbritannien förvandlade mig till en ganska intressant iPhone app - addLib - som tar en bild du matar den och slår ut några ganska intressanta variationer av hur det kan användas. Att se hur jag ville demo några av funktionerna i InDesign CS5 Jag trodde att en resa jag gjorde till en liten by i Kina - Huo Guo - skulle passa räkningen och bilden av den gamla killen som peering över väggen på mig är en av Mina favoriter från den resan. Jag matade bilden i addLib och jag gillade verkligen den sista behandlingen.
Baserat på den designen visste jag bara att verktyget för jobbet var Illustrator CS5 och att avbildningen bäst gjordes i ... bli klar för den ... Fyrverkerier CS5.
När bilden öppnade det första som skulle göras var att få det till en mer hanterbar storlek. Den ursprungliga bilden från min Nikon D200 var 2896 med 1944 pixlar som inte skulle fungera antingen i Illustrator CS5 eller Fireworks CS5. Jag har valt bilden på fyrverkerierna, valt Modify> Canvas> Bildstorlek och ändrat pixeldimensionerna till de som visas i bilden. Med den ändrade bilden klickade jag på knappen Fit Fit på Egenskaper-panelen för att se till att det inte fanns någon extra duk i den slutliga bilden.
Bilden är ganska mörk och kan använda lite färgkorrigering. Jag valde bilden på Canvas och i panelen Egenskaper valda filter> Justera färger> Nivåer. Histogramet berättade att jag behövde klippa lite av det vita på höger sida av grafen. Flyttning av den vita punkten, som visas i figuren, upplyste bilden. Bilden sparades som CoverColor.jpg.
Att skapa en gråskalversion var också en snap. Med den bild som valts på Canvas I valda filter> Justera färger> Färgtonning / Mättnad och sätt mättnadsvärdet till -100 som tog bort färgen från bilden. Den här bilden sparades sedan som CoverGrey.jpg.
Jag trodde att heaving ett fotogalleri i InDesign var en ingen brainer och skulle demo denna funktion av ansökan. Naturligtvis 12 bilder, samma storlek som omslagsbilden skulle inte flyga och skala dem, för hand, är inte kul.
En av mina favoritfunktioner i Fireworks CS5 är Batch Processing: File> Batch Process ... Det är ett mycket enkelt arbetsflöde. Identifiera bilderna, bestämma skalningsbeloppet och låt Fireworks hålla de nedskalade versionerna i en separat mapp. Detta tog mindre än 30 sekunder att uppnå.
AddLib-designen var anmärkningsvärt lätt att replikera i Illustrator CS5. Med hjälp av en kombination av enkla former kunde masker och typ jag dra ihop det på mindre än 30 minuter. Det stora beslutet innebar utdataformat. Jag gick med ai-formatet, eftersom både Flash och InDesign tillåter mig att resa tillbaka till Illustrator för att göra ändringar. Om detta var avsett för en webapp med ett stopp i Catalyst eller Flex, skulle jag ha gått med FXG över hela linjen i Fireworks, Flash och Illustrator.
Med tillgångarna monterade var det dags att komma igång i InDesign.
Även om jag skulle ta en minut eller två för att få lite djupare in i det här ämnet innan jag rullar in i projektet, tyvärr, som många av er såg jag det som ett utskrivningsverktyg som satt på verktygsbänken istället för en i min interaktiva verktygslåda. Ändå frustrerade jag mig inte mer än att kunna använda fina typografitekniker på staketets utskriftssida, medan vi skulle "faka det" på den interaktiva sidan. För att inte tala om att försöka få en flerfärgslayout eller ett nätverkssystem att fungera i Flash var något som mina grafikkollegor på gats utskriftssida aldrig kunde nämna för mig.
InDesign CS5 sätter stopp för denna vänliga nålar. Bland funktionerna i InDesign CS5 som jag bara grävde är:
Gör inget misstag om det folk. Dessa saker är inte whiz bang, gratuitous eye candy funktioner läggas till appen för att få choruses av "Cool" från Fan Boyz på demos och konferenser. Dessa är, som du ska upptäcka, industriella funktioner som rör sig sömlöst i en SWF eller till Flash. Faktum är att du inte ens behöver peka på Flash eller Catalyst för dig. InDesign docs kan matas ut som bra gammal XML.
Med detta sagt är detta ett framväxande arbetsflöde som, särskilt för Flash-besättningen, kräver extra arbete från din sida. Jag anser det här som en "bra sak" eftersom det inte går att bli en Flash-artist som du kommer att se, att sparka ut ett Flash-dokument från InDesign. Du får de nakna benen och om dina Flash-färdigheter är minimala så är du väsentligen död i vattnet.
Slutligen är det här inte en InDesign-handledning. Syftet är att visa dig hur de interaktiva funktionerna i InDesign läggs till på en sida och hur ett dokument skickas till SWF- och Fla-format.
Låt oss ta itu med det ...
Öppna InDesign CS5 och välj Fönster> Arbetsyta> Interaktiv för att öppna panelen Interaktivitet.
Här är det i stort sett vad varje objekt i panelen gör:
Nu ska vi ange en animeringseffekt till bildtexten. Markera objektet som kommer att animera, öppna animeringspanelen och välj animeringen från förinställd popup. När du gör det händer några saker:
Rörelsesbanan, i grön, visas på sidan och en förhandsgranskning av animeringen tillämpas på fjärilen i panelens förhandsgranskningsfönster. Dessa rörelsebana kan redigeras med penverktyget och en riktigt snygg aspekt av detta är några anpassade sökvägar du kan skapa i Flash kan användas här och vice versa. Använd namnet för att ge animationen ett namn och välj när händelsen - På sidladdning, På sidklick, På Klicka (Själv), På rullöverföring (Själv) - kommer att hända från händelsen (arna).
Du får också välja varaktighet och hur ofta det inträffar och även om animationen är att slinga. Hastigheten pop-down är där du kommer att tillämpa Easing.
Egenskaperna, om du är en Flash-designer, ser ganska bekant ut. Med knappen Animate kan du bestämma hur animationen fungerar - från eller till aktuellt utseende eller till aktuellt läge. Och området Animate To kan du använda rotation och skalning till det slutliga tillståndet för objektet i rörelse.
Testa animeringar eller interaktivitet i tidigare versioner av InDesign var smärtsamt. Du skulle skapa animeringen, kompilera SWF och lämna InDesign för att förhandsgranska ditt arbete i Flash Player. Förhandsgranskningspanelen lägger alla dessa steg på en plats.
När du avslutar med din Animation, klicka bara på panelen Förhandsgranska panel och panelen kommer att visas. Det kommer först att vara tomt. Detta beror på att InDesign skapar en swf som spelas i panelen. När sidan visas klickar du på knappen Spela upp i nedre vänstra hörnet och bildtexten glider in.
Om panelen verkar för liten, dra bara ut ett hörn för att förstora visningen.
De 12 bilderna som vi förberedde tidigare med Batch-bearbetning i Fireworks CS5 kan nu tas med i dokumentet och användas i en bildspel. Det här är en tvåstegsprocess: Ta in bilderna och rikta dem på sidan och konvertera dem sedan till ett Multi State-objekt. Här är hur:
Välj Redigera> Placera, leta reda på mappen som innehåller de skalade bilderna och, med Shift-knappen nedtryckt, välj dem alla och klicka på OK. Du kommer att se en liten "pistol" som innehåller en miniatyrbild av en bild. Klicka på den och bilden i miniatyrbilden släpps på sidan och "pistolen" visar nästa bild i stapeln. Flytta i stort sett alla bilder till var bilderna ska visas och med alla de valda bilderna öppna panelen Justera genom att trycka på F7-tangenten. Justera bilderna med sina övre och vänstra kanter.
Efter att ha skapat "stacken" öppnar du objektstartspanelen och klickar på knappen "Konvertera till multistatobjekt" - sidan med det uppvunna hörnet längst ner på panelen - och alla bilder visas i panelen . Ge objektet ett namn och om du vill, omordna bilderna genom att dra dem i panelen till olika "lager" i stapeln.
En stapel är meningslös om du inte sätter den på jobbet. I detta fall importeras framåt och bakåtknappar som skapats i Fireworks CS5 för den aktuella uppgiften. InDesign, som många av CS5-programmen innehåller ett bibliotek med "förvalsade" knappar - Fönster> Provknappar - men ingen passar designen. De togs in med File> Place och flyttade till sina slutliga positioner på sidan.
För att skapa en knapp öppnar du panelen Knappar och med det markerade objektet klickar du på knappen "Konvertera objekt till en knapp" - det är rätt bredvid papperskorget på panelen Knappar. När detta händer lyser panelen upp och du kan tilldela knappen vissa egenskaper.
Det första som ska göras är att ge knappen ett namn. Anslut sedan en händelse till knappen. Det finns sex händelser, varav två är strikt för PDF-projekt att välja mellan. "On Release" är en säker satsning. Nästa steg är att tilldela en åtgärd till en händelse. Klicka på + -tecknet i åtgärdsområdet och en popup-lista visas. Detta är ett bildspel, så det är vettigt att tilldela en "Gå till nästa stat" -åtgärd. Det viktiga att notera här är att åtgärder grupperas enligt slutanvändning. I det här fallet ska vi SWF och Flash så valet kommer att fungera.
När åtgärden väljs kommer panelen Knappar att ändras för att fråga dig vilket objekt som ska styras av knappen. I det här fallet kommer det att vara Village stacken. Du kan också klicka på knappen "Stopp vid senaste tillstånd" för att säkerställa att användaren stannar vid den sista bilden i stapeln.
Upprepa processen för Back-knappen och testa bildspelet i förhandsgranskningspanelen.
Lägga till ett ljudspår på en sida är död enkelt. Du kan antingen använda Arkiv> Plats-menyn eller klicka en gång på Media-panelen och använd knappen Placera en ljud- eller videofil - den längst ned till höger på panelen - som öppnar dialogrutan Platsmedia. Kom bara ihåg det enda ljudformat du kan använda är mp3.
När filen är importerad visas en liten ljudbehållare på scenen. I många avseenden liknar denna behållare hur Flash hanterar ljud på scenen. Behållaren kan placeras var som helst eftersom den är mer av en platshållare än någonting annat.
Ljudpanelen låter dig testa ljudet genom att klicka på Spela-knappen och alternativen är något självförklarande. Din bästa satsning är att välja de två första alternativen om du går till den interna rutten. Om du inte kommer din ljudfil fortsätta att spela även när du lämnar sidan.
Enkla UX-designprinciper anger att om du spelar en ljudfil bör du ge användaren möjlighet att döda det. I det här fallet skapades en paus och en Play-knapp i Fireworks CS5 och konverterades till knappar i InDesign CS5. Så snart du länkar länken till en källa, känner den igen en ljudfil och du presenteras med ljudkontrollalternativen som visas i bilden. Ett riktigt snyggt inslag i panelen Knappar är ikonen längst ned till vänster. Klicka på den och panelen Förhandsgranskning öppnas för att du ska kunna avgöra om knappen gör vad du vill att den ska göra.
Video - FLV, F4V, MP4 - kan läggas till InDesign lika enkelt som en ljudfil och videoegenskaperna ställs in i mediepanelen. Fortfarande finns det några aspekter av detta som du behöver veta.
Även om du får två uppspelningsalternativ, om du ska ge användaren en kontroller, lämna dem avmarkerad. Med alternativet Poster kan du välja en bild från videon eller till och med en annan bild som ska visas i dokumentet. I det här exemplet använde jag skrubbaren i panelen för att identifiera ramen som kommer att visas i layouten. Du kan också välja en kontroller - SkinOver-skinn från Flash är dina enda val - och huruvida regulatorn kommer att visas när markören rullar över videon på sidan. Du kan också lägga till cue-poäng - InDesign kallar dem Navigation Points - till videon eller de kan läggas till med Adobe Media Encoder CS5.
Det andra du behöver veta om den här videofunktionen, speciellt om du använder video i Flash, måste videon klickas på scenen för att den ska börja spela eller att avslöja huden. Det kanske inte är en dålig idé, om du bara skriver ut en swf, lägger du till en liten bildtext eller ikon som berättar användaren att klicka på bilden för att starta videouppspelning.
Slutligen använd förhandsgranskningspanelen för att testa videon.
I den här artikeln visade jag dig hur du använder alla funktionerna i InDesign CS5s interaktiva panel. Jag visade dig hur man skapar knappar, lägger till ljud och video och hur man gör en stapel importerade bilder till en bildspel. Du visades också hur man använder knappar för att styra ljud och hur man lägger till en hud i en video.
Jag inkluderade också hur många av tillgångarna som skapades i Fireworks CS5 och Illustrator CS5 och förbereddes för placering i InDesign CS5-projektet.
I nästa del av denna serie går jag igenom de steg som krävs för att utmata ett interaktivt InDesign-dokument för uppspelning i en webbläsare eller för ytterligare "tweaking" i Flash. Tack för att du läser!
Accentsconagua