Hur man skapar gif-animationer i illustrator. Hur man gör animationer i Adobe Illustrator. Exportera SWF-filer från Illustrator
Idag har vi något ovanligt Adobe lektion Illustratör. För den här gången ska vi inte göra en statisk bild, utan en riktig animation. Tänk dig, visar det sig med använder Adobe Illustrator kan också rita tecknade serier :)
Och för detta behöver vi ingenting alls. Korrekt organisering av lager och export av det slutliga arbetet till swf-format, där varje lager konverteras till en animationsram. I dagens handledning kommer vi att rita en nedräkningsanimation i stil med en retrofilm. Utdata ska vara en flashvideo med samma nedräkning.
Det första du behöver göra är att rita alla nödvändiga element för framtida animering. För att göra detta, i ett separat dokument, gjorde jag två positioner av en filmram, en cirkel för referens, som skärs i separata sektorer, en textur och en vertikal repa för att lägga till effekten av antiken, såväl som alla siffror och inskriptioner.
När alla delar av vår tecknade serie är klara kan vi börja skapa själva animationen. För enkelhetens skull är det bättre att göra detta i ett nytt dokument. I det här fallet kommer våra lager att spela rollen som animationsramar. Och i det allra första lagret behöver du bara kopiera en filmram. Placera den i mitten av ditt arbetsområde.
Skapa nu ett andra lager och kopiera en ram av film in i det, där hålen längs kanterna är gjorda med en förskjutning. Den behöver också placeras i centrum.
Från dessa två lager kan du redan få animering av rörlig film. Men senare kommer vi att behöva många fler lager. Så välj de två första lagren, gå till panelalternativen och gör en kopia av lagren.
På ett liknande sätt måste vi samla 12 lager av filmramar som definierar dess rörelse.
Nu har vi ett helt gäng lager och alla är synliga. I den meningen att de övre lagren blockerar de nedre, vilket inte är helt bekvämt för arbete. Därför kan du stänga av vissa lager genom att klicka på ikonen med ett öga till vänster om lagernamnet. För att stänga av eller aktivera alla lager samtidigt, håll ned Alt-tangenten medan du klickar på ögonikonen. Genom att slå på och av lager kan du se exakt vad som finns i en specifik bildruta i vår framtida animation. Och nu, för att vi ska kunna lägga till lite jitter till filmens rörelse, måste vi flytta de resulterande ramarna något i olika riktningar. För att göra detta, aktivera endast det lager du ska arbeta med. det här ögonblicket, och flytta sedan ramen ett par pixlar i valfri riktning.
När du har gått igenom alla lager och lagt till en liten förskjutning kan du börja skapa animeringen av den rörliga cirkeln. För att göra detta, kopiera cirkeln som består av sektorer från dokumentet med de tecknade delarna och placera den på det första lagret ovanpå filmramen.
Om du avmarkerar cirkeln kommer den att se ut som en enda helhet. Det är precis vad vi behöver.
Men eftersom den består av enskilda sektorer kan du skapa animationer mycket snabbt och enkelt genom att ändra deras färg. För att göra detta, kopiera denna cirkel till det andra lagret och gör den första sektorn ljusare. Du kommer ihåg att vår film skakar när den rör sig, så det är inte alls nödvändigt att placera cirkeln exakt i mitten av ramen. Placera den med ögat.
På liknande sätt måste du kopiera cirkeln till varje nästa lager, samtidigt som du målar en sektor mer med en ljusare färg än föregående gång. Tillsammans bildar dessa 12 lager en animation av filmen som rör sig med en fyllande cirkel.
Därefter måste vi lägga till textur till våra lager. Slå på det första lagret och kopiera texturen från originalfilen med reservdelar där.
Slå sedan på nästa lager ett efter ett och kopiera samma textur dit. För att få den att se olika ut i varje ram, vrid den helt enkelt 90 grader. Som du kanske har gissat måste vi lägga till textur till alla 12 ramarna.
Om du redan är ganska trött på att kopiera, då kan jag glädja dig - det finns väldigt lite kvar. Den svåraste delen är över. Allt som återstår är att lägga till vertikala repor och det är nästan allt. För att göra detta kopierar vi den ursprungliga repan igen och placerar den på en godtycklig plats i flera lager. I mitt fall uppstår repor i endast två lager.
Nu när huvudcykeln med filmanimation är klar återstår bara att lägga till siffrorna. Eftersom vår nedräkning går från 3 till 1 plus ordet Go!!! behöver vi ännu fler lager. Inte 12, utan hela 48. För att göra detta måste du göra ytterligare tre kopior av färdiga lager med filmanimation.
Och då är allt enkelt. Slå på det allra första lagret och lägg siffran tre där.
Sedan måste du kopiera denna figur till nästa lager tills cirkelanimeringen slutar. När du kommer till nästa kopia av lagren, där cirkeln återigen kommer att vara helt ifylld, måste du sätta nummer två. På samma sätt kopierar du nummer ett till önskade lager. Och när du kommer till de sista lagren för Go!!!-inskriptionen, radera helt enkelt cirkeln innan du kopierar inskriptionen till önskat lager.
Det var allt för animationen. Huvudsaken här är att inte bli förvirrad. Du kan ge lagren några bekväma namn, men jag var lite lat :) Och när du är klar med ditt arbete, se till att aktivera alla lager igen genom att klicka på ögonikonen.
Se till att ställa in Exportera som: AI-lager till SWF-ramar i fönstret för exportinställningar. Det är detta alternativ som förvandlar Illustrator-lager till animationsramar. Klicka sedan på knappen Avancerat.
Kommer öppna ytterligare inställningar. Här måste du ställa in bildhastigheten. Jag har 12 bilder per sekund. Kryssrutan Looping är ansvarig för den cykliska animeringen. Tack vare det kommer videon att spelas upp i en cirkel. Och alternativet Layer Order: Bottom Up reproducerar illustratörslager från botten till toppen i panelen. Det är precis så vi byggde vår animation.
Utgången är en flashvideo med vår animation.
Nu ser du vad en enkel animation kan göra i Adobe Illustrator inte så svårt som det verkar vid första anblicken.
Men att skapa långa videos eller interaktiva applikationer fortfarande bättre att använda Adobe Flash eller andra flash-redigerare. Till exempel gjorde jag den här katten i en gammal Macromedia Flash, som jag grävde upp på mitt arbete.
Dessutom har HTML5 och CSS3 i allt högre grad använts för att skapa animationer. Denna kod stöds av moderna webbläsare och kräver inte användning av en flash-spelare.
Roman aka dacascas speciellt för bloggen
Prenumerera på vårt nyhetsbrev så att du inte missar något nytt:
Nyligen har olika typer av animering av SVG-grafik (Scalable Vector Graphics) på webbplatser och applikationer blivit mycket populära. Detta beror på det faktum att allt senaste webbläsarna stöder redan detta format. Här finns information om webbläsarstöd för SVG.
Den här artikeln diskuterar det enklaste exemplet på en SVG-vektoranimation med den lätta Jquery-plugin Lazy Line Painter.
KällaFör att slutföra och helt förstå denna uppgift är grundläggande kunskaper i HTML, CSS, Jquery önskvärt, men inte nödvändigt om du bara vill animera SVG) Låt oss komma igång!
Och det här är stegen vi måste följa:
1. Skapa rätt filstruktur
Tjänsten Initializr hjälper oss med detta, där vi behöver välja parametrar som på bilden nedan.
- Classic H5BP (HTML5 Boiler Plate)
- Ingen mall
- Bara HTML5 Shiv
- Minifierad
- IE-klasser
- Chrome Frame
- Klicka sedan på Ladda ner det!
2. Ladda ner och anslut plugin-programmet
Eftersom initializr kommer med det senaste Jquery-biblioteket, från arkivet som vi behöver ladda ner från Lazy Line Painter-projektförrådet, behöver vi bara överföra 2 filer till vårt projekt. Den första är 'jquery.lazylinepainter-1.1.min.js' (pluginversionen kan skilja sig åt) den finns i roten av den resulterande mappen. Den andra är example/js/vendor/raphael-min.js.
Vi placerar dessa 2 filer i mappen js. Och vi kopplar dem till vår index.html före main.js enligt följande:
3. Rita en cool konturbild i Adobe Illustrator
Du kan till exempel använda ikonerna i bilagan.
4. Konvertera vår bild till Lazy Line Converter
Dra bara din ikon i fönstret i bilden nedan.
Tjockleken, färgen på konturen och animeringshastigheten kan ändras i själva koden, som kommer att visas efter konvertering!
5. Klistra in den resulterande koden i main.js
Nu klistrar vi helt enkelt in den resulterande koden i en tom main.js-fil
Alternativ:
strokeWidth — konturtjocklek
strokeColor — konturfärg
Du kan också ändra ritningshastigheten för varje vektor genom att ändra värdena för varaktighetsparametern (standard 600)
6. Lägg till lite CSS efter smak
Ta bort ett stycke från index.html
Hej världen! Detta är HTML5 Boilerplate.
Och istället för det infogar vi ett block där vår animering kommer att äga rum
sedan lägger vi till lite CSS i main.css-filen för att få det att se snyggare ut:
Brödtext ( bakgrund:#F3B71C; ) #ikoner (position: fast; topp:50%; vänster:50%; marginal: -300px 0 0 -400px; )
spara alla filer.
Nu är det bara att öppna index.html i en modern webbläsare och njuta av effekten.
P.S. när man börjar lokal maskin Det kan finnas en fördröjning i starten av animeringen i flera sekunder.
Webbgrafikoptimering
Grafisk information sänds mycket långsammare än text, och laddningstiden för bilder är proportionell mot deras storlek grafiska filer. Därför kräver snabb laddning av webbsidor en liten storlek av inbäddade grafiska bilder, vilket uppnås genom deras optimering. Bildoptimering förstås som dess konvertering, som säkerställer en minsta filstorlek samtidigt som den bildkvalitet som krävs i detta fall bibehålls, vilket uppnås främst genom att minska antalet färger i grafiska bilder, använda komprimerade och speciella filformat och optimera komprimeringsparametrar för individuella bildfragment.
Illustrator har inbyggda bildoptimeringsverktyg som gör optimeringsprocessen snabb och effektiv med en mängd olika förhandsvisningsmetoder. Förhandsvisningen ger en ganska exakt uppfattning om hur den optimerade bilden kommer att se ut i realtid, vilket hjälper dig att utvärdera optimeringsresultatet och framgångsrikt välja rätt inställningar. Och du kan optimera både bilder skapade direkt i Illustrator och andra, till exempel fotografier som ska placeras på en webbplats.
Optimeringsparametrar ställs in i fönstret Spara för webben, anropat av kommandot med samma namn från Arkiv-menyn. Programmet erbjuder dig att använda ett av fyra förhandsgranskningslägen, men två är bäst lämpade för att bedöma kvaliteten på optimeringen:
- 2-upp (två alternativ) samtidig visning av originalet och optimerad bild i enlighet med de specificerade inställningarna (fig. 1);
- 4-upp (fyra alternativ) I det här läget är visningsporten uppdelad i fyra fönster (fig. 2) för att visa originalbilden och tre versioner av den optimerade: den första versionen skapas baserat på de inställda optimeringsvärdena, och andra två är varianter av de nuvarande optimeringsinställningarna.
Båda lägena tillåter dig att avsevärt spara tid på att hitta det bästa optimeringsalternativet, eftersom de eliminerar behovet av att spara bilder med olika optimeringsinställningar och deras efterföljande visuella jämförelse. Dessutom är det möjligt att utvärdera inte bara kvaliteten på den optimerade bilden, utan även dess storlek och laddningstid under olika anslutningsalternativ. Som jämförelse är det mest bekväma läget 4-Up (fyra alternativ), som låter dig visuellt utvärdera effekten av komprimering eller palettreduktion på bildkvalitet och dess storlek och slutligen bestämma de bästa optimeringsparametrarna.
Illustrator låter dig optimera webbgrafik i inte bara GIF-, JPG-, PNG-8 och PNG-24-format, utan även SWF och SVG. Indexerade bilder som har ett litet antal färger sparas i GIF-format. JPG-formatet används för att spara fullfärgs- och gråskalebilder, fotografier och färgrik grafik, till exempel övertoningsfyllningar. För fullfärgsbilder med genomskinliga områden används PNG-formatet, vilket gör att du kan spara både indexerade och fullfärgsbilder, medan i PNG-8-formatet är det maximala antalet färger i den optimerade bilden 256, och i PNG-24-formatet kan bilden ha miljontals färger, och det är därför han ser ut som JPEG-format. Skillnaden mellan PNG-24 och JPEG är att komprimeringsmetoden som används för att optimera bilder i PNG-24-formatet inte leder till kvalitetsförlust, utan som ett resultat ökar filstorleken. SVG- och SWF-format kombinerar grafik, text och interaktiva komponenter och kan också optimeras.
Låt oss överväga specifikt exempel bildoptimering. Låt oss säga att en webbplatslogotyp utvecklades i Illustrator (fig. 3), som ursprungligen sparades i AI-format. Ett försök att omedelbart optimera den för webben kommer inte att leda till något bra, eftersom bilden i det här fallet kommer att beskäras automatiskt, vilket inte kommer att ta hänsyn till den verkliga positionen för den resulterande inskriptionen som ett resultat av deformation (Fig. 4 och 5).
Låt oss därför försöka exportera logotypen till PSD-format med kommandot File=>Export (File=>Export) storleken på den skapade bilden blir 143 KB. Öppna den resulterande PSD-filen och använd kommandot File=>Save for Web. Med hänsyn till det begränsade antalet färger som är involverade i bilden är GIF-formatet optimalt i det här fallet, vars specifika inställningar måste bestämmas. Genom att experimentera med inställningarna kan du säkerställa det bästa kvalitet ger programmets standardkomprimeringsalgoritm, Selective. När det gäller utjämning, med tanke på närvaron av en gradientfyllning, är det bättre att välja en algoritm med brusgenerering Brus (Fig. 6). Storleken på den resulterande optimeringsfilen kommer att vara 6,729 KB (Fig. 7), medan genomskinligheten i bakgrunden kommer att bevaras, vilket är lätt att verifiera genom att spara bilden i GIF-format tillsammans med HTML-filen (Fig. 8). Som ett resultat, i det här exemplet, erhölls filerna emblem.html och emblem.gif i mappen Primer1.
En oumbärlig specifik del av designen av alla webbsidor är grafiska kontrollknappar. Det är helt enkelt omöjligt att föreställa sig en sida utan dem. Knappteckning har blivit en speciell genre idag, och Illustrator låter dig skapa de mest intrikata alternativen. Till exempel, knappar designade som nätobjekt och/eller med överläggsmasker ser mycket mer imponerande ut än vanliga.
Överväg alternativet att skapa en rund, konvex knapp i Illustrator. Rita ett vektorobjekt i form av en cirkel fylld med en godtycklig färg (Fig. 9) och konvertera det till ett nät med kommandot Objekt => Skapa Gradient Mesh (Objekt => Skapa ett gradientnät), ange fyra rader och fyra kolumner och i listan Utseende väljer du alternativet Att centrera markering lika med 60 (Fig. 10). Välj verktyget Direct Selection och klicka i det övre vänstra hörnet av objektet och välj ankarpunkterna som finns där (fig. 11). Ändra färgen på motsvarande cell till vit genom att välja den på paletten Swatches (Fig. 12).
Ta ellipsverktyget, placera musmarkören i mitten av cirkeln som skapades innan och, håll ner Alt- och Skift-tangenterna, sträck ut den nya cirkeln över den gamla så att den är 1-2 pixlar större än den gamla på alla sidor. Ge den en svart ram (Stroke) 1-2 pixlar bred och fyll den med en radiell gradient i riktningen från rött till vitt (Fig. 13). Dra det skapade vektorobjektet 1-2 pixlar åt höger och nedåt, och högerklicka sedan på det och ut utan att ta bort markeringen innehållsmeny välj Ordna=>Skicka till baksidan. Resultatet blir ett tomt för knappen, som visas i fig. 14.
Som regel finns det på vilken webbsida som helst flera knappar av samma typ, som skiljer sig till exempel bara i riktningen för pilarna som ritas på dem, vilket indikerar rörelseriktningen runt webbplatsen. Låt oss överväga det enklaste fallet med två knappar, varav en, med en nedåtpil, kommer att innebära att flytta till nästa sida, och en knapp med en uppåtpil betyder att flytta till den föregående. Som en pilmall, låt oss ta en vanlig triangel, ritad med polygonverktyget, målad svart och, för större effekt, även utformad som ett nätobjekt. Flytta pilen till knappen och justera positionen för alla objekt i förhållande till varandra med hjälp av motsvarande knappar i paletten Justera. Den första av de resulterande knapparna visas i fig. 15. Låt oss göra en kopia av lagret med knappen genom att välja kommandot Duplicera lagerlager, som ett resultat får vi två identiska lager. Välj sedan pilen på kopian av lagret och rotera det 180° genom att välja kommandot Transform=>Rotera transformation=>Rotera från snabbmenyn. Vi kommer att få samma knapp som visas i Fig. 16. Observera att det är mycket bekvämare att lagra alla samma typ av knappar för ett projekt i en fil på olika lager, vilket visas i det här fallet.
Nu måste du spara de optimerade versionerna av varje knapp. Gör först det nedre lagret osynligt i detta fall kommer knappen på det översta lagret att bevaras. Välj kommandot File=>Save for Web, konfigurera knappoptimeringsparametrarna, till exempel, som visas i Fig. 17, klicka på knappen Spara och ange ett filnamn. Den slutligen sparade knappen visas i fig. 18. Återställ nu synlighet till det nedre lagret, gör det översta lagret osynligt och spara den andra knappen på samma sätt, ge den ett annat namn. Resultatet visas i fig. 19.
Nu återstår bara att se till att knapparna ser ganska acceptabla ut på webbsidan och placera dem på en anpassad sida (Fig. 20). Som ett resultat, i detta exempel, erhölls filen Primer2.html och två grafiska bilder i mappen bilder (Mapp Primer2).
Om så önskas är det lätt att förvandla en knapp till en skiva under optimeringsprocessen. I det här fallet, efter att ha valt kommandot Arkiv=>Spara för webben (Arkiv=>Spara för webben) och ställt in optimeringsparametrarna, bör du välja Slice Select-verktyget från verktygspaletten och dubbelklicka på bilden, vilket så småningom kommer att automatiskt förvandlas till en skiva med serienummer 1 (bild 21). Om du dubbelklickar igen öppnas fönstret Slice Options, där du måste ange en länk och eventuellt ändra namnet på segmentet (Figur 22) och sedan spara den optimerade bilden. Resultatet i detta fall blir filerna Primer3.html (Fig. 23) och Primer3.gif (Mapp Primer3).
Ett sätt att få en sida till liv är att introducera designelement som förändrar den utseende(eller tillstånd) beroende på beteendet hos musen eller, mer sällan, i händelse av andra situationer: skalning, rullning, laddning, fel, etc.
Bland sådana element är de mest kända rollovers (från engelska roll over roll over, turn over) element som ändrar utseende under påverkan av musen. Exempel på typiska rollovers är animerade knappar. Rollovers används ofta när du skapar andra webbplatsnavigeringselement. I verkligheten är varje rollover inte en, utan flera (upp till fyra) bilder, som var och en motsvarar en specifik händelse. Huvudhändelserna anses vara följande: Normal normalt tillstånd, Håll muspekaren över ett element och nedtryckning av vänster musknapp när du håller muspekaren över det. Teoretiskt sett kan händelser som Klicka på att släppa vänster musknapp efter att ha klickat, Upp efter att ha släppt knappen, Ut när du lämnar den aktiva zonen vara involverade. Men i praktiken är de ofta begränsade till att bara ändra elementet för de tre första eller till och med två händelserna.
Klassiska rolloversI klassisk mening är en rollover en serie grafiska bilder i GIF-format och motsvarande HTML-kod, tack vare vilken, beroende på musbeteende, en bild ersätter en annan i webbläsarfönstret.
Illustrator är inte avsedd för att direkt skapa rollovers i klassisk mening, men det kan hjälpa till att utveckla de initiala elementen för dem. Tanken i det här fallet är att skapa ett lager med bilden som motsvarar den första händelsen. Gör sedan en kopia av lagret och transformera bilden så att den matchar den andra händelsen, och så vidare. Den resulterande flerskiktsbilden exporteras till en PSD-fil med lagren bevarade, på grundval av vilken en rollover skapas i programmet Image Ready. Fördelen med att använda Illustrator-programmet, som i många andra fall, är ett antal av dess intressanta funktioner som inte är tillgängliga i andra programvara, kombinerat med bekvämligheten med att transformera vektorgrafik.
Låt oss försöka skapa en rollover i form av en inskription som ändrar färg beroende på musbeteende. Öppna Illustrator och skapa en form i form av en rundad rektangel fylld med svart (bild 24), gör en kopia av den och placera den på en ledig del av skärmen. Konvertera den första kopian av rektangeln till ett mesh-objekt med en markering i mitten (kommando Object=>Create Gradient Mesh Object=>Create Gradient Mesh), ange fyra rader och tio kolumner (Fig. 25). Aktivera den andra kopian av rektangeln och ställ in den på en gradientfyllning ungefär som visas i fig. 26. Lägg över gradientobjektet ovanpå mesh-objektet, minska opaciteten för gradientobjektet till cirka 80 % och storleken med cirka 1 pixel för att så småningom simulera effekten av en bula. Och skriv sedan ut inskriptionen ovanpå föremålen. Låt den i sin ursprungliga form ha en vit färg, som kommer att motsvara det normala tillståndet (fig. 27), och sedan när överrullningsläget ändras kommer färgen på inskriptionen att ändras, till exempel till grön när musmarkören hålls över den (Överläge) och till blått när musknappen trycks ned (Nerläge).
Var uppmärksam på lagerpaletten i det här skedet finns det bara ett enda lager i den. Gör två kopior av detta lager genom att använda kommandot Duplicera lager från paletten Lager, det kommer att finnas tre lager i paletten (fig. 28). Ändra sedan färgen på inskriptionen till grön i den första kopian av lagret och i den andra kopian till blå (Fig. 29). Som ett resultat kommer det nödvändiga blanket för överrullningen att erhållas.
Exportera den skapade bilden till PSD-format, bevara lagren, använd kommandot File=>Export och välj RGB-färgmodell (Fig. 30). Öppna den skapade PSD-filen i programmet ImageReady (fig. 31 och 32). Skapa ramar baserade på lager genom att välja kommandot Gör ramar från lager på paletten Animation. Animeringsfönstret kommer att se ut som i fig. 33. I det här fallet kommer ett enstaka normalläge initialt att skapas på paletten Rollovers.
Välj sedan den ram som motsvarar det inducerade tillståndet i animeringsfönstret, så kommer lagret Kopiera lager 1 automatiskt att väljas i paletten Lager (Fig. 34). Gå till paletten Rollovers och klicka på knappen Skapa rollover-tillstånd (Skapa ett rollover-tillstånd) fig. 35, vilket gör att övertillståndet visas i paletten Rollovers (Fig. 36). Skapa ett Down State på samma sätt. Aktivera Normal-tillståndet i Rollovers-paletten och ta bort alla bildrutor i Animation-paletten utom den som ska motsvara Normal-tillståndet. Som ett resultat, för varje rollover-tillstånd kommer det bara att finnas en bildruta i animeringspaletten (fig. 37, 38 och 39).
Ris. 38. Vy av bilden, animeringsfönstret och paletterna Layers and Rollovers för staten Over State
Kontrollera resultatet genom att klicka på knappen Förhandsgranska i standardwebbläsare i verktygsfältet och gå till webbläsarfönstret (Figur 40). Därefter sparar du filen med kommandot File=>Save Optimized och specificerar HTML och bilder (*.html). Som ett resultat, i det här exemplet, erhölls filen Primer4.html och en serie grafiska bilder i mappen bilder.
Ris. 40. Webbläsarfönster med Rollover-element
SVG rolloversDet allt populärare SVG-formatet (Scalable Vector Graphics). Vektorgrafik), skapad baserat på XML-standarden, låter dig också ta emot en mängd olika interaktiva element, särskilt rollovers, men i praktiken implementeras detta helt annorlunda. Det är värt att notera att skapa interaktiva SVG rollovers, till skillnad från klassiska, när motsvarande HTML-kod genereras helt automatiskt, kräver kunskaper i JavaScript-språket och en förståelse för de grundläggande principerna för objektorienterad programmering.
För att arbeta med SVG-objekt finns en speciell palett SVG Interactivity, som enkelt kan öppnas med kommandot Fönster => SVG-interaktivitet (Fönster => SVG-interaktivitet) fig. 41.
Låt oss överväga det här alternativet för att skapa en rollover med hjälp av exemplet med en interaktiv knapp, färgen på inskriptionen på vilken kommer att ändras från svart till blå när du svävar med musen och återigen förvandlas till svart när musen lämnar den aktiva zonen.
Skapa en rektangulär knapp med rundade kanter och välj en lämplig gradientfyllning för den, till exempel som visas i Fig. 42. Justera knappens genomskinlighet i paletten Transparens I det här exemplet är Opacitetsvärdet satt till 50 %. Gör en kopia av knappen, fyll den med mörkgrönt (Figur 43) och konvertera den sedan till ett nätobjekt med kommandot Object => Create Gradient Mesh, ange fyra rader och tio kolumner och i Utseendelistan (View) genom att välja alternativet Att centrera och ställa in Highlight-värdet till 100. Minska opaciteten för lagret med nätobjektet till cirka 40 % (Fig. 44). Placera ett nätobjekt ovanpå en gradient, och knappen kommer att likna den som visas i fig. 45.
Ris. 44. Förvandla en kopia av en knapp till ett nätobjekt
Fyll i knappen med den avsedda inskriptionen och justera dess position med motsvarande knappar på paletten Justera. Den resulterande bilden kommer att innehålla ett lager med tre objekt överlagrade på varandra (Fig. 46). Schemalagda händelser kommer att vara relativa till ett textobjekt, så för enkelhets skull, ändra dess namn till Text genom att dubbelklicka på objektet och ange ett nytt namn. Ändra på samma sätt lagrets namn från Layer 1 till Layer (Fig. 47).
Händelsebearbetning involverar användning av JavaScript-procedurer, så du måste inkludera en fil som beskriver dessa procedurer. Den heter Events.js och sparas på disk i mappen Sample Files\Sample Art\SVG\SVG vid installationen Adobe-program Illustratör. För att ansluta filen Events.js, använd kommandot JavaScript Files SVG Interactivity (Fig. 48). Därefter måste du klicka på knappen Lägg till och hitta önskad fil på din hårddisk. När hans namn visas i URL-fältet (Figur 49), klicka på knappen Klar.
Ris. 48. Välj kommandot JavaScript-filer
Därefter måste du definiera ett svar på mushändelser för textobjektet. Välj textobjektet, i fältet Händelse i SVG Interactivity-paletten, välj händelsen på musen över elemColor(evt, "Text", "#3333FF") detta kommer att innebära att när musen är över textobjektet kommer dess färg att ändras till blå (fig. 50). För att textfärgen ska ändras till svart efter att musen lämnar det aktiva området, måste du skapa en annan onmouseout-händelse, välj den i fältet Händelse på paletten SVG Interactivity. Skriv sedan in texten elemColor(evt, "Text", "#000000") på åtgärdsraden, detta kommer att återställa färgen till svart (Figur 51).
Ris. 51. Slutlig utseende på paletten SVG Interactivity för textobjektet
Spara den skapade överrullningen som en SVG-fil med kommandot Arkiv=>Spara som (Fil=>Filtyp SVG-format, och ställ sedan in alternativen för att spara SVG-filen som visas i Fig. 52. Efter att du har sparat får du bara en enda fil med tillägget SVG, och inte två, som i fallet med en klassisk rollover, i det här fallet mottogs filen Primer5.svg (Primer5 folder) Men för att rollover verkligen ska fungera måste du dessutom kopiera Events.js-filen från beskrivning av JavaScript-procedurer. Efter detta kan du kontrollera funktionaliteten för rollover - resultatet kommer att se ut som visas i Fig. 53.
SVG-formatet kan också användas för att förmedla animation. Låt oss försöka skapa ett enkelt animerat element (i det här fallet kommer det att vara information om företaget), som visas på skärmen när du håller musen över motsvarande grafiska objekt och försvinner när du tar bort musen från det interaktiva elementet.
Låt oss skapa ungefär följande serie av grafik- och textobjekt, som visas i fig. 54. Låt oss byta namn på alla skapade objekt på ett bekvämt sätt genom att sekventiellt klicka på namnet på nästa objekt i lagerpaletten och önskat namn(Fig. 55). Observera att de markerade i fig. 56 objekt Text1, Text2, Text3 och Path1 kommer alltid att vara synliga, och alla andra endast när du håller musen över Text1-objektet.
Ris. 54. Originalvy av bilden
Inkludera Events.js-filen som beskriver JavaScript-procedurerna genom att använda kommandot JavaScript Files från SVG Interactivity-paletten, klicka på knappen Lägg till, peka på önskad fil på din hårddisk och klicka på knappen Klar.
Definiera ett svar på mushändelser för Text1-objektet. Välj Text-objektet, i fältet Händelse i paletten SVG Interactivity, välj onmouseover-händelsen och skriv in texten elemShow(evt, "Text4" på raden nedan); elemShow(evt, "Path2") . Som ett resultat, när musen är över Text1-objektet, kommer Text4- och Path2-objekten att bli synliga. Observera att om flera åtgärder måste utföras när en händelse inträffar, måste de specificeras med ";"-tecknet. Utför sedan en liknande operation för onmouseout-händelsen och skriv in texten för den, vilket kommer att innebära att objekt gömmer sig (fig. 57).
Spara resultatet som en SVG-fil med kommandot File=>Save as, specificera filnamnet, välj SVG-format i fältet Filtyp och ställ sedan in alternativen för att spara SVG-filen i enlighet med Fig. 58. Efter att ha sparats kommer filen Primer6.svg att tas emot (mappen Primer6). Glöm inte att kopiera Events.js-filen till mappen med den här filen. Om du efter detta kör coz den här filen, då kommer du att se resultatet som visas i fig. 59. Det här är nästan vad du behöver. Det enda som inte ingick i våra planer var det första utseendet av Text 4 och Path 2-objekt vid laddning. För att bli av med denna brist, välj båda objektdata samtidigt och skapa en åtgärd för dem elemHide(evt, "Text4"); elemHide(evt, "Path2") vid onload-händelsen (Fig. 60). Spara filen igen och se till att Text4- och Path2-objekten nu bara är synliga när du håller muspekaren över Text1-objektet.
Alla webbsidor är otänkbara utan webbanimering, inklusive animerade gifs. Ett av alternativen för att skapa dem är att använda applikationen Adobe ImageReady, som bland annat gör det möjligt att skapa animationer från lager. I det här fallet kan själva flerskiktsbilden förberedas i olika applikationer, inklusive Adobe Illustrator.
Det är mycket enkelt att skapa en animation baserad på element från symbolpaletten, som öppnas med kommandot Window=>Symbols, eller från ett av symbolbiblioteken som kan öppnas med kommandot Window=>Symbol Libraries. ).
Till exempel kommer vi att försöka öka storleken på ett symbolobjekt; nyckelstadierna i processen att öka objektet måste ställas in på separata lager. Först placerar du helt enkelt symbolobjekten ovanför varandra och ökar sedan storleken på varje efterföljande objekt, till exempel som visas i Fig. 61. Som ett resultat kommer ett lager med många objekt att skapas i paletten Lager (Fig. 62). Om du direkt exporterar den här bilden till PSD-format kommer det inte att ge något, eftersom det bara finns ett lager, och naturligtvis, när du öppnar PSD-filen i programmet ImageReady, kommer det också att finnas bara ett lager. Därför måste du först placera objekt på olika lager. Detta kan göras olika sätt Det enklaste sättet är att först välja Lager 1 i lagerpaletten och använda kommandot Släpp till lager. Resultatet blir att vart och ett av objekten flyttas till sitt eget lager, men de kommer alla att kapslas i lager 1. Därför måste du manuellt dra alla kapslade lager till toppen av lagerpaletten så att de ligger ovanför lager 1-lagret och sedan helt enkelt ta bort det nu tomma lager 1-lagret (Fig. 63). Exportera bilden till PSD-format med kommandot File=>Export med inställningar som i Fig. 64.
Ladda den skapade PSD-filen i programmet ImageReady (fig. 65 och 66). Öppna palettmenyn Animation Make Frames From Layers. Som ett resultat kommer fem ramar att skapas, som var och en kommer att motsvara sitt eget lager, och fönstret Animation palett kommer att se ut som i fig. 67.
Efter detta, ställ in varaktigheten för var och en av de skapade ramarna i det här fallet, varaktigheten för alla ramar är inställd på 0,2 s. Och spara sedan animationen med optimering med kommandot Arkiv=>Spara optimerad (Arkiv=>Spara med optimering). Det resulterande resultatet kan likna fig. 68.
Det är ännu bekvämare att skaffa tomrum som sedan enkelt kan konverteras till animationer i ImageReady för att använda Live Blends-funktionerna i Illustrator. Denna kombinerade användning av Illustrator och ImageReady påskyndar avsevärt processen att skapa GIF-animationer.
Rita till exempel två godtyckliga flerfärgade objekt och anslut dem sedan med en blandningslänk med lämpliga parametrar (fig. 69). Det är omöjligt att använda den här filen direkt för att skapa animationer, eftersom bilden är på ett enda lager (fig. 70). Därför måste du först placera varje element i blandningsobjektet på ett separat lager. För att göra detta, välj linjen i fönstret Lager, aktivera palettmenyn genom att klicka på den svarta pilen i dess övre högra hörn och välj kommandot Frigör till lagersekvens (Fig. 71). Håll ned Skift-tangenten, markera de skapade lagren och placera dem ovanför Layer 1-lagret och ta sedan bort själva Layer 1-lagret, flytta det till papperskorgen som ett resultat, lagerpaletten kommer att ha samma form som i Fig. 72.
Ris. 70. Initialtillstånd Lagerfönster
Exportera den skapade filen till PSD-format med kommandot File=>Export. Öppna den skapade PSD-filen i programmet ImageReady (fig. 73). Observera att alla lager som skapats i Illustrator kommer att visas i lagerfönstret (fig. 74), och i animeringsfönstret kommer det bara att finnas en ram för tillfället.
Aktivera paletten Animation genom att klicka på den svarta pilen i palettens övre högra hörn och välj kommandot Make Frames From Layers. Som ett resultat kommer fem ramar att skapas i det här exemplet och fönstret Animation palett tar form i enlighet med fig. 75. Välj alla bildrutor samtidigt som du håller ned Skift-tangenten och ställ in lämplig bildrutelängd i detta exempel, samma tid på 0,2 s tas för varje bildruta. Spara sedan filen med optimering med kommandot File=>Save Optimized (File=>Save with optimization), ställ in alternativet Images Only (*.gif) i listan Filtyp. Animationen kommer att likna fig. 76.
Det som ser mycket mer intressant ut är inte rörelsen, utan den smidiga storleksändringen av blandningsobjekt. Du kan till exempel använda den redan skapade blandningsövergången. I det här fallet, efter att ha skapat separata lager för varje blandningsövergångselement, placera alla objekt ovanpå varandra med hjälp av knapparna Horisontell centrera och vertikal centrera på paletten Justera (Fig. 77) .
Exportera den skapade filen till PSD-format (Fil=>Exportera fil=>Exportera) och öppna den skapade PSD-filen i programmet ImageReady (Fig. 78). Skapa animationsramar baserade på lager (Gör ramar från lager Skapa ramar från lager) och välj en lämplig varaktighet för dem (bild 79). Och sedan, för att göra animeringen mer effektiv, kopiera de befintliga ramarna, men i omvänd ordning så att bilden först ökar och sedan minskar, och så vidare i en cirkel (fig. 80). Spara sedan optimeringsfilen (Arkiv=>Spara optimerad fil=>Spara med optimering). Den resulterande animationen visas i fig. 81.
Ris. 80. Tillstånd för animeringsfönstret efter duplicering av ramar
Ris. 81. Färdig animation
En transparent GIF i Adobe Illustrator görs enligt följande. Gå till menyn Arkiv > Spara för webb och enheter (Alt+Ctrl+Skift+S). I fönstret som öppnas, i fältet Optimerat filformat, måste du först gå till fliken Bildstorlek. Faktum är att hela sidan som standard ingår i optimeringsfönstret, och detta är vanligtvis inte nödvändigt. Avmarkera därför kryssrutan Clip to Artboard på fliken Bildstorlek och klicka på knappen Använd.
Välj sedan GIF från formatvalslistan och markera kryssrutan Transparens.
Efter detta kommer vi att bestämma vilka färger som ska vara transparenta. Alla färger som finns i bilden finns på fliken Färgtabell och visas som färgade rutor. Välj pipettverktyget från verktygsfältet till vänster i fönstret.
Det finns två sätt att definiera färger. Det enklaste sättet är att ange en färg med en pipett direkt på bilden - efter detta kommer färgen att markeras på färgtabellen med ett mörkt streck. Tja, om du vet exakt vilken färg som ska vara transparent kan du välja den direkt på färgtabellen genom att klicka på motsvarande färgade kvadrat. I både det första och andra fallet, om du behöver välja flera färger, måste du arbeta med Shift (eller Ctrl) nedtryckt. När du har valt en färg måste du instruera programmet att göra det transparent. För att göra detta, klicka på ikonen Maps valda färger till Transparent. På bilden är denna knapp inringad och den röda färgen är inställd på transparent. Ett genomskinligt område kommer att visas i bilden, och kvadraten på färgbordet kommer att ändra sitt utseende - en del av det kommer att bli en vit triangel. För att avbryta den valda färgen måste du välja den i färgtabellen och sedan klicka på ikonen Maps valda färger till Transparent igen.
Några ord om metoden att ställa in transparens. Den ansvarar för rullgardinsmenyn Specificera Transparency Dither Algorithm, på ryska - Algoritm för simulering av transparens (Fig. nedan). Det finns fyra alternativ: Ingen transparensdiher, Diffusion Transparency Dither, Pattern Transparency Dither och Noise Transparency Dither. I läget för diffus algoritm blir skjutreglaget Mängd aktivt, så att du kan ändra spridningsvärdet. Vad ska man tillämpa i praktiken? Beroende på syfte och bild. Jag använder inte det här alternativet och lämnar det alltid som standard - No Transparency Dither.
Klicka på Spara - den genomskinliga GIF-filen är klar. Arbetet utfördes i Adobe Illustrator version CS4 (v.14), men alla åtgärder och kortkommandon är också relevanta för den tidigare versionen CS3 (v. 13).
Importera och enkel animation Hallå. Idag tittar vi på enkel animation i After Effects.
Resurser: Adobe Illustrator CC
Adobe After Effects CC
Låt oss börja lära oss genom att rita i Illustrator.
Låt oss rita
1) Rita en gul rektangel som bakgrund
Figur 1 - Rektangel
2) Rita en cirkel och fyll den med en gradient
Låt oss arbeta lite med cirkeln:
- ta bort bottenpunkten på konturen, vi får en båge;
- rita en rak linje, stänger botten av bågen, vi får en halvcirkel
Figur 2 - 1) rita cirkel; 2) gradient; 3) ta bort punkt
3) Rita en rektangel och gör en kopia av den
- en grå rektangel;
- en annan rektangel är mörkgrå
4) Rita en triangel från en asterisk genom att ställa in antalet strålar till 3
Figur 3 - 1) rikt ljus; 2) rect mörk; 3) triangel
5) Rita en katt med penna och enkla former 
Figur 4 - 1) huvud; 2) hals; 3) kropp; 4) ben; 5) svans
Och nu det viktigaste ögonblicket
Låt oss fördela bilderna i lager (det som kommer att animeras är på ett separat lager) så här: 
Figur 5 - alla bilder (röd markering på viktiga lager)
Det är det, nu ska vi spara.
Låt oss titta på sparinställningarna
Bild 6 - Spara
Och nu nästa steg. Stäng Adobe Illustrator och öppna After Effects.
Importera till After Effects
Arkiv - Importera - Arkiv - välj vår sparade Illustrator-fil.
Låt oss välja att importera lager från Illustrator, om vi lägger in film får vi en bild med sammanslagna lager, men det behöver vi inte.
Figur 7 - Importera som komposition
Det är allt, importerat.
Nu ska vi se vad vi har. Dubbelklicka på kompositionen så att den öppnas och vi ser lagren (om allt är gjort korrekt kommer det att finnas flera lager). Vi förstår detta, se figur
Figur 8 - Öppna komposition
Och nu är det vi är här för idag animation.
Animation i After Effects
Ställ in rotationspunkten överst på pilen med hjälp av verktyget Pan Bakom (genväg - Y). Vi tar bara en punkt och flyttar den dit det behövs. Som ett resultat kommer det att se ut så här.. 
Figur 9 - Panoreringsverktyg och lager
Det är det, låt oss nu gå vidare till lagren för animering.
Vi kommer att behöva ett Arrow and Head_cat-lager.
Låt oss börja med pilen.
Låt oss utöka listan, hitta den och klicka på klockan. Så vi satte den första punkten till noll sekund. Animationen kommer att vara i 2 sekunder totalt.
Så det här är inställningarna du behöver göra (vi sätter 3 poäng totalt):
| Andra | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figur 10 - Rotationspil
Låt oss nu animera kattens huvud.
Låt oss expandera head_cat och hitta Position .
Det kommer att finnas 4 prickar här.
Endast den sista koordinaten kommer att ändras utan att de andra påverkas.
| Andra | 0.1 | 0.17 | 1.12 | 2.0 |
| Placera | 689.3 | 729.3 | 729.3 | 689.3 |
Figur 11 - Placera huvudet
Så, animationsprincipen var så här. Pilen svänger från sida till sida, så fort den närmar sig kattungen, drar den in huvudet, dröjer sig kvar i denna position en stund och återställer den sedan till sin plats.
Sista etappen
Produktion
Du måste skapa en färdig produkt från ditt arbete.
Gå till menyn - Lägg till i renderingskö
Render-panelen öppnas och välj utdataformat i utdatamodulen (två klick). Jag tog *.mov
Figur 12 - Rendera
Klicka på RENDER-knappen och få resultatet (glöm bara inte att ange sökvägen).
Det är allt.
