Ustvarimo novo datoteko, naredimo jo velikosti 800x600 in vanjo prenesimo nekaj datotek, in sicer teh nekaj slik in “šum gozda mp3”, torej zvok. Prestavljam ga sem. Kot rezultat imamo to sliko - to je gozd, imenuje se "bg", "play" in "pause", to so gumbi. Zdaj jih bom premaknil navzdol, premaknimo jih, nekaj takega - najbolj preprosta možnost.

Zdaj bom zagnal animacijo, pritisnem cntr+enter, tam je samo gozd in samo dva gumba, nič ne deluje. Če želim, da se zvok samodejno predvaja zame, se imenuje "gozdni hrup", potem moram izbrati to plast in nato izbrati "samodejno predvajanje", zdaj, ko pritisnem cntr+enter, se bo zvok predvajal. Neverjetno.

Kako videoposnetku v programu Adobe Edge Animate dodati povezavo, ki jo je mogoče klikniti.

Če smo samo narisali nek gumb in obstaja nekakšno ozadje, potem, če kliknemo nanj, nikjer ne bo prehoda. Dodati interaktivna povezava Izbrati moramo ta gumb, z desno miškino tipko kliknite odprto dejanje, napačni gumb, tako jaz temu pravim, in kliknite klik, to je, kaj se bo naredilo, ko kliknete. In tukaj moramo izbrati Open you are raol.

V tem videoposnetku vam bom pokazal, kako to storiti, ni zapleteno, vendar morate pravilno razumeti, kam morate kopirati pravilno kodo in kam jo morate prilepiti.

Recimo, da imate videoposnetek, narejen v adobe edge animate, ko kliknete nanjo, se vam odpre želena Ciljna stran, je v formatu edge animate in shranjen v mapi z izvornimi in javanskimi skripti. Odprite ga v katerem koli urejevalnik besedil, lahko uporabite kateri koli urejevalnik testov, na primer: beležnico itd.

Kako zankati animacijo v programu Adobe Edge Animate, torej kako narediti tako, da se, ko se predvaja do konca, začne znova od začetka in traja v nedogled.

Tukaj lahko kopirate ključne okvirje, to pomeni, da izberem en okvir, pritisnem cntr+c, kliknem na želeno polje, pritisnem cntr+v, animacija se bo zankala, torej ne zankala, ampak v tem primeru pojdite iz izhodišče nazaj na izhodišče. Če zaženem ta video in pritisnem cntr+enter, vidimo, da animacija traja samo 1 sekundo, gre na eno stran in se vrne na drugo.

V tem videoposnetku vam bom pokazal, kako to storiti, ni zapleteno, vendar morate pravilno razumeti, kam morate kopirati pravilno kodo in kam jo morate prilepiti.

Recimo, da imate pasico narejeno v Adobe edge animate, ko kliknete nanjo, se vam odpre želena pristajalna stran, je v formatu edge animate in shranjena v mapi z izvorno kodo in Java skriptami. Odprite ga v katerem koli urejevalniku besedil, lahko uporabite kateri koli testni urejevalnik, na primer: beležnico itd.

Nato želim vstaviti to pasico na spletno mesto. Kaj je treba narediti? Prenesti morate indeksno datoteko, nato jo odpreti v urejevalniku besedila, kopirati kodo adobe edge in na koncu dodati kodo tukaj pred “head”, nato pred naslovom mesta, kamor bomo dodali naš banner, preden div. Za natančnejšo izvedbo so vam v pomoč navodila: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Nato shranimo in gremo na storitev FTP, jaz uporabim filezillo, poiščem lokacijo shranjevanja vaše strani in kopiram indeksno mapo v vašo datoteko, ki se nahaja na strežniku, in nadomesti trenutne datoteke. Nato prenesemo vse Java skripte in posodobimo spletno mesto. Vse je pripravljeno - animacija deluje, odpre se tudi zavihek s ciljno stranjo.

Če vas zanimajo takšne lekcije, se naročite na moj kanal, ker... v bližnji prihodnosti bo veliko novih videov - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – recimo, da imate banner izdelan v programu Adobe edge animate

01:30 – dodajte pasico na stran

02:09 – dodajte kodo pred oznako “head”.

02:50 – navodila za dodajanje pasice na stran

03:31 – nalaganje datotek na strežnik

05:29 – posodobimo stran in vse je pripravljeno!

Pridružite se in postavljajte vprašanja:

Prenesite tri brezplačna predloga Muse: http://site/free-landing.html

http://vk.com/adobeedgeanimate

Sem na VKontakte: http://vk.com/danilfimushkin

Na webinarju sem povedal in pokazal, kako lahko iz vektorske ilustracije naredite popolno animirano pasico.

