Share
Tabletten zijn het grote ding van vandaag. Natuurlijk kan de iPad geen Flash doen, maar het is slechts de eerste van een golf. Adobe InDesign CS5 kan een heleboel interactieve dingen doen die perfect zijn voor de grote schermruimte van een tablet, en vervolgens omzetten naar Flash voor aanpassingen en verbeteringen. In deze zelfstudie zullen we zien hoe we met de InDesign-kant van de dingen kunnen werken.
Toen Adobe vorig jaar zijn iPhone Compiler for Flash op Max stuurde, moet ik toegeven dat ik kort weggewaaid was. Toen wendde ik me tot de man naast me in het publiek en zei: "Dit wordt geweldig totdat Apple een manier vindt om het uit te schakelen." Welk soort verklaart waarom Apple's "April Shock" me echt niet verbaasde. Hoe ze het deden was een verrassing, maar het afsluiten ervan was niet onverwacht.
Een paar weken later stond Richard Galvan, de Flash-productmanager, op het podium bij FlashintheCan met een paar nogal "whizzy" dingen die Flash CS5 kan doen. Tijdens zijn presentatie demonstreerde hij hoe InDesign CS5 nu een hoop interactieve dingen kan doen, die vervolgens eenvoudig naar Flash CS5 kunnen worden omgedraaid als een .fla of gewoon uit InDesign kunnen worden geschoten als een volledig interactieve swf. Ik ga toegeven dat ik dezelfde reactie had als velen van jullie: "Geef me een pauze, er is geen manier om een Flash-ontwikkelaar / ontwerper die de titel waardig is, één groot, toeterend swf van InDesign te maken."
Na de presentatie van Richard heb ik hem in het nauw gedreven en gevraagd waarom hij iets aan het demonstreren was dat er op neerkwam dat een gek een man een geweer gaf. Zijn antwoord van één woord bracht me terug.
Tablets.
hij zei.
Als er een fundamentele regel is, probeer ik het hoofd van mijn studenten te verslaan, het is dat als het gaat om worstelen met problemen "begin met het voor de hand liggende en werk terug naar het duister." Richard's antwoord was zo duidelijk dat ik me een beetje schaapachtig voelde.
Hoewel de iPad een erg cool apparaat is, zijn we geneigd te vergeten dat tablets een opkomende technologie zijn. Google, HP en anderen zullen met een regelrechte overvloed aan deze dingen komen en ze zullen allemaal Flash-enabled zijn. Maak gebruik van de Flash Player 10.1-release die op elk mobiel apparaat begint op te duiken, behalve het aanbod van Apple. Het is niet echt een uitdaging om aan te nemen dat het slechts een kwestie van tijd is voordat onze klanten naar de mobiele bandwagon gaan..
Alleen omdat Apple als eerste uit de kast kwam met zijn 'speelgoed voor coole kinderen', wil dat nog niet zeggen dat het de benchmark is. Als deze dingen opstijgen, is het misschien wel Apple die een 'nicheproduct' heeft geproduceerd.
Dat brengt me bij deze tutorial. Tabletten hebben veel ruimte op het scherm, wat behoorlijk knap is in de buurt van de grootte van een normaal vel papier dat uit je laserprinter is getrapt. Het is logisch, (en Wired toont dit alvast) om gedrukte publicaties te beschouwen als niets meer dan pagina's met "inhoud" en om de Flash Player te gebruiken om van een nogal passief medium een rijke media-ervaring te maken.
In de komende maanden zullen er een aantal nieuwe Android-mobielen en tablets op de markt komen deze zomer. De line-up bevat de ADAM van Notion Ink, maar er zijn ook andere, waaronder de Marvell Moby, WePad en de Dell Mini 5, om er maar een paar te noemen.
In de loop van deze tweedelige serie zul je ontdekken waarom Flash CS5 zijn moleculen binnenstebuiten had gekeerd en herschikt met het nieuwe XFL-formaat; hoe InDesign CS5 plotseling is veranderd van een statische lay-out app naar een met een overvloed aan interactieve functies en hoe het nieuwe TextLayout Framework in Flash veel meer is dan een nogal curieuze toevoeging aan de line-up. Uiteraard gaan we de assets in InDesign gaan assembleren. Aan het einde van dit stuk hoop ik dat velen van jullie zullen ontdekken hoe "cool" de interactieve functies van InDesign werkelijk zijn en, nog belangrijker, waarom ze er in de eerste plaats zijn. Laten we beginnen:
OK. Ik ben lui. Ik laat mijn iPhone die aanraken. Brendan Dawes uit MagneticNorth in het Verenigd Koninkrijk heeft me een nogal interessante iPhone-app gegeven - addLib - die een afbeelding maakt die je aan het voeden bent en enkele vrij interessante variaties op het gebruik ervan uitstraalt. Toen ik zag hoe ik enkele van de functies van InDesign CS5 wilde demonsteren, dacht ik dat een reis die ik maakte naar een klein dorp in China - Huo Guo - goed zou werken en dat de foto van de oude man die over de muur naar mij gluurde, er een is van mijn favorieten van die reis. Ik heb de afbeelding in addLib ingevoerd en ik vond de laatste behandeling erg leuk.
Op basis van dat ontwerp wist ik gewoon dat de tool voor de taak Illustrator CS5 was en dat de beeldverwerking het beste kon worden gedaan in ... er voor te zorgen ... Fireworks CS5.
Toen de afbeelding werd geopend, was het eerste dat moest worden gedaan om het overzichtelijker te maken. Het originele beeld van mijn Nikon D200 was 2896 bij 1944 pixels, wat ook niet werkte in Illustrator CS5 of Fireworks CS5. Ik selecteerde de afbeelding op het Fireworks-canvas, selecteerde Modify> Canvas> Image Size en veranderde de pixeldimensies in de afbeeldingen in de afbeelding. Toen de afbeelding werd aangepast, klikte ik op de knop Aanpassen aan canvas in het paneel Eigenschappen om er zeker van te zijn dat er geen extra canvas in de uiteindelijke afbeelding was.
Het beeld is vrij donker en kan een beetje kleurcorrectie gebruiken. Ik heb de afbeelding op het canvas geselecteerd en in het venster Eigenschappen geselecteerde filters> kleuren aanpassen> niveaus. Het histogram vertelde me dat ik een deel van het wit aan de rechterkant van de grafiek moest knippen. Het verplaatsen van het witpunt, zoals weergegeven in de afbeelding, verlichtte het beeld. De afbeelding is opgeslagen als CoverColor.jpg.
Het maken van een grijsschaalversie was ook een eitje. Met de afbeelding geselecteerd op het Canvas, selecteerde ik Filters> Kleuren aanpassen> Tint / Verzadiging en stel de verzadigingswaarde in op -100 die de kleur uit de afbeelding heeft verwijderd. Deze afbeelding werd vervolgens opgeslagen als CoverGrey.jpg.
Ik dacht dat de deining van een fotogalerie in InDesign een goed idee was en deze functie van de toepassing zou demonstreren. Uiteraard is het niet leuk om 12 afbeeldingen van hetzelfde formaat als de omslagafbeelding te laten vliegen en met de hand te schalen.
Een van mijn favoriete functies van Fireworks CS5 is Batch-verwerking: Bestand> Batch-proces ... Het is een zeer eenvoudige werkstroom. Identificeer de foto's, bepaal de schaalgrootte en laat Fireworks de verkleinde versies in een aparte map plakken. Dit duurde minder dan 30 seconden om te bereiken.
Het ontwerp van de addLib was opvallend gemakkelijk te repliceren in Illustrator CS5. Met behulp van een combinatie van eenvoudige vormen, maskers en type I kon dit in minder dan 30 minuten samen worden getrokken. De belangrijkste beslissing was het outputformaat. Ik ging met het ai-formaat omdat zowel Flash als InDesign me de mogelijkheid bieden om terug naar Illustrator terug te gaan om wijzigingen aan te brengen. Als dit was bedoeld voor een web-app met een stop in Catalyst of Flex, zou ik met FXG over de hele linie zijn gegaan in Fireworks, Flash en Illustrator.
Met de verzamelde assets was het tijd om aan de slag te gaan in InDesign.
Ik dacht dat ik een minuut of twee zou nemen om een beetje dieper op dit onderwerp in te gaan voordat ik in het project rol, omdat eerlijk gezegd, zoals velen van jullie, ik het zag als een afdruklay-outtool dat op de werkbank zat in plaats van één in mijn interactieve gereedschapskist. Toch was ik een beetje een type junkie, niets frustreerde me meer dan het kunnen gebruiken van fijne typografische technieken aan de printkant van het hek, terwijl we het op een interactieve manier moesten "faken". Om nog maar te zwijgen van het feit dat een poging om een meerkleuren lay-out of een grid-systeem te krijgen in Flash werkte, mijn grafische collega's aan de drukkant van de straat altijd opmerkten.
InDesign CS5 stopt deze vriendelijke manier van typen. Onder de kenmerken van InDesign CS5 die ik net graaf zijn:
Vergis je er niet over mensen. Deze dingen zijn niet geweldig, gratis eyecake-functies toegevoegd aan de app om koren van 'Cool' van de Fan Boyz op demo's en conferenties te verzamelen. Dit zijn, zoals u binnenkort zult ontdekken, functies van industriële kwaliteit die naadloos in een SWF of naar Flash kunnen worden verplaatst. In feite hoeft u voor uw coderingen zelfs Flash of Catalyst niet aan te raken. InDesign-documenten kunnen worden uitgevoerd als goede oude XML.
Dit gezegd hebbende, is dit een opkomende workflow die, speciaal voor de Flash-crew, extra werk van jouw kant vereist. Ik beschouw dit als een "goede zaak" omdat, zoals je op het punt staat te zien, een Flash-document uit InDesign naar buiten schopt, niemand een Flash-artiest maakt. Je krijgt de naakte botten en als je Flashvaardigheden minimaal zijn, ben je in wezen dood in het water.
Ten slotte is dit geen InDesign-zelfstudie. Het doel is om u te laten zien hoe de interactieve functies van InDesign aan een pagina worden toegevoegd en hoe een document wordt uitgevoerd naar de SWF- en Fla-indelingen.
Laten we doorgaan ...
Open InDesign CS5 en selecteer Venster> Werkruimte> Interactief om het paneel Interactiviteit te openen.
Hier, in algemene termen, is wat elk item in het paneel doet:
Nu gaan we een animatie-effect toepassen op het bijschrift. Selecteer het object dat zal animeren, open het paneel Animatie en selecteer de animatie uit de Voorinstelling pop-up. Wanneer je dat doet gebeuren er een paar dingen:
Het bewegingspad, in groen, wordt weergegeven op de pagina en een voorbeeld van de animatie wordt toegepast op de vlinder in het voorbeeldvenster van het paneel. Deze bewegingspaden kunnen worden bewerkt met de Pen-tool en een heel mooi aspect hiervan is dat aangepaste paden die u in Flash kunt maken hier kunnen worden gebruikt en omgekeerd. Gebruik het naamveld om de animatie een naam te geven en selecteer wanneer de gebeurtenis - op pagina laden, op pagina klikken, op klikken (zelf), op omrollen (zelf) - zal plaatsvinden vanuit de gebeurtenis (en) pop-down.
Je mag ook de duur en hoe vaak het gebeurt kiezen en zelfs als de animatie doorloopt. Met de snelheid omlaag kunt u Easing toepassen.
De eigenschappen, als je een Flash-ontwerper bent, zien er redelijk bekend uit. Met de pop-up Animate kunt u bepalen hoe de animatie werkt: van of Naar huidige vormgeving of Naar huidige locatie. En met het Animate To-gebied kunt u rotatie en schaling toepassen op de uiteindelijke toestand van het bewegende object.
Het testen van animaties of interactiviteit in eerdere versies van InDesign was pijnlijk. U zou de animatie maken, de SWF compileren en InDesign verlaten om een voorbeeld van uw werk in de Flash Player te bekijken. Het voorbeeldpaneel zet al deze stappen op één plek.
Wanneer u klaar bent met uw animatie, klikt u op de knop van het voorbeeldpaneel en het paneel verschijnt. Het zal in eerste instantie leeg zijn. Dit komt omdat InDesign een swf maakt die in het paneel wordt afgespeeld. Wanneer de pagina verschijnt, klikt u op de knop Afspelen in de linkerbenedenhoek en wordt het bijschrift weergegeven.
Als het paneel te klein lijkt, sleept u eenvoudig een hoek naar buiten om de weergave te vergroten.
De 12 afbeeldingen die we eerder hebben voorbereid met behulp van Batch-verwerking in Fireworks CS5, kunnen nu in het document worden geplaatst en in een diavoorstelling worden gebruikt. Dit proces bestaat uit twee stappen: breng de afbeeldingen in en lijn ze uit op de pagina en converteer ze vervolgens naar een object met meerdere statussen. Hier is hoe:
Selecteer Bewerken> Plaatsen, zoek de map met de geschaalde afbeeldingen en selecteer ze allemaal met de Shift-toets ingedrukt en klik op OK. Je ziet een klein "pistool" met een miniatuur van een afbeelding. Klik erop en de afbeelding in de miniatuur wordt op de pagina neergezet en het "pistool" toont de volgende afbeelding in de stapel. Verschuif alle afbeeldingen in de plaats waar de dia's verschijnen en open met alle geselecteerde afbeeldingen het paneel Uitlijnen door op de F7-toets te drukken. Lijn de afbeeldingen uit met hun boven- en linkerrand.
Nadat u de "stapel" hebt gemaakt, opent u het paneel Objectstatussen en klikt u op de knop "Selectie converteren naar object met meerdere statussen" - de pagina met de omgedraaide hoek onder aan het deelvenster - en worden alle afbeeldingen in het deelvenster weergegeven . Geef het object een naam en, als je dat wilt, de afbeeldingen opnieuw in door ze in het deelvenster naar verschillende 'lagen' in de stapel te slepen.
Een stapel is nutteloos als je hem niet aan het werk zet. In dit geval worden de knoppen Volgende en Vorige die in Fireworks CS5 zijn gemaakt, geïmporteerd voor de betreffende taak. In InDesign bevat, net als veel van de CS5-apps, een bibliotheek met "voorafgerolde" knoppen - Venster> Voorbeeldknoppen - maar geen enkele past in het ontwerp. Ze werden binnengebracht via Bestand> Plaats en gingen naar hun laatste posities op de pagina.
Als u een knop wilt maken, opent u het deelvenster Knoppen en klikt u met het geselecteerde object op de knop 'Object converteren naar een knop'. Deze knop staat pal naast de prullenbak in het deelvenster Knoppen. Wanneer dit gebeurt, licht het paneel op en kunt u de knop een aantal eigenschappen toewijzen.
Het eerste dat gedaan moet worden is om de knop een naam te geven. Plaats vervolgens een gebeurtenis bij de knop. Er zijn zes evenementen, waarvan er twee uitsluitend voor PDF-projecten zijn, om uit te kiezen. "On Release" is een veilige gok. De volgende stap is het toewijzen van een actie aan een evenement. Klik op het + -teken in het actiegebied en er verschijnt een pop-uplijst. Dit is een diavoorstelling dus het is zinvol om een actie "Ga naar volgende staat" toe te wijzen. Het belangrijkste om op te merken is dat acties gegroepeerd zijn volgens het uiteindelijke gebruik. In dit geval gaan we naar SWF en Flash, zodat de keuze werkt.
Wanneer de actie is geselecteerd, verandert het paneel Knoppen om u te vragen welk object door de knop moet worden bestuurd. In dit geval zal het de Village-stapel zijn. U kunt ook op het keuzerondje 'Stoppen bij laatste status' klikken om ervoor te zorgen dat de gebruiker daadwerkelijk stopt bij de laatste afbeelding in de stapel.
Herhaal dit proces voor de knop Terug en test de diavoorstelling in het deelvenster Voorbeeld.
Het toevoegen van een audiotrack aan een pagina is doodeenvoudig. U kunt het menu Bestand> Plaats gebruiken of klik eenmaal op het paneel Media en gebruik de knop Een audio- of videobestand plaatsen - de knop in de rechterbenedenhoek van het paneel - waarmee het dialoogvenster Media plaatsen wordt geopend. Houd er rekening mee dat het enige audioformaat dat je kunt gebruiken mp3 is.
Nadat het bestand is geïmporteerd, verschijnt een kleine audio-container op het podium. In veel opzichten lijkt deze container op hoe Flash de audio op het podium beheert. De container kan overal worden geplaatst omdat het meer een placeholder is dan iets anders.
Met het audiopaneel kunt u het geluid testen door op de knop Afspelen te klikken en de opties spreken enigszins voor zichzelf. Uw beste gok, als u de interactieve route gaat, is om de eerste twee opties te selecteren. Als u dat niet doet, blijft uw audiobestand doorgaan, zelfs als u de pagina verlaat.
Eenvoudige UX-ontwerpprincipes stellen dat als je een audiobestand afspeelt, je de gebruiker de kans moet geven om het te doden. In dit geval zijn een knop Pauze en een knop Afspelen gemaakt in Fireworks CS5 en geconverteerd naar knoppen in InDesign CS5. Zodra u de knop aan een bron koppelt, herkent deze een audiobestand en krijgt u de audioregelopties te zien die in de figuur worden getoond. Een heel leuke functie van het paneel Knoppen is het pictogram in de linkerbenedenhoek. Klik erop en het voorbeeldpaneel wordt geopend om u te laten bepalen of de knop doet wat u wilt.
Video - FLV, F4V, MP4 - kunnen net zo eenvoudig aan InDesign worden toegevoegd als een audiobestand en de video-eigenschappen worden ingesteld in het mediapaneel. Toch zijn er enkele aspecten hiervan die je moet weten.
Hoewel je twee afspeelopties hebt gekregen, moet je ze deselecteren als je de gebruiker een controller wilt geven. Met de optie Poster kunt u een frame uit de video of zelfs een andere afbeelding kiezen die in het document moet verschijnen. In dit voorbeeld heb ik de scrubber in het paneel gebruikt om het frame te identificeren dat in de lay-out wordt weergegeven. Je kunt ook een controller kiezen - de SkinOver-skins van Flash zijn je enige keuzes - en of de controller wel of niet wordt weergegeven wanneer de cursor over de video op de pagina rolt. Je kunt ook cue-punten - InDesign noemt ze Navigation Points - aan de video toevoegen of ze kunnen worden toegevoegd met behulp van Adobe Media Encoder CS5.
Het andere dat u moet weten over deze videofunctie, vooral als u video in Flash gebruikt, is dat de video op het podium moet worden geklikt om deze te laten spelen of om de skin te onthullen. Het is misschien geen slecht idee, als u alleen een swf gaat uitvoeren, om een klein bijschrift of pictogram toe te voegen dat de gebruiker vertelt om op de afbeelding te klikken om het afspelen van video te starten.
Gebruik tot slot het voorbeeldvenster om de video te testen.
In dit artikel heb ik laten zien hoe je alle functies in het interactieve paneel van InDesign CS5 gebruikt. Ik liet je zien hoe je knoppen maakt, audio en video toevoegt en hoe je een stapel geïmporteerde afbeeldingen omzet in een diavoorstelling. Je hebt ook laten zien hoe je knoppen gebruikt om audio te regelen en hoe je een skin aan een video toevoegt.
Ik heb ook opgenomen hoeveel van de items zijn gemaakt in Fireworks CS5 en Illustrator CS5 en voorbereid voor plaatsing in het InDesign CS5-project.
In de volgende aflevering van deze serie zal ik u de stappen voorlezen die nodig zijn om een interactief InDesign-document uit te voeren voor weergave in een browser of voor verder "bijstellen" in Flash. Bedankt voor het lezen!
Accentsconagua