Stvaranje animacije između oblika. E-škola macromedia flash mx ii tečaj: osnove izrade animacije u macromedia flash mx modul iii: animacija oblika, zvučna animacija. Projekt “Pretvaranje pravokutnika u slovo”

Praktični rad №1

Praktični rad broj 2:

Napravite animaciju oblika za broj "1" koji se glatko pretvara u broj "2". Da biste to učinili, stvorite animaciju oblika za objekt na prvom i zadnjem okviru. Koristite brojeve kao objekte, prilagodite ih izgled(veličina, boja, položaj, korištenje skupa svojstava na odgovarajućoj ploči).

Za izradu animacije oblika tekstualnog objekta na prvom i zadnjem ključnom kadru, brojevi se moraju "razdvojiti" - pretvoriti iz teksta u grafiku. To se radi na sljedeći način - naredba split se primjenjuje na odabrani objekt (način izbornika "Modification" - "Split").

Praktični rad br. 3:

Rezultirajuća animacija u prethodnom zadatku možda nam neće odgovarati zbog "ružnog" "toka" točaka objekta na prvom kadru prema nekim točkama objekta na zadnjem kadru. Da bi se poboljšala realističnost transformacije jednog objekta u drugi, potrebno je naznačiti u koju će točku objekta na zadnjem kadru "teći" odabrana točka objekta na prvom kadru.

Da biste to učinili, izvršite sljedeće korake (koristeći animaciju prethodnog rada):

Primjeri izrade animacija formi dani su u mapi Animacija - Form Animation.

Kratak sadržaj predavanja:

Osim animacije s promjenom svojstava objekta (položaj, veličina, rotacija, prozirnost itd.), možete izraditi animaciju u kojoj se mijenja oblik objekta.

Da biste animirali oblik tekstualnog objekta na prvom i zadnjem ključnom kadru, tekst se mora "razbiti" pretvaranjem u grafiku.

Da bi se poboljšala realističnost transformacije jednog objekta u drugi, potrebno je naznačiti u koju će točku objekta na zadnjem kadru "teći" odabrana točka objekta na prvom kadru. Za to se koriste sidrišne točke (naznake krivulje).

Ako primijenite animaciju oblika na oblike s različitim bojama, tada će se boja promijeniti tijekom transformacije.

Ključni pojmovi

• Animacija oblika
• Razdvajanje teksta
• Krivulja savjet

Komplet za vježbanje:

• Za koje objekte je moguće izraditi klasičnu animaciju oblika?
• Je li moguće promijeniti boju animiranog objekta prilikom izrade animacije oblika?
• Dodjeljivanje sidrišnih točaka (savjeti za krivulje) prilikom izrade animacije oblika?
• Što se podrazumijeva pod grafički prikaz tekstualni objekt?
• Može li se animacija oblika primijeniti na tekstualni objekt? Koje transformacije trebate učiniti s blokom teksta za ovo?

Vježbe

• Napravite animaciju dima.
• Animirajte kretanje i oblik oblaka na nebu.
• Napravite animaciju za promjenu oblika jezika plamena.
• Napravite animaciju platna transparenta koji vijori na vjetru.

Grafika oblika u trendu je posljednjih nekoliko godina. Međutim, iza velike popularnosti se krije mukotrpan rad animiranjem svakog elementa na radnom prostoru.

Ako nikada prije niste radili animaciju oblika, sada je pravo vrijeme!

Odabrali smo 30 koji će vam pomoći da svladate načelo animacije oblika, kao i naučiti vas kako izraditi i izvesti vektorske ilustracije pogodne za daljnju animaciju.

Animação Feliz de Shapes com Textos

Sekvenca animacije – Vodič za Adobe After Effects

Shape Layer Repeater (radijalno) – Adobe After Effects vodič

Vodič – brzi savjeti 03 – 2D krugovi i crtkani potez

Animirana infografska scena Epizoda 1 After Effects