00:17 – začnemo animirati vektorsko ilustracijo v programu Edge Animate
14:06 - ustvarite gibanje šap lika
16:54 – prednosti ugnezdenega simbola
17:48 – kaj je ugnezdeni simbol
18:24 – pisanje ponavljajoče se animacije
19:42 – zankasta animacija je pripravljena
23:40 – ustvarite mežike
26:54 – določi imena datotek pri shranjevanju
27:57 – animacija “spustnega” besedila
28:39 – pripenjanje krivulje gibanja – spreminjanje osi animacije
30:03 – vmesni povzetek animacije, ustvarjanje zasnežene pokrajine in animacija snežinke
33:39 – Pregled Edge Animate
34:52 – domača naloga
35:25 – kako dodati aktivno povezavo
39:09 – ustvarjanje več gumbov in pripenjanje povezav

Pridružite se in postavljajte vprašanja: http://vk.com/adobeedgeanimate

UPD 6. december 2015:
Produktni vodja za Flash Runtime in Adobe AIR je dejal, da so nimam načrtov prenehati delovati na Flash Runtime in AIR ter preimenovanje izdelka za ustvarjanje vsebine ni šans ni povezano z usodo Flash Player in z njim povezani ekosistem.

Vse bi bilo v redu, razen enega odtenka, ki močno spremeni pomen - tehnične nepismenosti in splošnega kopiranja. Publikacije se med seboj ponatisnejo in dodajajo vedno več »dejstev«, ki jih ni v izvirniku. Z eno besedo - poškodovan telefon.

Izvirni članek http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html poroča, da Adobe preimenuje Flash Professional v Animate CC. Poleg tega poročajo, da stranke želijo več podprtih platform itd.

In nisem bil presenečen, da mnogi ljudje ne vidijo razlike med Flash in Flash Professional. Na spletnih straneh z novicami so se začele pojavljati različne gege, ki so navajale druge vire, ki se povezujejo nižje v verigi. In ne vedno original.

Danes se beseda Flash dojema kot vtičnik za brskalnike. Tehnično je to Flash Player. Obstaja pa orodje za ustvarjanje vsebine - Flash Professional. Če bi Microsoft preimenoval Word v TextMachine, bi ljudje vzklikali, da je "Microsoft nehal razvijati Word?" Čeprav je črno na belem zapisano, da bo podprto ustvarjanje vsebin in bo mogoče urejati podatke?

Iz lastnih primerov lahko prikažem živo sliko. Lokalne stranke me sprašujejo, s čim bomo ustvarili animacijo za predstavitev za iOS. To s ponosom lahko rečem v Flash Professional. In stranka je v stuporju. Čez trenutek reče:

"Toda na Habréju pišejo, da je bliskavica mrtva in na tablici ne deluje"

In potem padem v stupor. Tehnična nepismenost naročnikov in avtorjev člankov o bliskavici odmika ljudi od želenega rezultata. Na srečo se je stranka prepričala in je bila z rezultatom zadovoljna.

Vrnimo se k izvirnemu članku. Poročajo, da je html5 dozorel in že podpira večino funkcij Flasha. Če se premaknemo navzdol, vidimo, da Adobe sam vidi Flash kot ključno sredstvo za zagotavljanje vrhunske vsebine – spletnih iger in vrhunskega videa. Toda nobene besede o tem, da bodo ustavili podporo za Flash.

Še več ... Jasno navajajo, da delajo v partnerstvu z Microsoftom in Googlom za izboljšanje združljivosti in varnosti Flash Playerja. In niso pozabili dodati, da tesno sodelujejo s Facebookom, da bi izboljšali zanesljivost in varnost iger v Flash Playerju. Kje je torej sploh beseda, da opuščajo Flash?

Če govorimo o razvoju Flasha na splošno, ja, ta se je že zdavnaj ustavil. Izvedene so le manjše (vendar pomembne) izboljšave in varnostne napake so odpravljene. Toda ali je res tako hudo? Z mojega vidika ima Flash vse, kar potrebuje. Seveda bi si želel več. Ampak zakaj?

Če želite več, se odločite za samostojno obliko iger. In tu je Adobe AIR (če upoštevamo Flash). Zavrnitev Adobe podpora AIR ni fiksen. Imam informacije o načrtih za leto 2016. Toda ali bo bliskavica brskalnika umrla? Vsekakor. Ampak zagotovo ne jutri.

In za tiste, ki radi v klišejih pravijo, da Flash prazni baterijo, mi pokažite, kako jo Canvas polni.

Omeniti velja tudi, da se projekt Adobe Edge Animate ne bo več aktivno razvijal. Ampak ker Blizu sem razvoja Flash Professional - zagotavljam vam, da Edge Animate sploh ne bo razvit (razen kritične napake). Ta odločitev je bila sprejeta v prid Adobe Flash Profesionalni (prihodnji Animate CC).

Za pripravo HTML kreativ za umestitev v ADFOX je pomembno upoštevati zahteve za vstavljanje kode, ki obdela klik na pasico in šteje dogodke v pasici.
Pri razvijanju kode HTML lahko uporabite urejevalnike, za katere so bila napisana ta navodila:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

