Meny
Är gratis
registrering
Hem  /  Råd/ Animationslektioner i adobe animate cc. Förbereder annonsmaterial i HTML -redigerare

Animationshandledning i Adobe Animate CC. Förbereder annonsmaterial i HTML -redigerare

För människor som vill ständigt förbättra sig, lära sig något och hela tiden lära sig något nytt, har vi specialtillverkat denna kategori. Den har extremt lärorikt, användbart innehåll som du definitivt kommer att älska. Ett stort antal videor kan kanske konkurrera även med den utbildning vi får i skolan, högskolan eller universitetet. Den största skönheten med instruktionsvideor är att de försöker ge den färskaste, mest relevanta informationen. Omvärlden i teknikens era förändras ständigt, och tryckta pedagogiska publikationer har helt enkelt inte tid att tillhandahålla färsk information.


Bland videorna kan du också hitta pedagogiska videor för barn. förskoleålder... Där lär ditt barn bokstäver, siffror, räkningar, läsning etc. Håller med, ett mycket bra alternativ till tecknade serier. För grundskoleelever kan du också hitta utbildning engelska språket, hjälp med att studera skolämnen. För äldre studenter har utbildningsvideor skapats som hjälper till att förbereda sig för tester, tentor eller helt enkelt fördjupa sina kunskaper i ett visst ämne. Den förvärvade kunskapen kan kvalitativt påverka deras mentala potential och glädja dig också med utmärkta betyg.


För unga som redan har tagit gymnasiet, studerar eller inte studerar vid universitetet, finns det många spännande utbildningsvideor. De kan hjälpa dem att fördjupa sina kunskaper om yrket som de studerar för. Eller skaffa dig ett yrke, till exempel en programmerare, webbdesigner, SEO-optimerare etc. Universitet lär inte ut ett sådant yrke hittills, så du kan bli specialist på detta avancerade och relevanta område endast genom självutbildning, där vi försöker hjälpa genom att samla de mest användbara videoklippen.


För vuxna är detta ämne också relevant, eftersom det ofta händer att efter att ha arbetat i yrket i flera år kommer förståelsen att detta inte är ditt och du vill behärska något mer lämpligt för dig själv och samtidigt lönsamt. Bland denna kategori av människor finns det ofta videor av typen av självförbättring, vilket sparar tid och pengar, optimerar deras liv, där de hittar sätt att leva mycket bättre och lyckligare. För vuxna är ämnet att skapa och utveckla eget företag också mycket lämpligt.


Bland utbildningsvideorna finns det videor med ett allmänt fokus som passar för nästan alla åldrar, i dem kan du lära dig om hur livet föddes, vilka evolutionsteorier som finns, fakta från historien etc. De vidgar perfekt en persons horisonter, gör honom till en mycket mer erudit och trevlig intellektuell samtalspartner. Det är verkligen användbart att titta på sådana utbildningsvideor för alla, utan undantag, eftersom kunskap är makt. Vi önskar dig en trevlig och användbar visning!


I vår tid behöver du bara vara det som kallas "på vågen". Detta innebär inte bara nyheter, utan också utvecklingen av ditt eget sinne. Om du vill utvecklas, lära dig om världen, vara efterfrågad i samhället och vara intressant, så är detta avsnitt för dig.

Adobe Edge Animate - självstudier om hur du skapar animeringar för webbplatsen

Animering för en webbplats har länge varit ett bra och effektivt sätt att presentera nödvändig information. Håller med, det är mycket trevligare att titta på en vacker, rörlig komposition än att uppfatta en statisk, orörlig bild. Och klickfrekvensen är högre, och för designen kan den tjäna bra plus, och priserna för sådant arbete kan vara helt olika. Så fördelarna med animering är uppenbara. Det är fortfarande en bagatell att lära sig att göra just den här animationen.