Earth Hour Tutorial After Efekti

Izrada animiranih uzoraka pomoću ponavljača slojeva oblika u programu After Effects

Summit 1.2 - Uvod u pokretnu grafiku - After Effects

Kako uvesti i animirati vektorsku datoteku u After Effects

Uvod u Ancor Point. Palm animacija

Kako stvoriti zupčanike?

Radijalno brisanje prijelaza oblika

Odbrojavanje i odbrojavanje u programu Adobe After Effects

Rad sa skriptom Lines Creator

Krugovi su sve! Lekcija 1. Napravite uvod

Krugovi su sve! Lekcija 2

Krugovi su sve! Lekcija 3: Usklađivanje boja u programu Adobe Kuler

Krugovi su sve! Lekcija 4

Efekt širenja krugova

Animacija oblika

Stvaranje videozapisa jednostavnog oblika

Stvaranje oblikovane animirane ikone

Stvaranje uvoda u jednostavan oblik

Spektakularna animacija oblika pametnog telefona

Sjajna animacija oblika

Stvaranje jednostavnog oblika oblika

Oblici! Izrada animiranih uzoraka pomoću ponavljača slojeva oblika

Elegantna animacija oblika

Kako napraviti animirani banner

Lekcija 25: Animacija oblika

Ciljevi lekcije:

formirati sposobnost stvaranja animacije oblika;

razvijati kulturu govora, koncentraciju; razvijati kognitivnu i mentalnu aktivnost učenika, logičko i algoritamsko mišljenje;

educirati neovisnost, etiku odnosa.

Vrsta lekcije : lekcija usvajanja novih znanja i vještina.

Softver i metodološka podrška lekcija : urednik Bljesak, § 20 udžbenika, listić.

Plan učenja:

Organiziranje vremena

Provjera znanja iz prethodne lekcije.

Objašnjenje novog gradiva.

Učvršćivanje materijala.

Sažimanje i razmišljanje.

Drvo znanosti ima sve svoje korijene u praksi.

A. N. Nesmejanov

Tijekom nastave

Organiziranje vremena

Bok dečki! Prije početka naše lekcije, predlažem da napravite mali test raspoloženja. ja imam ovo dobro raspoloženje(smajlić uključen slajd 1 ). A sada svima pokažite što imate (da biste to učinili, sjednite za računala i nacrtajte svoje raspoloženje u Flashu). Dobro napravljeno! Sačuvaj svoje raspoloženje. Jako bih volio da do kraja ili do kraja našeg sata svi budu dobro raspoloženi.

Ažuriranje znanja

Frontalni razgovor s učenicima o sljedećim pitanjima.

Dečki, što smo radili nekoliko lekcija? (učiti kako izraditi animaciju)

Kakvu smo vrstu animacije već naučili stvarati? Koja je njihova razlika?

Kreću li se objekti uvijek pravocrtno?

Navedite primjere nepravocrtnog gibanja.

Kako promijeniti nazive slojeva?

Kako umetnuti ključni okvir?

Kako uvesti sliku u biblioteku?

Kako otvoriti prozor knjižnice?

Koji ključ pretvara objekt u simbol knjižnice?

Koju smo animaciju izradili u prošloj lekciji?

Sada se prisjetimo algoritma za stvaranje animacije pokreta. Da bismo to učinili, podijelit ćemo se u dvije grupe, svaka grupa dobiva stupnjeve (jedan na letcima). Vaš zadatak je poredati se po redoslijedu radnji.

Algoritam za izradu animacije kretanja.

Nacrtajte ili zalijepite objekt u 1 okviru.

Pretvorite objekt u simbol knjižnice (F8) ili grupu.

Odaberite posljednji okvir animacije na vremenskoj traci. Pritisnite F6.

U zadnjem kadru animacije promijenite kako biste premjestili objekt na novu lokaciju.

Pritisnite desnu tipku miša: Kreirajte pokret

