Tack vare Rich Media för Tabletter med Adobe CS5 Del 2

I den föregående artikeln gick jag igenom hur man använder en mängd olika applikationer för att skapa tillgångarna för en interaktiv tidning och sedan processen att lägga till media, rörelse och interaktivitet för de tillgångarna i InDesign CS5. Denna artikel kommer att fokusera på slutspelet - utföra projektet för leverans via en webbsida eller skicka projektet till Flash för mer arbete och utdata till en SWF eller till och med en AIR-app.


Introduktion

Anledningen till att jag använder en layout i tidskriftsformat här är att demo många funktioner i InDesign CS5. Jag kommer att erkänna precis utanför fladdermusen, sidstorleken kan slå många av er som en stor del. Kom ihåg att du kan använda vilken sidformat du behöver och jag misstänker att en av de vanligaste storlekarna kommer att ligga i närheten av 800x600. Ändå är valet upp till dig.

Innan vi gräver in, låt oss hantera det oundvikliga "Varför en SWF?" och "Varför en Flash-fil?" frågor. De är giltiga och svaret kan överraska några av er.

I alltför många år har designers varit tvungna att sitta i stolarna längs väggen på Flash soireé. De skulle komma med några bra idéer men deras inflytande minskade i samma takt som deras utvecklare motsvarades. När vi flyttar in i ett digitalt kommunikationsområde där papper och skärmar betraktas som inget annat än visningsmedier blir grafisk design allt viktigare. Projekt som är utformade för utskrift, som du har sett, kan flytta bort den statiska utskriftssidan och interaktiviteten, ljud och videoelement kan byggas byggda direkt in i designen.

SWF-formatet, särskilt med Flash Player 10.1-utgåvan, som sätter ett mediaspelare i händerna på alla som har tillgång till en skärm, gör att du kan skapa snabba prototyper för dina kunder. Bara för att vi "får det" betyder inte att dina kunder kommer. Att göra det intellektuella språnget från papper till skärm kommer att bli en ny upplevelse och sätta en swf i sina händer låt dem faktiskt "se" vad du pratar om.

Flash-formatet kommer absolut att spänna utvecklare. Projektet kommer att brytas ner och återmonteras i Flash-vänliga bitar som kommer att kräva kunskaper från en erfaren Flash Developer för att få tillbaka till livet. Det finns inget av det här: "Ja, bara till Flash och du är i spelet." som alltid verkar fånga uppmärksamheten hos människor som aldrig har använt Flash. Som jag är glad i att säga, "kommer inte att hända." Du kommer att se varför jag säger det senare.

Därifrån tar det normala Flash-arbetsflödet tag i takt med att utvecklaren drar samman klassfilerna, kod- och medieelementen som bygger, och ett antal fall till och med förbättras, på den grafiska formgivarens ansträngningar. Vad kommer att uppskatta Designers är att Flash CS5 går ut ur sin väg för att rymma designens integritet. När processen är klar kan projektet sedan matas ut som någonting från den slutliga SWF-enheten för inbäddning i en webbsida till en AIR 2.0 app.

Låt oss börja:


Steg 1: Exportera som en SWF

När InDesign-dokumentet är öppet väljer du Arkiv> Exportera för att öppna dialogrutan Exportera. Välj Flash Player (SWF) från popupmenyn Format och klicka på Spara.

Dina val är för det mesta självförklarande men det finns ett par här som kan fånga din uppmärksamhet:

InDesign Markup (IDL): Med det här formatet kan dokumentet öppnas i InDesign CS4. Det här är inte något som berör oss.

InDesign-kod: Det här har inget att göra med kodavsnittet i Flash CS5. Det låter dig spara och återanvända objekt på InDesign-sidan.

XML: Jag slår vad om att man fick din uppmärksamhet. Bli inte för upphetsad över den här eftersom det kräver mycket extra arbete på utvecklarens sida. Om du är intresserad av det här alternativet förstår du att du bara kan exportera XML efter att du har:

  • Skapat och laddade in lämpliga elementetiketter.
  • Tillämpade dessa taggar på elementen på sidorna.
  • Öppnade strukturpanelen och justerade hierarkin om det behövs.

Tänk dig om det här "flyter din båt", slå ut dig själv.


Steg 2: Allmänna preferenser

När dialogrutan Exportera SWF öppnas bestämmer du Allmänna inställningar för SWF.

