Hvordan lage gif-animasjoner i illustrator. Hvordan lage animasjon i Adobe Illustrator. Eksporter SWF-filer fra Illustrator
I dag har vi noe uvanlig Adobe leksjon Illustratør. For denne gangen skal vi ikke lage et statisk bilde, men en ekte animasjon. Tenk deg, viser det seg med bruker Adobe Illustrator kan også tegne tegneserier :)
Og for dette trenger vi ingenting i det hele tatt. Riktig organisering av lag og eksport av det endelige arbeidet til swf-format, hvor hvert lag konverteres til en animasjonsramme. I dagens opplæring vil vi tegne en nedtellingsanimasjon i stil med en retrofilm. Utgangen skal være en flash-video med samme nedtelling.
Det første du trenger å gjøre er å tegne alle nødvendige elementer for fremtidig animasjon. For å gjøre dette, i et eget dokument, laget jeg to posisjoner av en filmramme, en sirkel for referanse, som er kuttet i separate sektorer, en tekstur og en vertikal ripe for å legge til effekten av antikken, samt alle tallene og inskripsjoner.
Når alle delene av tegneserien vår er klare, kan vi begynne å lage selve animasjonen. For enkelhets skyld er det bedre å gjøre dette i et nytt dokument. I dette tilfellet vil lagene våre spille rollen som animasjonsrammer. Og i det aller første laget trenger du bare å kopiere en filmramme. Plasser den midt på arbeidsområdet ditt.
Lag nå et andre lag og kopier en filmramme inn i den, der hullene langs kantene er laget med en forskyvning. Den må også plasseres i sentrum.
Fra disse to lagene kan du allerede få animasjon av film i bevegelse. Men senere vil vi trenge mange flere lag. Så velg de to første lagene, gå til panelalternativene og lag en kopi av lagene.
På lignende måte må vi samle 12 lag med filmrammer som definerer bevegelsen.
Nå har vi en hel haug med lag og de er alle synlige. I den forstand at de øvre lagene blokkerer de nedre, noe som ikke er helt praktisk for arbeid. Derfor kan du slå av noen lag ved å klikke på ikonet med et øye til venstre for lagnavnet. For å slå alle lag av eller på samtidig, hold nede Alt-tasten mens du klikker på øyeikonet. Ved å slå lag på og av kan du se nøyaktig hva som er plassert i en bestemt ramme av vår fremtidige animasjon. Og nå, for at vi skal legge til litt jitter til filmens bevegelse, må vi flytte de resulterende rammene litt i forskjellige retninger. For å gjøre dette slår du kun på laget du skal jobbe med. dette øyeblikket, og flytt deretter rammen et par piksler i en hvilken som helst retning.
Når du har gått gjennom alle lagene og lagt til et lite skifte, kan du begynne å lage animasjonen av den bevegelige sirkelen. For å gjøre dette, kopier sirkelen som består av sektorer fra dokumentet med tegneseriedelene og plasser den på det første laget på toppen av filmrammen.
Hvis du fjerner markeringen av sirkelen, vil den se ut som en enkelt helhet. Dette er akkurat det vi trenger.
Men siden den består av individuelle sektorer, kan du lage animasjon veldig raskt og enkelt ved å endre fargen. For å gjøre dette, kopier denne sirkelen til det andre laget og gjør den første sektoren lysere. Du husker at filmen vår rister når den beveger seg, så det er slett ikke nødvendig å plassere sirkelen nøyaktig i midten av rammen. Plasser den etter øyet.
På lignende måte må du kopiere sirkelen inn i hvert neste lag, mens du maler en sektor mer med en lysere farge enn forrige gang. Sammen danner disse 12 lagene en animasjon av filmen som beveger seg med en fyllende sirkel.
Deretter må vi legge til tekstur til lagene våre. Slå på det første laget og kopier teksturen fra originalfilen med reservedeler der.
Slå deretter på de neste lagene ett etter ett og kopier den samme teksturen der. For å få den til å se annerledes ut i hver ramme, roter den ganske enkelt 90 grader. Som du kanskje har gjettet, må vi legge til tekstur til alle 12 rammene.
Hvis du allerede er ganske lei av å kopiere, så kan jeg glede deg - det er veldig lite igjen. Den vanskeligste delen er over. Alt som gjenstår er å legge til vertikale riper og det er nesten det. For å gjøre dette kopierer vi igjen den originale ripen og legger den på et vilkårlig sted i flere lag. I mitt tilfelle vises riper i bare to lag.
Nå som hovedsyklusen med filmanimasjon er klar, gjenstår det bare å legge til tallene. Siden nedtellingen vår går fra 3 til 1 pluss ordet Go!!!, trenger vi enda flere lag. Ikke 12, men hele 48. For å gjøre dette må du lage ytterligere tre kopier av ferdiglagde lag med filmanimasjon.
Og så er alt enkelt. Slå på det aller første laget og sett tallet tre der.
Deretter må du kopiere denne figuren til de neste lagene til sirkelanimasjonen slutter. Når du kommer til neste kopi av lagene, hvor sirkelen igjen vil være helt utfylt, må du sette nummer to. På samme måte kopierer du nummer én til de ønskede lagene. Og når du kommer til de siste lagene for Go!!!-inskripsjonen, sletter du bare sirkelen før du kopierer inskripsjonen til ønsket lag.
Det er alt for animasjonen. Det viktigste her er å ikke bli forvirret. Du kan gi lagene noen praktiske navn, men jeg var litt lat :) Og også, når du er ferdig med arbeidet, må du huske å slå på alle lagene igjen ved å klikke på øyeikonet.
I vinduet for eksportinnstillinger, sørg for å angi Eksporter som: AI-lag til SWF-rammer. Det er dette alternativet som gjør Illustrator-lag til animasjonsrammer. Klikk deretter på Avansert-knappen.
Vil åpne tilleggsinnstillinger. Her må du stille inn bildefrekvensen. Jeg har 12 bilder per sekund. Avmerkingsboksen Looping er ansvarlig for den sykliske animasjonen. Takket være det vil videoen spilles av i en sirkel. Og alternativet Layer Order: Bottom Up gjengir illustratørlag fra bunn til topp i panelet. Dette er nøyaktig hvordan vi bygde animasjonen vår.
Utgangen er en flashvideo med animasjonen vår.
Nå ser du hva en enkel animasjon kan gjøre i Adobe Illustrator ikke så vanskelig som det ser ut ved første øyekast.
Men å lage lange videoer eller interaktive applikasjoner fortsatt bedre å bruke Adobe Flash eller andre flash-redigerere. For eksempel laget jeg denne katten i en gammel Macromedia Flash, som jeg gravde opp på jobben min.
Nylig har HTML5 og CSS3 i økende grad blitt brukt til å lage animasjoner. Denne koden støttes av moderne nettlesere og krever ikke bruk av en flash-spiller.
Roman aka dacascas spesielt for bloggen
Abonner på vårt nyhetsbrev slik at du ikke går glipp av noe nytt:
Nylig har ulike typer animasjoner av SVG-grafikk (Scalable Vector Graphics) på nettsteder og applikasjoner blitt veldig populære. Dette skyldes det faktum at alt nyeste nettlesere støtter allerede dette formatet. Her er informasjon om nettleserstøtte for SVG.
Denne artikkelen diskuterer det enkleste eksemplet på en SVG-vektoranimasjon som bruker den lette Jquery-pluginen Lazy Line Painter.
KildeFor å fullføre og fullt ut forstå denne oppgaven, er grunnleggende kunnskap om HTML, CSS, Jquery ønskelig, men ikke nødvendig hvis du bare vil animere SVG) La oss komme i gang!
Og dette er trinnene vi må følge:
1. Lag riktig filstruktur
Initializr-tjenesten vil hjelpe oss med dette, hvor vi må velge parametere som på bildet nedenfor.
- Classic H5BP (HTML5 Boiler Plate)
- Ingen mal
- Bare HTML5 Shiv
- Forminsket
- IE-klasser
- Chrome Frame
- Klikk deretter på Last ned!
2. Last ned og koble til plugin-en
Siden initializr kommer med det nyeste Jquery-biblioteket, fra arkivet som vi må laste ned fra Lazy Line Painter-prosjektet, trenger vi bare å overføre 2 filer til prosjektet vårt. Den første er 'jquery.lazylinepainter-1.1.min.js' (plugin-versjonen kan variere) den ligger i roten til den resulterende mappen. Den andre er example/js/vendor/raphael-min.js.
Vi plasserer disse 2 filene i js-mappen. Og vi kobler dem til index.html før main.js som følger:
3. Tegn et kult konturbilde i Adobe Illustrator
Du kan for eksempel bruke ikonene i vedlegget.
4. Konverter bildet vårt til Lazy Line Converter
Bare dra ikonet inn i vinduet på bildet nedenfor.
Tykkelsen, fargen på omrisset og animasjonshastigheten kan endres i selve koden, som vises etter konvertering!
5. Lim inn den resulterende koden i main.js
Nå limer vi ganske enkelt inn den resulterende koden i en tom main.js-fil
Alternativer:
strokeWidth — konturtykkelse
strokeColor — konturfarge
Du kan også endre tegnehastigheten til hver vektor ved å endre verdiene til varighetsparameteren (standard 600)
6. Legg til litt CSS etter smak
Fjerne et avsnitt fra index.html
Hei Verden! Dette er HTML5 Boilerplate.
Og i stedet for det setter vi inn en blokk der animasjonen vår skal finne sted
så legger vi til litt CSS i main.css-filen for å få den til å se penere ut:
Brødtekst ( bakgrunn:#F3B71C; ) #ikoner (posisjon: fast; topp:50%; venstre:50%; margin: -300px 0 0 -400px; )
lagre alle filer.
Nå er det bare å åpne index.html i en moderne nettleser og nyte effekten.
P.S. når du starter på lokal maskin Det kan være en forsinkelse i starten av animasjonen i flere sekunder.
Optimalisering av webgrafikk
Grafisk informasjon overføres mye langsommere enn tekst, og innlastingstiden for bilder er proporsjonal med størrelsen grafiske filer. Derfor krever rask lasting av websider en liten størrelse innebygd grafiske bilder, som oppnås gjennom deres optimalisering. Bildeoptimalisering forstås som konverteringen, som sikrer en minimumsfilstørrelse samtidig som bildekvaliteten som kreves i dette tilfellet opprettholdes, som oppnås først og fremst ved å redusere antall farger i grafiske bilder, bruke komprimerte og spesielle filformater, og optimalisere komprimeringsparametere for individuelle bildefragmenter.
Illustrator har innebygde bildeoptimaliseringsverktøy som gjør optimaliseringsprosessen rask og effektiv med en rekke forhåndsvisningsmetoder. Forhåndsvisningen gir en ganske nøyaktig ide om hvordan det optimaliserte bildet vil se ut i sanntid, noe som hjelper deg med å evaluere optimaliseringsresultatet og velge riktige innstillinger. Og du kan optimere både bilder som er opprettet direkte i Illustrator, og andre, for eksempel fotografier som skal plasseres på et nettsted.
Optimaliseringsparametere angis i vinduet Lagre for web, kalt opp av kommandoen med samme navn fra Fil-menyen. Programmet tilbyr deg å bruke en av fire forhåndsvisningsmoduser, men to er best egnet for å vurdere kvaliteten på optimalisering:
- 2-opp (to alternativer) samtidig visning av originalen og det optimaliserte bildet i samsvar med de spesifiserte innstillingene (fig. 1);
- 4-opp (fire alternativer) I denne modusen er visningsporten delt inn i fire vinduer (fig. 2) for å vise det originale bildet og tre versjoner av det optimaliserte: den første versjonen opprettes basert på de angitte optimaliseringsverdiene, og to andre er varianter av de gjeldende optimaliseringsinnstillingene.
Begge modusene lar deg spare tid betydelig på å finne det beste optimaliseringsalternativet, da de eliminerer behovet for å lagre bilder med forskjellige optimaliseringsinnstillinger og deres påfølgende visuelle sammenligning. I tillegg er det mulig å evaluere ikke bare kvaliteten på det optimaliserte bildet, men også størrelsen og lastetiden under forskjellige tilkoblingsalternativer. Til sammenligning er den mest praktiske modusen 4-Up (fire alternativer), som lar deg visuelt evaluere effekten av komprimering eller palettreduksjon på bildekvaliteten og størrelsen og til slutt bestemme de beste optimaliseringsparametrene.
Illustrator lar deg optimere webgrafikk i ikke bare GIF-, JPG-, PNG-8 og PNG-24-formater, men også SWF og SVG. Indekserte bilder som har et lite antall farger, lagres i GIF-format. JPG-formatet brukes til å lagre fullfarge- og gråtonebilder, fotografier og fargerik grafikk, for eksempel gradientfyll. For fullfargebilder med gjennomsiktige områder brukes PNG-formatet, som lar deg lagre både indekserte og fullfargebilder, mens i PNG-8-formatet er maksimalt mulig antall farger på det optimaliserte bildet 256, og i PNG-24-formatet kan bildet ha millioner av farger, og det er derfor han ser ut som JPEG-format. Forskjellen mellom PNG-24 og JPEG er at komprimeringsmetoden som brukes for å optimalisere bilder i PNG-24-formatet ikke fører til tap av kvalitet, men som et resultat øker filstørrelsen. SVG- og SWF-formatene kombinerer grafikk, tekst og interaktive komponenter og kan også optimaliseres.
La oss vurdere spesifikt eksempel bildeoptimalisering. La oss si at en nettsidelogo ble utviklet i Illustrator (fig. 3), opprinnelig lagret i AI-format. Et forsøk på å optimalisere det umiddelbart for nettet vil ikke føre til noe bra, siden bildet i dette tilfellet automatisk vil bli beskåret, noe som ikke vil ta hensyn til den sanne plasseringen av den resulterende inskripsjonen som et resultat av deformasjon (fig. 4 og 5).
Derfor, la oss prøve å eksportere logoen til PSD-format med kommandoen Fil=>Eksporter (Fil=>Eksporter) størrelsen på det opprettede bildet vil være 143 KB. Åpne den resulterende PSD-filen og bruk kommandoen Fil=>Lagre for web. Med tanke på det begrensede antallet farger som er involvert i bildet, er GIF-formatet optimalt i dette tilfellet, og de spesifikke innstillingene må bestemmes. Ved å eksperimentere med innstillingene kan du være sikker på det beste kvalitet gir programmets standard komprimeringsalgoritme, Selektiv. Når det gjelder utjevning, gitt tilstedeværelsen av en gradientfylling, er det bedre å velge en algoritme med støygenerering Støy (fig. 6). Størrelsen på den resulterende optimaliseringsfilen vil være 6.729 KB (fig. 7), mens gjennomsiktigheten av bakgrunnen vil bli bevart, noe som er lett å verifisere ved å lagre bildet i GIF-format sammen med HTML-filen (fig. 8). Som et resultat, i dette eksemplet, ble filene emblem.html og emblem.gif hentet i Primer1-mappen.
Et uunnværlig spesifikt element i utformingen av alle websider er grafiske kontrollknapper. Det er rett og slett umulig å forestille seg en side uten dem. Knappetegning har blitt en spesiell sjanger i dag, og Illustrator lar deg lage de mest intrikate alternativene. For eksempel ser knapper utformet som mesh-objekter og/eller med overleggsmasker mye mer imponerende ut enn vanlige.
Vurder muligheten for å lage en rund, konveks knapp i Illustrator. Tegn et vektorobjekt i form av en sirkel fylt med en vilkårlig farge (fig. 9) og konverter det til en maske med kommandoen Object => Create Gradient Mesh (Object => Create a gradient mesh), spesifiser fire rader og fire kolonner, og i Utseende-listen velger du alternativet To Center Highlight lik 60 (fig. 10). Velg Direct Selection-verktøyet og klikk i øvre venstre hjørne av objektet, velg ankerpunktene som ligger der (fig. 11). Endre fargen på den tilsvarende cellen til hvit ved å velge den i fargeprøvepaletten (fig. 12).
Ta Ellipse-verktøyet, plasser musemarkøren i midten av sirkelen som ble opprettet før, og hold nede Alt- og Shift-tastene og strekk den nye sirkelen over den gamle slik at den er 1-2 piksler større enn den gamle på alle. sider. Gi den en svart kant (Stroke) 1-2 piksler bred og fyll den med en radiell gradient i retningen fra rød til hvit (fig. 13). Dra det opprettede vektorobjektet 1-2 piksler til høyre og ned, og høyreklikk på det og ut uten å fjerne valget kontekstmenyen velg Ordne=>Send til baksiden. Resultatet vil være blank for knappen, vist i fig. 14.
Som regel er det på en hvilken som helst nettside flere knapper av samme type, som for eksempel bare er forskjellige i retningen til pilene som er tegnet på dem, og indikerer bevegelsesretningen rundt nettstedet. La oss vurdere det enkleste tilfellet med å ha to knapper, hvorav den ene, med en pil ned, vil bety å flytte til neste side, og en knapp med en pil opp vil bety å flytte til den forrige. Som en pilmal, la oss ta en vanlig trekant, tegnet med polygonverktøyet, malt svart og, for større effekt, også utformet som et nettobjekt. Flytt pilen til knappen og juster posisjonen til alle objekter i forhold til hverandre ved å bruke de tilsvarende knappene i Juster-paletten. Den første av de resulterende knappene er vist i fig. 15. La oss lage en kopi av laget med knappen ved å velge kommandoen Duplicate Layer Layers, som et resultat vil vi få to identiske lag. Velg deretter pilen på kopien av laget og roter det 180° ved å velge kommandoen Transform=>Roter transformasjon=>Roter fra kontekstmenyen. Vi vil få den samme knappen som vist i fig. 16. Vær oppmerksom på at det er mye mer praktisk å lagre alle den samme typen knapper for ett prosjekt i én fil på forskjellige lag, noe som er demonstrert i dette tilfellet.
Nå må du lagre de optimaliserte versjonene av hver knapp. Først gjør det nederste laget usynlig i dette tilfellet vil knappen på det øverste laget bli bevart. Velg kommandoen Fil=>Lagre for web, konfigurer knappoptimaliseringsparametrene, for eksempel som vist i fig. 17, klikk på Lagre-knappen og skriv inn et filnavn. Den endelig lagrede knappen er vist i fig. 18. Returner nå synligheten til det nederste laget, gjør det øverste laget usynlig og lagre den andre knappen på samme måte, og gir den et annet navn. Resultatet er vist i fig. 19.
Nå gjenstår det bare å sørge for at knappene ser ganske akseptable ut på nettsiden og plassere dem på en egendefinert side (fig. 20). Som et resultat, i dette eksemplet, ble filen Primer2.html og to grafiske bilder hentet i bilder-mappen (Primer2-mappen).
Om ønskelig er det enkelt å gjøre om en knapp til en skive under optimaliseringsprosessen. I dette tilfellet, etter å ha valgt kommandoen Fil=>Lagre for web (Fil=>Lagre for web) og angitt optimaliseringsparameterne, bør du velge Slice Select-verktøyet fra verktøypaletten og dobbeltklikke på bildet, som til slutt vil automatisk bli til en skive med serienummer 1 (fig. 21). Ved å dobbeltklikke på nytt åpnes vinduet Slice Options, der du må spesifisere en lenke og eventuelt endre navnet på skiven (Figur 22), og deretter lagre det optimaliserte bildet. Resultatet i dette tilfellet vil være filene Primer3.html (Fig. 23) og Primer3.gif (Primer3-mappen).
En måte å bringe en side til live er å introdusere designelementer som endrer den utseende(eller tilstand) avhengig av oppførselen til musen eller, sjeldnere, i tilfelle andre situasjoner: skalering, rulling, lasting, feil, etc.
Blant slike elementer er de mest kjente rollovers (fra engelske roll over roll over, turn over) elementer som endrer utseende under påvirkning av musen. Eksempler på typiske rollovers er animerte knapper. Overrullinger brukes ofte når du oppretter andre nettstedsnavigasjonselementer. I virkeligheten er enhver rollover ikke ett, men flere (opptil fire) bilder, som hver tilsvarer en spesifikk hendelse. Hovedhendelsene anses å være følgende: Normal normal tilstand, Hold musepekeren over et element og ned trykk på venstre museknapp når du holder markøren over det. Teoretisk sett kan hendelser som Klikk på å slippe venstre museknapp etter å ha klikket, Opp etter å slippe knappen, Ut når du forlater den aktive sonen. Men i praksis er de ofte begrenset til å endre elementet bare for de tre eller til og med to første hendelsene.
Klassiske rolloversI klassisk forstand er en rollover en serie med grafiske bilder i GIF-format og den tilhørende HTML-koden, takket være hvilken, avhengig av musens oppførsel, ett bilde erstatter et annet i nettleservinduet.
Illustrator er ikke ment for direkte å lage rollovers i klassisk forstand, men det kan hjelpe med å utvikle de første elementene for dem. Ideen i dette tilfellet er å lage et lag med bildet som tilsvarer den første hendelsen. Lag deretter en kopi av laget og transformer bildet til å matche den andre hendelsen, og så videre. Det resulterende flerlagsbildet eksporteres til en PSD-fil med lagene bevart, på grunnlag av dette opprettes en rollover i Image Ready-programmet. Fordelen med å bruke Illustrator-programmet, som i mange andre tilfeller, er en rekke interessante funksjoner som ikke er tilgjengelige i andre programvare, kombinert med bekvemmeligheten av å transformere vektorgrafikk.
La oss prøve å lage en rollover i form av en inskripsjon som endrer farge avhengig av musens oppførsel. Åpne Illustrator og lag en form i form av et avrundet rektangel fylt med svart (fig. 24), lag en kopi av den og plasser den i en ledig del av skjermen. Konverter den første kopien av rektangelet til et maskeobjekt med en fremheving i midten (kommando Object=>Create Gradient Mesh Object=>Create Gradient Mesh), spesifiser fire rader og ti kolonner (fig. 25). Aktiver den andre kopien av rektangelet og sett den til en gradientfylling omtrent som vist i fig. 26. Legg gradientobjektet på toppen av mesh-objektet, reduser opasiteten til gradientobjektet til ca. 80 %, og størrelsen med ca. 1 piksel for til slutt å simulere effekten av en bump. Og skriv deretter ut inskripsjonen på toppen av gjenstandene. I sin opprinnelige form, la den ha en hvit farge, som vil tilsvare normaltilstanden (fig. 27), og når rulletilstanden endres, vil fargen på inskripsjonen endres, for eksempel til grønn når musemarkøren holdes over den (Over-tilstand) og til blå når museknappen trykkes (Ned-tilstand).
Vær oppmerksom på Lag-paletten på dette stadiet er det bare ett enkelt lag i den. Lag to kopier av dette laget ved å bruke kommandoen Duplicate Layer fra Layers palettmenyen, det vil være tre lag i paletten (fig. 28). Deretter i den første kopien av laget endres fargen på inskripsjonen til grønn, og i den andre kopien til blå (fig. 29). Som et resultat vil den nødvendige blanken for overrullingen oppnås.
Eksporter det opprettede bildet til PSD-format, bevar lagene, bruk File=>Export-kommandoen og velg RGB-fargemodellen (fig. 30). Åpne den opprettede PSD-filen i ImageReady-programmet (fig. 31 og 32). Lag rammer basert på lag ved å velge Lag rammer fra lag-kommandoen fra animasjonspalettmenyen. Animasjonsvinduet vil se ut som i fig. 33. I dette tilfellet vil en enkelt Normal-tilstand i utgangspunktet bli opprettet i Rollovers-paletten.
Velg deretter rammen som tilsvarer den induserte tilstanden i animasjonsvinduet, og Lag 1-kopilaget vil automatisk bli valgt i Lag-paletten (fig. 34). Gå til Rollovers-paletten og klikk på knappen Create Rollover-tilstand (Opprett en rollover-tilstand) fig. 35, som vil føre til at Over State-tilstanden vises i Rollover-paletten (fig. 36). Opprett en Down State på samme måte. Aktiver Normal-tilstanden i Rollover-paletten og slett alle frames i Animation-paletten bortsett fra den som skal tilsvare Normal-tilstanden. Som et resultat vil det for hver rollover-tilstand bare være én ramme i animasjonspaletten (fig. 37, 38 og 39).
Ris. 38. Visning av bildet, animasjonsvinduet og palettene Layers and Rollovers for staten Over State
Sjekk resultatet ved å klikke på Forhåndsvisning i standardnettleser-knappen på verktøylinjen og gå til nettleservinduet (Figur 40). Deretter lagrer du filen ved å bruke File=>Save Optimized-kommandoen og spesifiserer HTML og bilder (*.html). Som et resultat, i dette eksemplet, ble filen Primer4.html og en serie med grafiske bilder hentet i bildermappen.
Ris. 40. Nettleservindu med Rollover-element
SVG-velterDet stadig mer populære SVG-formatet (Scalable Vector Graphics). Vektorgrafikk), opprettet basert på XML-standarden, lar deg også motta en rekke interaktive elementer, spesielt rollovers, men i praksis implementeres dette helt annerledes. Det er verdt å merke seg at å lage interaktive SVG-rollovers, i motsetning til klassiske, når den tilsvarende HTML-koden genereres helt automatisk, krever kunnskap om JavaScript-språket og en forståelse av de grunnleggende prinsippene for objektorientert programmering.
For å jobbe med SVG-objekter er det en spesiell palett SVG Interactivity, som enkelt kan åpnes ved å bruke kommandoen Vindu => SVG-interaktivitet (Vindu => SVG-interaktivitet) fig. 41.
La oss vurdere dette alternativet for å lage en overrulling ved å bruke eksempelet på en interaktiv knapp, fargen på inskripsjonen vil endres fra svart til blå når du holder musen og forvandles til svart når musen forlater den aktive sonen.
Lag en rektangulær knapp med avrundede kanter og velg en passende gradientfylling for den, for eksempel som vist i fig. 42. Juster gjennomsiktigheten til knappen i paletten Transparence. I dette eksemplet er Opacity-verdien satt til 50 %. Lag en kopi av knappen, fyll den med mørkegrønn (Figur 43), og konverter den deretter til et maskeobjekt med kommandoen Object => Create Gradient Mesh, spesifiser fire rader og ti kolonner, og i Utseendelisten (View) ved å velge alternativet To Centre og sette Highlight-verdien til 100. Reduser opasiteten til laget med maskeobjektet til ca. 40 % (fig. 44). Plasser et nettobjekt på toppen av en gradient, og knappen vil ligne den som er vist i fig. 45.
Ris. 44. Gjør en kopi av en knapp til et mesh-objekt
Fullfør knappen med den tiltenkte inskripsjonen og juster posisjonen ved å bruke de tilsvarende knappene i Juster-paletten. Det resulterende bildet vil inneholde ett lag med tre objekter lagt over hverandre (fig. 46). Planlagte hendelser vil være i forhold til et tekstobjekt, så for enkelhets skyld kan du endre navnet til Tekst ved å dobbeltklikke på objektet og skrive inn et nytt navn. På samme måte endrer du lagnavnet fra Layer 1 til Layer (fig. 47).
Hendelsesbehandling involverer bruk av JavaScript-prosedyrer, så du må inkludere en fil som beskriver disse prosedyrene. Den heter Events.js og lagres på disk i mappen Sample Files\Sample Art\SVG\SVG ved installasjon Adobe-programmer Illustratør. For å koble til Events.js-filen, bruk JavaScript Files SVG Interactivity-kommandoen (fig. 48). Deretter må du klikke på Legg til-knappen og finne ønsket fil på harddisken. Når navnet hans vises i URL-feltet (Figur 49), klikker du på Ferdig-knappen.
Ris. 48. Velge kommandoen JavaScript-filer
Deretter må du definere et svar på musehendelser for tekstobjektet. Velg tekstobjektet, i hendelsesfeltet i SVG-interaktivitetspaletten, velg hendelsen på musen over elemColor(evt, "Tekst", "#3333FF") dette vil bety at når musen er over tekstobjektet, vil fargen endres til blå (fig. 50). For at tekstfargen skal endres til svart etter at musen forlater det aktive området, må du opprette en annen onmouseout-hendelse, velg den i hendelsesfeltet i SVG Interaktivitet-paletten. Skriv deretter inn teksten elemColor(evt, "Text", "#000000") i handlingslinjen, dette vil returnere fargen til svart (Figur 51).
Ris. 51. Endelig utseende på SVG-interaktivitetspaletten for tekstobjektet
Lagre den opprettede rolloveren som en SVG-fil med kommandoen Fil=>Lagre som (Fil=>Filtype SVG-format, og angi deretter alternativene for å lagre SVG-filen som vist i Fig. 52. Etter lagring vil du motta bare én enkelt fil med filtypen SVG, og ikke to, som i tilfellet med en klassisk rollover, i dette tilfellet ble filen Primer5.svg (Primer5-mappen) mottatt. Men for at rolloveren virkelig skal fungere, må du i tillegg kopiere Events.js-filen fra beskrivelse av JavaScript-prosedyrer.Etter dette kan du sjekke funksjonaliteten til rollover - resultatet vil se ut som vist i fig. 53.
SVG-formatet kan også brukes til å formidle animasjon. La oss prøve å lage et enkelt animert element (i dette tilfellet vil det være informasjon om selskapet), som vises på skjermen når du holder musen over det tilsvarende grafiske objektet og forsvinner når du fjerner musen fra det interaktive elementet.
La oss lage omtrent følgende serie med grafikk- og tekstobjekter, som vist i fig. 54. La oss gi nytt navn til alle opprettede objekter på en praktisk måte ved å sekvensielt klikke på navnet på det neste objektet i lagpaletten og gå inn ønsket navn(Fig. 55). Vær oppmerksom på at de som er uthevet i fig. 56 objekter Text1, Text2, Text3 og Path1 vil alltid være synlige, og alle andre kun når du holder musepekeren over Tekst1-objektet.
Ris. 54. Originalvisning av bildet
Inkluder Events.js-filen som beskriver JavaScript-prosedyrene ved å bruke JavaScript-filer-kommandoen fra SVG-interaktivitetspaletten, klikk på Legg til-knappen, pek på ønsket fil på harddisken og klikk på Ferdig-knappen.
Definer et svar på musehendelser for Text1-objektet. Velg tekstobjektet, i hendelsesfeltet i SVG Interaktivitet-paletten, velg hendelsen ved museovergang og på linjen under skriv inn teksten elemShow(evt, "Text4"); elemShow(evt, "Path2") . Som et resultat, når musen er over Text1-objektet, vil Text4- og Path2-objektene bli synlige. Vær oppmerksom på at hvis flere handlinger må utføres når en hendelse inntreffer, må de spesifiseres med ";"-tegnet. Utfør deretter en lignende operasjon for onmouseout-hendelsen, skriv inn teksten for den, som vil bety å skjule objekter (fig. 57).
Lagre resultatet som en SVG-fil ved å bruke kommandoen Fil=>Lagre som, spesifiser filnavnet, velg SVG-formatet i Filtype-feltet, og angi deretter alternativene for å lagre SVG-filen i samsvar med fig. 58. Etter lagring vil Primer6.svg-filen mottas (Primer6-mappen). Ikke glem å kopiere Events.js-filen til mappen med denne filen. Hvis du etter dette kjører coz denne filen, så vil du se resultatet vist i fig. 59. Dette er nesten det du trenger. Det eneste som ikke var inkludert i planene våre var det første utseendet til tekst 4 og bane 2-objekter ved lasting. For å bli kvitt denne mangelen, velg begge objektdataene samtidig og lag en handling for dem elemHide(evt, "Text4"); elemHide(evt, "Path2") ved onload-hendelsen (fig. 60). Lagre filen igjen og sørg for at Text4- og Path2-objektene nå bare er synlige når du holder markøren over Text1-objektet.
Enhver webside er utenkelig uten nettanimasjon, inkludert animerte gif-er. Et av alternativene for å lage dem er å bruke Adobe ImageReady-applikasjonen, som blant annet lar deg lage animasjon fra lag. I dette tilfellet kan selve flerlagsbildet forberedes i forskjellige applikasjoner, inkludert Adobe Illustrator.
Det er veldig enkelt å lage en animasjon basert på elementer fra symbolpaletten, åpnet med kommandoen Window=>Symbols, eller fra et av symbolbibliotekene som kan åpnes ved å bruke Window=>Symbol Libraries-kommandoen. ).
For eksempel vil vi prøve å øke størrelsen på et symbolobjekt; nøkkelstadiene i prosessen med å øke objektet må settes på separate lag. Først plasserer du symbolobjektene over hverandre, og øk deretter størrelsen på hvert påfølgende objekt, for eksempel som vist i fig. 61. Som et resultat vil ett lag med mange objekter bli opprettet i Lag-paletten (fig. 62). Hvis du direkte eksporterer dette bildet til PSD-format, vil det ikke gi noe, siden det bare er ett lag, og naturlig nok, når du åpner PSD-filen i ImageReady-programmet, vil det også bare være ett lag. Derfor må du først plassere objekter på forskjellige lag. Dette kan gjøres forskjellige måter Den enkleste måten er først å velge lag 1 i lagpaletten og bruke Slipp til lag-kommandoen. Resultatet vil være at hvert av objektene flyttes til sitt eget lag, men de vil alle bli nestet i lag 1. Derfor må du manuelt dra alle de nestede lagene til toppen av Layers-paletten slik at de er over Layer 1-laget, og deretter slette det nå tomme Layer 1-laget (fig. 63). Eksporter bildet til PSD-format ved å bruke kommandoen File=>Export med innstillinger som i fig. 64.
Last inn den opprettede PSD-filen i ImageReady-programmet (fig. 65 og 66). Åpne palettmenyen Animasjon Lag rammer fra lag. Som et resultat vil fem rammer bli opprettet, som hver tilsvarer sitt eget lag, og animasjonspalettvinduet vil se ut som i fig. 67.
Etter dette, angi varigheten for hver av de opprettede rammene i dette tilfellet, varigheten for alle rammer er satt til 0,2 s. Og lagre deretter animasjonen med optimalisering ved å bruke kommandoen Fil=>Lagre optimalisert (Fil=>Lagre med optimalisering). Det resulterende resultatet kan ligne på fig. 68.
Det er enda mer praktisk å skaffe blanks som deretter enkelt kan konverteres til animasjon i ImageReady for å bruke Live Blends-funksjonene til Illustrator. Denne kombinerte bruken av Illustrator og ImageReady fremskynder prosessen med å lage GIF-animasjoner betydelig.
Tegn for eksempel to vilkårlige flerfargede objekter, og koble dem deretter med en blandingskobling med de riktige parameterne (fig. 69). Det er umulig å bruke denne filen direkte til å lage animasjoner, siden bildet er på et enkelt lag (fig. 70). Derfor må du først plassere hvert element i blandingsobjektet på et eget lag. For å gjøre dette, i lagvinduet, velg linjen, aktiver palettmenyen ved å klikke på den svarte pilen i øvre høyre hjørne, og velg kommandoen Frigjør til lagsekvens (fig. 71). Hold nede Shift-tasten, velg de opprettede lagene og plasser dem over Layer 1-laget, og slett selve Layer 1-laget, flytt det til papirkurven som et resultat, vil lagpaletten ha samme form som i fig. 72.
Ris. 70. Opprinnelige tilstand Lag vinduer
Eksporter den opprettede filen til PSD-format ved hjelp av kommandoen File=>Export. Åpne den opprettede PSD-filen i ImageReady-programmet (fig. 73). Vær oppmerksom på at alle lag som er opprettet i Illustrator vil vises i lagvinduet (fig. 74), og i animasjonsvinduet vil det foreløpig bare være én ramme.
Aktiver animasjonspalettmenyen ved å klikke på den svarte pilen i øvre høyre hjørne av paletten og velg kommandoen Lag rammer fra lag. Som et resultat, i dette eksemplet, vil fem rammer opprettes, og animasjonspalettvinduet vil ta skjema i henhold til fig. 75. Velg alle frames mens du holder nede Shift-tasten og still inn riktig bildevarighet i dette eksemplet, samme tid på 0,2 s tas for hver frame. Lagre deretter filen med optimalisering ved å bruke kommandoen Fil=>Lagre optimalisert (Fil=>Lagre med optimalisering), og sett alternativet Kun bilder (*.gif) i Filtype-listen. Animasjonen vil ligne fig. 76.
Det som ser mye mer interessant ut er ikke bevegelsen, men den jevne størrelsen på blandingsobjekter. Du kan for eksempel bruke den allerede opprettede blandingsovergangen. I dette tilfellet, etter å ha opprettet separate lag for hvert blandingsovergangselement, plasserer du alle objektene oppå hverandre ved å bruke knappene Horisontal senter og vertikal senter på paletten Juster (fig. 77).
Eksporter den opprettede filen til PSD-format (Fil=>Eksporter fil=>Eksporter) og åpne den opprettede PSD-filen i ImageReady-programmet (fig. 78). Lag animasjonsrammer basert på lag (Lag rammer fra lag Lag rammer fra lag) og velg en passende varighet for dem (fig. 79). Og så, for å gjøre animasjonen mer effektiv, kopier de eksisterende rammene, men i omvendt rekkefølge slik at bildet først øker og deretter reduseres, og så videre i en sirkel (fig. 80). Lagre deretter optimaliseringsfilen (Fil=>Lagre optimalisert fil=>Lagre med optimalisering). Den resulterende animasjonen er vist i fig. 81.
Ris. 80. Status for animasjonsvinduet etter duplisering av rammer
Ris. 81. Ferdig animasjon
En gjennomsiktig GIF i Adobe Illustrator lages som følger. Gå til menyen Fil > Lagre for web og enheter (Alt+Ctrl+Shift+S). I vinduet som åpnes, i Optimalisert filformat-feltet, må du først gå til fanen Bildestørrelse. Faktum er at som standard er hele siden inkludert i optimaliseringsvinduet, og dette er vanligvis ikke nødvendig. Derfor, i kategorien Bildestørrelse, fjern merket for Klipp til tegnebrett og klikk på Bruk-knappen.
Velg deretter GIF fra formatvalglisten og merk av for Transparency.
Etter dette vil vi bestemme hvilke farger som skal være gjennomsiktige. Alle farger som finnes i bildet, finnes i fanen Fargetabell og vises som fargede firkanter. Velg pipetteverktøyet fra verktøylinjen på venstre side av vinduet.
Det er to måter å definere farger på. Den enkleste måten er å spesifisere en farge med en pipette direkte på bildet - etter dette vil fargen fremheves på fargetabellen med et mørkt strek. Vel, hvis du vet nøyaktig hvilken farge som skal være gjennomsiktig, kan du velge den direkte på fargetabellen ved å klikke på den tilsvarende fargede firkanten. I både det første og andre tilfellet, hvis du trenger å velge flere farger, må du jobbe med Shift (eller Ctrl)-tasten trykket. Etter å ha valgt en farge, må du instruere programmet for å gjøre det gjennomsiktig. For å gjøre dette, klikk på ikonet Kart over valgte farger til gjennomsiktig. På bildet er denne knappen sirklet og den røde fargen er satt til gjennomsiktig. Et gjennomsiktig område vil vises i bildet, og firkanten på fargebordet vil endre utseende - en del av det vil bli en hvit trekant. For å avbryte den valgte fargen, må du velge den i fargetabellen, og deretter klikke på ikonet Tilordner valgte farger til gjennomsiktig igjen.
Noen få ord om metoden for å angi åpenhet. Den er ansvarlig for rullegardinmenyen Spesifiser Transparency Dither Algorithm, på russisk - Algoritme for simulering av transparens (fig. nedenfor). Det er fire valg: No Transparency Dither, Diffusion Transparency Dither, Pattern Transparency Dither og Noise Transparency Dither. I diffus algoritme-modus blir Mengde-glidebryteren aktiv, slik at du kan endre diffusjonsverdien. Hva skal man bruke i praksis? Avhengig av formål og bilde. Jeg bruker ikke dette alternativet og lar det alltid stå som standard - No Transparency Dither.
Klikk Lagre - den gjennomsiktige GIF-en er klar. Arbeidet ble utført i Adobe Illustrator versjon CS4 (v.14), men alle handlinger og hurtigtaster er også relevante for den tidligere versjonen CS3 (v. 13).
Importer og enkel animasjon Hallo. I dag ser vi på enkel animasjon i After Effects.
Ressurser: Adobe Illustrator CC
Adobe After Effects CC
La oss begynne å lære ved å tegne i Illustrator.
La oss tegne
1) Tegn et gult rektangel som bakgrunn
Figur 1 - Rektangel
2) Tegn en sirkel og fyll den med en gradient
La oss jobbe litt med sirkelen:
- slett bunnpunktet på konturen, vi får en bue;
- tegne en rett linje, lukke bunnen av buen, vi får en halvsirkel
Figur 2 - 1) tegne sirkel; 2) gradient; 3) slett punkt
3) Tegn et rektangel og lag en kopi av det
- ett grått rektangel;
- et annet rektangel er mørkegrå
4) Tegn en trekant fra en stjerne ved å sette antall stråler til 3
Figur 3 - 1) rett lys; 2) rekt mørkt; 3) trekant
5) Tegn en katt med penn og enkle former 
Figur 4 - 1) hode; 2) nakke; 3) kropp; 4) ben; 5) hale
Og nå det VIKTIGSTE øyeblikket
La oss fordele bildene i lag (det som vil bli animert er på et eget lag) slik: 
Figur 5 - alle bilder (rødt merke viktige lag)
Det er det, la oss nå spare.
La oss se på lagringsinnstillingene
Figur 6 - Lagre
Og nå neste etappe. Lukk Adobe Illustrator og åpne After Effects.
Importer til After Effects
Fil - Importer - Fil - velg vår lagrede Illustrator-fil.
La oss velge å importere lag fra Illustrator; hvis vi legger inn opptak, får vi et bilde med sammenslåtte lag, men det trenger vi ikke.
Figur 7 - Importer som sammensetning
Det er det, importert.
La oss nå se hva vi har. Dobbeltklikk på komposisjonen slik at den åpnes og vi ser lagene (hvis alt er gjort riktig, blir det flere lag). Vi skjønner dette, se figur
Figur 8 - Åpen komposisjon
Og nå er det vi er her for i dag animasjon.
Animasjon i After Effects
Still inn rotasjonspunktet øverst på pilen ved hjelp av Pan Behind Tool (snarvei - Y). Vi tar bare et poeng og flytter det dit det trengs. Som et resultat vil det se slik ut.. 
Figur 9 - Panoreringsverktøy og lag
Det er det, la oss nå gå videre til lagene for animasjon.
Vi trenger et Arrow and Head_cat-lag.
La oss starte med pil.
La oss utvide listen, finne den og klikke på klokken. Så vi satte det første punktet til null sekund. Animasjonen vil vare i 2 sekunder totalt.
Så dette er innstillingene du må gjøre (vi setter 3 poeng totalt):
| Sekund | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figur 10 - Rotasjonspil
La oss nå animere kattens hode.
La oss utvide head_cat og finne Position .
Det vil være 4 prikker her.
Bare den siste koordinaten vil bli endret uten å påvirke de andre.
| Sekund | 0.1 | 0.17 | 1.12 | 2.0 |
| Posisjon | 689.3 | 729.3 | 729.3 | 689.3 |
Figur 11 - Plasser hodet
Så, animasjonsprinsippet var slik. Pilen svinger fra side til side, så snart den nærmer seg kattungen, trekker den hodet inn, dveler i denne posisjonen en stund, og returnerer den deretter til sin plass.
Den siste fasen
Produksjon
Du må lage et ferdig produkt fra arbeidet ditt.
Gå til menyen - Legg til i gjengivelseskø
Render-panelet åpnes og i Output Module (to klikk) velger du utdataformatet. Jeg tok *.mov
Figur 12 - Render
Klikk på RENDER-knappen og få resultatet (bare ikke glem å spesifisere banen).
Det er alt.