Učenje novog gradiva (metoda izlaganja problema)

Mislite li da postoji ograničenje u mogućnostima animacije pokreta?

Problem: kako možete animirati transformaciju jednog objekta u drugi (na primjer, jabuka u krušku).

Dakle, tema naše lekcije jeAnimacija oblika . Formulirajmo ciljeve i zadatke naše današnje lekcije.

Animacija oblika (Tween oblika) omogućuje, kao što naziv implicira, animiranje promjene obrisa slike. Da biste ga izradili, ne morate pretvarati crteže u isječke, kao kada stvarate Motion Tween. Dovoljno:

izraditi crtež koji će se animirati;

odaberite okvir sa slikom tako što ćete ga kliknuti lijevom tipkom miša i na ploči Svojstva (Properties) na popisu Tween odaberite vrstu Oblika;

na mjestu gdje bi animacija trebala završiti, napravite ključni kadar. U njega će se automatski kopirati slika iz početnog okvira. Ovdje možete promijeniti crtež ili nacrtati novi.

Animacija oblika neprihvatljivo na knjižnične objekte simbola tipa i grupirane objekte.

Animacija oblika dopušta:

• glatko transformirati jednu figuru u drugu;

  glatko promijeniti boju figure;

  pomakni figuru

  kombinirati gore navedene mogućnosti.

Pokažite učenicima kako izraditi animaciju obrasca koristeći primjer (video).

Algoritam za izradu animacije forme.

Nacrtajte objekt u 1 okviru.

Odaberite posljednji okvir animacije na vremenskoj traci.

Pritisnite F6.

U zadnjem kadru animacije promijenite oblik objekta ili nacrtajte novi objekt.

Odaberite bilo koji srednji okvir.

Na ploči Twin Properties (Spin) odaberite: Shape (Oblik) (Shapes)

Ctrl + Enter - prikaz animacije.

Formiranje praktičnih vještina učenika (reproduktivna metoda, individualni oblik raditi)

Izvršite zadatke 1, 2, 3 na stranicama 100-101 iz radne bilježnice. Izborni zadatak 4 (bilo koji) 103. str.

Sažimanje i razmišljanje

prednja anketa. Rezultati ankete trebali bi pojasniti koje točke učenicima stvaraju poteškoće.

Pitanja za anketu.

1. Što se podrazumijeva pod animacijom forme?

2. Navedite korake uključene u stvaranje animacije obrasca.

3. Koji objekti se ne mogu animirati oblicima?

4. S kakvim raspoloženjem napuštate lekciju?

Da biste to učinili, otvorite svoju datoteku raspoloženja koju ste stvorili na početku lekcije, oslikajte svoje raspoloženje na kraju lekcije u okviru 30 i izradite animaciju oblika. Pokažite jedno drugome.

Hvala na lekciji!!!

U prošloj lekciji smo vas upoznali s automatskim izmenama pokreta (Motion Tween), a sada ćemo nastaviti govoriti o automatskoj animaciji i pogledati automatsku animaciju oblika (Shape Tween). Treba napomenuti da se pojam Shape Tween različito prevodi u različitim publikacijama, posebice se nalazi naziv "animacija popunjavanja okvira s promjenom oblika". Međutim, vrlo je teško točno prevesti ovu kombinaciju, budući da je tween skraćenica za between (između). Dakle, znači da ove vrste animacija se gradi na temelju početnog i završnog okvira, a sve između tih okvira interpolira se pomoću jednog ili drugog algoritma. Animacija oblika omogućuje vam stvaranje efekta prelaska iz jednog oblika u drugi dok mijenjate lokaciju, veličinu i boju oblika.

Treba napomenuti da se animacija oblika može primijeniti samo na oblike, a ne na grupe, instance ili bitmape. Da bi se animacija promjene oblika primijenila na te objekte, prvo ih je potrebno rastaviti (razdvojiti) na komponente. Da biste razumjeli načela stvaranja animacije automatske promjene oblika, razmotrite jednostavan primjer, u kojem će se jabuka pretvoriti u krušku. Nacrtajte zatvorenu putanju ispunom u obliku jabuke, kao što je prikazano na sl. jedan.

