Aanpak van rich media voor tablets met Adobe CS5 deel 2

In het vorige artikel heb ik je uitgelegd hoe je een verscheidenheid aan applicaties gebruikt om de assets voor een interactief magazine te maken en vervolgens het toevoegen van media, beweging en interactiviteit aan die assets in InDesign CS5. Dit artikel concentreert zich op het eindspel: het project uitvoeren voor bezorging via een webpagina of het project verzenden naar Flash voor meer werk en uitvoer naar een SWF of zelfs een AIR-app.


Invoering

De reden dat ik hier een lay-out in tijdschriftstijl gebruik, is om veel van de functies in InDesign CS5 te demonstreren. Ik geef meteen toe, de paginagrootte kan velen van jullie slaan als een beetje largish. Denk eraan, u kunt elk paginaformaat gebruiken dat u nodig hebt en ik vermoed dat een van de meer algemene formaten in de buurt van 800x600 zal zijn. Toch is de keuze aan jou.

Voordat we ingaan, laten we het hebben over het onvermijdelijke 'Waarom een ​​SWF?' en "Waarom een ​​Flash-bestand?" vragen. Ze zijn geldig en het antwoord kan enkelen van jullie verrassen.

Al vele jaren zijn ontwerpers gedwongen om op de Flash soireé in de stoelen langs de muur te zitten. Ze kwamen met enkele geweldige ideeën, maar hun invloed nam in dezelfde mate af als hun tegenhangers voor ontwikkelaars. Naarmate we een wereld van digitale communicatie binnengaan waarin papier en schermen worden beschouwd als niets meer dan displaymedia, wordt grafisch ontwerp steeds belangrijker. Projecten die zijn ontworpen voor afdrukken, zoals je hebt gezien, kunnen van de statische afdrukpagina verdwijnen en interactiviteit, audio- en video-elementen kunnen direct in het ontwerp worden gebouwd.

Het SWF-formaat, vooral met de Flash Player 10.1-versie, die een monster van een mediaspeler in handen geeft van iedereen met toegang tot een scherm, stelt je in staat om snelle prototypen te maken voor je klanten. Alleen omdat we het 'snappen', betekent nog niet dat uw klanten dat zullen doen. De intellectuele sprong van papier naar scherm maken, zal een nieuwe ervaring worden en een swf in hun handen krijgen, laten we ze echt "zien" waar je het over hebt.

Het Flash-formaat zal ontwikkelaars absoluut opwinden. Het project zal worden opgesplitst en opnieuw worden samengevoegd in Flash-vriendelijke stukken die de vaardigheden van een ervaren Flash-ontwikkelaar nodig hebben om weer tot leven te brengen. Er is niets van: "Yep, output gewoon naar Flash en je bent in het spel." wat altijd de aandacht lijkt te trekken van mensen die nog nooit Flash hebben gebruikt. Zoals ik graag zeg: "Er zal niet gebeuren." Je zult zien waarom ik dat later ga zeggen.

Vanaf daar vindt de normale Flash-workflow plaats, terwijl de ontwikkelaar de klassebestanden, code en media-elementen samenstelt die de grafische ontwerper bouwt en in veel gevallen zelfs verbetert. Wat de Ontwerpers zal verbazen, is dat Flash CS5 uit de buurt gaat van de integriteit van het ontwerp. Nadat dit proces is voltooid, kan het project worden uitgevoerd als alles van de uiteindelijke SWF voor insluiting in een webpagina tot een AIR 2.0-app.

Laten we beginnen:


Stap 1: exporteren als een SWF

Open het InDesign-document en selecteer Bestand> Exporteren om het dialoogvenster Exporteren te openen. Selecteer Flash Player (SWF) in het pop-upmenu Formaat en klik op Opslaan.

Uw keuzes zijn grotendeels vanzelfsprekend, maar er zijn hier een aantal dat uw aandacht kan trekken:

InDesign Markup (IDL): Met deze indeling kan het document worden geopend in InDesign CS4. Dit is niet iets dat ons aangaat.

InDesign-fragment: Dit heeft absoluut niets te maken met de codefragmentfunctie van Flash CS5. Hiermee kunt u objecten op de InDesign-pagina opslaan en opnieuw gebruiken.

