I den forrige artikkelen gikk jeg gjennom hvordan man bruker en rekke applikasjoner for å skape eiendelene for et interaktivt magasin, og deretter prosessen med å legge til media, bevegelse og interaktivitet for disse eiendelene i InDesign CS5. Denne artikkelen vil fokusere på slutten av spillet - utføre prosjektet for levering via en nettside eller sende prosjektet til Flash for mer arbeid og utdata til en SWF eller til og med en AIR-app.
Grunnen til at jeg bruker en magasin stil layout her er å demo mange av funksjonene i InDesign CS5. Jeg vil innrømme rett utenfor flaggermuset, sidestørrelsen kan slå mange av dere til å være litt tøff. Husk at du kan bruke hvilken som helst sidestørrelse du trenger, og jeg mistenker at en av de vanligste størrelsene vil være i nærheten av 800x600. Likevel er valget opp til deg.
Før vi graver inn, la oss håndtere det uunngåelige "Hvorfor en SWF?" og "Hvorfor en Flash-fil?" spørsmål. De er gyldige, og svaret kan overraske noen av dere.
I altfor mange år har designere vært tvunget til å sitte i stolene langs veggen på Flash soireé. De ville komme opp med noen gode ideer, men deres innflytelse gikk ned i samme takt som utviklerens kolleger steg. Når vi beveger oss inn i et digital kommunikasjonsområde der papir og skjermer betraktes som ingenting mer enn displaymedier, blir grafisk design stadig viktigere. Prosjekter designet for utskrift, som du har sett, kan bevege seg ut av statisk utskriftsside og interaktivitet, lyd og videoelementer kan bygges bygget rett inn i design.
SWF-formatet, spesielt med Flash Player 10.1-utgaven, som setter et monster av en mediespiller i hendene på alle som har tilgang til en skjerm, lar deg lage raske prototyper for dine kunder. Bare fordi vi "får det" betyr ikke at kundene dine vil. Å gjøre det intellektuelle spranget fra papir til skjerm vil bli en ny opplevelse og sette en swf i hendene la oss faktisk se "se" hva du snakker om.
Flash-formatet vil absolutt spenne utviklere. Prosjektet vil bli brutt ned og reassemblert til Flash-vennlig stykker som vil kreve ferdighetene til en erfaren Flash Developer for å bringe tilbake til livet. Det er ingen av dette: "Ja, bare send ut til Flash, og du er i spillet." som alltid ser ut til å få oppmerksomheten til folk som aldri har brukt Flash. Som jeg er glad i å si, "Skal ikke skje." Du vil se hvorfor jeg sier det senere.
Derfra tar den vanlige Flash-arbeidsflyten tak i takt med at utvikleren trekker sammen klassefilene, koden og medieelementene som bygger, og mange tilfeller forbedrer seg, til den grafiske designerens innsats. Hva vil begeistret Designers er at Flash CS5 går ut av sin måte å imøtekomme integriteten til designet. Når denne prosessen er fullført, kan prosjektet da sendes ut som noe fra den endelige SWF for å legge inn på en nettside til en AIR 2.0-app.
La oss komme i gang:
Når InDesign-dokumentet er åpent, velger du Fil> Eksporter for å åpne Eksporter-dialogboksen. Velg Flash Player (SWF) fra rullegardinmenyen Format, og klikk Lagre.
Dine valg er for det meste selvforklarende, men det er et par her som kan fange din oppmerksomhet:
InDesign Markup (IDL): Dette formatet lar dokumentet åpnes i InDesign CS4. Dette er ikke noe som angår oss.
InDesign-kode: Dette har absolutt ingenting å gjøre med kodestykket i Flash CS5. Den lar deg lagre og gjenbruk gjenstander på InDesign-siden.
XML: Jeg vil satse på at man fikk oppmerksomheten din. Ikke bli for spent på denne, fordi det krever mye ekstra arbeid på utviklerens side. Hvis du er fascinert med dette alternativet, forstår du at du kun kan eksportere XML etter at du har:
Tenk deg, hvis dette "flyter båten din," slå deg ut.
Når dialogboksen Eksporter SWF åpnes, bestemmer du Generelle innstillinger for SWF.
La oss gå gjennom valgene dine:
I dialogboksen Eksporter SWF klikker du på kategorien Avansert for å åpne avanserte alternativer.
Det er her Pros overtar fordi dette panelet vil avgjøre hvordan SWF opererer. La oss gå gjennom valgene dine:
Når du klikker på OK, opprettes SWF, og som du ser på skjermbildet, åpnes prosjektet på en nettside.
OK, minimer InDesign og åpne SWF-mappen ...
Bare så er vi alle på samme side, så å si, her er filene som sitter fast der inne:
Hvis du lurer på bildene, knappene og teksten, er de alle innebygd i SWF.
Til en Flash Developer eller Designer, går det umiddelbart til en SWF "bare ikke ferdig." Jeg kunne ikke enig mer. Jeg finner videofunksjonen til å være litt "grunnleggende", og jeg er ikke en stor fan av å sette en videohud over videoen mens den spiller. Også ved hjelp av de forskjellige panelene til "wire up" -knapper og så videre når jeg kan gjøre det mer effektivt ved hjelp av ActionScript 3.0-typen, gjør disse "whizzy" -funksjonene i InDesign føles mer som "wind up" -leker enn noe annet. Likevel presenterer de en mulighet til å teste funksjonaliteten, så de har en bruk. Likevel, hvis du vil lage en mager, middels og rask lasting SWF, er Flash det neste stoppet i prosessen.
Før jeg får dere alle begeistret for dette, må du vite at denne teknikken, som du snart skal lære, fungerer best mellom Flash CS5 og InDesign CS5; faktisk er det eneste Flash-formatet tilgjengelig for deg. Adobe har også avviklet XFL-eksportalternativet i InDesign. Det var bare å gi InDesign CS4 muligheten til å flytte inn i Flash. Flash-eksport erstatter den.
Endelig før du eksporterer, sørg for å opprette en ny katalog for å holde filene.
La oss komme i gang.
Velg Fil> Eksporter> Flash CS5 Professional (FLA) og klikk på Lagre-knappen for å åpne dialogboksen Eksporter Flash CS5 Professional (FLA).
Mange av valgene finnes i det generelle området for SWF-eksportdialogboksen. Den nye er Tekst.
Du får fire valg. Tre - Klassisk tekst, Konverter til konturer og Konverter til piksler - har allerede blitt dekket. Den nye er Flash TLF-tekst. Dette er den nye måten å administrere tekst på i Flash CS5. TLF står for Tekst Layout Framework og det er funksjonen som bringer typografi til Flash. Eventuelle typografiske endringer du gjør i InDesign overfører, intakt, til Flash. Dette er gode nyheter for designere. Den dårlige nyheten er denne funksjonen fungerer bare med Flash CS5 og med Flash Player 10 eller høyere.
Valget "Sett inn diskretion" betyr "bryter" ord når de støter opp mot kanten av en tekstboks.
Før du eksporterer til Flash, vil du kanskje gjøre en "preflight" -kontroll for å sikre at du virkelig får WYSIWYG. Blant de tingene som skal kontrolleres:
Minimer InDesign og åpne Flash-mappen.
Den eneste forskjellen du bør se mellom innholdet i denne mappen og den tilhørende SWF-motparten er inkluderingen av en .fla-fil.
Ta .fla og åpne den i Flash CS5 (dette er hvor blir alvorlig kult).
For det første har filmen bare tre rammer. Årsaken er at hvert spredes i InDesign, og det er tre av dem i dette dokumentet, pakket inn i sin egen filmklipp (kalt "Spread-xxx") i biblioteket. Alle knappene som brukes i InDesign-dokumentet, blir omgjort til knappsymboler i Flash-biblioteket, og hver av bildene som brukes i lysbildefremvisningen - et flertallsobjekt i InDesign - konverteres til et filmklipp og bildene blir lagt til Flash bibliotek som bitmap symboler.
De dårlige nyhetene, og for mange av dere, dette er egentlig ikke dårlige nyheter, er all interaktivitet tapt. Du må "rewire" prosjektet ved hjelp av ActionScript 3.0.
La oss diskutere å åpne en filmklipp som inneholder et animert objekt.
I dette prosjektet finnes det en animert tekstblokk på side 3 som starter med en alfa-verdi på 0 og bruker innflytingen fra fra toppen i InDesign. Disse effektene flytter, intakt, til Flash, legges til Motion-lag, og stiene er fullt redigerbare i Flash.
Dobbeltklikk et spred på hovedlinjen for å åpne filmklippet og klikk på en tekstblokk.
Som du kan se, gjenspeiles all tekstformatering, inkludert flyt mellom containere, som er brukt i InDesign, i tekstbeholderens tekstegenskaper i Flash CS5. Dette er stort. Det eneste som mangler er tekstbryter; det vil ikke bevege seg mellom InDesign og Flash. Hva som skjer, er imidlertid inlinebilder. Dette er bilder eller grafiske elementer lagt til tekstbeholdere i InDesign som inline-elementer. Igjen, dette er stort.
Video og lyd, typiske eksterne eiendeler, flytt ikke inn i Flash. Enhver video er erstattet med en bitmap plassholder av videoens plakatramme fra InDesign CS5 og lyd er vel ignorert. Igjen disse to medietyper håndteres best gjennom ActionScript 3.0, så det er ikke et stort tap. Faktisk kan videoplassholderen erstattes med en FLVPlayback-komponent eller et videobjekt.
I denne veiledningen gikk jeg deg gjennom trinnene som var nødvendige for å få et InDesign CS5-dokument utarbeidet for webavspilling som en SWF- eller .fla-fil. De er bemerkelsesverdig like i hvordan de eksporteres, men de to formatene er sterkt forskjellige.
Som jeg påpekte SWF eksporten er bra for prototyping og et par andre svært spesifikke bruksområder. For mange av dere er det .fla sparket ut av InDesign som er viktigst.
Jeg viste deg hvordan bevegelse, sideverdier, tekst og lyd og video blir flyttet til Flash. Det viktigste aspektet av dette er alle eiendelene i Flash-biblioteket, men det skal kreve en Flash-utvikler oppmerksom på å "rewire" prosjektet med ActionScript 3.0. Dette er en god ting; de som ikke har dine ferdigheter og kunnskaper, vil tenke to ganger før du eksporterer Indesign-dokumenter til Flash fordi de tror det vil løse sine problemer. Langt ifra. De har nettopp startet.
Til slutt, når prosjektet er "kablet opp" og funksjonelt, kan det da flytte til nettet eller bli samlet sammen som et XFL-dokument og overlevert til Flex-teamet. Dette er en helt ny arbeidsflyt, og jeg mistenker at mange av dere vil se dette som ekstra arbeid. Jeg føler meg ærlig at når du får det "henger av det", blir InDesign i ferd med å bli et annet verktøy i vårt arsenal fordi en flom av tabletter - Android og andre OS-er like rundt hjørnet.