Tidigare var ordet animation starkt förknippat med begreppet Flash. Ett bra format, som har gott om möjligheter, är ganska bekvämt och förståeligt att arbeta med. Men det hände bara att denna teknik inte har blivit utbredd för moderna enheter. Ja, många webbläsare stöder det, men Apple -enheter har inte nödvändig programvara ombord för att visa blixt. Tja, killarna delade inte inflytande. I så fall måste webbansvariga lära sig andra metoder för att skapa animeringar. Begreppet anpassningsförmåga är en förutsättning idag.

Så det dök upp nytt språk markup som kallas HTML5, vilket kan ge utvecklare nästan obegränsade kreativa möjligheter. Många har redan behärskat det, men som vanligt för en hel och effektivt arbete, behövs ett program som skulle implementera alla dessa möjligheter i ett bekvämt format. Detta är ett sådant program.

Adobe Edge -programmets möjligheter är ganska breda. Här kan du också skapa en banner med alla animeringseffekter. Du kan göra en vacker stänkskärm för hemsida, knappar, menyer, för en mängd olika barn- och spelresurser - det finns ett brett fält för kreativitet. Så om du gillar det eller inte, är det lämpligt att behärska programmet. Dessutom är gränssnittet ganska enkelt, förståeligt, det finns inga speciella svårigheter att behärska. Det skulle finnas en önskan.

För dem som inte är redo att omedelbart lägga ut en snygg summa för Adobe Edge -programmet kan du försöka arbeta med testversionen av programmet, som naturligtvis kan laddas ner från Adobes webbplats. Under testperioden kan du mycket väl kunna avgöra om detta program är rätt för dig. För dem som fortfarande inte har tillräckliga medel kan du enkelt hitta en delad version av detta program. Våra hantverkare arbetar snabbt, och på samma torrenter kan du alltid hitta mest ny version... Hur man agerar bestämmer alla själva.

Att behärska Adobe Edge -programmet är i princip ett ganska enkelt förfarande. Vem arbetade med Adobe Flash, lätt att räkna ut. Men i alla fall kommer enkla och tydliga lärdomar för att arbeta med detta program inte att störa. Efter lite sökning hittade jag flera av dessa videohandledning som gör att alla kan behärska detta program på kortast möjliga tid. Jag gjorde ett urval för mig själv, men som vanligt, om det är användbart för någon, blir jag bara glad.

Animationshandledning i Adobe Edge

Denna handledning visar hur du skapar ett nytt projekt i Adobe Edge Animate och sparar det på din dator. Vilka filer programmet genererar när du skapar ett nytt projekt.


På den här lektionen kommer du att bli bekant med Edge Animate -arbetsytan, bekanta dig med alla nödvändiga paneler och gränssnittsknappar.


Tittar på videon på Adobe -program Edge animera

Del ett av handledningen om hur du skapar din första animation i Adobe Edge Animate. Författaren till lektionen, Valery Medvedev, visar enkelt, begripligt och grundligt alla nödvändiga åtgärder och betydelsen av knapparna på kontrollpanelen.


Tittar på Adobe Edge Animate -videon

I den här självstudien slutar vi skapa vår första animation i Adobe Edge Animate. Resultatet är ett enkelt klipp, som ändå gör det möjligt att bekanta sig med de första nödvändiga teknikerna för att skapa animeringar.


Tittar på Adobe Edge Animate -videon

I den här videon lär vi oss att se en animering som skapats med Edge Animate i en webbläsare. Lite information om HTML5.


Tittar på Adobe Edge Animate -videon

Ett intressant exempel på animering när en raket tar fart vid ett visst motvärde.

Klar att använda utlösarkod:

timerCount = 5; sym. $ ("counter_txt"). html (timerCount); tCounter = setInterval (timer, 1000); funktionstimer () (timerCount - = 1; if (timerCount< 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }

timerCount = 5;

tCounter = setInterval (timer, 1000);

funktionstimer ()

timerCount - = 1;

if (timerCount< 1 )

sym. play ("start");

clearInterval (tCounter);

lämna tillbaka;

sym. $ ("counter_txt"). html (timerCount);


Tittar på Adobe Edge Animate -videon

Hur man ändrar tillståndet för en knapp på musen över. Obligatorisk kod för musen lämnar:

sym.getSymbol ("goBtn"). stop ("normal");


Tittar på Adobe Edge Animate -videon

Du kan enkelt bädda in YouTube -videor i vår animation. Hur vi gör detta kommer vi att överväga i lektionen. Nödvändig inbäddningskod:

var youtube = $ ("
Tittar på Adobe Edge Animate -videon

Hur man får animationen att börja spela först när användaren rullar sidan till önskad plats. Vi gör det på exemplet med ett projekt i Adobe Muse. Ställ in startpositionen för lansering.


Tittar på Adobe Edge Animate -videon

Hur man får bilden att rotera 180 grader runt den vertikala axeln på muspekaren.

Du kan ladda ner nödvändiga filer och koder.


Tittar på Adobe Edge Animate -videon

Vi skapar en intressant effekt när varje element rör sig oberoende när musen flyttas längs rullen.


Tittar på Adobe Edge Animate -videon

Hur man får den nödvändiga logotypen att rotera runt sin axel. Tyvärr går det inte att klicka på logotypen.


Tittar på Adobe Edge Animate -videon

Hur man lägger till ljud när man klickar på en knapp.


Tittar på Adobe Edge Animate -videon

Som du kan se finns det inget komplicerat, allt är enkelt, begripligt, så att säga, intuitivt. Men du kan lägga till spektakulära och färgglada element till dina webbplatser, allt beror på din fantasi. Och med kunderna kan du diskutera alternativ för ytterligare betalning för sådana moderna element.

Lycka till och kreativ framgång till alla!

För att förbereda HTML -annonsmaterial för placering i ADFOX är det viktigt att följa kraven för att sätta in koden som bearbetar klicket på bannern och räknar händelserna i bannern.
När du utvecklar HTML -kod kan du använda de redaktörer för vilka denna instruktion är skriven:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

HTML -kodkrav (för kodutvecklare)

Förbered ditt projekt med följande krav:

1. Det maximala antalet tecken i HTML -koden är 65 000;
2. JavaScript och CSS är att föredra att placera inuti bannerens HTML -kod;
Om den slutliga HTML -koden överskrider det maximala antalet tecken måste du minska koden genom att placera JavaScript och CSS i separata filer:
- spara js och css -kod i separata filer med tillägget .js eller .css;
3. Det kan bara finnas en .html -fil i ett projekt;
4. Det maximala antalet filer i ett projekt är 50;
5. Tillåtna filtyper i projektet: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx , eot, fnt, fon, mf, ttc, woff;
6. Maximal storlek varje fil (gäller även för filer i arkivet):
- 300Kb;
- 1 MB för videofiler.
7. Filnamn bör endast innehålla siffror eller bokstäver i det engelska alfabetet, understrykningstecknet. Det är inte tillåtet att använda ryska bokstäver, mellanslag, citattecken och specialtecken i filnamnet;
8. Ryska bokstäver kan inte användas i namnen på variabler och objekt.
Det enda undantaget är texten på bannern.
9. Formatet för det färdiga projektet - blixtlås arkiv.

Adobe animera cc

1. Förbereder redaktören.

För att skapa ett nytt projekt i AdobeAnimate CC, välj projektet "HTML5 Canvas".

Koden för den här mallen kan användas som grund för att skapa annonsmaterial i redigeraren.

Om du vill tillämpa mallen på projektet i publiceringsinställningarna väljer du "Avancerade publiceringsinställningar -> Importera nytt ...".

Mallen innehåller skript adfox_HTML5.js

3. Klickahantering

Om ditt annonsmaterial har en looping -animering kan du bara använda koder för knappar från avsnittet.

3.1 För att göra hela bannerområdet klickbart och ha en länk att navigera, lägg till följande kod i animeringens första ram:

Canvas.style.cursor = "pekare"; canvas.addEventListener ("klick", funktion () (window.callClick ();));

3.2 För att lägga till flera knappar för att navigera med olika länkar, lägg sedan till huvudknappen för att klicka på bannern i det övre animationsskiktet, tilldela knappen ett instansnamn och skriv koden på knappen:

This.btnMain.addEventListener ("klick", funktion (e) (var t = e.nativeEvent; if (t.which == 1 || t.button == 0) (window.callClick (););)) ;

Lägg till resten av knapparna när du klickar på vilken användaren överförs till olika sidor på den annonserade webbplatsen.
Placera några knappar i det översta lagret ovanför vissa delar av animationen, ge knapparna Instansnamn och skriv kod för varje knapp:

This.btnLeft.addEventListener ("klick", funktion (e) (var t = e.nativeEvent; if (t.which == 1 || t.button == 0) (window.callClick (n););) );

var n

3.3

This.btnText.addEventListener ("mouseover", function () (window.callEvent (n);));

var mus över- javascript -händelse, n- antalet händelser från 1 till 30 som ska utlösas.

Funktion för att skapa looping -animering

Så här implementerar du looping -animationer i ditt annonsmaterial i Animate CC -redigeraren:
- ställ in alternativet "Loop Timeline" i publiceringsinställningarna;
- använd koder för knappar från detta avsnitt, och koder för vanliga knappar från punkterna 3.1 och 3.2 måste tas bort.

Kreativ kod med en knapp och looping -animering:

If (typeof (this.stopCycle) == "undefined") (this.btnMain.addEventListener ("click", function (e) (var t = e.nativeEvent; if (t.which == 1 || t.knapp) == 0) (window.callClick (););)); this.stopCycle = true;)

Om det finns flera knappar lägger du till koden i koden för att ringa till ADFOX -händelserna:

If (typeof (this.stopCycle) == "undefined") (this.btnMain.addEventListener ("click", function (e) (var t = e.nativeEvent; if (t.which == 1 || t.knapp) == 0) (window.callClick (););)); this.btnLeft.addEventListener ("klick", funktion (e) (var t = e.nativeEvent; if (t.som == 1 || t. knapp == 0) (window.callClick (n););)); this.stopCycle = true;)