XML: Ik wed dat je aandacht trok. Raak hier niet te enthousiast over, want er is heel wat extra werk aan de zijde van de ontwikkelaar vereist. Als u geïntrigeerd bent met deze optie, begrijpt u dat u alleen XML kunt exporteren nadat u:

  • Gemaakt en geladen de juiste element-tags.
  • Heeft die tags toegepast op de elementen op de pagina's.
  • Opende het deelvenster Structuur en pas indien nodig de hiërarchie aan.

Let op, als dit 'je boot drijft', knock-out jezelf.


Stap 2: Algemene voorkeuren

Wanneer het dialoogvenster Export SWF wordt geopend, bepaalt u uw algemene voorkeuren voor de SWF.

Laten we uw keuzes doornemen:

  • Exporteren: U kunt ervoor kiezen om een ​​stuk van een pagina, het gehele document of een reeks pagina's te exporteren. De gegenereerde HTML-bestandsselectie maakt de HTML-wrapper voor de SWF en de laatste keuze, SWF bekijken na exporteren, opent de HTML-pagina of SWF en stelt u in staat om het project voor een proefrit te nemen.
  • Grootte (pixels): Met deze opties kunt u de fysieke grootte van de uiteindelijke SWF kiezen. Bijvoorbeeld: het vervolgkeuzemenu Fit To: biedt u een volledig assortiment van algemene formaten of u kunt uw eigen formaten instellen. Als u de fysieke grootte van het document wijzigt, blijft de integriteit van het ontwerp gehandhaafd. Dit type verwijdert de "fysieke grootte" -discussie uit de tabel..
  • Achtergrond: Als u transparant kiest, wordt de achtergrondkleur van de HTML gebruikt.
  • Interactiviteit en media: Selecteer Alleen verschijning en alle interactieve elementen en media worden plaatsaanduidingen.
  • Pagina overgang: U kunt een scala aan goedkope effecten toepassen van Blinds tot Zoom Out. Als je van PowerPoint houdt, ben je in de hemel. Anders negeer je deze gewoon.
  • Interactieve paginakrul: Dit is een best gave optie. Klik en sleep een afslagpagina en de pagina draait. Toch is dit nog niet helemaal klaar voor prime time. Ik vind deze functie een beetje moeilijk te gebruiken omdat, als je het niet goed doet, de pagina terugslaat. Ik vond het gebruik van een knop voor dit navigatiedoel zinvoller.

Stap 3: Geavanceerde voorkeuren

Klik in het dialoogvenster SWF exporteren op het tabblad Geavanceerd om de geavanceerde opties te openen.

Dit is waar de profs het overnemen omdat dit paneel bepaalt hoe de SWF werkt. Laten we uw keuzes doornemen:

  • Frame rate: De SWF-framesnelheid wordt hier ingesteld. Merk op dat de standaardsnelheid - 24 fps - die is die door Flash wordt gebruikt.
  • Tekst: Je krijgt hier drie keuzes. Flash Classic-tekst wordt uitgevoerd als doorzoekbare tekst en resulteert in de kleinste bestandsgrootte. Convert To Outlines is een goede keuze als u alleen koppen hebt. In dit project is deze keuze de verkeerde omdat er een stortvloed van lichaamstekst is. Converteren naar Pixels maakt de tekst plat in een bitmap en alle vervelende dingen die dat met zich meebrengt.
  • Beeldverwerking: Deze keuzes zijn redelijk bekend voor iedereen die een SWF heeft gepubliceerd.

Stap 4: Klik op OK om de SWF te publiceren

Wanneer u op OK klikt, wordt de SWF gemaakt en, zoals u kunt zien in de schermafbeelding, wordt het project geopend op een webpagina.


Stap 5: De SWF-map

OK, minimaliseer InDesign en open de SWF-map ...

Net zoals we allemaal op dezelfde pagina staan, om zo te zeggen, hier zijn de bestanden die erin vast komen te zitten:

  • Middelen: Dit zijn de externe media, inclusief FLVPlayback-skins, die in het document worden gebruikt.
  • HTML: De HTML-wrapper voor de SWF.
  • SWF: Het swf dat je zojuist hebt gemaakt.