Zahteve za kodo HTML (za razvijalce kode)

Pripravite svoj projekt tako, da izpolnite naslednje zahteve:

1. Največje dovoljeno število znakov v kodi HTML je 65.000;
2. Zaželeno je, da JavaScript in CSS postavite znotraj kode HTML pasice;
Če nastala koda HTML presega največje dovoljeno število znakov, je treba kodo zmanjšati tako, da vstavite JavaScript in CSS. ločene datoteke:
- shrani js in koda css v ločene datoteke s končnico .js ali .css;
3. Projekt lahko vsebuje samo eno datoteko s pripono .html;
4. Največje dovoljeno število datotek v projektu je 50;
5. Dovoljene vrste datotek v projektu: 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. Največja velikost vsaka datoteka (velja tudi za datoteke v arhivu):
- 300Kb;
- 1 MB za video datoteke.
7. Imena datotek morajo vsebovati le številke ali črke angleške abecede in podčrtaj. V imenu datoteke ni dovoljeno uporabljati ruskih črk, presledkov, narekovajev in posebnih znakov;
8. V imenih spremenljivk in predmetov ne morete uporabljati ruskih črk.
Edina izjema je besedilo na pasici.
9. Oblika končanega projekta - zip arhiv.

Adobe Animate CC

1. Priprava urednika.

Če želite ustvariti nov projekt v AdobeAnimate CC, izberite projekt »HTML5 Canvas«.

Kodo te predloge lahko uporabite kot osnovo pri ustvarjanju oglasov v urejevalniku.

Če želite uporabiti predlogo za projekt, v nastavitvah objave izberite "Napredne nastavitve objave -> Uvozi novo ...".

Predloga vsebuje skript adfox_HTML5.js

3. Obdelava klika

Če vaš oglas vključuje ciklično animacijo, potem uporabite kode za gumbe samo iz razdelka.

3.1 Če želite, da bo celotno območje pasice mogoče klikniti in imeti eno povezavo, dodajte to kodo v prvi okvir animacije:

Canvas.style.cursor = "kazalec"; canvas.addEventListener("klik", funkcija() ( window.callClick(); ));

3.2 Če želite dodati več gumbov za premikanje z različnimi povezavami, dodajte glavni gumb za klikanje na pasico v zgornjem sloju animacije, gumbu dodelite ime primerka in napišite kodo na gumb:

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

Dodajte druge gumbe, ki bodo ob kliku uporabnika preusmerili na različne strani oglaševanega mesta.
Postavite nekaj gumbov na zgornjo plast nad določene dele animacije, gumbom dodelite ime primerka in napišite kodo za vsak gumb:

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

Kje n

3.3

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

Kje miška - javascript dogodek, n- številka dogodka od 1 do 30, ki naj se sproži.

Značilnosti ustvarjanja ponavljajoče se animacije

Če želite implementirati ponavljajočo se animacijo v oglasu v urejevalniku Animate CC:
- v nastavitvah objave nastavite možnost "Loop Timeline";
- uporabite kode za gumbe iz tega razdelka, kode za navadne gumbe iz odstavkov 3.1 in 3.2 pa morate odstraniti.

Koda za oglas z enim gumbom in ponavljajočo se animacijo:

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

Če je gumbov več, potem v kodo za klic ADFOX dogodkov dodajte naslednjo kodo:

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

Kje n- številka dogodka od 1 do 30, ki naj se sproži.

Uporaba prozornih gumbov

Prosojne gumbe lahko uporabite, na primer, če želite klikniti celotno območje pasice ali samo del. Zanje, tako kot za običajne gumbe, je treba dodati kodo za klic prehoda ali dogodka.

Gumbi v Animate so simboli, ki vsebujejo štiri okvirje. Prve tri lahko pustite prazne in zapolnite samo zadnji »Zadetek«, tako da mu dodate vsebino (grafični element) prek Vstavi > Časovnica > Ključni okvir.

Vsebina okvirja Hit je nevidna, vendar določa območje gumba, ki se odzove na klik. Temu okvirju lahko dodate vsebino (grafični element) prek Vstavi > Časovnica > Ključni okvir. Če ostanejo preostali okvirji prazni ali nevidni, gumb noter delovno območje je prozorno modra in je oblikovana kot vsebina v naslednjem okvirju Hit. Ko objavite svoj projekt, prozorno modro območje ne bo vidno.

Značilnost izvedbe raztegljivega (gumijastega) transparenta

Če želite, da se pasica razteza po širini vsebnika, v katerem bo na spletnem mestu, naredite nastavitve: Izberite Datoteka > Nastavitve objave.
V zavihku Osnovno, izberite Naredi odzivno > Širina, Višina ali oboje.
Izberite Merilo za zapolnitev vidnega območja za ogled izpisa v celozaslonskem načinu.
Če izberete »Prilagodi pogledu«, boste vsebino prilagodili tako, da bo zapolnila ves razpoložljivi prostor na zaslonu, hkrati pa ohranila enako razmerje stranic. Torej, če je največja širina že dosežena, potem lahko območje po višini zaslona ostane nezapolnjeno in obratno.

