Adobe Illustrator sin SVG Interaktivitet Panel Forklart

SVG er på vei til å bli et fast innslag del av webutvikling og design. Forstå SVG og være i stand til å liste det blant dine ferdigheter blir mer og mer viktig.

I dagens tutorial vi svarer på et konkret forespørsel fra en Tuts + leser. Vi kommer til å ta en titt på et verktøy i Adobe Illustrator som bidrar redigering av SVG interaktivitet med Javascript. Det kalles-vente på it-SVG Interaktivitet Panel.

Hurtig Ansvarsfraskrivelse

Jeg skal spare alle en tungt detaljert gjennomgang av hva som er faktisk ganske en ineffektiv verktøyet. Jeg vil ikke diskutere kategorien variabler som jeg egentlig ikke ser mye bruk for det, og (etter min mening) er det mye bedre å skrive Javascript fra prosjektet seg selv over ved hjelp av interaktivitet panel.

Heller ikke vil jeg skal gå gjennom kobling av eksterne Javascript-filer, men du kan alltid undersøke ting nærmere på et senere tidspunkt etter å ha lest om formålet dette panelet.

1. Målrette objektet

Begynn med å velge et objekt på kunst styret, eller målretting et element i lagpaletten (se Endre utseendet på kunstverk ved hjelp av lagpaletten for mer informasjon om dette.)
Targeting via Lag-panelet

Gå til Vindu > SVG Interaktivitet.

2. Gjør hendelses

Nå må vi legge til en hendelse i vår objekt. Dette arrangementet vil bestemme under hvilke omstendigheter vår Javascript vil tre i kraft. I SVG Interaktivitet paletten, velg en hendelse i hendelses velger menyen. Her har jeg valgt onmouseover:

I Script tekstboksen, skriv en Javascript-kommando som vil bli utløst av hendelsen du valgte. I dette tilfellet har vi lagt til:
alert ("hallo");

Trykk Enter for å legge til oppføringen i hendelseslisten

3.. Undersøke XML Output

Når arrangementet har blitt opprettet Illustrator vil bruke valgt mål (i dette tilfellet min gruppe element kjent som g tag) og gjelder Javascript inline. Hvis du kopierer objektet og lime direkte inn i et tekstredigeringsprogram vil du bli gitt XML for dette objektet. Det vil se omtrent slik ut:
< svg > < g id = "klokke" onmouseover = "alert ('Hei');" > < /g > < /svg >

Som du kan se i XML utgang arrangementet lytteren og håndterer er inlined for oss. Nå når du åpner SVG i en nettleser, når du holder over SVG vil du se et varsel med ordet "hallo"

Merk:. Vær oppmerksom på at jeg ikke
godkjenner bruk av inline Javascript for noe med mindre det er absolutt nødvendig!

Slette en Javascript-hendelse

I SVG Interaktivitet paletten, klikk på en Javascript-arrangement for å markere det. Velg søppelbøtta fra nederst til høyre i SVG Interaktivitet paletten.

Konklusjon

Det er det! Som vi har sett SVG interaktivitet paletten lar designere å legge samhandling programmering innenfra Illustrator direkte. Igjen, jeg ville holde seg borte fra dette verktøyet med mindre du har absolutt grunn til å bruke den. Hold deg til å skrive Javascript fra prosjektet, i stedet for direkte i Illustrator.