Als je je afvraagt ​​over de afbeeldingen, knoppen en tekst, zijn ze allemaal ingebed in de SWF.


Stap 6: Uitvoeren naar Flash CS5:

Voor een Flash-ontwikkelaar of -ontwerper is het "gewoon niet gedaan" om onmiddellijk naar een SWF te gaan. Ik ben het daar niet meer mee eens. Ik vind de videofunctie een beetje "standaard" en ik ben geen grote fan van het plaatsen van een videovel over de video terwijl deze wordt afgespeeld. Ook het gebruik van de verschillende panelen om knoppen te "verbinden", enzovoort, wanneer ik het efficiënter kan doen met ActionScript 3.0, maakt deze "whizzy" -functies van InDesign meer als "opwind" speelgoed dan iets anders. Toch bieden ze een mogelijkheid om functionaliteit te testen, zodat ze wel kunnen worden gebruikt. Zelfs als u echter een magere, gemiddelde en snellaadbare SWF wilt maken, is Flash de volgende stop in het proces.

Voordat ik je hier helemaal enthousiast over maak, moet je weten dat deze techniek, zoals je snel zult leren, het beste werkt tussen Flash CS5 en InDesign CS5; in feite is dit het enige Flash-formaat dat voor u beschikbaar is. Adobe heeft ook de XFL-exportoptie in InDesign beëindigd. Het was er gewoon om InDesign CS4 de mogelijkheid te geven om naar Flash te gaan. Flash-export vervangt het.

Zorg er tenslotte voor het exporteren voor dat u een nieuwe map maakt om de bestanden te bewaren.

Laten we beginnen.


Stap 7: Exporteer als FLA

Selecteer Bestand> Exporteren> Flash CS5 Professional (FLA) en klik op de knop Opslaan om het dialoogvenster Flash CS5 Professional (FLA) exporteren te openen.


Stap 8: kies uw exportopties

Veel van de keuzes zijn te vinden in het algemene gedeelte van het dialoogvenster SWF-export. De nieuwe is Tekst.

Je krijgt vier keuzes. Drie - klassieke tekst, converteren naar contouren en converteren naar pixels - zijn al behandeld. De nieuwe is Flash TLF-tekst. Dit is de nieuwe manier om tekst in Flash CS5 te beheren. TLF staat voor Text Layout Framework en het is de functie die typografie naar Flash brengt. Alle typografische wijzigingen die u in InDesign aanbrengt, worden intact overgezet naar Flash. Dit is geweldig nieuws voor ontwerpers. Het slechte nieuws is dat deze functie alleen werkt met Flash CS5 en met Flash Player 10 of hoger.

De Insert Discretionary Hyphenation Points-selectie "breekt" woorden wanneer ze tegen de rand van een tekstvak stoten.

Voordat u naar Flash exporteert, wilt u misschien een "Preflight" -controle uitvoeren om ervoor te zorgen dat u WYSIWYG echt krijgt. Een van de dingen om te controleren:

  • Kleur: Denk niet dat je een CMYK-indeling kunt nemen en deze in Flash kunt ploffen. Flash gebruikt de RGB-kleurruimte en alle steunkleuren - Pantone is een geweldig voorbeeld - worden verplaatst naar de RGB-ruimte.
  • Transparantie: Zorg ervoor dat, met name bij het exporteren naar het SWF-formaat, transparante objecten geen interactieve elementen overlappen. Het risico bestaat dat de interactiviteit verloren gaat.
  • 3D attributen: Alle 3D-effecten die worden gebruikt in InDesign - Tekst op een pad - worden niet naar Flash of naar de SWF verplaatst.
  • fonts: TLF werkt alleen met OpenType- en TrueType-lettertypen. Postscript-lettertypen zijn niet toegestaan.

Stap 9: De Flash-map

Minimaliseer InDesign en open de Flash-map.

Het enige verschil dat u zou moeten zien tussen de inhoud van deze map en die van de SWF-tegenpartij, is de opname van een FLA-bestand.


Stap 10: Flash CS5

