Hozzunk létre egy új fájlt, tegyük 800x600-as méretre, és vigyünk bele néhány fájlt, mégpedig ezt a néhány képet és az „mp3 erdőzajt”, vagyis a hangot. ide költöztetem. Ennek eredményeként egy ilyen képünk van - ez egy erdő, "bg", "play" és "pause" néven szerepel, ezek a gombok. Most lejjebb helyezem őket, mozgatom őket, így – a legegyszerűbb lehetőség.
Most elindítom az animációt, nyomd meg a cntr + entert, csak egy erdő és csak két gomb, semmi sem működik. Ha azt akarom, hogy egy hang automatikusan lejátsszon nekem, akkor azt "erdőzaj"-nak hívják, akkor ki kell választanom ezt a réteget, és itt az "auto play"-t kell kiválasztanom, most ha megnyomom a cntr + entert, akkor egy hangot fogok lejátszani. Elképesztő.
Ha csak rajzoltunk valami gombot és van valami háttér, akkor ha rákattintunk, akkor nem lesz átmenet. Hozzáadni kattintható link ki kell választanunk ezt a gombot, jobb gombbal kattintani nyitott művelet, rossz gomb, nekem így hívtam, és kattintás kattintás, vagyis mi történik kattintáskor. És itt ki kell választanunk az Open you are raol lehetőséget.
Ebben a videóban megmutatom, hogyan kell csinálni, semmi bonyolult, de pontosan meg kell értenie, hová kell másolnia a megfelelő kódot, és hová kell beillesztenie.
Tegyük fel, hogy van videó Adobe Edge animációval készült, rákattintva megnyílik a kívánt nyitóoldal, élanimált formátumú, és a forráskóddal és a Java scriptekkel a mappába mentve. Bármilyen szövegszerkesztőben megnyitjuk, bármilyen tesztszerkesztőt használhat, például: jegyzettömb, stb.
Itt másolhat kulcskockákat, vagyis kijelölök egy képkockát, lenyomom a cntr + c gombot, rákattintok a kívánt mezőre, a cntr + v billentyűkombinációt, az animáció hurkolt lesz, vagyis nem hurkolódik, hanem ebben az esetben a kiindulópont vissza a kiindulópontra. Ha lefuttatom ezt a videót, nyomja meg a cntr+entert, azt látjuk, hogy az animáció csak 1 másodpercig tart, az egyik irányba megy, és a másikat adja vissza.
Ebben a videóban megmutatom, hogyan kell csinálni, semmi bonyolult, de pontosan meg kell értenie, hová kell másolnia a megfelelő kódot, és hová kell beillesztenie.
Tegyük fel, hogy van egy adobe edge animációval készült bannered, amire rákattintva megnyílik a kívánt landing oldal, az edge animate formátumban van és a forráskóddal és Java scriptekkel a mappába mentve. Bármilyen szövegszerkesztőben megnyitjuk, bármilyen tesztszerkesztőt használhat, például: jegyzettömb, stb.
Ezután szeretném beilleszteni ezt a bannert az oldalra. Mit kell tenni? Le kell tölteni az index fájlt, majd meg kell nyitni egy szövegszerkesztőben, bemásolni az Adobe Edge kódot, és a végén ide kell beírni a kódot a „fej” elé, majd a hely címe elé, ahol a bannerünket feltesszük, div előtt. A pontosabb végrehajtás érdekében van egy utasítás, amely segít: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Miután elmentettük és beléptünk az FTP szolgáltatásba, megvan a filezilla, megkeresem az oldalad tárhelyét, és az index mappát a szerveren lévő fájlodba másolva, lecserélve az aktuális fájlokat. Ezután betöltjük az összes Java szkriptet, és frissítjük a webhelyet. Minden készen áll - az animáció működik, és megnyílik a nyitóoldalt tartalmazó lap is.
Ha érdekelnek az ilyen leckék, iratkozz fel a csatornámra, mert. a közeljövőben sok új videó lesz - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1
00:32 - Tegyük fel, hogy van egy szalaghirdetése, amely Adobe élen animált
01:30 - banner hozzáadása az oldalhoz
02:09 - adjon hozzá kódot a "head" címke elé
02:50 - utasítások banner hozzáadásához az oldalhoz
03:31 - Fájlok feltöltése a szerverre
05:29 - frissítjük az oldalt és kész!
Csatlakozz és tedd fel kérdéseid:
Tölts le három ingyenes Muse sablont: http://website/free-landing.html
http://vk.com/adobeedgeanimate
A vkontakte-on vagyok: http://vk.com/danilfimushkin
A webináriumon elmondtam és megmutattam, hogyan lehet vektoros illusztrációból teljes értékű animált bannert készíteni.
00:17 - kezdje el animálni a vektoros illusztrációt az Edge Animate programban
14:06 - hozzon létre egy mozgást a karakter mancsaival
16:54 - beágyazott karakter előnyei
17:48 - mi az a beágyazott szimbólum
18:24 - hurkos animáció előírása
19:42 - Elkészült a hurkos animáció
23:40 - hozzon létre villogó szemeket
26:54 - határozza meg a fájlok nevét mentéskor
27:57 - a "legördülő" szöveg animációja
28:39 - mozgásgörbe csatolása - az animáció tengelyének megváltoztatása
30:03 - animációs részösszeg, havas táj létrehozása és hópehely animálása
33:39 - Edge Animate áttekintés
34:52 - házi feladat
35:25 – hogyan adjunk hozzá aktív linket
39:09 - hozzon létre több gombot és csatoljon linkeket
Csatlakozzon és tegyen fel kérdéseket: http://vk.com/adobeedgeanimate
Adobe Edge Animate – weboldal animációs oktatóanyagok
Az oldal animációja régóta jó és hatékony módja a szükséges információk bemutatásának. Egyetértek, sokkal kellemesebb egy gyönyörű, mozgó kompozíciót nézni, mint egy statikus, mozdulatlan képet érzékelni. És az átkattintási arány magasabb, és a tervezés számára ez jó plusz lehet, és az ilyen munkák árai teljesen eltérőek lehetnek. Tehát az animáció előnyei nyilvánvalóak. Apróság marad megtanulni, hogyan kell elkészíteni ezt az animációt.
Korábban az animáció szó szorosan összekapcsolódott a Flash fogalmával. A jó formátum, amely bőséges lehetőségekkel rendelkezik, meglehetősen kényelmes és érthető a munkában. De véletlenül ez a technológia nem kapott forgalmazást a modern eszközök számára. Igen, sok böngésző támogatja, de az Apple eszközökön nincs a flash megjelenítéséhez szükséges szoftver. Nos, a srácok nem osztoztak a befolyási övezetben. És ha igen, a webmestereknek más módszereket kell megtanulniuk az animáció létrehozásához. Az alkalmazkodóképesség fogalma ma már előfeltétel.
Megjelent tehát egy új jelölőnyelv, a HTML5, amely szinte korlátlan kreativitási lehetőséget adhat a fejlesztőknek. Sokan már elsajátították, de mint általában, a teljes és hatékony munkához olyan programra van szükség, amely ezeket a funkciókat kényelmes formátumban megvalósítja. Ez egy ilyen program.
Az Adobe Edge program lehetőségei meglehetősen szélesek. Itt is létrehozhat egy bannert bármilyen animációs effektussal. Gyönyörű képernyővédőt készíthet a főoldalhoz, gombokhoz, menükhöz, különféle gyermek- és játékforrásokhoz - a kreativitás terepe a legszélesebb. Tehát akár tetszik, akár nem, kívánatos a program elsajátítása. Sőt, a felület meglehetősen egyszerű, érthető, nincs különösebb nehézség az elsajátításban. Lenne vágy.
Azok, akik nem állnak készen arra, hogy azonnal jó összeget fizessenek az Adobe Edge programért, kipróbálhatják a program próbaverzióját, amely természetesen letölthető az Adobe webhelyéről. A próbaidőszak alatt eldöntheti, hogy ez a program megfelelő-e az Ön számára. Azok számára, akik még nem rendelkeznek elegendő forrással, könnyen megtalálhatják a program megosztott verzióját. Kézműveseink gyorsan dolgoznak, és ugyanazokon a torrenteken mindig megtalálhatja a legújabb verziót. Hogy hogyan kell cselekedni, azt mindenki maga határozza meg.
Az Adobe Edge program elsajátítása elvileg meglehetősen egyszerű eljárás. Azok, akik dolgoztak Adobe Flash-el, könnyen kitalálhatják. De mindenesetre az egyszerű és érthető leckék ezzel a programmal való munkához nem zavarják. Némi keresgélés után több ilyen oktatóvideót találtam, amelyek segítségével bárki a lehető legrövidebb időn belül elsajátíthatja ezt a programot. Kiválogattam magamnak, de szokás szerint, ha valakinek hasznos, annak csak örülök.
Ez az oktatóanyag bemutatja, hogyan hozhat létre új projektet az Adobe Edge Animate programban, és hogyan mentheti el a számítógépére. Milyen fájlokat generál a program új projekt létrehozásakor.
Ebben az oktatóanyagban megismerheti az Edge Animate munkaterületét, megismerheti az összes szükséges panelt és kezelőfelület gombját.
Nézzen meg egy videót az Adobe Edge Animate-ről
Az oktatóanyag első része az első animáció létrehozásáról az Adobe Edge Animate programban. A lecke szerzője, Valerij Medvegyev egyszerűen, világosan és alaposan bemutatja az összes szükséges műveletet és a vezérlőpult gombjainak jelentését.
Nézzen meg egy videót az Adobe Edge Animate-ről
Ebben az oktatóanyagban befejezzük az első animáció létrehozását az Adobe Edge Animate programban. Az eredmény egy egyszerű klip lett, amely azonban lehetővé teszi az animáció létrehozásához szükséges kezdeti technikák megismerését.
Nézzen meg egy videót az Adobe Edge Animate-ről
Ebből a videóból megtudjuk, hogyan nézhet meg egy Edge Animate-tel készített animációt webböngészőben. Egy kis információ a HTML5-ről.
Nézzen meg egy videót az Adobe Edge Animate-ről
Érdekes példa az animációra, amikor egy rakéta egy bizonyos számlálóértéken száll fel.
Kész trigger kód:
timeCount = 5; sym.$("counter_txt").html(timeCount); tSzámláló = setInterval(időzítő, 1000); function timer() ( timerCount -= 1; if (timerCount< 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }
timeCount = 5 ; tCounter = setInterval (időzítő , 1000 ) ; function timer() timerCount -= 1 ; if (timerCount< 1 ) sym. play("start"); clearInterval(tCounter) ; Visszatérés; sym. $("counter_txt") . html(timeCount); |
Nézzen meg egy videót az Adobe Edge Animate-ről
A gombok állapotának megváltoztatása az egérmutatóval. A mouseave szükséges kódja:
sym.getSymbol("goBtn").stop("normal");
Nézzen meg egy videót az Adobe Edge Animate-ről
Könnyedén beágyazhat YouTube-videókat animációinkba. Hogyan kell ezt megtenni, megvizsgáljuk a leckében. Kötelező beágyazási kód:
var youtube = $("
Nézzen meg egy videót az Adobe Edge Animate-ről
Hogyan lehet elérni, hogy az animáció csak akkor induljon el, ha a felhasználó a megfelelő helyre görgeti az oldalt. Ezt az Adobe Muse példaprojektjével végezzük. Állítsa be a kiindulási helyzetet az indításhoz.
Nézzen meg egy videót az Adobe Edge Animate-ről
Hogyan lehet a képet 180 fokkal elforgatni a függőleges tengely körül, amikor az egeret lebegteti.
Letöltheti a szükséges fájlokat és kódokat.
Nézzen meg egy videót az Adobe Edge Animate-ről
Érdekes hatást keltünk, amikor az egeret a videó fölé mozgatva az egyes elemek egymástól függetlenül mozognak.
Nézzen meg egy videót az Adobe Edge Animate-ről
Hogyan lehet a kívánt logót a tengelye körül forogni. Sajnos kiderült, hogy a logó nem kattintható.
Nézzen meg egy videót az Adobe Edge Animate-ről
Hogyan adjunk hozzá hangot a gombnyomásra.
Nézzen meg egy videót az Adobe Edge Animate-ről
Amint látja, nincs semmi bonyolult, minden egyszerű, érthető, hogy úgy mondjam, intuitív. De látványos és színes elemekkel bővítheti oldalait, minden a képzeletétől függ. Igen, és az ügyfelekkel megbeszélheti az ilyen modern elemek további fizetési lehetőségeit.
Sok sikert mindenkinek és sok sikert az alkotómunkához!
A HTML-kreatívok ADFOX-ban való elhelyezésére való felkészítéséhez fontos betartani a szalaghirdetésre leadott kattintást feldolgozó és a bannerben szereplő eseményeket számláló kód beillesztésére vonatkozó követelményeket.
A HTML kód fejlesztése során használhatja azokat a szerkesztőket, amelyekhez ez az utasítás íródott:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.
Készítse elő projektjét a következő követelményekkel:
1.
A HTML-kódban a karakterek maximális megengedett száma 65 000;
2.
A JavaScriptet és a CSS-t lehetőleg a szalaghirdetés HTML-kódjában kell elhelyezni;
Ha az eredményül kapott HTML-kód meghaladja a maximálisan megengedett karakterszámot, akkor csökkenteni kell a kódot a JavaScript és a CSS külön fájlokba helyezésével:
- mentse el a js-t és a css-kódot külön fájlokban .js vagy .css kiterjesztéssel;
3.
Egy projektben csak egy .html fájl lehet;
4.
Egy projektben legfeljebb 50 fájl megengedett;
5.
A projektben engedélyezett fájltípusok: 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.
Az egyes fájlok maximális mérete (az archívumban lévő fájlokra is érvényes):
- 300 Kb;
- 1 Mb videofájlokhoz.
7.
A fájlnevek csak az angol ábécé számait vagy betűit, aláhúzásjeleket tartalmazhatnak. Nem megengedett orosz betűk, szóközök, idézőjelek és speciális karakterek használata a fájlnévben;
8.
Az orosz betűk nem használhatók változók és objektumok nevében.
Az egyetlen kivétel a szalaghirdetésen található szöveg.
9.
A kész projekt formátuma - postai irányítószám archívum.
1. Szerkesztői felkészítés.
Ha új projektet szeretne létrehozni az Adobe Animate CC alkalmazásban, válassza ki a „HTML5 Canvas” projektet.
Ennek a sablonnak a kódja alapul szolgálhat kreatívok létrehozásához a szerkesztőben.
Ha sablont szeretne alkalmazni egy projektre, a közzétételi beállításoknál válassza a lehetőséget "Speciális közzétételi beállítások -> Új importálása...".
A sablon szkriptet tartalmaz adfox_HTML5.js
3. Kattintson a kezelésre
Ha a hirdetés hurkos animációt tartalmaz, akkor csak a szakasz gombjaihoz használjon kódokat.
3.1 Ha a teljes szalaghirdetési területet kattinthatóvá szeretné tenni, és egyetlen hivatkozást szeretne elérni, adja hozzá a következő kódot az animáció első képkockájához:
canvas.style.cursor = "mutató"; canvas.addEventListener("click", function() ( window.callClick(); ));
3.2 Ha több gombot szeretne hozzáadni a különböző hivatkozásokkal történő navigáláshoz, adja hozzá a fő gombot a szalaghirdetésre való kattintáshoz a felső animációs rétegben, adjon a gombnak egy példánynevet (Példánynév), és írja be a kódot a gombra:
This.btnMain.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ; )) ;
További gombok hozzáadása, ha rákattint, a felhasználó a hirdetett oldal különböző oldalaira kerül.
Helyezzen néhány gombot a felső rétegre az animáció egyes részei fölé, adja meg a gombok példánynevét (Példánynév), és írjon kódot minden gombhoz:
This.btnLeft.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );
Ahol n
3.3
This.btnText.addEventListener("mouseover", function() ( window.callEvent(n; ));
Ahol vigye rá az egeret- javascript esemény, n- eseményszám 1-től 30-ig, amit fel kell hívni.
Hurkolóanimáció megvalósítása a kreatívban az Animate CC szerkesztőben:
- állítsa be a "Loop Timeline" opciót a közzétételi beállításokban;
- az ebben a szakaszban található gombokhoz használjon kódokat, a 3.1. és 3.2. pontban szereplő hagyományos gombok kódjait pedig el kell távolítani.
Kreatív kód egy gombbal és ismétlődő animációval:
If (typeof(this.stopCycle) == "undefined") ( this.btnMain.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button) == 0) ( window.callClick(); ); )); this.stopCycle = igaz; )
Ha több gomb van, akkor az ADFOX eseményhívási kódban adja hozzá a következő kódot:
If (typeof(this.stopCycle) == "undefined") ( this.btnMain.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button) == 0) ( window.callClick(); ); )); this.btnLeft.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t. gomb == 0) ( window.callClick(n); ); )); this.stopCycle = igaz; )
Ahol n- eseményszám 1-től 30-ig, amit fel kell hívni.
Az átlátszó gombok például akkor használhatók, ha a szalaghirdetés teljes területét vagy csak egy részét kell kattinthatóvá tenni. Ezekhez, valamint a közönséges gombokhoz egy átmeneti vagy eseményhívási kódot kell hozzáadni.
Az Animate gombok négy keretet tartalmazó szimbólumok. Az első hármat üresen hagyhatja, és csak az utolsó "kattintást" ("Találatot") töltheti ki, ha tartalommal (grafikus elemmel) ad hozzá a Beszúrás > Idővonal > Kulcskocka (Beszúrás > Idővonal > Kulcskép) menüpontban.
A "Click" (Elütés) keret tartalma láthatatlan, és meghatározza a kattintásra reagáló gomb területét. Tartalmat (grafikus elemet) adhat hozzá ehhez a kerethez a Beszúrás> Idővonal> Kulcskocka (Beszúrás> Idővonal> Kulcskép) menüpontban. Ha a többi képkocka üresen vagy láthatatlan marad, a színpadon lévő gomb áttetsző kéken jelenik meg, és a következő "Találat" keretben lévő tartalom alakjával rendelkezik. A projekt közzétételekor az átlátszó kék terület nem lesz látható.
Ha azt szeretné, hogy a szalaghirdetés a webhelyen található tároló szélessége mentén megnyúljon, adja meg a következő beállításokat: Fájl > Közzétételi beállítások.
tababan Alapvető, válassza ki Tedd érzékeny > Szélesség, Magasság vagy mindkettő.
Válassza ki Méretezés a látható terület kitöltéséhez a kimenet teljes képernyős módban történő megtekintéséhez.
A „Nézetbe illeszkedés” kiválasztásával a tartalom úgy méreteződik, hogy a képarány megtartása mellett kitöltse a rendelkezésre álló képernyőterületet. Tehát ha a maximális szélességet már elérte, akkor a képernyő magassági területe üres maradhat, és fordítva.
Ha nem tudja elérni a kívánt eredményt a program beállításaival, használjon szkripteket.
Itt vannak példák a kódokra:
Kód letöltése a méretarányos méretezéshez.
Kód letöltése a méretarány nélküli méretezéshez.
Kód letöltése az elemek elhelyezéséhez, ahol an0..an4 az elemek példány neve.
Ha kibontott állapotból szeretne bannert megjeleníteni, akkor a felületen banner hozzáadásakor az "Automatikus kibontás mindig" vagy "Bővítés inicializáláskor" paraméterben meg kell adni az igen értéket, és a kódot a HTML-kreatívban kell megadni:
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 = igaz; window.global_exp_banner.btnCollapse.visible = igaz; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else_banner.global. látható = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = igaz; window.global_main_banner.btnExpand.visible = igaz; ) window.global_main_banner.btnExpand.addEventListener("bind,Bthisner. )); window.global_exp_banner.btnCollapse.addEventListener("kattintás", collapseBanner.bind(this)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = igaz; window.global_exp_banner.btnCollapse.visible = igaz; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible =false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = igaz; window.global_main_banner.btnExpand = igaz ;)
5. Projekt kiadvány.
Fontos! A projekt előnézetének megtekintésekor böngészőben keresztül (Ctrl-Enter | Cmd-Enter) A HTML fájlnevekben található hivatkozások az űrlap véletlenszerű értékeivel vannak hozzáfűzve ?1468231208369
. Az ilyen értékeket ki kell zárni a projektből, amikor betöltik az ADFOX-ba.
Ehhez a végleges projektet a szerkesztőben keresztül kell közzétenni Fájl > Közzétételi beállítások > Közzététel (Shift-Ctrl-F12 | Shift-Cmd-F12).
Projekt közzétételekor válasszon sablont AdobeAnimate_Adfox_.html.
.postai irányítószám
Ennek a bannernek a kódja alapul szolgálhat kreatívok létrehozásához a szerkesztőben.
A sablon szkriptet tartalmaz adfox_HTML5.jsés egy sor paraméterkészlet az átmenetek és az eseményszámlálás helyes működéséhez:
%reference%, %user1%, %eventN%, ahol N az eseményszám 1 és 30 között.
2. Kattintson a kezelésre.
Minden esemény adott animációs elemekhez van rendelve az Események lapon.
A műveletek meghívásához használja a "Kattintási terület" összetevőt.
Adja hozzá, és válasszon egy eseményt "Elüthető terület" - "Érintés/kattintás"(vagy "Tap Area > Touch/Click" az angol verzióban). 
Az „Egyéni kód” lapon adja meg a kattintási függvényhívást.
2.1
callclick();
2.2
callclick(n);
Ahol n
2.3 Ha átmenet nélküli animációból kell eseményt kiváltania, használja a következő kódot:
CallEvent(n);
Ahol n- a meghívandó esemény száma.
Annak érdekében, hogy a szalaghirdetés végignyúljon a tároló szélességében, amelyben elhelyezni fogja, a webhelyen, a panelen Tulajdonságok a pozícióhoz és a méretekhez adjon meg százalékokat a képpontok helyett.
Használjon opciókat is "Igazítás a tárolóhoz"És "Gumi elrendezés" a felső eszköztáron.
Ha az igazítási eszközök bármelyikének használata előtt engedélyezi a Fluid Layout funkciót, akkor a szülőtároló átméretezésekor az összes elem egymáshoz és a tároló méreteihez igazodik.
Ebben az esetben egyszerre használhatja az elemek relatív méretét százalékban és abszolút méretét - pixelben.
4. Projekt kiadvány.
Amikor bannert ad hozzá az ADFOX-hoz, a menedzsernek ismernie kell a gombok és az eseményszámok közötti megfelelést. A menedzser minden eseményhez előírja a saját átmeneti hivatkozását, amelyet aztán egy változó segítségével továbbít a szalaghirdetés kódjához.
A projekt közzététele után csomagolja be a formátumba .postai irányítószám. A hirdetés készen áll az ADFOX szalaghirdetésre való feltöltésére.
A kezdéshez futtassa a fájlt a kiterjesztéssel .an az archívumból.
2. Kattintson a kezelésre.
Minden esemény meghatározott animációs elemekhez van rendelve a „Kód” lapon keresztül.
A kiválasztott elemen való navigáláshoz ki kell választani egy eseményt kattintsonés regisztráljon egy hívást a kattintás funkcióhoz.
A gombokhoz példánynevet (Példánynév) kell rendelni, például: btnMain, btnRight.
2.1 Ha egy ugrógombot használ:
callclick();
2.2 Ha több navigációs gomb van:
callclick(n);
Ahol n- a meghívandó esemény száma.
2.3 Ha átmenet nélküli animációból kell eseményt kiváltania, használja a következő kódot:
CallEvent(n);
Ahol n- a meghívandó esemény száma.
A nyújtó (gumi) banner megvalósításának jellemzője.
Annak érdekében, hogy a szalaghirdetés a webhelyen található tároló szélessége mentén nyúljon, a szalaghirdetés előkészítésekor a szerkesztőben a Tulajdonságok panelen adjon meg százalékos arányt a pixelek helyett a pozícióhoz és a mérethez.
A Pozíció és méret panelen találhatók a Méretméret és a Méretezési pozíció gombok is az elemekhez.
4. Projekt kiadvány.
A projektet a következő beállításokkal kell közzétenni:
A projekt közzététele után csomagolja be a formátumba .postai irányítószám. A hirdetés készen áll az ADFOX szalaghirdetésre való feltöltésére.
Több mint hét éve dolgozom távolról az USA-ból, Kanadából, Ausztráliából, Németországból és más országokból származó külföldi ügyfelekkel. Grafikus forrásokat és animációkat rajzolok a játékokhoz Adobe Animate CC. Régen a szerkesztőt hívták Adobe Flash Professional CC.
Egy régi blogon elindítottam egy hasonló leckeciklust, de ahelyett, hogy ott folytattam volna, úgy döntöttem, hogy újraírok mindent, hogy új tapasztalatokat oszthassak meg.
Miért van szükségünk újabb leckékre az Adobe Flash-ben való rajzolásról? Sok éve csinálom ezt, és úgy gondolom, hogy tapasztalataim hasznosak lehetnek a kezdők számára. Főleg azoknak, akik még soha nem rajzoltak grafikus táblával. Ha jól rajzolsz papíron, de még soha nem rajzoltál számítógépen, akkor mindenképpen el kell mondanom neked.
Aki pedig nem tud papírra rajzolni, annak megpróbálom elmagyarázni, hogyan fejlesztheti ezt a készséget összességében anélkül, hogy grafikus szerkesztőhöz kötné: perspektíva és kompozíció építése, színválasztás, árnyékolás és egyéb témák.
Nem baj, ha tudsz rajzolni, szükséged lesz eszközökre: eszközökre és programokra. Kezdjük a hardverrel. Számítógépe már van, de még hozzá kell csatlakoztatnia egy grafikus táblagépet, amivel lehetőségünk nyílik a RAM-ban létező virtuális vászonra rajzolni. Más szóval, ez egy másik beviteli eszköz, például egér vagy hanyattegér. De a táblagépnek vannak előnyei, amelyek lehetővé teszik, hogy papírra rajzoljon. Ezek a nyomásérzékenység és a manipulátor tollszerű formája.
Számos grafikus táblagyártó létezik: Wacom, Genius, Huion. Én csak az első kettővel találkoztam. Összesen már kipróbáltam négy Wacom tabletet és egyet a Geniustól, amikor elkezdtem. Nagyon ajánlom a Wacomot - kiváló minőség ésszerű áron.
Ha nincs pénzed, ne vedd meg a Geniust, szerezd be a legolcsóbb kis használt Wacom Bamboo Pent. Szinte ugyanazt a Wacom Bamboo Pen&Touch S CTH-460 modellt használtam. Hét évnyi használat során nem volt kritikus probléma, kezdetnek jó eszköz. Ha több pénzt tud beosztani, akkor vegyen egy nagyobb modellt. Wacom Bamboo Fun Pen&Touch M CTH-670-et használok.
Elmagyarázom, mit jelentenek a névben szereplő egyes számok és betűk, hogy megkönnyítsem a tájékozódást a cég modellparkjában.
Wacom Bamboo Fun Pen&Touch M CTH-6 70
Amikor rajzol, a munkaterület aktív területe nagyon kicsi. Más szóval, a ceruza folyamatosan csúszik egy kis kör sugarában. Ez a kör kissé elmozdulhat. Idővel folt képződik, amely mikrokarcok sűrű felhalmozódásaként látható. Azt mutatja, hogy gyakorlatilag nem használja a készülék perifériáit, minden a központban történik.
Feltételezhető, hogy nincs szükség nagy grafikus táblagépre, mivel soha nem fogja használni a teljes munkaterületét, és a tevékenységi hely akkora lesz, mint egy kisebb modellen. De nem az.
Ha táblagépen dolgozik, az aktív terület a monitor teljes szélességére vetítve lesz. Ezért minél nagyobb a tabletta, annál pontosabban tudja alkalmazni a vonásokat. Ezzel szemben minél nagyobb a monitor és minél kisebb a táblagép, annál nehezebb és kényelmetlenebb lesz a rajzolás. Tapasztalatból elmondhatom, hogy miután S méretről M-re váltottam, amikor egy 29 hüvelykes ultraszéles monitoron dolgoztam, 25-30%-kal kényelmesebben kezdtem dolgozni. Kevesebb erőfeszítést igényel egy összetett út megrajzolása, és összességében az interakció lágyabb és élvezetesebb.
A nagyobb grafikus táblagépek még kényelmesebb munkakörülményeket kellene, hogy biztosítsanak, de L-modelleken még nem kellett dolgoznom, csak feltételezem.
Profi modell vásárlásakor egy jobb minőségű műanyagból készült vezeték nélküli eszközt kap, amely 2048 nyomásérzékenységi szinttel rendelkezik az olcsóbb modellek 1024-gyel szemben, gyönyörű dizájnnal, további gombokkal és érintőgyűrűvel. Teljesen meg vagyok elégedve a Bamboo sorozat fiatalabb, elavult modelljeivel, amelyek már megszűntek. Az amatőr és a profi verziók közötti költségkülönbség több mint kétszerese lesz. Az asztal mindent a polcokra tesz:
Az eszköz csatlakoztatása előtt töltse le az illesztőprogramokat a Wacom hivatalos webhelyéről.
| Modellek listája | Link az illesztőprogramokhoz |
|---|---|
| Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 Egy CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5 PTK-450/650 PTH-450/650/850 Intuos 4 PTK-440/640/840/1240/540WL |
ablakok Mac operációs rendszer |
| Bamboo Pen&Touch CTH-460/470/471/660/661/670 Bambusz toll CTL-460/471 |
ablakok Mac operációs rendszer |
A táblagép csatlakoztatása és az illesztőprogramok telepítése után indítsa el az alkalmazást Wacom beállítások, amely megtalálható a Windows keresésen keresztül (Win + S) vagy a vezérlőpulton.
A cég táblagépeinek fő beállításai nem különböznek egymástól, mind az amatőr, mind a professzionális modellek hasonló módon vannak konfigurálva.
A lapon Tabletta személyre szabhatja a táblagépet a jobb és bal kézhez, valamint műveleteket rendelhet a billentyűkhöz. Először telepítse őket Tiltva, idővel lehetőség lesz gyorsbillentyűk hozzárendelésére. 
A következő lapon toll fontos paraméterek:
Ugyanazon a lapon a szakaszban követés nyomja meg a gombot térképezés... annak beállításához, hogy a táblagép munkaterülete hogyan legyen kivetítve a monitor képernyőjére. Megnyílik egy ablak Toll mód részletei.
fejezetben Képernyő terület választ Monitor, ha több monitorral rendelkezik, és adja meg a főt. Ha csak egy monitor van, akkor hagyja el Minden képernyő
.fejezetben Méretezés feltétlenül jelölje be a négyzetet Erőarányok hogy a kliens terület ne nyúljon ki a képernyőre vetítve. Ebben az esetben a táblagép munkaterületének egy része nem kerül felhasználásra, de normál arányunk 1:1 lesz. És ha kört rajzol, akkor körként jelenik meg a képernyőn, nem pedig megnyúlt ellipszis.
Feltétlenül jelölje be a mellette lévő négyzetet Használja a Windows Ink-et nyomásérzékenység munkához.
A következő lapon Érintse meg az Opciók lehetőséget törölje a jelet a szemközti négyzetből Érintős bevitel engedélyezése táblagép normál módba kapcsolásához.
A többi lapon mindent letiltottam, mivel nem használok sem Touch módú gesztusokat, sem a márkás legördülő menüt. Ezzel befejeződik a grafikus tábla beállítása.
Az Adobe Animate CC az Adobe Flash Professional CC márkaváltása, amely számos új funkcióval bővült a programban. Még a régi névvel együtt is óriási népszerűségre tett szert a művészek, animátorok és indie játékfejlesztők körében. A vektoros felépítési elvek lehetővé teszik bármilyen felbontású sprite létrehozását. Bármelyik verzió, amit a kezedbe vesz, alkalmas a rajzolásra. A rajzeszközök évek óta nem változtak, de csak kis mértékben javultak. Az Adobe Animate CC-t fogom használni, de amit írtam, az Adobe Flash Professional régebbi verzióira is vonatkozik. Az Adobe egyébként nemrégiben havi előfizetéses modellre váltott, hogy a drága egyszeri licencelés helyett hozzáférhessen termékeihez. Jelenleg az Adobe Animate CC használatának ára havi 20 dollár.
A betöltés után hozzon létre egy új fájlt, és válassza ki a típust Action Script 3.0. Ugyanebben az ablakban megadhatja a jelenet paramétereit:
Ezek a beállítások a dokumentum létrehozása után is módosíthatók. Ehhez válasszon ki egy eszközt Kiválasztó eszköz(V gyorsbillentyű), nyitott ablak Tulajdonságokés bontsa ki a részt Tulajdonságok. Ha nem találja ezt az ablakot, használja a menüt Ablak → Tulajdonságok vagy a Ctrl + F3 megnyomásával.
A munka hatékonyságának növelése érdekében a gyorsbillentyűket maximálisan kell használni. A kezdeti szakaszban meg kell szokni és megtanulni az új billentyűkombinációkat, de hosszú távon komoly ugrást jelent a hatékonyságban. A legtöbb gyorsbillentyűt újradefiniáltam, hogy azok a billentyűzet jobb oldalán legyenek. Miért pont a jobb oldalon? Az a helyzet, hogy balkezes vagyok, és ennek megfelelően kényelmesebb számomra. Ha jobbkezes vagy, akkor saját sémát kell kitalálnod. Ezen kívül a Rapoo E9050-et és az Apple Wireless Keyboardot használom, amelyek a laptop billentyűzet kialakításának tényezői, tehát ha teljes méretűt használ, akkor ismét dolgozzon keményen, és találja ki a saját sémáját – ez egy rövid időn belül megtérül. sok időt takarított meg – és tekintse példaként az én tervemet.
Merítse meg az ötletet: csoportosítsa a billentyűparancsokat a billentyűzet kényelmes oldalán a gyors hozzáférés érdekében a kéz helyzetének állandó megváltoztatása nélkül. Legtöbbször egy helyen kell feküdnie, csak az ujjak "sétálnak" kis sugárban, nyomkodják a gombokat. Természetesen lesznek olyan csapatok, amelyek pozícióváltást követelnek, de ők nagy kisebbségben vannak. Íme az én sémám:
| Csapat | Leírás | régi kombináció | Új kombináció |
|---|---|---|---|
| Mindet kiválaszt | Válassza ki az összeset | Ctrl+A | Ctrl+A, O |
| Törölje az Összes kijelölését | Kijelölés eltávolítása | Ctrl+Shift+A | Ctrl+Shift+A, P |
| Visszavonás | Művelet visszavonása | Ctrl + Z | Ctrl+Z, [, Z |
| újra | Ismételje meg a műveletet | ctrl+y | Ctrl+Y, ] |
| Zoomolás | Méretezés | Shift+Z, Z | Shift+Z,\ |
| Nagyítás | Kép nagyítása | Ctrl+=, Ctrl+Num= | Ctrl+=, Ctrl+Num=,= |
| kicsinyítés | Kicsinyítés | Ctrl+=, Ctrl+Num= | Ctrl + -, Ctrl + Num -, - |
| kiegyenesedik | A kiválasztott görbék kiegyenesítése | 9 | |
| Sima | Kiválasztott görbék simítása | 0 | |
| Vízszintesen megfordít | Flip vízszintesen | F | |
| függőleges fordítás | Függőleges megfordítás | Shift+F | |
| Vágott | Vágás vágólapra | Ctrl + X | Ctrl + X, X |
| Ismétlődő szimbólum... | klón szimbólum | ctrl+d | |
| Szimbólumcsere... | Változás szimbólum | Ctrl+] |
Az új kombinációk a legtöbb esetben nem helyettesítik a régieket, hanem kiegészítik azokat, több új parancs kerül bevezetésre. A beállításokat a menüben kell elvégezni Szerkesztés → Gyorsbillentyűket.... A keresőmezőbe írja be a csapat nevét az oszlopba Parancsikon kattintson egy üres helyre a kívánt paranccsal szemben, és nyomjon meg egy új billentyűparancsot.
Ne próbálja megérteni a táblázatban megadott parancsokat, mindegyiket elmagyarázzuk a következő leckékben. A jövőben, amikor elkezdi aktívan használni őket, valószínűleg többször újradefiniálja őket, amíg meg nem találja a legkényelmesebb lehetőséget.
kefe szerszám(B gyorsbillentyű) - az ecset eszköz, a leggyakrabban használt rajzoláskor. A beállítások két ablakban összpontosulnak:
Az ecsetbeállítás kész, fessünk valamit.
Válassza ki a megfelelő színt a Szín ablak (Ctrl + Shift + F9) segítségével, válassza ki az ecset eszközt (B), és kezdje egy hosszú húzással, kis erőfeszítéssel a jövőbeli alakzat körvonalazásához. Ezután körbeírja a kapott körvonalat, hogy kisimítsa az összes dudort - az ecset készen áll.
Vegye figyelembe, hogy a fenti példában csak három vonást használtunk. Közepes hosszúságú ütéseket szeretne megcélozni, hogy a keze ne hagyja el a tablettát. Próbálj meg sok kis ütést rosszul csinálni, mert a kapott kontúr nem lesz sima és sok pluszponttal.
Az Adobe Animate CC vektor elveken működik. Minden objektum matematikailag van leírva, és minőségromlás nélkül méretezhető, ellentétben a raszteres megközelítéssel. Ez lehetővé teszi számunkra a vektorobjektumok manipulálását, amit soha nem fogunk megtenni olyan könnyen egy raszterszerkesztőben. A minőség romlása nélkül simíthatunk és egyszerűsíthetünk utakat, kiegyenesíthetjük az ívelt vonalakat, megváltoztathatjuk az arányokat és deformálhatjuk a grafikát. Minden vonás automatikusan matematikai görbékké alakul, amelyeket finomhangolhatunk és módosíthatunk.
A fentiek ellenőrzéséhez aktiválja az eszközt alválasztó eszköz(A gyorsbillentyű), és válassza ki az imént festett ecsetet. Most már láthatja a vektor útvonalának pontjait, és akár módosíthatja is azokat.
Ma beállítottuk az Adobe Animate CC-t, és készen állunk a rajzolás megkezdésére. Gyakorolj egy kicsit, mielőtt folytatnánk. Ismerje meg, hogyan rajzolhat egyszerű geometriai alakzatokat torzítás nélkül, próbáljon ki különböző színeket és ecsetbeállításokat (kísérletezzen a Simítás opcióval).
Hasonló tartalom