var n- antalet händelser från 1 till 30 som ska utlösas.

Använda genomskinliga knappar

Transparenta knappar kan till exempel användas om du vill göra hela bannerområdet klickbart eller bara en del av det. För dem, liksom för vanliga knappar, måste en kod för att ringa en övergång eller händelse läggas till.

Knappar i Animate är symboler som innehåller fyra ramar. Du kan lämna de tre första tomma och bara fylla den sista "Hit" genom att lägga till innehåll (grafiskt objekt) till den via Infoga> Tidslinje> Nyckelram (Infoga> Tidslinje> Nyckelram).

Innehållet i "Klicka" -ramen (träff) är osynlig och det definierar området på knappen som svarar på klicket. Du kan lägga till innehåll (grafiskt element) till den här ramen genom Infoga> Tidslinje> Nyckelram (Infoga> Tidslinje> Nyckelram). Om resten av ramarna förblir tomma eller osynliga, trycker du på knappen arbetsyta ser genomskinlig blå ut och har formen av innehållet i nästa i "Hit" -ramen. När du publicerar projektet kommer det transparenta blå området inte att synas.

Det säregna med genomförandet av en töjningsbanner (gummi)

För att få bannern att sträcka sig över bredden på behållaren där den kommer att finnas på webbplatsen, gör inställningarna: Välj Arkiv> Publicera inställningar.
På fliken Grundläggande, Välj Gör responsiv> Bredd, höjd eller båda.
Vänligen välj Skala för att fylla synligt område för att visa utmatningen i helskärmsläge.
Om du väljer "Passa in i vyn" skalas innehållet så att det fyller allt tillgängligt skärmutrymme samtidigt som bildförhållandet bibehålls. Så om Maximal bredd redan har uppnåtts kan det finnas ett tomt område längs skärmens höjd och vice versa.