Riža. 1. Obris radijalnom ispunom

Zatim kliknite na naziv sloja nacrtanog objekta (u ovaj slučaj zadani naziv sloja je Layer 1) - sloj će postati odabran (slika 2), a prozor Tween će se pojaviti na dnu u ploči Properties, u kojem trebate odabrati stavku Shape.

Riža. 2. U izborniku Tween odaberite Shape

Dodajmo sada posljednji okvir - neka se oblikovanje odvija u 30 okvira. Umetnite ključni okvir na 30. okvir i tamo postavite zatvorenu putanju u obliku kruške (slika 3). Imajte na umu da se u našem primjeru početni i zadnji okvir razlikuju ne samo po obliku obrisa, već i po boji ispune.

Riža. 3. Dobiveni oblik stavite u 30. okvir

Nakon što smo odredili konačni okvir transformacije, na panelu Timeline razmak od prvog do 30. okvira postao je svijetlozelen, a unutar tog razmaka razvučena je strelica koja označava stvaranje animacije promjene oblika, tj. stvaranje sljedećeg filma.

Riža. 4. U prozoru Ease postavljen je način ubrzanja/usporavanja animacije

Slično kao što je implementirano u automatskoj animaciji između, u animaciji automatskog oblikovanja moguće je postaviti da se animacija uspori ili ubrza. Pokažimo ovu mogućnost našim primjerom. Odaberite sloj i kliknite na trokut pokraj okvira Ease (Sl. 4), zbog čega će se pojaviti klizač koji vam omogućuje postavljanje načina ubrzanja / usporavanja. Da biste ubrzali kretanje, unesite negativan broj od -1 do -100, a da biste usporili proces transformacije, unesite pozitivan broj od 1 do 100. Postavite parametar Easing, na primjer, na +100 i dobit ćete sljedeći film.

Riža. 5. Padajući izbornik za miješanje

Obratite pozornost na mogućnost odabira prirode animacije koja se postavlja u padajućem izborniku Blend (slika 5). U ovom izborniku možete odabrati dvije opcije - Distributive, u kojoj će međuoblici biti glatkiji, i Angular, u kojoj će oblici biti kutni.

Korištenje savjeta u animaciji obrazaca

U prethodnom paragrafu proučavali smo proces animacije promjene oblika, u kojem se jabuka pretvara u krušku. Logičan bi bio proces morfiranja u kojem se grančica pretvara u grančicu, a voćka u voćku, dok program generira međutransformacijske okvire, “ne znajući ništa” o strukturi jabuke i kruške. Stoga, ako želimo zadržati neku logiku preoblikovanja, moramo reći programu koja područja treba naslijediti. U tu svrhu, u Flash program koriste se takozvani hintovi (shape hints) kontrolni markeri, pomoću kojih možete kontrolirati proces oblikovanja. Savjeti označavaju točke koje bi trebale ulaziti u sebe u početnoj i završnoj slici. Savjeti su označeni slovima (od "a" do "z").

Pogledajmo kako možemo poboljšati našu animaciju pomoću savjeta.

Odaberite prvi ključni okvir i izvršite naredbu Modify => Shape => Add Shape Hint, čime će se početni hint pojaviti na slici u obliku crvenog kruga sa slovom “a”. Pomaknimo savjet na gornju točku grane (slika 6).

Riža. 6. Postupak instalacije savjeta

Riža. 7. U posljednjem okviru postavite točku gdje treba ići savjet

