Adobe LiveMotion er et flott verktøy for webentusiaster og profesjonelle designere. Den lar deg enkelt lage statisk grafikk og bevegelig grafikk, takket være det velkjente Adobe-grensesnittet.
LiveMotion modifiserer individuelle bilder uavhengig, så det er relativt enkelt å lage sofistikerte effekter som eksterne rollovers. I motsetning til standard rollovers, som bytter en grafikk med en annen, lar eksterne rollovers en grafikk utløse oppførselen til en annen. For eksempel, si at en side på en dyreelskers nettsted viser en Pet The Cat-knapp til venstre og et tomt felt til høyre. Når du holder musepekeren over knappen, vises et bilde av en fornøyd katt i rommet. Når musen beveger seg av knappen (kalt mus ut), forsvinner katten.
Remote rollovers legger til interaktivitet og litt moro til nettstedene dine. Jeg skal vise deg hvordan du lager grunnleggende eksterne rollovers og deretter eksporterer dem i formater som nesten alle nettsurfere kan se. Hvis du vil prøve før du kjøper, last ned en gratis 30-dagers prøveversjon fra https://www.adobe.com/products/livemotion.
Molly E. Holzschlag er forfatteren av Teach Yourself Adobe LiveMotion in 24 Hours (Sams, 2000). Du kan lære mer om hennes bøker, artikler og seminarer på https://www.molly.com.
1. Design utløserobjektet Den første oppgaven er å lage en trigger – objektet folk ser når de laster inn siden. Etter at du har opprettet triggeren i LiveMotion eller importert den, vil du legge til standard rollover-tilstander til den (Normal, Over og Out).
For å lage et lerret, velg Ny fra Fil-menyen. Klikk på OK for å godta standard komposisjonsinnstillinger. Lag et triggerobjekt i programmet eller plasser et forhåndslaget objekt. Jeg brukte typeverktøyet (EN) for å lage en tekstutløser.
Deretter lager du standard rollovers for utløserobjektet. Velg objektet med pekerverktøyet (B). I Rollovers-paletten (velg Vindu: Rollovers), klikk på Ny Rollover State-knappen (C). Over-tilstanden vises i paletten.
Velg Over-tilstanden og endre utløserobjektets utseende. Fordi jeg ønsket at objektet skulle endres fra svart til brunt når det ble holdt musen over, valgte jeg objektet og brukte pipetteverktøyet (D) og fargevelgeren (velg Vindu: Farge) for å ta en annen farge.
Klikk på New Rollover State-knappen igjen for å opprette en Out-tilstand. Jeg laget min Out-farge svart, den samme som normalfargen min.
2. Opprette det eksterne objektet Det eksterne objektet – det som vises når du holder musepekeren over utløserobjektet – kan være enkelt eller komplekst, og det kan vises hvor som helst på siden. Som du gjør for utløserobjektet, oppretter du separate tilstander Normal, Over og Out for det eksterne objektet.
Plasser det eksterne objektet (EN) (Fil: Sted). Velg den, og i Rollovers-paletten vil du se Normal-tilstanden.
Fordi jeg ønsket at det eksterne objektet mitt skulle være usynlig til å begynne med, satte jeg dens normaltilstand opasitet til 0 ved å flytte objektlags opasitet-glidebryteren (B) i Opacity-paletten (Window: Opacity) til 0.
Klikk på New Rollover State-knappen. Når standard Over-tilstand vises, velg Egendefinert tilstand fra hurtigmenyen. I den resulterende dialogboksen (C), navngi staten. Jeg kalte bildet min fjernkontroll. For denne tilstanden satte jeg glidebryteren Object Layer Opacity til 100 prosent, fordi jeg ville at det eksterne objektet skulle vises når noen beveget musen over det.
Klikk på New Rollover State-knappen igjen. Velg Ut fra hurtigmenyen. Nå kan du kontrollere hvordan objektet ser ut når musen forlater det. Jeg satte glidebryteren Object Layer Opacity til 0, slik at den forsvinner når musen går ut.
3. Koble til triggeren og de eksterne objektene Nå har du rollovers for utløseren og eksterne objekter, men rollover-tilstandene er ikke koblet mellom objekter. For å opprette den forbindelsen, målretter du mot den tilsvarende rollover-tilstanden i Rollovers-paletten.
Velg utløserobjektet. I Rollovers-paletten markerer du den første tilstanden der en rollover skjer. I mitt eksempel er det Over-staten. Dra målrettingsknappen (umiddelbart til venstre for Rollover-miniatyrbildet (EN) ) fra paletten til det eksterne objektet. Når grenseboksen til det eksterne objektet vises (B), slipp målet.
Det eksterne objektet vises nå i Rollovers-paletten, under Over-tilstanden. Fra hurtigmenyen (C) velg den korresponderende rollover-tilstanden for det eksterne objektet (her, Image Remote).
Koble Out-tilstandene på samme måte.
For å forhåndsvise hva du har gjort, klikk på Forhåndsvisning-knappen i verktøypaletten (D), og før deretter musen over utløserobjektet. Hvis det utløser den eksterne hendelsen, er du på rett vei.
4. Forbered for eksport Du kan lagre denne fjernoverrullingen som en Flash-fil og bygge den inn i en HTML-side. Imidlertid, hvis publikum sannsynligvis ikke har Flash-plugin-modulen, anbefaler jeg at du lagrer overrullingen som HTML og JavaScript.
Gi først navn til bildene dine. Velg utløserobjektet. Åpne webpaletten (vindu: web). Hvis du ikke ser et filnavn-felt, velg detaljvisning ved å klikke på pilen øverst til høyre på paletten (EN). I Filnavn-feltet (B), skriv inn et navn for utløserbildet. Jeg kalte min text_over. Klikk på det eksterne objektet og navngi det med samme metode.
Deretter velger du Rediger: Komposisjonsinnstillinger. Når dialogboksen vises, velg AutoLayout fra Eksporter-lokalmenyen (C). Velg alternativet Lag HTML. Klikk på OK.
Åpne eksportpaletten (velg Fil: Eksportinnstillinger). Velg GIF eller JPEG fra hurtigmenyen (D). Hvis du ikke er sikker på hvilket format du skal bruke, klikker du på forhåndsvisningsboksen (E) og test designet med forskjellige innstillinger. Bruk alternativet Web Adaptive (F) for å begrense antall farger i komposisjonen – dette gjør størrelsen på grafikkfilene mindre.
5. Eksport av HTML og JavaScript Eksportering er den siste fasen av å opprette en ekstern rollover. Du kan eksportere filene som HTML-, GIF-, JPEG- eller Flash-filer. For veibeskrivelser for Flash-eksport, gå til http://www.macworld.com/2000/10/howto/rollover1.html.
Når du er fornøyd med eksportinnstillingene, velger du Fil: Eksporter som. Bestem en plassering for den eksporterte filen og navngi HTML-filen. Klikk på OK, og LiveMotion vil gjengi all nødvendig grafikk og kode. For å sjekke resultatene, åpne HTML-filen i nettleseren (EN), (B).