Om du inte kan uppnå önskat resultat med hjälp av programinställningarna använder du skript.
Här är några exempel på koder:
Ladda ner koden för skalning för att respektera bildförhållandet.
Ladda ner koden för skalning utan hänsyn till bildförhållandet.
Ladda ner koden för positioneringselement, var en0..an4är Instansnamnet på elementen.

Funktion för att skapa en banner med automatisk expansion

Om du vill visa en banner från det utökade läget, och när du lägger till en banner i gränssnittet, anger du ja i parametern "Automatisk expansion alltid" eller "Expandera vid initialisering" och lägger till koden i HTML -annonsmaterialet:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = false; if (window.isBannerExpanded) (window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false. .btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true;) window.global_main_banner.btnExpand.addEventListener ("klick")); window.global_exp_banner.btnCollapse.addEventListener ("klicka", collapsBanner.bind (detta)); window.onBannerExpand = function () (window.callEvent (2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.;) fönster .onBannerCollapse = function () (window.callEvent (3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpible = true;)

5. Publicerar projektet.

Viktig! När du förhandsgranskar ett projekt i en webbläsare via (Ctrl-Enter | Cmd-Enter) länkar i namnen på filer i HTML läggs till med slumpmässiga värden på formuläret ?1468231208369 ... Sådana värden bör uteslutas från projektet när det laddas in i ADFOX.
För detta, sista projektet i redaktören måste publiceras via Arkiv> Publiceringsinställningar> Publicera (Shift-Ctrl-F12 | Shift-Cmd-F12).

Välj en mall när du publicerar ett projekt AdobeAnimate_Adfox_.html.

.blixtlås

Google Web Designer

Koden för denna banner kan användas som grund för att skapa annonsmaterial i redigeraren.

Mallen innehåller skript adfox_HTML5.js och en uppsättning parametrar för korrekt drift av övergångar och räknehändelser:
% referens%,% användare1%,% händelseN%, där N är händelsens nummer från 1 till 30.

2. Klickahantering.

Alla händelser tilldelas specifika animeringselement via fliken Händelser.


Komponenten Kranområde används för att åkalla åtgärder.
Lägg till den och välj en händelse Knackningsområde - Tryck / klicka(eller "Tap Area> Touch / Click" i den engelska versionen).


På fliken "Native Code" anger du samtalet till klickfunktionen.

2.1

CallClick ();

2.2

CallClick (n);

var n

2.3 Om du behöver utlösa en händelse från en animering utan en övergång, använd följande kod:

CallEvent (n);

var n- numret på händelsen som ska utlösas.



För att få bannern att sträcka sig över bredden på behållaren där den kommer att finnas på platsen, på panelen Egenskaper för position och storlek, ange procentsatser istället för pixlar.

Använd även alternativ "Justera till behållaren" och "Gummilayout" i det övre verktygsfältet.
Om du aktiverar "Vätskelayout" innan du använder några justeringsverktyg, kommer alla element att justeras i förhållande till varandra och i förhållande till behållarens dimensioner när den överordnade behållaren ändras.
I det här fallet kan du samtidigt använda både elementens relativa storlekar i procent och absolut - i pixlar.

4. Publicerar projektet.

När du lägger till en banner i ADFOX måste chefen känna till korrespondensen mellan knappar och evenemangsnummer. För varje händelse kommer chefen att föreskriva sin egen länk för övergången, som sedan överförs till bannerkoden med en variabel.

Efter att ha publicerat projektet, zip det i formatet .blixtlås... Annonsmaterialet är klart att överföras till ADFOX -bannern.

Adobe edge animera cc

För att komma igång, kör filen med tillägget .ett från arkivet.

2. Klickahantering.

Alla händelser tilldelas specifika animeringselement via fliken "Kod".

För att navigera genom det valda elementet måste du välja en händelse klick och registrera ett samtal till klickfunktionen.

Knapparna måste tilldelas ett instansnamn, till exempel: btnMain, btnRight.

2.1 Om du använder en enda hoppknapp:

CallClick ();

2.2 Om det finns flera navigeringsknappar:

CallClick (n);

var n- numret på händelsen som ska utlösas.

2.3 Om du behöver utlösa en händelse från en animering utan en övergång, använd följande kod:

CallEvent (n);

var n- numret på händelsen som ska utlösas.

Det säregna med genomförandet av en töjningsbanner (gummi).

För att bannern ska sträcka sig över bredden på behållaren där den kommer att finnas på webbplatsen, när du förbereder bannern i redigeraren på panelen Egenskaper, anger du procentsatser istället för pixlar för position och dimensioner.

Det finns också knappar för skalstorlek och skalposition för objekt i panelen Position och storlek.


4. Publicerar projektet.

Projektet bör publiceras med följande inställningar:

Efter att ha publicerat projektet, zip det i formatet .blixtlås... Annonsmaterialet är klart att överföras till ADFOX -bannern.

Låt oss skapa ny fil, låt oss göra det 800x600 och överföra några filer till det, nämligen dessa få bilder och "skogsljud mp3", det vill säga ljud. Jag överför det här. Det vi har i slutändan är en sådan bild - det här är en skog, det kallas "bg", "play" och "pause", det här är knappar. Jag ska flytta ner dem nu, flytta dem, ungefär så här - det enklaste alternativet.

Jag ska nu starta animationen, tryck på cntr + enter, det finns bara en skog och bara två knappar, ingenting fungerar. Om jag vill få ett ljud att spela upp automatiskt för mig, kallas det "skogsbrus", då måste jag välja det här lagret och sedan välja "auto play", nu när jag trycker på cntr + enter kommer jag att spela ljudet. Underbar.

Så här lägger du till en klickbar länk till en film på Adobe Edge Animate.

Om vi ​​bara ritade någon form av knapp och det finns någon form av bakgrund, så om vi klickar på den kommer det inte att finnas någon övergång någonstans. Tillägga interaktiv länk vi måste markera den här knappen, högerklicka på den öppna åtgärden, foul-knappen, det är vad jag kallar den, och tryck på klick, det vill säga vad som kommer att göras när du klickar. Och här måste vi välja Open you are raol.

Jag kommer att visa i den här videon hur man gör detta, det är inget komplicerat, men du måste förstå rätt var du ska kopiera rätt kod och var den ska sättas in.

Låt oss säga att du har video gjord i adobe edge anim, när du klickar på den, önskas landningssida, det är i kantanimatformat och sparat i käll- och Java -skriptmappen. Vi öppnar det i alla textredigerare, du kan använda alla testredigerare, till exempel: anteckningsblock, etc.

Hur man slingar en animation i Adobe Edge Animate, det vill säga hur man gör det så att när det spelar till slutet börjar det om igen och är oändligt.

Här kan du kopiera nyckelbilder, det vill säga jag väljer en bildruta, trycker på cntr + c, klickar på önskat fält, trycker på cntr + v, animationen kommer att loopas, det vill säga inte i loop, men i det här fallet, gå från startpunkten tillbaka till startpunkten. Om jag kör den här videon, tryck på cntr + enter, då ser vi att animationen bara varar 1 sekund, den går till ena sidan och återgår till den andra.

Jag kommer att visa i den här videon hur man gör detta, det är inget komplicerat, men du måste förstå rätt var du behöver kopiera rätt kod och var du måste klistra in den.

Låt oss säga att du har en banner tillverkad i adobe edge anim, när du klickar på den öppnas önskad målsida, den är i kantanimatformatet och sparas i mappen med källan och Java -skript. Vi öppnar den i valfri textredigerare, du kan använda alla testredigerare, till exempel: anteckningsblock etc.

Därefter vill jag infoga denna banner på webbplatsen. Vad borde göras? Du måste ladda ner indexfilen, öppna den också i en textredigerare, kopiera adobe -kantkoden och lägg till koden här före "head", sedan innan rubriken till den plats där vi ska lägga till vår banner, innan div. För en mer exakt implementering finns en instruktion som hjälper dig: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Sedan sparar vi och går till FTP -tjänsten, jag har filezilla, hittar lagringsplatsen för din webbplats och kopierar indexmappen till din fil som ligger på servern och ersätter aktuella filer... Därefter laddar vi alla Java -skript och uppdaterar webbplatsen. Allt är klart - animationen fungerar och fliken målsida öppnas också.

Om du är intresserad av sådana lektioner, prenumerera på min kanal, för det kommer många nya videor inom en snar framtid - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 - låt oss säga att du har en banner tillverkad i Adobe Edge Animation

01:30 - lägg till en banner på webbplatsen

02:09 - lägg till koden före "head" -taggen

02:50 - instruktioner för att lägga till en banner på webbplatsen

03:31 - ladda upp filer till servern

05:29 - vi uppdaterar sajten och du är klar!

Gå med och ställ frågor:

Ladda ner tre gratis mall Musa: http: //site/free-landing.html

http://vk.com/adobeedgeanimate

Jag är på VK: http://vk.com/danilfimushkin

På webinaret berättade jag och visade hur en fullfjädrad animerad banner kan göras av en vektorillustration.

00:17 - börja animera vektorillustration i Edge Animate
14:06 - skapa rörelse med karaktärernas tassar
16:54 - fördelarna med en kapslad karaktär
17:48 - vad är en kapslad symbol
18:24 - föreskriver en loopad animation
19:42 - loop -animation klar
23:40 - skapa ögon som blinkar
26:54 - bestäm filnamnen när du sparar
27:57 - animering av "rullgardinsmenyn"
28:39 - bifoga rörelsekurva - ändra animationsaxel
30:03 - animation mellanliggande, skapa ett snöigt landskap och animera en snöflinga
33:39 - översikt Edge -program Animera
34:52 - läxor
35:25 - hur man lägger till en aktiv länk
39:09 - skapa flera knappar och koppla länkar

Gå med och ställ frågor: http://vk.com/adobeedgeanimate

Om du lägger till ett andra tecken eller en textruta i tween -intervallet ersätter det ursprungliga tecknet i tween. Du kan ändra målet för en rörelsemellanordning på något av följande sätt:

  • dra en annan symbol från biblioteket till animationsområdet på tidslinjen;
  • använd kommando Ändra> Symbol> Ersätt symbol.

Du kan ta bort en symbol från ett animationslager utan att ta bort eller dela själva animationen. Senare i animationen kan du lägga till en annan instans av symbolen. Du kan också ändra symbolen eller dess typ när som helst.

se även

Rörelse mellan komponenter

  • Det är en sekvens av ramar på tidslinjen där en eller flera egenskaper för ett objekt på tidslinjen ändras över tid.
  • Tween -intervallet visas på tidslinjen som en grupp ramar på samma lager som bakgrundsfärgen.
  • Dessa animationsintervall kan väljas som ett enda objekt, dras från en plats på tidslinjen till en annan eller till och med till ett annat lager.
  • Endast ett objekt på scenen kan animeras i varje animationsintervall. Detta objekt kallas målet för animationsområdet.
  • det är en ram i ett interpensintervall där ett eller flera fastighetsvärden uttryckligen definieras för mål -tween -objektet.
  • Dessa egenskaper kan inkludera alfaposition (transparens), färgtoner och så vidare.
  • En separat egenskapens nyckelbild skapas för varje definierad egenskap.
  • Om mer än en egenskap är inställd i en ram kommer nyckelramar för var och en av dessa egenskaper att placeras i den ramen.
  • Använd Motion Editor för att visa varje egenskap för tween -intervallet och dess egenskapens nyckelrutor.
  • För att välja vilka typer av egendomsnyckelramar som ska visas på tidslinjen, från innehållsmeny animationsspann, högerklicka på en egenskapens nyckelram och välj Visa nyckelramar.

Animationsmål

En tween har ett objekt i tween -intervallet, kallat dess target. Det finns flera fördelar med att använda ett enda mål för animering:

  • Animationen kan sparas som för återanvändning.
  • Du kan enkelt flytta tweens på tidslinjen (dra mellanrummet till en annan plats) eller på scenen.
  • Följ dessa steg om du vill tillämpa en ny instans på en befintlig rörelse -tween:
    • sätt in den i animering för ersättning;
    • dra en ny instans från biblioteket;
    • använd kommandot Ersätt symbol.

Objekt och egenskaper som kan tweenas

De typer av objekt som du kan använda rörelse -tweens på inkluderar filmklipp, grafik, knappsymboler och textrutor. Dessa objekt kan ha följande egenskaper:

  • Placera längs X- och Y -axlarna på planet

    Z-axelposition i 3D (endast filmklipp)

    Rotation på ett plan (runt z-axeln)

    Rotera runt X-, Y- och Z -axlarna i 3D (endast filmklipp): Anger att FLA -filen är för ActionScript 3.0 och Flash spelare 10 eller senare i publiceringsalternativ. Adobe AIR stöder också 3D -rörelse.

    X och Y lutar

    Skala X och Y

    Färgeffekter: Inkluderar alfa (transparens), ljusstyrka, nyans och avancerade alternativ för färger. Färgeffekter kan bara animeras för TLF -symboler och text. Genom att animera dessa egenskaper kan du uppnå smidigt utseende eller ändra färg på ett objekt. Om du vill skapa en tweened färgeffekt för klassisk text konverterar du texten till en symbol.

    Filteregenskaper (filter kan inte tillämpas på grafiska symboler)

Skapa rörelse tweens

Du kan skapa rörelse -tweens på ett av tre sätt:

  • Skapa grafiskt objekt eller instansen du vill animera, högerklicka på ramen och välj Skapa rörelse -tween.
  • Välj den grafik eller instans du vill animera, högerklicka på ramen och välj Infoga> Tween Tween.
  • Skapa en grafik eller instans som du vill animera och högerklicka på instansen i arbetsyta och välj Skapa rörelse -tween.

Skapa rörelse tweens


Animera andra fastigheter med fastighetsinspektören

Använd kommandot Skapa rörelse -tween för att animera de flesta egenskaperna hos en instans av en symbol eller textruta. Dessa egenskaper inkluderar till exempel rotation, skalning, transparens eller nyans (endast för symboler och TLF -text). Du kan till exempel ändra egenskapen alfa -transparens för en symbolinstans så att den visas smidigt på skärmen. En lista över egenskaper som rörelse -tweens kan tillämpas på finns i Animerade objekt och egenskaper.

    Markera en symbolinstans eller textruta i arbetsyta.

    Om urvalet innehåller andra objekt eller innehåller flera objekt från lagret uppmanar Animate dig att konvertera det till en filmklippsymbol.

    Vänligen välj Föra in > Rörelse animation.

    Om en dialogruta visas Konvertera markering till symbol för animering, klicka på OK för att konvertera markeringen till en filmklippsymbol.

    När en interpolering appliceras på ett objekt som bara finns i en ram, flyttas spelhuvudet till den sista ramen för den nya interpolen. Annars rör sig inte spelhuvudet.

    Placera spelhuvudet i ramen för det animationsintervall som du vill ange ett fastighetsvärde för.

    Spelhuvudet kan placeras var som helst i animationsområdet. En tween börjar med egenskapens värden i den första ramen i tween -intervallet, vilket alltid är nyckelbild egenskaper.