Prijeđite na posljednju ključnu sličicu i vidjet ćete da se posljednji savjet pojavljuje u obliku zelenog kruga sa slovom "a" unutar obrisa rezultirajućeg oblika. Pomaknite savjet na točku koja bi trebala odgovarati prvoj označenoj točki (slika 7). Nakon što stavite hint na krivulju u zadnjem okviru, u prvom okviru hint će promijeniti boju (iz crvene u žutu) - to znači da je uspostavljeno podudaranje između hintova. Ponovite ovaj postupak dodajući još savjeta (Slika 8). Za dobivanje najbolje rezultate savjete treba postaviti suprotno od kazaljke na satu, počevši od gornjeg lijevog kuta slike.

Riža. 8. Položaj savjeta u rezultirajućoj slici

Riža. 29. Napravite filmski isječak grane

Budući da je naš zadatak izgraditi animirano stablo, koje se pak sastoji od grana, pretvorimo granu koju smo napravili u filmski isječak izvršavanjem naredbe Modify => Convert to symbol (Slika 29). Sada je moguće izgraditi stablo od skupa stezaljki za "grane" (Sl. 30). Kao što se može vidjeti sa sl. 30, isječak grane se više puta primjenjuje s različitim transformacijama (rotiranje, zrcaljenje i skaliranje).

Riža. 30. Stablo se gradi na temelju filmskih isječaka "grana".

Riža. 41. Dodavanje instanci simbola u kopiju simbola 1 faze

Također možete duplicirati simbol pomoću njegove instance. Pokažimo to istim primjerom. Odaberite instancu simbola 1 na pozornici i izvršite naredbu Modify => Symbol => Duplicate Symbol (Slika 42).

Riža. 42. Duplicirani simbol na temelju instance

Riža. 43. Duplicirana ploča simbola

Nakon toga pojavit će se još jedan simbol - Symbol1 kopija 2 (slika 43). Dvaput kliknite na naziv novog simbola u prozoru knjižnice, što će dovesti do prozora za uređivanje novog simbola. Promijenimo položaj lista u zadnjem okviru, idimo na glavnu scenu i dodamo nekoliko instanci novog simbola. Kao rezultat toga, dobit ćemo konačnu verziju

Opis:

Ciljevi lekcije:
1. obrazovni – stvoriti predodžbu o procesu popunjavanja okvira s promjenom oblika, koji se koristi za transformaciju nacrtanih figura između početne i krajnje točke okvira
2. razvijanje - razvijati intelektualne vještine za analizu i usporedbu primljenih informacija, razvijati Kreativne vještine prilikom izrade animacije
3. obrazovni - njegovati estetsku percepciju stvarnosti, ljubav prema filmskoj umjetnosti, formirati vještine samokontrole.

Oprema i didaktički materijal: PC, Flash program, multimedijski projektor, demonstracijski materijal, elektronička prezentacija, zadaci.

Struktura i tijek lekcije:

1. Organiziranje vremena. Provjera učenika i spremnosti za nastavu.
2. Provjera domaće zadaće

   Što je animacija? Koje vrste animacija poznajete, njihove prednosti i nedostatke? Kako se izvodi animacija pokreta?
   U prošloj lekciji upoznali smo se s animacijom pokreta. Danas ćemo nastaviti proučavati animaciju. Zapišite temu lekcije: Izrada animacije obrasca u Flashu.

3. Postavljanje ciljeva. Formulirani su ciljevi lekcije

   (Datoteka je prikazana – Stvorite animaciju oblika u Flash.ppt – slajd 1).