Če z nastavitvami programa ne morete doseči želenega rezultata, uporabite skripte.
Tu so primeri kod:
Prenesite kodo za skaliranje razmerja stranic.
Prenesite kodo za skaliranje brez razmerja stranic.
Prenesite kodo za pozicioniranje elementov, kjer an0..an4 je ime primerka elementov.

Značilnosti ustvarjanja pasice s samodejnim utripanjem

Če želite pasico prikazati v razširjenem stanju, morate pri dodajanju pasice v vmesnik podati vrednost »da« v parametru »Samodejno razširi vedno« ali »Razširi ob inicializaciji« in dodati kodo v Oglas HTML:

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; ) else( window.global_exp_banner. visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; ) window.global_main_banner.btnExpand.addEventListener("klik", expandBanner.bind(to )); window.global_exp_banner.btnCollapse.addEventListener("klik", collapseBanner.bind(to)); 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.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 = true; window.global_main_banner.btnExpand.visible = res ;)

5. Objava projekta.

Pomembno! Pri predogledu projekta v brskalniku prek (Ctrl-Enter | Cmd-Enter) naključne vrednosti obrazca so dodane povezavam v imenih datotek v HTML ?1468231208369 . Takšne vrednosti je treba izključiti iz projekta, ko ga naložite v ADFOX.
Za to mora biti končni projekt v urejevalniku objavljen prek Datoteka > Nastavitve objave > Objavi (Shift-Ctrl-F12 | Shift-Cmd-F12).

Pri objavi projekta izberite predlogo AdobeAnimate_Adfox_.html.

.zip

Google Web Designer

Kodo te pasice lahko uporabite kot osnovo pri ustvarjanju kreativ v urejevalniku.

Predloga vsebuje skript adfox_HTML5.js in nabor parametrov za pravilno delovanje prehodov in štetje dogodkov:
%reference%, %user1%, %eventN%, kjer je N številka dogodka od 1 do 30.

2. Obdelava klika.

Vsi dogodki so dodeljeni določenim elementom animacije prek zavihka Dogodki.

Komponenta Interaktivno območje se uporablja za priklic dejanj.
Dodajte ga in izberite dogodek "Interaktivno območje" - "Dotik/klik"(ali »Tap Area > Touch/Click« v angleški različici).

V zavihku »Koda po meri« določite klic funkcije klika.

2.1

CallClick();

2.2

PokličiKlik(n);

Kje n

2.3 Če morate sprožiti dogodek iz animacije brez prehoda, uporabite naslednjo kodo:

CallEvent(n);

Kje n- številka dogodka, ki ga je treba poklicati.

Tako, da se pasica razteza po širini vsebnika, v katerem se bo nahajala na mestu, na plošči Lastnosti Za položaj in dimenzije podajte odstotke namesto slikovnih pik.

Uporabite tudi možnosti "Poravnaj s posodo" in "Gumijasta postavitev" na zgornja plošča orodja.
Če omogočite tekočo postavitev pred uporabo katerega koli orodja za poravnavo, bodo vsi elementi, ko spremenite velikost nadrejenega vsebnika, poravnani drug z drugim in z dimenzijami vsebnika.
V tem primeru lahko hkrati uporabite relativne velikosti elementov v odstotkih in absolutne velikosti v slikovnih pikah.

4. Objava projekta.

Pri dodajanju pasice v ADFOX bo upravitelj moral poznati ujemanje gumbov in številk dogodkov. Za vsak dogodek bo upravitelj napisal lastno povezavo za navigacijo, ki bo nato s spremenljivko posredovana v kodo pasice.

Po objavi projekta ga arhivirajte v obliki .zip. Vaš oglas je pripravljen za nalaganje na pasico ADFOX.

Adobe Edge Animate CC

Za začetek zaženite datoteko s pripono .an iz arhiva.

2. Obdelava klika.

Vsi dogodki so dodeljeni določenim elementom animacije prek zavihka "Koda".

Za krmarjenje po izbranem elementu morate izbrati dogodek kliknite in napišite klic funkciji klika.

Gumbom je treba dodeliti ime primerka, na primer: btnMain, btnRight.

2.1 Če uporabljate en gumb za skok:

CallClick();

2.2 Če obstaja več gumbov za prehod:

PokličiKlik(n);

Kje n- številka dogodka, ki ga je treba poklicati.

2.3 Če morate sprožiti dogodek iz animacije brez prehoda, uporabite naslednjo kodo:

CallEvent(n);

Kje n- številka dogodka, ki ga je treba poklicati.

Značilnost izvedbe raztegljivega (gumijastega) transparenta.