Låt oss gå igenom dina val:

  • Exportera: Du kan välja att exportera en bit av en sida, hela dokumentet eller en rad sidor. Genereringen av HTML-filval skapar HTML-omslaget för SWF och det sista valet, Visa SWF efter Exportera, öppnar HTML-sidan eller SWF och låter dig ta projektet för en testresa.
  • Storlek (pixlar): Med dessa alternativ kan du välja den fysiska storleken på den slutliga SWF. Till exempel erbjuder popupmenyn Fit To: ett komplett utbud av gemensamma storlekar, eller du kan ställa in din egen. Om du ändrar dokumentets fysiska storlek, kommer designens integritet att bibehållas vilket avlägsnar diskussionen "fysisk storlek" från bordet.
  • Bakgrund: Om du väljer transparent kommer bakgrundsfärgen på HTML att användas.
  • Interaktivitet och media: Välj endast Utseende och alla interaktiva element och media blir platsinnehavare.
  • Sidövergång: Du kan tillämpa en mängd ostliknande effekter från Blinds till Zoom Out. Om du är i PowerPoint är du i himlen. Annars ignorerar du bara den här.
  • Interaktiv sidokurva: Detta är ett ganska coolt alternativ. Klicka och dra en svängsida och sidan vrider. Ändå är detta inte helt klart för prime time. Jag tycker att den här funktionen är lite svår att använda eftersom, om du inte gör det precis, går sidan tillbaka. Jag hittade att använda en knapp för att navigationsändamålet skulle vara mer användbart.

Steg 3: Avancerade inställningar

I dialogrutan Exportera SWF klickar du på fliken Avancerat för att öppna avancerade alternativ.

Det är här proffsen tar över eftersom den här panelen kommer att avgöra hur SWF fungerar. Låt oss gå igenom dina val:

  • Ramhastighet: SWF-bildhastigheten anges här. Observera att standardfrekvensen - 24 fps - är den som används av Flash.
  • Text: Du får tre val här. Flash Classic-text kommer att matas ut som sökbar text och resulterar i den minsta filstorleken. Konvertera till konturer är ett bra val om du bara har rubriker. I det här projektet är det här felet fel eftersom det finns en whack av kroppstext. Konvertera till pixlar kommer att platta texten i en bitmapp och all nastiness som medför.
  • Bildhantering: Dessa val är ganska bekanta för alla som har publicerat en SWF.

Steg 4: Klicka på OK för att publicera SWF

När du klickar på OK skapas SWF och, som du kan se på skärmdumpen, öppnas projektet på en webbsida.


Steg 5: SWF-mappen

OK, minimera InDesign och öppna SWF-mappen ...

Bara så är vi alla på samma sida, så att säga, här är filerna som fastnar där inne:

  • Medel: Det här är externa media, inklusive FLVPlayback-skinn, som används i dokumentet.
  • HTML: HTML-omslaget för SWF.
  • SWF: Den swf du just skapat.

Om du undrar bilder, knappar och text, är de alla inbäddade i SWF.


Steg 6: Utmatning till Flash CS5:

Till en Flash Developer eller Designer går det direkt till en SWF "helt enkelt inte gjort." Jag kunde inte hålla med mer. Jag tycker att videofunktionen är lite "grundläggande" och jag är inte en stor fan av att lägga en videohud över videon medan den spelas. Med hjälp av de olika panelerna till "uppringning" -knappar och så vidare när jag kan göra det mer effektivt med hjälp av ActionScript 3.0-sorten, gör dessa "whizzy" -funktioner i InDesign mer som "upplösta" leksaker än någonting annat. Fortfarande presenterar de ett tillfälle att testa funktionalitet, så de har en användning. Men om du vill skapa en mager, genomsnittlig och snabblastad SWF är Flash nästa stopp i processen.

Innan jag får er alla upphetsade om det här måste du veta att den här tekniken, som du snart lär dig, fungerar bäst mellan Flash CS5 och InDesign CS5; i själva verket är det enda Flash-formatet tillgängligt för dig. Dessutom har Adobe upphört XFL-exportalternativet i InDesign. Det var helt enkelt att ge InDesign CS4 möjlighet att flytta in i Flash. Flash export ersätter den.

Slutligen innan du exporterar, se till att du skapar en ny katalog för att hålla filerna.

Låt oss börja.


Steg 7: Exportera som FLA

Välj Arkiv> Exportera> Flash CS5 Professional (FLA) och klicka på Spara-knappen för att öppna dialogrutan Exportera Flash CS5 Professional (FLA).


Steg 8: Välj dina exportalternativ

Många av valen finns i det allmänna området för SWF-exportdialogrutan. Den nya är Text.

Du får fyra val. Tre - Classic Text, Konvertera till konturer och Konvertera till Pixlar - har redan blivit täckta. Den nya är Flash TLF-text. Det här är det nya sättet att hantera text i Flash CS5. TLF står för Text Layout Framework och det är den funktion som ger typografi till Flash. Eventuella typografiska ändringar du gör i InDesign överför, intakt, till Flash. Det här är bra nyheter för designers. Den dåliga nyheten är den här funktionen fungerar bara med Flash CS5 och med Flash Player 10 eller senare.

Valet "Insert Discretionary Hyphenation Points" bryter "ord" när de stöter upp mot kanten av en textruta.