4. Objašnjenje novog gradiva, njegove bilješke, prikaz izvođenja osnovnih operacija

   Animacija oblika s popunjavanjem prvog i zadnjeg ključnog kadra Shape tweening.
   Reshape Frame Fill koristi se za transformaciju oblika crteža između početne i krajnje točke. Flash može izvršiti preoblikovanje operacije ispunjavanja okvira samo na oblicima. Možete ispuniti okvire za više oblika na jednom sloju. Ali za jasnu organizaciju potrebno je da svaki oblik bude na zasebnom sloju, ako se naknadno vratite na ovaj fragment animacije da napravite određene promjene, tada će rad biti pojednostavljen. (Datoteka je prikazana slajd 2). Učenici vode kratak sažetak. (Nadalje, sve operacije se prikazuju na ekranu pomoću multimedijskog projektora.)
   Za izradu izračunate animacije oblika trebate učiniti sljedeće:
   1. Nacrtajte objekt u ključnom kadru.
   2. Budući da ste u prvom okviru, upotrijebite ploču " Okvir”, odaberite stavku oblik, promijeniti prigušenje.
   3. Navedite završni okvir i uključite naredbu čisti ključni kadar, to možete učiniti desnim klikom na okvir, koji će biti ključ, pojavit će se popis u kojem treba odabrati čisti ključni kadar. Postavite sliku u nju, zatim pustite animaciju. Da biste to učinili, odaberite stavku izbornika " Kontrolirati " tim " Reprodukcija» ili pritisnite tipku Unesi na tipkovnici. Nakon toga će se pokrenuti animacija.
   Nakon što imate dva ključna kadra, prvi učinite aktivnim (samo dođite do njega) i odaberite " Okvir» na popisu Tweening niz oblik:
   

   Okviri na vremenskoj traci trebali bi postati zelenkasti, a strelica bi se trebala protezati od prvog okvira do drugog.
   Kao rezultat toga, dobit ćete niz srednjih okvira koji će odražavati prijelaz iz prvog oblika u drugi. (Datoteka je prikazana – Stvaranje animacije pokreta u Flash.ppt – slajd 3):

   

   U ovoj animaciji krug se pretvara u neku vrstu polumjeseca. Na prvom ključnom kadru nacrtan je krug, a na drugom ključnom kadru (ovo je 10. kadar scene) polumjesec. Na ploči " Okvir» postoje dva parametra Olakšanje(ubrzanje) i Mješavina(Tranzicija)

   

   Olakšanje(ubrzanje) postavlja inverzno eksponencijalno ubrzanje. Vrijednost ovog parametra može varirati od -100 do +100. To znači da ako navedete negativan popuštanje(ubrzanje), brzina će se povećati (vidi sl. 4). I obrnuto, ako popuštanje(ubrzanje) će biti pozitivno, animacija će se usporiti (vidi sliku 5).

   

   Parametar Mješavina(Tranzicija) , definira algoritam prijelaza: distribucija(distribucijski, opći) i Kutni(kutni). Prvi pokušava omekšati što je više moguće, izgladiti prijelaz s jedne figure na drugu. Drugi pokušava zadržati proporcije uglova. Ako vam prijelaz ne odgovara, možete eksperimentirati s ovom postavkom.

5. Konsolidacija pređenog gradiva.

   (Datoteka je prikazana – Stvaranje animacije pokreta u Flash.ppt – slajd 4).
   Stvaranje animacije oblika: "Noćni cvijet"

   
6. Sažimanje lekcije.
   Dečki, predlažem da pogledate jedni drugima posao. Obratite pozornost na prednosti i nedostatke različitih animacija. Individualne animacije prikazuju se svima koji koriste projektor. Razgovarano pozitivne bodove, pogreške, nedostatke, ako ih ima.
   Ponovimo glavne točke lekcije.
   S kojim programom smo danas nastavili naše upoznavanje? Kako stvoriti animaciju oblika? Koje je proširenje datoteke animacije? Jesu li vam se svidjele značajke programa i gdje biste ih mogli koristiti?
   Analiza odgovora učenika; argumentacija i ocjenjivanje.
7. Domaća zadaća: sažetak; promislite i pripremite materijal za vlastitu animaciju

Bibliografija

1. Macromedia Flash 5 / knjiga + video tečaj: Tutorial– M.: Najbolje knjige. Uredio V.B. Komyagin.
2. Flash 8. Baš kao 2x2. A.A. Borisenko
3. INTERNET: www.flashblog.ru; www.adobe.com