Da bi se pasica raztegnila po širini vsebnika, v katerem se bo nahajala na spletnem mestu, morate pri pripravi pasice v urejevalniku na plošči Lastnosti določiti odstotke namesto pikslov za položaj in velikost.

Obstajata tudi gumba Velikost merila in Položaj merila za elemente na plošči Položaj in velikost

4. Objava projekta.

Projekt naj bo objavljen z naslednjimi nastavitvami:

Po objavi projekta ga arhivirajte v obliki .zip. Vaš oglas je pripravljen za nalaganje na pasico ADFOX.

Za ljudi, ki se želijo nenehno izpopolnjevati, se nečesa naučiti in nenehno učiti nekaj novega, smo posebej naredili to kategorijo. Vsebuje izključno izobraževalne, uporabne vsebine, v katerih boste zagotovo uživali. Veliko število videoposnetkov se morda lahko kosa celo z izobraževanjem, ki ga dobimo v šoli, fakulteti ali univerzi. Največja stvar pri videoposnetkih za usposabljanje je, da poskušajo dati najnovejše, najbolj relevantne informacije. Svet okoli nas v dobi tehnologije se nenehno spreminja in tiskane izobraževalne publikacije preprosto nimajo časa za zagotavljanje najnovejših informacij.

Med videi najdete tudi poučne videe za predšolske otroke. Tam bodo vašega otroka učili črk, številk, štetja, branja itd. Strinjam se, to je zelo dobra alternativa risankam. Najdete lahko tudi treninge za osnovnošolce angleški jezik, pomoč pri učenju šolskih predmetov. Za starejše učence so bili ustvarjeni izobraževalni videoposnetki, ki vam bodo pomagali pri pripravi na teste, izpite ali preprosto poglobili svoje znanje pri določenem predmetu. Pridobljeno znanje lahko kvalitativno vpliva na njihov mentalni potencial in vas razveseli z odličnimi ocenami.

Za mlade, ki so že končali šolanje, študirajo ali ne študirajo na univerzi, je na voljo veliko zanimivih izobraževalnih videov. Lahko jim pomagajo poglobiti znanje o poklicu, za katerega se izobražujejo. Ali pridobite poklic, kot je programer, spletni oblikovalec, SEO optimizer itd. Tega poklica na univerzah še ne poučujejo, zato lahko postanete specialist na tem naprednem in relevantnem področju le s samoizobraževanjem, pri čemer vam skušamo pomagati z zbiranjem najbolj uporabnih videov.

Tudi za odrasle je ta tema aktualna, saj se pogosto zgodi, da po večletnem delu v poklicu ugotoviš, da to ni tvoja stvar in se želiš naučiti nekaj bolj primernega zase in hkrati donosnega. Tudi med to kategorijo ljudi so pogosto videi o samoizpopolnjevanju, prihranku časa in denarja, optimizaciji svojega življenja, v katerih najdejo načine za veliko boljše in srečnejše življenje. Tudi za odrasle je tema ustvarjanja in razvoja lastnega podjetja zelo primerna.

Tudi med izobraževalnimi videoposnetki so videoposnetki splošnega poudarka, ki so primerni za skoraj vsako starost; v njih lahko izveste o tem, kako se je življenje začelo, kakšne teorije evolucije obstajajo, dejstva iz zgodovine itd. Popolnoma razširijo človekova obzorja, zaradi česar postane veliko bolj eruditiran in prijeten intelektualni sogovornik. Takšni izobraževalni videi so res koristni za ogled vsem brez izjeme, saj je znanje moč. Želimo vam prijeten in koristen ogled!

Dandanes je enostavno treba biti, čemur se reče, »na valu«. To se ne nanaša le na novice, ampak tudi na razvoj lastnega uma. Če se želite razvijati, raziskovati svet, biti iskani v družbi in biti zanimivi, potem je ta rubrika samo za vas.

Že več kot sedem let delam na daljavo s tujimi strankami iz ZDA, Kanade, Avstralije, Nemčije in drugih držav. Rišem grafične vire in animacije za igre Adobe Animate CC. Prej je bil poklican urednik Adobe Flash Professional CC.

Na starem blogu sem začel podobno serijo lekcij, a namesto da bi tam nadaljeval, sem se odločil, da bom vse ponovno napisal, da bi delil nove izkušnje.

Zakaj potrebujemo še eno serijo lekcij o risanju v Adobe Flash? To počnem že vrsto let in verjamem, da so moje izkušnje lahko koristne za začetnike. Še posebej za tiste, ki še nikoli niste risali z grafično tablico. Če ste dobri v risanju na papir, vendar niste nikoli risali na računalniku, potem vam zagotovo imam nekaj za povedati.

In za tiste, ki ne vedo, kako risati na papir, bom poskušal razložiti, kako lahko na splošno razvijete to veščino, brez sklicevanja na grafični urejevalnik: graditev perspektive in kompozicije, izbira barv, senčenje in drugo.

