Tackling Rich Media for tabletter med Adobe CS5: Part 2
Del
Del
Del
Del < .no> Denne Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I forrige artikkel jeg gikk deg gjennom hvordan man bruker en rekke programmer for å lage eiendeler for en interaktiv magasin og deretter prosessen med å legge media, bevegelse og interaktivitet til de eiendeler i InDesign CS5. Denne artikkelen vil fokusere på sluttspillet -. Utmating av prosjektet for levering gjennom en webside eller sende prosjektet til Flash for mer arbeid og utgang til en SWF eller en AIR app
introduksjon til
grunnen til at jeg bruker et magasin-stil layout her er å demo mye av funksjonene i InDesign CS5. Jeg skal innrømme rett utenfor balltre, sidestørrelsen kan ramme mange av dere som en tad largish. Husk at du kan bruke en hvilken som helst side størrelse du trenger, og jeg mistenker at en av de mer vanlige størrelser vil være i nabolaget på 800x600. Likevel, valget er opp til deg.
Før vi graver i, la oss håndtere den uunngåelige "Hvorfor en SWF?" og "Hvorfor en Flash-fil?" spørsmål. De er gyldige, og svaret kan overraske noen av dere.
For altfor mange år Designere har blitt slags tvunget til å sitte i stolene langs veggen på Flash Soiree. De ville komme opp med noen gode ideer, men deres innflytelse redusert i samme takt som sine Developer kolleger rose. Når vi beveger oss inn i en digital kommunikasjon verden der papir og skjermene er ansett som noe mer enn display medier, blir grafisk design stadig viktigere. Prosjekter utformet for utskrift, som du har sett, kan bevege seg utenfor den statiske trykksiden og interaktivitet, lyd- og videoelementer kan bygges bygget rett inn i design.
SWF-format, spesielt med Flash Player 10.1 utgivelse , som setter et monster av en mediespiller i hendene på alle med tilgang til en skjerm, kan du lage raske prototyper for kundene dine. Bare fordi vi "få det" betyr ikke at kundene vil. Å gjøre den intellektuelle spranget fra papir til skjerm kommer til å bli en ny opplevelse og sette en swf i hendene la oss dem faktisk "se" hva du snakker om.
Flash-format vil absolutt spenningen Developers. Prosjektet vil bli brutt ned og satt sammen i Flash-vennlig stykker som kommer til å kreve ferdighetene til en erfaren Flash Developer å bringe tilbake til livet. Det er ingenting av dette: "Jepp, bare utgang til Flash og du er i spillet." som alltid ser ut til å fange oppmerksomheten til folk som aldri har brukt Flash. Så jeg er glad i å si, "Er ikke skal skje." Du vil se hvorfor jeg sier det senere.
Derfra normal Flash arbeidsflyt tar tak som utbygger trekker sammen klassen filene, kode og medieelementer som bygger, og en mange tilfeller enda bedre, på innsatsen til grafisk designer. Hva vil spenningen Designere er at Flash CS5 går ut av sin vei for å imøtekomme integriteten til design. Når denne prosessen er fullført prosjektet kan da sendes ut som noe fra den endelige SWF for innebygging i en webside til en AIR 2.0 app
La oss komme i gang.
Trinn 1: Eksporter som en SWF
Med InDesign dokument åpent, velger du File > Eksporter for å åpne dialogboksen Export. Velg Flash Player (SWF) fra Format down menyen og klikk på Lagre
Du kan velge mellom, for det meste selvforklarende, men det er et par her som kan fange din oppmerksomhet.
< p> Mind du, hvis denne "flyter båten din," banke deg ut
Trinn 2:. Generelle innstillinger
Når Eksporter SWF dialogboksen åpnes, bestemme generelle innstillinger for SWF.
La oss gå gjennom dine valg: I Eksporter SWF dialogboksen klikker du på kategorien Avansert for å åpne Avanserte alternativer. det er der proffene overta fordi dette panelet vil avgjøre hvordan SWF opererer. La oss gå gjennom dine valg: Når du klikker OK SWF er opprettet, og som du kan se i skjermbildet, åpner prosjektet på en webside. OK, minimere InDesign og åpne SWF-mappen .. Bare så vi er alle på samme side, så å si, her er filene som blir sittende fast der inne: Hvis du lurer på om bildene, knapper og tekst, de er alle innebygd i SWF til en Flash-utvikler eller designer, kommer umiddelbart til en SWF er Jeg kunne ikke vært mer enig. Jeg finner videoen funksjonen for å være litt "basic", og jeg er ikke en stor fan av å sette en video huden over videoen mens den spiller. Også ved hjelp av ulike paneler til "tråd opp" knapper og så på når jeg kan gjøre det mer effektivt med Actionscript 3.0 slags gjør disse "whizzy" funksjonene i InDesign føler seg mer som "avvikle" leker enn noe annet. Likevel presenterer de en mulighet til å teste funksjonalitet, slik at de har en bruk. Likevel, hvis du ønsker å opprette en lean, mean og rask lasting SWF da Flash er neste stopp i prosessen. Før jeg får du alle glade om dette må du vite at denne teknikken, som vil du snart lære, fungerer best mellom Flash CS5 og InDesign CS5; faktisk er det den eneste Flash-format tilgjengelig for deg. Dessuten har Adobe avviklet XFL eksport alternativet i InDesign. Det var der bare for å gi InDesign CS4 muligheten til å flytte inn i Flash. Flash eksport erstatter den. Til slutt før du eksporterer, sørg for å opprette en ny katalog til å lagre filene. La oss komme i gang. Velg Fil > Export > Flash CS5 Professional (FLA), og klikk på Lagre-knappen for å åpne Export Flash CS5 Professional (FLA) i dialogboksen Mange av valg kan bli funnet i den generelle delen av SWF-eksport dialogboksen. Den nye er Tekst. Du får fire valg. Tre - Classic Text, Konverter til Outlines og konvertere å Pixels - har allerede blitt dekket. Den nye er Flash TLF tekst. Dette er den nye måten å håndtere tekst i Flash CS5. TLF står for tekst Layout Framework, og det er den funksjonen som bringer typografi til Flash. Eventuelle typografiske endringer du gjør i InDesign vil overføre, intakt, til Flash. Dette er gode nyheter for designere. Den dårlige nyheten er denne funksjonen bare fungerer med Flash CS5 og med Flash Player 10 eller høyere. Sett Skjønns Orddeling poeng selection "pauser" ord når de støter opp mot kanten av en tekstboks. Før du eksporterer til Flash kan det være lurt å gjøre en "preflight" sjekke for å sikre at du virkelig får WYSIWYG. Blant de ting å sjekke: Minimer InDesign og åpne Flash-mappen Den eneste forskjellen du bør se mellom denne mappen innhold og at den er SWF motstykke er inkluderingen av en FLA fil Ta FLA og åpne den i Flash CS5 (dette er hvor er får seriøst kult). Først av, filmen har bare tre rammer. Årsaken er hvert oppslag i InDesign, og det er tre av dem i dette dokumentet, er pakket inn i sin egen MovieClip (som heter "Spread-xxx") i biblioteket. Alle knappene brukes i InDesign-dokumentet blir til knappesymbolene i Flash bibliotek og hvert av bildene som brukes i slideshow - en Multi-State objekt i InDesign - omdannes til et filmklipp og bilder er lagt til Flash bibliotek som bitmap symboler. Den dårlige nyheten, og for mange av dere dette er egentlig ikke dårlige nyheter, er all interaktivitet er tapt. Du må "ReWire" prosjektet ved hjelp av Actionscript 3.0 La oss diskutere åpne en MovieClip inneholder en animert objekt I dette prosjektet er det en animert tekstblokk på side 3 som starter med en Alpha verdi på 0 og bruker den flyr inn fra topp effekt i InDesign. Disse effektene flytte, intakt, i Flash, er lagt til Motion lagene og banene er fullt redigerbar i Flash Dobbeltklikk en spredning på hovedtidslinjen til åpne filmklipp og klikk på en tekstblokk. Som du kan se, all tekstformatering, inkludert flyt mellom containere, anvendt i InDesign gjenspeiles i teksten container tekst eiendommer i Flash CS5. Dette er stort. Det eneste som mangler er tekstbryting; det vil ikke flytte mellom InDesign og Flash. Hva gjør flytte, men er innebygde bilder. Dette er bilder eller grafiske elementer legges til tekst containere i InDesign som inline-elementer. Igjen, dette er stort Video og lyd, typiske eksterne midler, ikke flytte inn i Flash. Enhver video er erstattet med en bitmap plassholder av videoens plakatbilde fra InDesign CS5 og lyd er, vel, ignorert. Igjen disse to medietyper håndteres best gjennom Actionscript 3.0, så er det ikke et stort tap. Faktisk kan videoplassholder erstattes med en FLVPlayback komponent eller video objekt I denne opplæringen jeg gikk deg gjennom de nødvendige skritt for å få et InDesign CS5-dokument utarbeidet for web avspilling som en SWF eller FLA-fil. De er påfallende like i hvordan de blir eksportert, men de to formatene er tydelig annerledes. Som jeg påpekte SWF-eksport 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, side eiendeler, tekst og lyd og video er flyttet inn i Flash. Det viktigste aspektet ved dette er alt av eiendeler land i Flash biblioteket, men det kommer til å kreve oppmerksomheten til en Flash-utvikler til "ReWire" prosjektet med Actionscript 3.0. Dette er en god ting; de som ikke har dine ferdigheter og kunnskap vil tenke to ganger før du eksporterer InDesign-dokumenter til Flash, fordi de tror det vil løse sine problemer. Langt ifra. De er bare å starte. Til slutt, når prosjektet er "kablet opp" og funksjonell det kan deretter gå til web eller være buntet opp som en XFL dokument og overlevert til Flex team. Dette er en helt ny arbeidsflyt og jeg mistenker at mange av dere vil se dette som ekstra arbeid. Jeg ærlig føler at når du får den "henge av det" InDesign er i ferd med å bli et annet verktøy i vårt arsenal fordi en flom av tabletter - Android og andre OS-tallet -. Er rett rundt hjørnet
Export:
Du kan velge å eksportere en del av en side, hele dokumentet eller et utvalg av sider. Den genererer HTML-fil valget vil opprette HTML wrapper for SWF og det siste valget, Utsikt SWF etter Eksport, vil åpne HTML-side eller SWF og tillater deg å ta prosjektet for en prøvetur.
Disse alternativene kan du velge den fysiske størrelsen på den endelige SWF. For eksempel Tilpass til: pop ned menyen gir deg et komplett utvalg av vanlige størrelser, eller du kan sette din egen. Hvis du endrer den fysiske størrelsen på dokumentet, vil integriteten av design opprettholdes som liksom fjerner "fysisk størrelse" diskusjonen fra tabellen
Bakgrunn:.
Hvis du velger gjennomsiktig bakgrunnsfargen på HTML skal brukes
Interaktivitet og Media:..
Velg Utseende Only og alle de interaktive elementer og medier blitt plassholdere
Side Transition
: Du kan bruke en rekke cheesy effekter fra Blinds å zoome ut. Hvis du er i PowerPoint, du er i himmelen. Ellers, bare ignorere dette en
Interaktiv Page Curl.
Dette er en ganske kul alternativ. Klikk og dra en tur side og side svinger. Likevel, dette er ikke helt klar for prime time. Jeg finner denne funksjonen litt vanskelig å bruke fordi hvis du ikke gjør det riktig, siden knipser tilbake. Jeg fant ved hjelp av en knapp for dette navigasjons formål å være mer nyttig
Trinn 3: Avansert. Valg
Frame Rate:
SWF Bildefrekvensen er satt her. Merk at standardhastighet - 24 fps - er den som brukes av Flash
Tekst:.
Du får tre valg her. Flash Classic tekst vilje utgang som søkbar tekst og resultater i den minste filstørrelsen. Konverter til omriss er et godt valg hvis du har bare overskrifter. I dette prosjektet dette valget er det galt fordi det er en klask på brødtekst. Konverter til Pixels vil flate teksten inn i en bitmap og alle nastiness som innebærer
Bilde Håndtering:..
Disse valgene er ganske kjent for alle som har publisert en SWF
Trinn 4: Klikk på OK for å publisere SWF
Trinn 5: SWF Folder
Resources:.
Dette er de eksterne medier, inkludert FLVPlayback skins, som brukes i dokumentet
HTML:.
HTML wrapper for SWF
SWF:.
swf du nettopp opprettet
Trinn 6:. utmating til Flash CS5: ". rett og slett ikke gjort"
Trinn 7: Eksporter som FLA
Trinn 8:. Velg ditt Eksportvalg
Farge:
Tror ikke du kan ta en CMYK layout og plop det i Flash. Flash bruker RGB fargerom og eventuelle spotfarger - Pantone er et godt eksempel - vil bli forskjøvet til RGB
Gjennomsiktighet.
Sørge for, spesielt når du eksporterer til SWF-format, at gjennomsiktige objekter ikke overlapper noen interaktive elementer. Det er en risiko for at interaktivitet kan gå tapt
3D attributter:..
Eventuelle 3D-effekter som brukes i InDesign - Tekst på banen - vil ikke flytte til Flash eller til SWF
Fonts:
TLF fungerer bare med Opentype og Truetype-skrifter. Postscript-skrifter er ikke tillatt
Trinn 9:.. The Flash Folder
Trinn 10:. Flash CS5
Trinn 11:.. Animasjon
Trinn 12:. Velg Tekst
Trinn 13:. Velg Video
Konklusjon:.