Neem de .fla en open deze in Flash CS5 (hier wordt het serieus cool).

Ten eerste heeft de film slechts drie frames. De reden is elke spread in InDesign, en er zijn er drie in dit document, verpakt in zijn eigen filmclip (genaamd "Spread-xxx") in de bibliotheek. Alle knoppen die worden gebruikt in het InDesign-document worden omgezet in toetssymbolen in de Flash-bibliotheek en elk van de afbeeldingen die in de diavoorstelling worden gebruikt - een object met meerdere statussen in InDesign - wordt geconverteerd naar een filmclip en de afbeeldingen worden toegevoegd aan de Flash bibliotheek als bitmap-symbolen.

Het slechte nieuws, en voor velen van jullie is dit geen echt slecht nieuws, is alle interactiviteit verloren. U moet het project "rewire" met behulp van ActionScript 3.0.


Stap 11: Animatie

Laten we het hebben over het openen van een filmclip met een geanimeerd object.

In dit project is er een geanimeerd tekstblok op pagina 3 dat begint met een alfawaarde van 0 en het Fly In From Top-effect gebruikt in InDesign. Deze effecten worden intact verplaatst naar Flash, worden toegevoegd aan bewegingslagen en de paden kunnen volledig worden bewerkt in Flash.


Stap 12: Selecteer Tekst

Dubbelklik op een spreiding op de hoofdtijdlijn om de filmclip te openen en klik op een tekstblok.

Zoals u kunt zien, is alle tekstopmaak, inclusief de stroom tussen containers, die in InDesign is toegepast, weergegeven in de teksteigenschappen van de tekstcontainer in Flash CS5. Dit is enorm. Het enige wat ontbreekt, is tekstomslag; het kan niet bewegen tussen InDesign en Flash. Wat wel beweegt, zijn inline afbeeldingen. Dit zijn afbeeldingen of grafische elementen toegevoegd aan tekstcontainers in InDesign als inline-elementen. Nogmaals, dit is enorm.


Stap 13: Selecteer de video

Video en audio, typische externe assets, bewegen niet naar Flash. Elke video wordt vervangen door een bitmap-plaatsaanduiding van het posterframe van de video van InDesign CS5 en audio wordt goed genegeerd. Nogmaals, deze twee mediasoorten kunnen het beste worden behandeld via ActionScript 3.0, dus het is geen groot verlies. In feite kan de video-tijdelijke aanduiding worden vervangen door een FLVPlayback-component of video-object.

Conclusie:

In deze zelfstudie heb ik de benodigde stappen doorlopen om een ​​InDesign CS5-document te maken dat is voorbereid voor het afspelen van webpagina's als een SWF- of .fla-bestand. Ze zijn opmerkelijk vergelijkbaar in hoe ze worden geëxporteerd, maar de twee formaten zijn sterk verschillend.

Zoals ik al aangaf, is de SWF-export goed voor prototypes en een paar andere zeer specifieke toepassingen. Voor velen van jullie is de .fla die uit InDesign is getrapt het belangrijkst.

Ik heb je laten zien hoe beweging, pagina-items, tekst en audio en video naar Flash worden verplaatst. Het belangrijkste aspect hiervan is dat alle items in de Flash Library terechtkomen, maar dat het de aandacht van een Flash-ontwikkelaar vereist om het project opnieuw te 'rewire' met ActionScript 3.0. Dit is iets goeds; degenen die niet over uw vaardigheden en kennis beschikken, zullen twee keer nadenken voordat Indesign-documenten naar Flash worden geëxporteerd omdat ze denken dat dit hun problemen zal oplossen. Verre van dat. Ze zijn net begonnen.

Uiteindelijk, als het project "bedraad" en functioneel is, kan het naar het web worden verplaatst of als een XFL-document worden gebundeld en aan het Flex-team worden overgedragen. Dit is een geheel nieuwe workflow en ik vermoed dat velen van jullie dit als extra werk zullen zien. Ik ben oprecht van mening dat zodra je het onder de knie hebt, InDesign op het punt staat een andere tool in ons arsenaal te worden, omdat een stortvloed aan tablets - Android en andere besturingssystemen - om de hoek ligt.