Izbira grafične tablice

Ni važno, če znate risati, potrebovali boste orodja: naprave in programe. Začnimo s strojno opremo. Računalnik že imate, vendar morate nanj še povezati grafično tablico, ki nam bo dala možnost risanja na virtualnem platnu, ki obstaja v pomnilnik z naključnim dostopom. Z drugimi besedami, to je druga naprava za vnos informacij, kot je miška ali sledilna kroglica. Toda tablica ima prednosti, ki vam omogočajo risanje kot na papirju. To je občutljivost na pritisk in pero podobna oblika kazalne naprave.

Proizvajalcev grafičnih tablic je veliko: Wacom, Genius, Huion. Naletel sem samo na prva dva. Skupno sem na začetku preizkusil že štiri tablice znamke Wacom in eno Genius. Zelo priporočam Wacom - je visoka kvaliteta za primerno ceno.

Če nimate denarja, ne kupujte Geniusa, nabavite najbolj ugodno majhno rabljeno bambusovo pero Wacom. Uporabil sem skoraj enakega, Wacom Bamboo Pen&Touch S CTH-460. V sedmih letih uporabe ni bilo kritičnih težav, dobra naprava za začetek. Če lahko prihranite več denarja, izberite večji model. Uporabljam Wacom Bamboo Fun Pen&Touch M CTH-670.

Kaj pomenijo številke in črke v imenih modelov Wacom?

Pojasnil bom, kaj pomenijo nekatere številke in črke v imenu, da boste lažje krmarili po parku modelov podjetja.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

• M— velikost delovnega območja. Obstajajo S - Small (majhna), M - Medium (srednja), L - Large (velika);
• CTH- pomeni postavitev. Obstajajo CTL in CTH - amaterski modeli vstopna raven z dodatnimi gumbi in sledilno ploščico, PTH - profesionalni modeli, DTH in DTK - profesionalni modeli z vgrajenim zaslonom;
• 6 — velikost delovnega območja v palcih. Obstajajo 4 - Small (majhni), 6 - Medium (srednji), 8 - Large (veliki), pa tudi 13 in več, vendar to velja le za tablice z vgrajenim zaslonom. Včasih spletne trgovine in oglasi ne označujejo črkovnega indeksa, potem lahko uporabite digitalni, da razumete dimenzije naprave;
• 70 - generacija in model. Pomembno je razumeti, da večje kot je to število, tem novejša naprava. Za primerjavo moj stara tablica ima indeks CTH-460, sodobni analog je CTH-490. Generacije se razlikujejo za 10: 460, 470 in tako naprej.

Velikost grafičnega tabličnega računalnika

Ko rišete, je aktivno območje delovnega prostora zelo majhno. Z drugimi besedami, pisalo nenehno drsi znotraj polmera majhnega kroga. Ta krog se lahko nekoliko premakne. Sčasoma nastane madež, ki je viden kot gosta kopica mikroprask. Kaže, da periferije naprave praktično ne uporabljate, vse se dogaja v središču.

Lahko bi domnevali, da velika grafična tablica ni potrebna, saj nikoli ne boste izkoristili njenega celotnega delovnega območja in bo mesto za dejavnosti enako veliko kot pri manjšem modelu. Ampak to ni res.

Ko delate na tablici, je njeno delovno območje projicirano čez celotno širino monitorja. Zato, večja kot je tablica, bolj natančne lahko nanesete poteze. In obratno, večji ko je monitor in manjša tablica, težje in neprijetno vam bo risanje. Iz izkušenj lahko povem, da je po prehodu z velikosti S na M pri delu na 29-palčnem ultra širokem monitorju moje delo postalo 25-30% bolj udobno. Ugotavljam, da je za risanje zapletenega obrisa potrebnih manj truda, celotna izkušnja pa je bolj gladka in prijetna.

Večje grafične tablice bi morale zagotavljati še bolj udobno delovno okolje, vendar nisem delal na L-modelih, tako da lahko samo domnevam.

Razlike med amaterskimi in profesionalnimi tablicami Wacom

Z nakupom pro modela prejmete brezžično napravo iz kakovostnejše plastike z 2048 stopnjami občutljivosti na pritisk proti 1024 pri cenejših modelih, lep dizajn, dodatne kontrole v obliki gumbov in obročka na dotik. Z mlajšimi, zastarelimi modeli serije Bamboo, ki so jih ukinili, sem povsem zadovoljen. Razlika v ceni med amatersko in profesionalno različico bo več kot dvakratna. Tabela bo vse uredila:

Nastavitev Wacom Bamboo Pen & Touch M CTH-670

Preden priključite napravo, prenesite gonilnike z uradne spletne strani Wacom.

Seznam modelov	Povezava do voznika
Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 En 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	Windows macOS
Bamboo Pen&Touch CTH-460/470/471/660/661/670 Bambusovo pero CTL-460/471	Windows macOS