Innan du exporterar till Flash kanske du vill göra en "preflight" -kontroll för att du verkligen får WYSIWYG. Bland saker att kontrollera:

  • Färg: Tänk inte att du kan ta en CMYK-layout och plop den till Flash. Flash använder RGB-färgutrymmet och eventuella punktfärger - Pantone är ett bra exempel - kommer att flyttas till RGB-utrymmet.
  • Genomskinlighet: Se till att de transparenta objekten inte överlappar några interaktiva element, särskilt när du exporterar till SWF-formatet. Det finns en risk för att interaktiviteten kan gå vilse.
  • 3D-attribut: Alla 3D-effekter som används i InDesign - Text på en sökväg - Flytta inte till Flash eller till SWF.
  • typsnitt: TLF fungerar bara med OpenType och TrueType-teckensnitt. PostScript-teckensnitt är inte tillåtna.

Steg 9: Flash-mappen

Minimera InDesign och öppna Flash-mappen.

Den enda skillnaden du bör se mellan innehållet i denna mapp och dess SWF-motsvarighet är att en .fla-fil inkluderas.


Steg 10: Flash CS5

Ta .fla och öppna den i Flash CS5 (det här är det som blir allvarligt coolt).

Först av har filmen bara tre bilder. Anledningen är att varje sprids i InDesign, och det finns tre av dem i det här dokumentet, är inslaget i sin egen filmklipp (kallad "Spread-xxx") i biblioteket. Alla knappar som används i InDesign-dokumentet omvandlas till knappsymboler i Flash-biblioteket och var och en av bilderna som används i bildspelet - ett flervalsobjekt i InDesign - konverteras till ett filmklipp och bilderna läggs till i Flash bibliotek som bitmappsymboler.

De dåliga nyheterna, och för många av er detta inte riktigt dåliga nyheter, är all interaktivitet förlorad. Du måste "rewire" projektet med ActionScript 3.0.


Steg 11: Animering

Låt oss diskutera att öppna en filmklipp som innehåller ett animerat objekt.

I det här projektet finns ett animerat textblock på sidan 3 som börjar med ett alfa-värde på 0 och använder funktionen Fly In From Top i InDesign. Dessa effekter flyttas, intakta, till Flash, läggs till i Motion-lager och banorna kan redigeras fullständigt i Flash.


Steg 12: Välj text

Dubbelklicka på en spridning på huvudtidslinjen för att öppna filmklippet och klicka på ett textblock.

Som du kan se, återspeglas all textformatering, inklusive flöde mellan behållare, som tillämpas i InDesign i textbehållarens textegenskaper i Flash CS5. Det här är enormt. Det enda som saknas är textförpackning; Det kommer inte att gå mellan InDesign och Flash. Vad som rör sig är dock inline-bilder. Dessa är bilder eller grafiska element som läggs till textbehållare i InDesign som inline-element. Återigen är detta enormt.


Steg 13: Välj videon

Video och ljud, typiska externa tillgångar, flyttar inte in i Flash. Vilken video som helst ersätts med en bitmappsplatshållare för videoprintsramen från InDesign CS5 och ljud ignoreras. Återigen hanteras dessa två medietyper bäst genom ActionScript 3.0, så det är ingen stor förlust. Faktum är att videokorthållaren kan ersättas med en FLVPlayback-komponent eller ett videobjekt.

Slutsats:

I denna handledning gick jag igenom de steg som var nödvändiga för att få ett InDesign CS5-dokument förberett för webuppspelning som en SWF- eller .fla-fil. De är anmärkningsvärt lika i hur de exporteras men de två formaten är starkt olika.

Som jag påpekade SWF-exporten är bra för prototypning och ett par andra mycket specifika användningsområden. För många av er är det .fla som utspelas av InDesign som är viktigast.

Jag visade dig hur rörelse, sidtillgångar, text och ljud och video flyttas till Flash. Den viktigaste aspekten av detta är alla tillgångar som landas i Flash-biblioteket men det kommer att kräva att en Flash-utvecklare uppmärksammar att "rewire" projektet med ActionScript 3.0. Detta är en bra sak; De som inte har dina kunskaper och kunskaper kommer att tänka två gånger innan du exporterar Indesign-dokument till Flash eftersom de tror att de kommer att lösa sina problem. Långt ifrån. De börjar bara.

Slutligen, när projektet är "uppkopplat" och funktionellt kan det sedan flyttas till webben eller kompletteras som ett XFL-dokument och överlämnas till Flex-teamet. Det här är ett helt nytt arbetsflöde och jag misstänker att många av er kommer att se detta som extra arbete. Jag tycker ärligt att när du får "hänga på det", kommer InDesign att bli ett annat verktyg i vårt arsenal eftersom en flod av tabletter - Android och andra operativsystem - ligger precis runt hörnet.