Interaktive layouter i bruk

Sett at Brad har hovedansvaret for publiseringen av et band. Bandet har en timeplan for turnéen som stadig blir oppdatert. Det er Brads ansvar å passe på at:

  • Bandet har et iøynefallende SWF-webområde som omfatter den siste timeplanen for turneen.
  • Bandet også har et fantastisk HTML-område for fans som ikke har Flash Player, og som også omfatter den siste timeplanen for turneen.
  • Bandet sender med jevne mellomrom en trykksak i posten som viser gjeldende timeplan for turneen til alle på en adresseliste.

Etter at han har bestemt seg for bandets grafiske utseende, lager Brad layouten for trykksaken for utsending per post som er basert på en utskriftslayout i et QuarkXPress-prosjekt, og importerer gjeldende timeplan for turneen.

QuarkXpress example interactive print layout Interaktive layouter i bruk

En standard QuarkXPress-utskriftslayout.

Etter at han har designet direktereklamen slik han vil ha den, velger han Layout > Dupliser for å duplisere inneholdet inn i en weblayout i det samme prosjektet. Nå kan han arbeide med HTML-versjonen av siden i den samme filen.

QuarkXpress example interactive web layout Interaktive layouter i bruk

En weblayout som er opprettet ved å duplisere utskriftslayouten.

Han kopierer nå weblayouten inn i en interaktiv layout, igjen ved å velge Layout > Dupliser.

Han vil også legge til litt interaktivitet, og bestemmer seg for at gitaren skal gli inn fra høyre når en sluttbruker åpner SWF-presentasjonen. Dette oppnår han ved å gjøre følgende:

  • Han legger til en rød linje som fungerer som banen gitaren skal bevege seg langs. Via paletten Interaktiv gjør han det til et grunnleggende objekt og kaller det «gitarbane». Under Valg velger han Først skjult (slik at sluttbrukerne ikke ser linjen).
  • Han velger gitargrafikken, og via paletten Interaktiv forvandler han den til et animasjonsobjekt kalt «glidende gitar». Hvis han vil angi at den skal bevege seg langs den røde linjen, velger han Objekt på en bane på rullegardinmenyen Vis som og velger deretter Gitarbane (den røde linjen) på rullegardinmenyen Bane. Glidningens hastighet innstiller han ved å skrive 4 i feltet Hastighet.

QuarkXpress example interactive layout Interaktive layouter i bruk

Via fliken Objekt kan du gjøre om et objekt til et animasjonsobjekt.

Brad gjør følgende to ting for å få denne animasjonen til å spilles av:

  1. Han oppretter et skript som spiller av animasjonen.
    QuarkXpress example script playanimation Interaktive layouter i bruk

    I feltet Skript kan du opprette skript.

  2. Han knytter dette skriptet til den første siden i presentasjonen, slik at den vil kjøres når denne siden blir vist, ved å velge navnet på skriptet på rullegardinmenyen Innleggingsskript for den aktuelle siden.
    QuarkXpress example page script playanimation Interaktive layouter i bruk

    På fliken Side kan du tilordne skript til sider.

Brad vil nå legge til en knapp som vil åpne bandlederens HTML-område i et eget vindu. Knappen opprettes ved å tegne opp en bildeblokk, kalle den «webområdeknapp», velge Knapp på rullegardinmenyen Objekttype og deretter velge Ny på rullegardinmenyen Knapp. Dette oppretter en knappelayout med fire sider der Brad konstruerer knappeobjektets fire funksjoner (som forresten bare utføres med QuarkXPress-verktøy). De ulike knappefunksjonene gjør det mulig for Brad å gi sluttbrukeren tilbakemelding. Hvis bildet er forskjellig for hver funksjon, endres knappens utseende avhengig av om når den er opp eller ned, aktivert eller deaktivert.

QuarkXpress example button pagelayout Interaktive layouter i bruk

På paletten Sidelayout vises knappetilstandene til knappen du oppretter.

Brad må nå konfigurere denne knappen. Han bytter derfor tilbake til presentasjonslayouten og innstiller knappen til å åpne bandets webområde. Dette gjør han ved å legge til en handling av typen Åpne URL i Knapp-objektets Klikk opp-brukeroperasjon.

QuarkXpress  Interaktive layouter i bruk oads/sub/quarkxpress/no/source/images/example_websitebutton.jpg">

Via fliken Hendelse kan du tilordne brukeroperasjoner til de ulike tilstandene til et knappeobjekt.

Brad vil nå legge til en animert logosekvens i presentasjonen. Bildesekvensen opprettes ved å tegne opp en bildeblokk, kalle den «AnimertLogo», velge Animasjon på rullegardinmenyen Objekttype, velge Sekvens i en blokk på rullegardinmenyen Vis som, og deretter velge Ny på rullegardinmenyen Sekvens. Dette oppretter en bildesekvenslayout. Brad legger til 10 sider i bildesekvenslayouten, og konstruerer deretter 11 animasjonsrammer ved å sette en ramme på hver side.

QuarkXpress example image sequence Interaktive layouter i bruk

På paletten Sidelayout kan du forhåndsvise rammene i en bildesekvens.

Animasjonen kan nå spilles av ved å legge til Spill av animasjon i det samme skriptet Brad brukte til å starte animasjonen «Glidende gitar».

SWF-siden for bandets timeplan for turneen er klar, så han velger Arkiv/Fil > Eksporter > Eksporteringsprogram for Macromedia Flash, setter opp sine valg for eksport og eksporterer presentasjonen i SWF-format.

QuarkXpress example interactive export Interaktive layouter i bruk

I dialogboksen Eksporteringsprogram for Macromedia Flash kan du kontrollere eksportvalg.

Når Brad er fornøyd med alle de tre sideversjonene, Utskrift, Web og Interaktiv, synkroniserer han timeplanen for turneen i alle de tre layoutene via paletten Delt innhold. Deretter skriver han ut utskriftslayouten, eksporterer weblayouten til HTML og eksporterer den interaktive layouten til SWF-format.

En uke senere kommer det en ny versjon av timeplanen for turneen. Brad åpner prosjektet og begynner å legge inn den nye timeplanen i utskriftslayouten. Ved å dele visningen, kan han med et raskt blikk se at de to andre layoutene også er oppdatert.

QuarkXpress example interactive split window Interaktive layouter i bruk

Med funksjonen for flervisningslayout i QuarkXPress kan du følge med når innhold blir oppdatert samtidig i en utskriftslayout og i en interaktiv layout.

Det er nå rett og slett bare å eksportere weblayouter og interaktive layouter, og dermed er webområdet oppdatert. Hvis det dessuten er tid for å skrive ut en ny direktereklame, er også denne klar.

Interaktive layouter i bruk