Ko povežete tablični računalnik in namestite gonilnike, zaženite aplikacijo Nastavitve Wacom, ki ga najdete prek Windows iskanje(Win + S) ali na nadzorni plošči.

Osnovne nastavitve tabličnih računalnikov podjetja se ne razlikujejo, tako amaterski kot profesionalni modeli so konfigurirani na podoben način.

Na zavihku Tablični računalnik Tablični računalnik lahko konfigurirate za desno in levo roko ter tipkam dodelite dejanja. Najprej jih namestite Onemogočeno, čez čas bo mogoče dodeliti bližnjične tipke.

Na naslednjem zavihku Pero najdeni so pomembni parametri:

• Tip Feel- občutljivost na pritisk. Pustite ga na sredini. V procesu boste razumeli, kakšna trdota vam je všeč in jo prilagodite svojemu okusu;
• Sledenje— način sledenja položaju pisala. Namestite Način peresa— delovno območje tablice se razteza tako, da zapolni celoten zaslon. Način Miška uporablja se kot zamenjava za miško;
• Preostale nastavitve niso tako pomembne. Gumbi peresa vam omogoča, da gumbom pisala dodelite dejanje. Eraser Feel— občutljivost gumijastega traku na zadnji strani pisala. Te funkcije ne uporabljam, ker hitreje preklapljam z bližnjičnimi tipkami.

V istem zavihku v razdelku Sledenje pritisni gumb Preslikava ... za konfiguracijo projekcije delovnega območja tablice na zaslon monitorja. Odpre se okno Podrobnosti o načinu peresa.

V poglavju Območje zaslona izberite Monitor, če imate več monitorjev in navedite glavnega. Če je samo en monitor, ga pustite Vsi zasloni

.

V poglavju Skaliranje ne pozabite potrditi polja zraven Razmerja sile tako da se delovno območje ne raztegne, ko se projicira na platno. V tem primeru del delovnega območja tablice ne bo uporabljen, vendar bomo imeli običajna razmerja 1 proti 1. In če narišete krog, bo na zaslonu prikazan kot krog in ne podolgovata elipsa.

Ne pozabite potrditi polja zraven Uporabite Windows Ink za občutljivost na pritisk za delo.

Na naslednjem zavihku Dotaknite se Možnosti počistite polje nasproti Omogoči vnos na dotik da preklopite tablico v običajni način.

Na preostalih zavihkih imam vse onemogočeno, saj ne uporabljam niti gest v načinu dotika niti lastniškega spustnega menija. S tem je nastavitev grafične tablice končana.

Animate CC ali Flash Professional CC?

Adobe Animate CC je preimenovanje Adobe Flash Professional CC; programu je bilo dodanih več novosti. Tudi s starim imenom je pridobil izjemno priljubljenost med umetniki, animatorji in neodvisnimi razvijalci iger. Načela vektorskega oblikovanja vam omogočajo, da ustvarite sprite za katero koli ločljivost. Vsaka različica, ki jo lahko dobite, bo delovala za risanje. Orodja za risanje so ostala enaka že vrsto let, le z manjšimi izboljšavami. Uporabil bom Adobe Animate CC, vendar bo vse napisano veljalo tudi za starejše različice Adobe Flash Professional. Mimogrede, v Zadnje čase Adobe je prešel na model mesečne naročnine za dostop do svojih izdelkov namesto dragega enkratnega licenciranja. Zdaj je cena za z uporabo programa Adobe Animate CC stane 20 USD na mesec.

Prva izdaja programa Adobe Animate CC

Po prenosu ustvarite novo datoteko in izberite vrsto Akcijski skript 3.0. V istem oknu lahko določite parametre scene:

• Premer in Višina— širina in višina scene v slikovnih pikah. Nastavimo jo na 1920 x 1024, kot je ločljivost sodobnega monitorja ali pametnega telefona;
• Enote ravnila— merske enote, nastavljene slikovne pike;
• Hitrost sličic— število sličic na sekundo, pusti 24;
• Barva ozadja— barva ozadja, nastavljena na sivo.

Te nastavitve lahko spremenite, ko je dokument ustvarjen. Če želite to narediti, morate izbrati orodje Orodje za izbiro (vroča tipka V), odprite okno Lastnosti in razširite razdelek Lastnosti. Če tega okna ne najdete, uporabite meni Okno → Lastnosti ali kombinacija Tipke Ctrl+ F3.

Nastavitev vročih tipk

Če želite povečati svojo delovno učinkovitost, morate uporabiti hitre tipke do maksimuma. V zgodnjih fazah to zahteva privajanje in pomnjenje novih kombinacij tipk, v prihodnosti pa zagotavlja soliden preskok v vaši učinkovitosti. Večino bližnjičnih tipk sem redefiniral tako, da so na desni strani tipkovnice. Zakaj na desni? Dejstvo je, da sem levičar in mi je zato bolj priročno. Če ste desničar, si boste morali izmisliti svojo shemo. Poleg tega uporabljam Rapoo E9050 in Apple Wireless Keyboard, ki sta izdelani v obliki tipkovnic za prenosnike, tako da, če uporabljate tipkovnico polne velikosti, se spet potrudite in si omislite svojo shemo – bo izplačate v veliko prihranjenega časa - in upoštevajte mojo shemo kot primer.

Dobite idejo: združite osnovne ukaze na priročni strani tipkovnice, da jih zagotovite hiter dostop brez nenehnega spreminjanja položaja roke. Večino časa mora ležati na enem mestu, samo prsti "hodijo" v majhnem polmeru in pritiskajo gumbe. Seveda bodo še vedno obstajala moštva, ki bodo zahtevala spremembo položaja, a so v veliki manjšini. Tukaj je moj diagram:

Ekipa	Opis	Stara kombinacija	Nova kombinacija
Izberi vse	Izberite vse	Ctrl+A	Ctrl + A, O
Prekliči izbiro vseh	Odstrani izbiro	Ctrl + Shift + A	Ctrl + Shift + A, P
Razveljavi	Prekliči dejanje	Ctrl+Z	Ctrl + Z, [, Z
Ponovi	Ponovi dejanje	Ctrl+Y	Ctrl + Y, ]
Zoom	Skaliranje	Shift + Z, Z	Shift + Z, \
Približaj	Povečaj sliko	Ctrl + =, Ctrl + Num =	Ctrl + =, Ctrl + Num =, =
Pomanjšanje	Pomanjšanje	Ctrl + =, Ctrl + Num =	Ctrl + -, Ctrl + Num -, -
Poravnaj	Izravnajte izbrane krivulje		9
Gladka	Gladke izbrane krivulje		0
Obrni vodoravno	Obrnite vodoravno		F
Obrni navpično	Obrni navpično		Shift + F
Cut	Izreži v odložišče	Ctrl+X	Ctrl + X, X
Podvojeni simbol ...	Simbol kloniranja		Ctrl+D
Zamenjaj simbol ...	Spremenite simbol		Ctrl + ]

V večini primerov nove kombinacije ne nadomeščajo starih, ampak jih dopolnjujejo, uvedenih je več novih ukazov. Konfigurirati ga morate prek menija Uredi → Bližnjice na tipkovnici.... V iskalno polje vnesite ime ekipe, v stolpec Bližnjica Kliknite na prazen prostor nasproti želenega ukaza in pritisnite novo kombinacijo tipk.

Ne poskušajte razumeti ukazov, navedenih v tabeli, vsi bodo razloženi v naslednjih lekcijah. V prihodnosti, ko jih začnete aktivno uporabljati, jih boste najverjetneje večkrat redefinirali, dokler ne najdete najbolj priročne možnosti.

Nastavitve čopiča

Čopič(brezžična tipka B) - orodje za čopič, ki se najpogosteje uporablja pri risanju. Nastavitve so skoncentrirane v dveh oknih:

Nastavitve čopiča so končane, pobarvajmo nekaj.

Risanje s čopičem

Izberite ustrezno barvo z uporabo okna Barva (Ctrl + Shift + F9), izberite orodje Čopič (B) in začnite z eno dolgo potezo z malo sile, da začrtate prihodnjo obliko. Nato narišite nastali obris, da zgladite vse neravnine – čopič je pripravljen.

Upoštevajte, da so bili v zgornjem primeru uporabljeni samo trije udarci. Prizadevati si morate za srednje dolge poteze, da vaša roka ne zapusti tablice. Poskusite narediti veliko majhnih potez nepravilno, saj kontura ne bo gladka in gladka velik znesek dodatne točke.

Adobe Animate CC deluje na vektorskih principih. Vsi objekti so opisani matematično in jih je mogoče skalirati brez izgube kakovosti, za razliko od rastrskega pristopa. To nam omogoča, da manipuliramo z vektorskimi objekti na način, ki ga v rastrskem urejevalniku nikoli ne bi mogli narediti tako preprosto. Zgladimo in poenostavimo konture, poravnamo krive linije, spremenimo proporce in deformiramo grafične objekte brez izgube kakovosti. Vsaka poteza se samodejno pretvori v matematične krivulje, ki jih lahko natančno prilagodimo in spremenimo.

Če želite preveriti vse zgoraj navedeno, aktivirajte orodje Orodje za podizbor(brezžična tipka A) in izberite čopič, ki ste ga pravkar narisali. Zdaj lahko vidite točke vektorske poti in jih celo spremenite.

Zaključek

Danes smo nastavili Adobe Animate CC in smo pripravljeni začeti risati. Malo vadite, preden nadaljujemo. Naučite se risati preproste geometrijske oblike brez popačenj, preizkusite različne barve in nastavitve čopičev (eksperimentirajte s parametrom Smoothing).

Podobni materiali