Macromedia flash 8 lecții. Învățarea Macromedia Flash. Punct de referință liniar
Până acum, ne-am uitat la filmele Flash care se joacă fără intervenția spectatorului de la început până la sfârșit. Cu toate acestea, Flash vă permite și să creați aplicații interactive în care utilizatorul poate controla afișarea conținutului. În această lecție, vom începe să explorăm elementele limbajului de scripting Action Script și vom vedea cum poate fi folosit pentru a crea aplicații interactive. De exemplu, să creăm un album foto cu elemente de interfață interactivă. Dar înainte de a începe să descriem Action Script, ar trebui să vorbim despre încă un tip de simbol pe care l-am ignorat până acum - simbolurile butoanelor. Pentru a construi o interfață interactivă, acestea sunt pur și simplu necesare.
Crearea de butoane
Butonul este un film interactiv cu patru cadre. Când atribuim un tip de buton unui simbol, Flash creează o cronologie cu patru cadre pentru noul simbol:
Up-state este un cadru corespunzător situației în care butonul nu este apăsat și indicatorul mouse-ului nu este situat deasupra butonului;
Cadru suprastat care ilustrează aspectul butonului când cursorul mouse-ului este poziționat peste buton, dar butonul nu este apăsat;
Starea în jos acest cadru arată aspectul butonului atunci când este apăsat;
Starea de lovire definește zona în care butonul răspunde la un clic de mouse; această zonă nu este vizibilă în clip.
Pentru a crea un buton, rulați comanda Insert => New Symbol (puteți tasta comanda rapidă de la tastatură Control+F8). În caseta de dialog Creare simbol nou care apare, introduceți un nume pentru simbolul butonului (de exemplu, but1) și selectați tipul de simbol Buton.
Flash va trece la modul de editare a caracterelor, oferind cadre Sus, Peste, Jos și Hit. Primul cadru, Sus, devine un cadru cheie gol. Să desenăm o vedere neapăsată a butonului în acest cadru (Fig. 1).
Orez. 1. Buton pentru cadru sus
Să selectăm al doilea cadru, marcat ca Peste și corespunzător stării în care cursorul se află deasupra butonului. Să introducem un cadru cheie în acest cadru (folosind comanda Insert => Keyframe), în urma căruia va apărea un cadru cheie care repetă complet conținutul Up-frame-ului. Să schimbăm culoarea butonului, așa cum se arată în Fig. 2.
Fig 2. Butonul peste cadru
În mod similar, adăugați următorul cadru (cadru în jos) și desenați starea apăsată a butonului (Fig. 3).
Orez. 3. Buton pentru cadru în jos
Nu vom desena nimic în cadrul Hit deocamdată, dar vom reveni la acest cadru puțin mai târziu.
Să mergem la scena principală, să apelăm biblioteca folosind comanda Window => Library și să creăm o instanță a simbolului butonului trăgându-l pe scenă (Fig. 4.)
Orez. 4. Creați o instanță de buton trăgând-o din bibliotecă
Drept urmare, obținem următorul film. După cum se poate observa din acest film, apăsarea unui buton are loc nu numai când facem clic cu mouse-ul pe zona centrală (de lucru) a butonului, ci și când facem clic pe cadrul din jurul acestuia. Acest lucru se datorează faptului că, dacă cadrul Hit nu este desenat, atunci zona de lucru a butonului va corespunde cadrului Sus.
Pentru ca butonul să fie apăsat doar în zona de lucru, este necesar să definiți această zonă în cadrul Hit, adică să desenați butonul fără cadru (vezi Fig. 5)
Orez. 5. Butoane Hit-frame
După ce adăugăm Hit-frame-ul necesar, vom obține următorul film, în care atunci când faceți clic pe cadru, butonul nu este apăsat.
Pentru a face un buton interactiv, trebuie să asociați faptul de a apăsa butonul cu executarea anumitor comenzi, adică să descrieți un anumit scenariu. Pentru a crea scripturi în Flash, există un limbaj special numit Action Script. În această lecție vom atinge doar o mică parte din capacitățile acestui limbaj, iar în viitor vom reveni la structura și sintaxa Action Script pe măsură ce exemplele de creare a filmelor interactive în Flash devin mai complexe.
Înțelegerea Action Script
Action Script este un limbaj de scripting - un set de instrucțiuni care controlează elementele unui film Flash. Scripturile de acțiune pot fi încorporate într-un film sau stocate extern fisier text cu extensia AS.
Când încorporați un scenariu într-un film, acesta poate fi încorporat în diferite părți ale filmului. Mai precis, Scripturile de acțiune pot conține cadre cheie, instanțe de buton și instanțe de clip video. În consecință, scripturile se numesc Acțiuni cadru, Acțiuni butoane și Acțiuni MovieClip.
Scripturile de acțiune rulează atunci când apar anumite evenimente inițiate de utilizator sau de sistem. Mecanismul care îi spune lui Flash ce instrucțiune să execute atunci când are loc un eveniment se numește handler de evenimente.
Action Script are propria sa sintaxă, la fel ca JavaScript. Flash MX 2004 acceptă Action Script din toate versiunile anterioare de Flash.
Unul dintre conceptele principale ale Action Script este Acțiuni - comenzi care emit instrucțiuni în timpul execuției unui fișier SWF. De exemplu, gotoAndStop() trimite capul de redare la un anumit cadru sau cue. De la cuvântul Actions provine numele limbajului - Action Script (literalmente - action script). Ne vom familiariza cu majoritatea conceptelor acestui limbaj la exemple concrete.
Album foto interactiv
Să demonstrăm utilizarea butoanelor pentru a gestiona un album foto - creați un set de fotografii și adăugați două butoane care vor derula fotografiile înainte și înapoi.
Să plasăm prima fotografie pe cronologia principală și să adăugăm un buton din setul standard. Pentru a accesa folderul dorit, trebuie să rulați Comanda Windows=> Panouri de control Biblioteci comune => Butoane (Fig. 6).
Orez. 6. Adăugați un buton din biblioteca standard
Ca rezultat al executării acestei comenzi, va apărea un panou care conține un set mare de butoane predesenate tipuri variate. Să selectăm, de exemplu, Butoanele tastelor (butoane similare tastelor de la tastatură), să deschidem folderul corespunzător, să selectăm butonul din stânga tastei (Fig. 7) și să creăm o instanță a acestui buton (trăgându-l pe scenă).
Orez. 7. Elemente ale folderului Butoane cheie
Rețineți că atunci când plasați un al doilea buton (tasta-dreapta) pe scenă și îl mutați pentru a se alinia cu primul buton, programul oferă un indiciu (o linie punctată) care vă permite să poziționați cu precizie butonul (Figura 8).
Orez. 8. Alinierea automată a butoanelor la același nivel
Pentru a adăuga un script, trebuie să apelați editorul Action Script folosind comanda Window => Development Panels => Actions sau apăsând tasta F9. Dacă intenționați să scrieți scripturi frecvent, aceasta este o comandă de la tastatură care merită reținută. Ca rezultat, va apărea editorul Action Script (Fig. 9).
Orez. 9. Panourile Editor de scripturi de acțiune
Dacă experimentați cu evidențierea diferitelor elemente din scenă în timp ce monitorizați mesajele din panourile editorului Action Script, veți descoperi că programul vă va spune pe ce element puteți „agăța” codul. Dacă selectați un cadru pe scenă, în colțul din stânga sus al panoului editorului apare inscripția Actions - Frame; dacă faceți clic pe buton, apare inscripția Actions - Button, adică programul solicită ca codul introdus va se referă la scriptul butonului. Și dacă selectați o fotografie, va apărea un mesaj în câmpul destinat introducerii unui script: Selecția curentă nu poate avea acțiuni aplicate acesteia (nu poate fi aplicat un script acestui obiect selectat).
Vom atribui un script unui buton. ÎN ultimele versiuni ActionScript are capacitatea de a scrie cod centralizat, adică cod care se află într-un singur loc, iar această capacitate vă permite să înțelegeți mai bine programele mari. Cu toate acestea, în exemple simple (care este ceea ce ne uităm), alocarea unui script unui buton este perfect acceptabilă.
Deci, pentru un buton săgeată la stânga, trebuie să formalizăm următorul scenariu: „Dacă butonul este eliberat pe un anumit cadru, atunci din acest cadru trebuie să mergeți la cadrul anterior”. În conformitate cu sintaxa limbajului Action Script (Fig. 10), va arăta astfel:
Prima linie conține handlerul de evenimente butonul on(), care are formatul:
Acum să adăugăm mai multe cadre cheie, astfel încât butoanele create în primul cadru să fie copiate în ele și să plasăm fotografiile necesare în cadrele nou create.
Dacă rulăm filmul creat pentru execuție, cadrele vor fi redate continuu unul după altul și, prin urmare, în primul rând, trebuie să dăm comanda „Stop” pe primul cadru. Pentru a face acest lucru, adăugați comanda corespunzătoare la primul cadru (Fig. 11).
Orez. 11. Script atribuit primului cadru
Vă rugăm să rețineți: comanda nu mai este atribuită butonului, ci cadrului. Faptul că unui cadru i se atribuie un script este notat pe linia principală de editare - o literă mică „a” apare deasupra punctului aldin în desemnarea cadrului.
Drept urmare, am primit următorul film.
Dacă avem doar câteva cadre în albumul foto, atunci două butoane - „Înainte” și „Înapoi” - sunt destul de suficiente, dar dacă setul de fotografii este mare, atunci este indicat să avem și butoane care leagă la început și sfârșitul filmului. În exemplul următor, vom adăuga butoanele corespunzătoare: „La primul cadru” și „La ultimul cadru”. Puteți selecta butoanele unui mnemonic adecvat din biblioteca standard de butoane din folderul Circle Buttons (Fig. 12).
Folosind exemplul propus, ne vom familiariza cu o altă comandă, gotoAndStop(), care vă permite să mergeți la cadrul dorit și apoi să vă opriți.
Orez. 12. Butoane din folderul Circle Buttons
Vom pune un cod pe butonul pentru a merge la primul cadru (al treilea din stânga în Fig. 13), așa cum se arată în Fig. 13.
Orez. 13. Script pentru butonul „În primul cadru”.
În cazul unui album foto cu cinci cadre, adăugați scriptul de tranziție „La ultimul cadru” la ultimul buton:
Scriere automată de scenarii
Până acum am tastat manual toate comenzile, dar panourile editorului ActionScript oferă întreaga linie servicii de scriere automată a scripturilor. Să luăm în considerare aceste posibilități.
Orez. 14. Instrumente automate de scripting
Panoul de editor Action Script vă permite să selectați, trageți, rearanjați și ștergeți comenzi.
Să arătăm cum puteți scrie același script pentru butonul „Înainte” într-un mod automat. Selectând folderul Movie Clip Control (fereastra din stânga sus din Fig. 14), puteți accesa gestionarea evenimentului și apoi trebuie să faceți dublu clic pe elementul corespunzător sau să trageți expresia în câmpul de scriere a scriptului în Drag și Modul drop.
Orez. 15. Sugestie pentru completarea unei expresii
Ca urmare, pe câmpul de lucru vor apărea expresia necesară și un indiciu ca acesta (Fig. 15): selectați comanda dorită din meniu și expresia se completează automat. După cum se poate vedea din meniu, puteți selecta nu numai condiția asociată butoanelor de pe ecran, ci puteți selecta și din meniul Fig. Tasta cu 15 puncte Apăsați „
Orez. 16. Apeluri cu butonul de la tastatură
Să folosim comanda keyPress
Orez. 17. Comanda nextFrame poate fi găsită în folderul Timeline Control
Pentru un buton care duce filmul la începutul albumului foto, puteți selecta apăsând tasta Acasă din meniu ca eveniment, apoi (Fig. 18) trageți comanda gotoAndStop pe câmp, în urma căruia o altă un indiciu va apărea pe sintaxa posibilă a acestei comenzi.
Săgețile din sfatul instrumentului vă permit să vizualizați diferite opțiuni de sintaxă. Programul oferă două opțiuni (Fig. 18 și 19), adică oferă setarea unei scene și a unui cadru sau doar a unui cadru. În cazul nostru, este suficient să specificați doar Cadrul. Dacă numele scenei este omis, implicit este săriți la cadrul scenei curente.
Orez. 18. Sugestie despre sintaxa posibilă a comenzii
Orez. 19. Săgeata triunghiulară vă permite să vizualizați opțiunile de sintaxă
După ce atribuim toate butoanele corespunzătoare butoanele de la tastatură, vom obține următorul film, în care răsfoirea fotografiilor va avea loc de la tastatură, iar apăsarea mouse-ului pe butoanele de pe ecran nu va provoca nicio consecință.
Este posibil să oferim un scenariu în care evenimente diferite să ducă la aceleași acțiuni? Se pare că puteți - pentru a face acest lucru, trebuie să enumerați o listă de nume de evenimente în handler-ul de evenimente. Dacă puneți o virgulă în lista de evenimente după primul eveniment, programul în sine vă va oferi un meniu (Fig. 20).
Orez. 20. Când introduceți o virgulă în lista de evenimente, apare automat un meniu de comenzi suplimentare
Să adăugăm la primul eveniment (apăsând un buton de la tastatură) un al doilea eveniment (eliberând butonul de pe ecran):
pornit(apăsați tasta" |
Să repetăm procedura pentru butoanele rămase și ca urmare vom obține un album foto în care fotografiile vor fi derulate atât cu mouse-ul, cât și cu tastatura (fișierul FLA original poate fi obținut din link).
În exemplul luat în considerare, am folosit tranziția după numărul de cadre, dar această metodă nu este întotdeauna convenabilă: dacă numerotarea cadrelor se modifică în timpul procesului de editare a filmului, logica se poate defecta. Este mai convenabil să utilizați tranziția după marcajul cadru. Să ne uităm la un exemplu care necesită nu numai răsfoirea albumului, ci și mutarea la diferite secțiuni, adică o navigare mai complexă.
Lăsați albumul să fie format din desene, grafica pe computer si fotografii.
Să etichetăm primul cadru din secțiunea „desene” Imagini; în mod similar, vom atribui etichetele „grafică” și „fotografie” primelor cadre ale altor secțiuni.
Să creăm un strat pentru plasarea etichetelor și să-l numim Etichete. Pentru a eticheta un cadru, în panoul Proprietăți trebuie să selectați tipul de etichetă Nume și să scrieți numele acestuia. În cazul nostru, Imagini (Fig. 21). În mod similar, vom plasa markere în cadrele 5 și 10 (Fig. 22).
Orez. 21. Exemplu de atribuire a unei etichete unui cadru
Acum să adăugăm strat nouși să-i numim Acțiuni. În primul cadru cheie al stratului Actions, apelați panoul Actions Frame (prin apăsarea butonului F9) și introduceți comanda stop () (vezi Fig. 22)
Orez. 22. Scenariul primului film
Să adăugăm un alt strat numit Subiecte (subiecte), în care vom da titluri cadrelor corespunzătoare: „Desene” (Fig. 23), „Grafic” și „Fotografii”.
Orez. 23. Titlu pentru cadrele secțiunii „Desene”.
Acum să adăugăm în lateral butoane de meniu cu nume similare, pe care le vom plasa pe un nou strat numit Meniu.
Să tipărim primul element din meniul „Imagini” din marginea din stânga și să îl transformăm într-un simbol de buton. Folosind instrumentul Săgeată, selectați blocul de text „Imagini” și executați comanda Modify => Convert to Symbol (această comandă poate fi executată și folosind tasta F8), în panoul Convert to Symbol, setați tipul de simbol Buton și definiți-i denumește ca imagineButton (Fig. 24).
Orez. 24. Atribuiți numele pictureButton butonului de acces la secțiunea de imagini
Să creăm patru cadre pentru butonul „Desene”: primul va reprezenta pur și simplu text original(Fig. 25), al doilea este același text doar în albastru, vom sări peste al treilea cadru (în acest caz, cadrul Down va fi același cu cadrul Over), iar în cadrul Hit vom desena o zonă dreptunghiulară care vor defini butoanele zonei de clic (Fig. 26).
Orez. 25. Cadrul superior al butonului de imagine
Orez. 26. Hit-frame al butonului pictureButton
Acum trebuie să atașăm scriptul la butonul nou creat. Pentru a face acest lucru, selectați butonul din Scena 1 și, apăsând F9, apelați panoul Acțiuni, apoi introduceți codul prezentat în Fig. 27.
Orez. 27. Script pentru trecerea la un cadru cu o etichetă
Scopul și structura programului Flash
Recent, Flash a devenit la modă. Mulți oameni cred că Flash este un produs nou, dar nu este cazul. În 1995, a apărut un mic program numit Future Splash Animator pentru animația vectorială a graficii Web, iar doi ani mai târziu, în 1997, Macromedia l-a achiziționat și a început să dezvolte produsul sub noul nume Flash.
Astăzi, Flash este o aplicație universală, integrată, care combină un editor pentru grafică și sunet, un instrument de animație și vă permite să creați produse multimedia interactive unice. CU folosind Flash puteți realiza animații vibrante și rentabile pentru web, formulare interactive, jocuri, prezentări interactiveși mult mai mult. Cunoștințele despre Flash sunt utile nu numai pentru web designeri, ci și pentru profesori, artiști și mulți alții care doresc să-și exprime ideile în limbajul animației. Astăzi nu este nevoie de asta studio special suficient calculator personal, programe Flash și puțină răbdare.
Elementele de bază ale bancului de lucru Flash
Înainte de a începe să descriem instrumentele de desen, trebuie să vorbim despre elementele de interfață. Să facem o rezervare că nu vom bombarda cititorul cu toate informațiile despre interfață deodată și îl vom forța să-și amintească toate detaliile. Vom furniza doar suficiente informații despre interfața programului pentru a finaliza lecția curentă. În fiecare lecție vom examina noi elemente de interfață, explicând scopul lor folosind exemple specifice.
Când lansați pentru prima dată programul, veți vedea ceva ca cel prezentat în Fig. 1.
Orez. 1. Elemente de bază ale interfeței programului Flash 5.0
Din nou tuturor deschide fișierul se potrivește cu desktopul dvs. Pe desktop există un cadru, sau Stage, o zonă dreptunghiulară pe ecran în care este redat un film Flash.
Instrumentele de desenare sunt furnizate pentru desenarea pe desktop (vezi bara de instrumente din Fig. 1). Acestea sunt cele despre care vom vorbi în primul rând.
Crearea oricărei animații începe cu randarea imagini statice. Schimbarea rapidă a unei imagini la alta, în urma căreia se creează impresia de mișcare a imaginii, este animație. Pentru a controla durata de afișare a imaginilor (controlul animației), utilizați cronologia sau Timeline.
În fig. 1 prezintă, de asemenea, panouri plutitoare (panouri plutitoare, de andocare) panouri concepute pentru a configura mediul de lucru Flash. Deci, să ne uităm la instrumentele de desen de bază din Flash.
Desen
Contur, contur, umplere
Înainte de a începe să lucrați cu instrumentele de desen, ar trebui să introduceți conceptele de contur, contur și umplere. Să le privim folosind un exemplu simplu.
Selectați instrumentul de editare Oval din bara de instrumente (Fig. 2) și desenați un oval. Forma va fi automat umplută cu culoare. (Dacă țineți apăsată tasta Shift în timp ce desenați un oval, forma pe care o desenați va avea forma unui cerc.)
Orez. 2. Desenul constă dintr-un contur, o contur și o umplere.
Desenul constă dintr-un contur, un traseu al conturului și o umplere (Fig. 2). Pentru a selecta conturul unei figuri, faceți clic pe butonul prezentat în Fig. 3 săgeți roșii. Ca urmare, linia de cursă și umplerea vor dispărea, va rămâne doar conturul (Fig. 4).
Orez. 3. Scoateți butonul de umplere și cursă
Orez. 4. Îndepărtând umplerea și cursa, obținem o linie de contur
linie de service (nu este afișată la imprimare). Apăsând butonul prezentat în fig. 3, returnează elementele șterse. Este ușor să schimbați culoarea cursei și umplerii. Culoarea de umplere poate fi schimbată folosind butonul Culoarea umplerii (Fig. 5). După ce selectați o nouă culoare în paletă (Fig. 5), figura desenată nu se va schimba, dar când desenați o nouă elipsă, conturul va fi umplut cu noua culoare selectată.
Orez. 5. Instrumente de culoare pentru umplere și trasare
Pentru a schimba culoarea de umplere în forma curentă, trebuie să selectați o nouă culoare și să utilizați instrumentul Paint Bucket - este evidențiat în Fig. 6.
Orez. 6. Culoarea de umplere a unei forme desenate poate fi schimbată utilizând instrumentul Paint Bucket
Culoarea cursei poate fi, de asemenea, modificată. Pentru a face acest lucru, selectați instrumentul Culoare stroke (Schimbați culoarea stroke) - în Fig. 7 săgeata roșie indică spre ea. După aceasta, se va deschide o paletă în care puteți selecta culoarea dorită, apoi trebuie să selectați Ink Bottle Tool (este evidențiat în Fig. 7) și să faceți clic pe linia de contur. Ca rezultat, acesta va fi umplut cu culoarea selectată.
Orez. 7. Schimbați culoarea liniei de contur
În fig. 6 ovalul pe care l-am desenat este prezentat la o scară mai mare. Schimbarea scalei, de altfel, este setată în același mod ca în Photoshop, folosind combinația de taste Ctrl și „+” sau Ctrl și „-”.
Grosimea și stilul liniilor de contur pot fi, de asemenea, modificate. Pentru a face acest lucru trebuie să comandați Fereastra > Panouri > Contur apelați panoul Stroke. În acesta puteți personaliza stilul liniei de contur, grosimea și culoarea acesteia (Fig. 8).
Orez. 8. Din meniul panoului Stroke puteți modifica parametrii liniei de cursă
Dacă selectați stilul de linie Hardline (Fig. 8) și aplicați Ink Bottle Tool, veți obține o linie de un pixel. Linia Hardline nu are grosime, deci nu apare nicio valoare în caseta cu grosimea liniei. Grosimea altor linii, de exemplu linie punctata, poate fi schimbat (Fig. 9).
Orez. 9. Exemplu de modificare a tipului și grosimii liniei de cursă
Mai multă reglare fină a parametrilor de linie se realizează în panoul Stil linie. O puteți apela făcând clic pe butonul indicat de săgeata roșie din Fig. 10. În panoul Stil linie, puteți, de exemplu, să modificați lungimea cursei și distanța dintre liniile liniilor punctate. Dacă în fig. 8, valorile implicite au fost acceptate - 6 puncte pentru cursă și distanța dintre curse, apoi selectând valorile 10 și respectiv 12 puncte și din nou folosind Instrumentul Sticla de cerneală, puteți obține un accident vascular cerebral, ca în fig. . 10.
Orez. 10. Reglarea fină a parametrilor liniilor
Așadar, ne-am uitat la conceptele de bază - contur, umplere și linie de contur - folosind exemplul desenului unui oval. Acum să vorbim direct despre instrumentele de desen.
Instrument dreptunghi
Instrumentul Dreptunghi este situat lângă instrumentul Oval (Fig. 11).
Pe lângă dreptunghiul tradițional, puteți desena dreptunghiuri cu margini rotunjite. Pentru a seta acest mod, selectați pictograma prezentată în Fig. 11 este indicat de săgeata roșie. Ca urmare, va apărea panoul Setări dreptunghi, unde definiți raza fileului, după care la desenarea unui dreptunghi, colțurile vor fi rotunjite. Editarea umplerii și conturului dreptunghiului se face în același mod ca și în cazul unui oval.
Orez. 11. Lucrul cu instrumentul Dreptunghi
Instrument de linie
Instrumentul Linie vă permite să desenați linii drepte (Fig. 12). Ținând apăsată tasta Shift, puteți desena linii verticale, orizontale sau de 45°.
Orez. 12. Lucrul cu instrumentul Linie
În unele cazuri, dacă, de exemplu, trebuie să desenați un triunghi isoscel, este util să folosiți o grilă. Puteți face vizibile liniile de grilă folosind comanda Vizualizare > Grilă > Afișare grilă(Fig. 13).
Orez. 13. Când desenați forme geometrice obișnuite, puteți utiliza o grilă
Instrument creion
Orez. 14. Rezultatul lucrului cu instrumentul Creion cu diferite setări (rândul de sus de triunghiuri este modul Îndreptare, rândul de jos este Cerneală)
Instrumentul Creion este situat sub instrumentul Oval. În fig. Figura 14 arată rezultatul lucrului cu un creion cu diferite opțiuni de configurare, dintre care trei sunt oferite în total. Cu setarea Straighten, instrumentul transformă liniile tremurătoare ale unui contur desenat manual în linii drepte; cu setarea Smooth, netezește liniile, iar în modul Cerneală, practic nu schimbă conturul original.
Instrumente de editare a liniilor, săgeată și subselectare
Pentru a explica cum funcționează instrumentul Săgeată, trebuie să aruncăm o privire mai atentă asupra structurii unei linii de contur.
Să desenăm o linie folosind instrumentul Creion, așa cum se arată în Fig. 15. Se compune dintr-un contur și o linie.
Orez. 15. Folosind instrumentul Subselect, puteți selecta puncte de ancorare și segmente de linii de contur
Orez. 16. Exemplu de mutare a unui punct de colț
Orez. 17. Exemplu de modificare a curburii unui contur
Orez. 18. Linia de contur urmează linia de contur
Până acum, vorbind despre circuit, nu am menționat structura acestuia. Pentru a explica structura liniei de contur, vom folosi instrumentul Subselect, activat în Fig. 15 și faceți clic pe el de-a lungul conturului liniei. Ca urmare, vom vedea că linia de contur este formată din segmente și puncte de referință (Fig. 15). Când utilizați instrumentul Creion, segmentele și punctele de ancorare sunt create automat. Când edităm linia de contur, linia de contur se schimbă automat. Să arătăm cum puteți edita o linie de contur folosind instrumentul Săgeată - este evidențiată în Fig. 16.
Punctele de ancorare pot fi unghiulare sau netede. Când aducem instrumentul Săgeată mai aproape de o linie, aspectul acesteia se schimbă. Când se apropie de un punct de colț, un colț va apărea lângă imaginea săgeată - în acest mod puteți muta punctele de colț (Fig. 16), iar când vă apropiați de un segment sau de un punct neted, va apărea o imagine de arc - în acest mod. mod puteți modifica curbura conturului (Fig. 17 ). La schimbarea liniei de contur, linia de cursă urmează linia de contur (Fig. 18).
Desenați o elipsă și utilizați instrumentul Săgeată pentru a-i selecta umplerea cu un singur clic (culoarea umpluturii selectate va fi luminată cu puncte albe) și mutați-o folosind modul drag-and-drop, așa cum se arată în Fig. 19. Dacă faceți dublu clic, va fi selectată și linia de contur adiacentă umplerii. Făcând dublu clic, vă permite, de asemenea, să selectați linii care se intersectează.
Orez. 19. Un exemplu de mutare a unui obiect selectat cu instrumentul Săgeată
Orez. 20. Imagine originală
Să luăm în considerare și alte tipuri de modificare a imaginii selectate. Folosind instrumentul Creion, desenați un anumit contur, de exemplu o frunză (Fig. 20). Selectați instrumentul Săgeată și selectați frunza desenată într-un cadru dreptunghiular. Acum puteți procesa obiectul selectat cu modificatorii disponibili.
În panoul Opțiuni, selectați butonul Smooth și faceți clic pe el de mai multe ori - conturul frunzei va dobândi un contur mai fin (Fig. 21a).
Orez. 21. Utilizarea modificatorilor din panoul Opțiuni: a) Smooth vă permite să neteziți contururile imaginii; b) Strighten face posibilă îndreptarea contururilor imaginii
Conturul se modifică după câteva clicuri pe butonul Întindere sunt prezentate în Fig. 21b.
Folosind instrumentul Lasso, puteți selecta o zonă de orice formă (Fig. 22).
Orez. 22. Exemplu de selecție folosind instrumentul Lasso
Unealta perie
Orez. 23. Exemplu de lucru cu instrumentul Brush
Instrumentul Perie creează o cale vectorială și o umple cu culoarea selectată, dar, spre deosebire de instrumentele discutate anterior, nu formează o linie de contur (Fig. 23). Pentru a înțelege ce fel de cale creează instrumentul Perie, priviți Fig. 24, unde este folosit instrumentul Subselect.
Orez. 24. Exemplu de linie de contur creată cu instrumentul Perie
Orez. 25. Opțiuni de personalizare a instrumentului perie
Panoul Opțiuni oferă trei opțiuni pentru personalizarea instrumentului Brush: moduri (butonul de sus), dimensiunile pensulei (butonul din mijloc) și forma pensulei (butonul de jos) (Fig. 25).
Modurile determină natura interacțiunii liniei trasate cu obiectul deja desenat (Fig. 26). După cum se poate vedea din figură, atunci când desenați același tip de linii orizontale în moduri diferite, pictura are loc în moduri diferite:
Vopsea Normal peste spațiul cadrului este pictat, linia de contur și umplerea obiectului fiind pictate;
Vopsea umple spațiul cadrului este pictat și obiectul pictat este umplut. Linia de cursă nu este pictată peste;
Vopsea În spatele este pictat doar spațiul liber al cadrului;
Vopsea Selecție numai zona selectată este pictată;
Vopsea În interior este pictat doar umplutura care a început pictarea.
Orez. 26. Diferite moduri de interacțiune a loviturilor de pensulă cu un obiect desenat anterior
Este necesar să se explice efectul parametrului Lock Fill - butonul corespunzător acestei comenzi cu o pictogramă de blocare este afișat apăsat în Fig. 27.
Orez. 27. Exemplu de parametru Lock Fill
Când parametrul Lock Fill este activat (butonul este apăsat), gradientul se aplică întregului câmp de lucru (Fig. 27), iar când nu este activat, trecerea de la o culoare la alta se realizează pe baza unei mișcări de pensulă. (Fig. 28).
Orez. 28. Opțiunea Lock Fill nu este activată
Radieră
Radiera vă permite să ștergeți linii și să umpleți și are o serie de setări diferite. În panoul Opțiuni, puteți configura dimensiunea și forma radierei și, de asemenea, puteți selecta modul de ștergere (Fig. 29):
Erase Normal șterge linia de contur și umplerea obiectului;
Ștergere Umple umplerea obiectului este ștearsă (linia de contur nu este ștearsă);
Șterge linii numai liniile sunt șterse;
Erase Selected Fills Numai zona selectată este ștearsă.
Erase Inside numai umplerea este ștearsă, iar când desenați o linie cu o radieră, ștergerea se face numai în interiorul conturului în care a început linia.
Modificatorul Faucet vă permite să eliminați complet o umplere sau o linie.
Orez. 29. Diferite moduri de șters
Instrument stilou
Până acum ne-am uitat la instrumente care creează automat contururi. Instrumentul Pen vă permite să lucrați direct cu căile. Cu acesta, puteți crea segmente drepte și curbe, puteți ajusta lungimea liniilor drepte și înclinarea segmentelor curbe.
Punct de referință liniar
Selectați instrumentul Pen, faceți clic pe mouse (ați plasat primul punct de ancorare), mutați cursorul, faceți clic pe mouse (acesta este al doilea punct de referinta). Rezultatul va fi o linie întreruptă, ca în Fig. 30. Punctele de referință prezentate în Fig. 30 se numesc liniare, deoarece segmentele care converg în ele sunt liniare. Un punct liniar nu are ghidaje.
Orez. 30. Un exemplu de construire a unei polilinii folosind instrumentul Pen
Punct de ancorare neted
Orez. 31. Un exemplu de creare a unei curbe netede folosind instrumentul Pen
Pentru a crea un punct de ancorare neted, selectați instrumentul Pen, faceți clic butonul din stanga mouse-ul și, fără a-l elibera, mișcați ușor mouse-ul, ca urmare va apărea un punct de referință neted și o linie de ghidare care iese din acesta (Fig. 31). Prin rotirea și prelungirea liniei de ghidare, puteți modifica curbura următorului segment.
Pentru a crea un contur deschis, trebuie să efectuați dublu click mouse-ul peste ultimul punct. Eliberați butonul mouse-ului, mutați cursorul și plasați următorul punct de ancorare; Repetând această procedură, puteți obține o linie netedă, ca în Fig. 31.
Pentru a închide o cale, mutați cursorul mai aproape de punctul de ancorare sau de linia traseului de pornire. După ce cursorul se transformă într-un stilou cu un cerc, faceți clic pe mouse și conturul se va închide.
Dacă două segmente independente se conectează într-un punct, atunci acesta este un punct de colț. De exemplu, dacă conectați segmente drepte și curbe, la intersecția acestora va apărea un punct de colț (Fig. 32).
Orez. 32. La intersecția segmentelor drepte și curbe se formează un punct de colț
Punctele de ancorare pot fi transformate, mutate și șterse.
Pentru a converti un punct de colț într-un punct neted, selectați instrumentul Subselectare. Faceți clic pe punctul de colț și, ținând apăsată tasta Alt, trageți punctul - acesta va deveni neted și va apărea o linie de ghidare, permițându-vă să modificați curbura segmentelor care se conectează în acest punct neted (Fig. 33).
Orez. 33. Un exemplu de conversie a unui punct de colț într-un punct neted
În mod implicit, punctele curbe netede selectate sunt afișate ca puncte goale, iar punctele de colț selectate sunt afișate ca pătrate goale.
Utilizarea stiloului și instrumentelor de subselectare pentru a manipula punctele de ancorare
În mod similar, puteți crea puncte pe liniile desenate de alte instrumente de desen Flash: Creion, Pensule, Linie, Oval, Dreptunghi și ajustați aceste linii.
În special, în fig. Figura 34 prezintă un traseu realizat folosind instrumentul Oval prin rotirea unui punct neted într-un punct de colț (folosind instrumentul Pen) și trăgând punctul de colț folosind instrumentul Subselectare.
Orez. 34. O cale făcută cu instrumentul Oval, transformând un punct neted într-un punct de colț și trăgându-l
Instrument picurator
Instrumentul Dropper este folosit pentru a copia culoarea și stilul liniilor de creion, modul pensulă și umplerile. Când mutați pipeta pe linie, cursorul se schimbă - sub pipetă apare o pictogramă mini-creion. Când faceți clic pe pipeta de pe o linie, toți parametrii de linie (culoare, grosime, stil) sunt copiați, iar pipeta este înlocuită cu instrumentul Flacon de cerneală, care vă permite să aplicați toate aceste setări pe o altă linie.
În mod similar, când cursorul se află peste o umplere, sub pipetă apare o imagine cu perie, iar când cursorul se află peste o lovitură de pensulă, sub pipetă apare o imagine cu pensulă. Aceste pictograme indică atributele pe care le copiați cu instrumentul Dropper.
Instrument pentru găleată de vopsea
Am menționat deja instrumentul Paint Bucket - este evidențiat în Fig. 35, acum să ne uităm la capacitățile sale mai detaliat. Acest instrument este folosit pentru a umple zonele închise (și parțial închise) cu umpleri color, gradient și raster.
Dacă ați lucrat cu completarea bitmaps-urilor program Photoshop, atunci probabil că sunteți familiarizat cu situația în care umplutura „se revarsă” peste marginea contururilor nu foarte frumos desenate în acele locuri în care există „găuri”. În Flash, sunt posibile mai multe moduri de setare a instrumentului de umplere, permițându-vă să evitați defectul descris mai sus.
Există patru opțiuni pentru configurarea acestui instrument:
Nu închide golurile nu închide golurile;
Închideți golurile mici închideți golurile mici;
Închideți golurile medii închideți golurile medii;
Închideți golurile mari închideți golurile mari.
Selectați instrumentul Creion și desenați o cale deschisă (Fig. 35). Selectați modul Închidere spații mari și completați conturul. După cum se poate observa din fig. 35, umplerea rămâne în interiorul conturului, chiar dacă conturul original a fost deschis.
Orez. 35. Exemplu de închidere a unui contur în modul Închidere spații mari
Acum să ne uităm la umplerea cu gradient și la operațiunile cu acesta. În panoul Umplere, selectați opțiunea de umplere din fila Umplere - Gradient liniar. Apoi desenați un dreptunghi, umpleți-l cu o umplere liniară cu un gradient liniar, iar în interiorul dreptunghiului mare desenați un dreptunghi mai mic (Fig. 36). După cum puteți vedea în această figură, într-un mic dreptunghi tranziția de la alb la albastru se realizează pe un gradient mai mic. Dacă utilizați funcția Lock Fill și umpleți ambele dreptunghiuri, veți obține o imagine ca în Fig. 37. Adică, gradientul în dreptunghiul interior și exterior va fi același.
Orez. 36. Modul de umplere cu gradient atunci când parametrul Lock Fill nu este activat
Orez. 37. Umplere cu gradient în modul când parametrul Lock Fill este activat
Pentru a schimba direcția gradientului de umplere, trebuie să faceți clic pe butonul Transform Fill din panoul Opțiuni (se face clic în Fig. 38), apoi faceți clic pe umplere, ca rezultat vor apărea markeri (Fig. 38).
Orez. 38. Exemplu de modificare umplere cu gradient
Markerul rotund de sus este folosit pentru a roti umplerea cu gradient, cel dreptunghiular este folosit pentru a crește (scădea) gradientul tranziției de la o culoare la alta, iar cel central rotund este folosit pentru a muta centrul umpluturii cu gradient.
Instrumentul Paint Bucket vă permite, de asemenea, să umpleți o cale închisă cu o imagine raster. Să demonstrăm cum se realizează această procedură folosind un exemplu simplu. Folosind instrumentul Dreptunghi, desenați o imagine a monitorului în ecranul căruia va fi inserată imaginea raster (Fig. 39).
Orez. 39. Imagine vectorială a monitorului în care va fi plasată imaginea raster a fotografiei
Apoi importați o imagine bitmap care va umple ecranul. Puteți importa un bitmap rulând comanda Fișier > Importși selectând fișierul necesar. Apoi, accesați panoul Fill și schimbați metoda de umplere în raster - Bitmap (Fig. 40).
Orez. 40. Panoul Umplere, fila Umplere
Astfel, dacă umpleți un contur închis în interiorul desenului ecranul monitorului, apoi va fi efectuată umplerea raster, așa cum se arată în Fig. 41.
Orez. 41. Exemplu de umplere raster
Pentru a edita o umplere raster, trebuie să faceți clic pe butonul Transform Fill din panoul Opțiuni (se face clic în Fig. 42), apoi faceți clic pe umplere raster, ca urmare, va apărea un cadru cu markeri ( Fig. 42).
Folosind marcatorul central, imaginea raster poate fi trasă astfel încât partea dorită a fotografiei să fie afișată pe monitorul desenat (Fig. 43).
Orez. 42. Cadru de modificare a umplerii raster
Orez. 43. Deplasând marcatorul central, puteți decupa bitmap-ul
Alți markeri vă permit să scalați imaginea raster, să o rotiți și să o deformați (Fig. 44).
Orez. 44. Exemplu de deformare a umplerii raster
După importarea mai multor fotografii, puteți configura o paletă din care puteți selecta un raster de completat (Fig. 45), la fel ca o paletă de culori.
Orez. 45. Exemplu de paletă cu mai multe bitmap-uri
Adăugarea și scăderea formelor
Când două forme se suprapun, Flash fie le îmbină, fie le segmentează. Desenați două forme de aceeași culoare - un cerc și un dreptunghi (Fig. 46), selectați dreptunghiul (făcând clic pe el cu instrumentul Săgeată), apoi suprapuneți dreptunghiul pe cerc și eliminați selecția din acesta (făcând clic pe din nou cu instrumentul Săgeată).
Orez. 46. Cifrele inițiale
Ca urmare, cele două figuri se vor îmbina într-una singură. Făcând clic pe conturul formei rezultate cu instrumentul Subselect, vă puteți asigura că conturul interior a dispărut (Fig. 47).
Orez. 47. Un exemplu de combinare a două forme de aceeași culoare
Acum faceți aceeași procedură cu forme de culori diferite. În acest caz, frontiera internă nu va dispărea (Fig. 48).
Orez. 48. La suprapunerea formelor de culori diferite, conturul interior nu dispare
Acum, dacă selectați un dreptunghi și îl mutați folosind instrumentul Săgeată, o parte va fi tăiată din cerc, așa cum se arată în Fig. 49.
Orez. 49. O parte din cerc este tăiată într-un dreptunghi
Uneori este util să folosiți combinarea și scăderea contururilor formelor pentru a obține un contur complex.
Orice animație sau film constă dintr-o secvență de cadre. Un cadru este cea mai mică parte a unui document animat sau film. Prin urmare, pentru a crea o animație, trebuie mai întâi să creăm mai multe cadre. Flash MX 2004 - multe instrumente pentru crearea animației.
Tipuri de cadre Flash MX 2004
Cadru cheie - un cadru disponibil pentru procesare. În animație, acest cadru va fi afișat pe măsură ce îl desenează utilizatorul. Pe cronologia, un cadru cheie apare ca un cerc negru dacă conține o imagine și alb dacă nu există nicio imagine.
Un cadru obișnuit este un cadru care va fi afișat în animație, dar utilizatorul nu a participat direct la desenarea cadrului. Va fi la fel cu cadrul cheie din stânga sau, dacă a fost realizat un storyboard, atunci cadrul generat automat de program.
Storyboard - tranziția automată a unei imagini de la un cadru cheie la altul.
Un cadru fantomă este o celulă goală din diagrama de timp în care poate fi setat fie un cadru cheie, fie un cadru obișnuit.
Prin formarea imaginii cadru.
Cel mai simplu mod de a crea animație este să schimbi desenul cadru cu cadru, adică. Pe fiecare cadru, poziția obiectului și caracteristicile acestuia se schimbă sau se adaugă obiecte noi și se elimină obiectele vechi.
Flash MX 2004. Exercițiul 1
Formarea cadru cu cadru a unui desen: pe fiecare cadru se adaugă părți la desen.
Acum puteți îndoi linia și puteți obține orice formă a acestei figuri.
Plic - afișează o diagramă dreptunghiulară care vă permite să schimbați și să înfășurați forma.
|
|
|
|
După ce am manipulat linia folosind instrumentele Flash MX 2004, am obținut această cifră.
Primul cadru este gata, pentru a continua crearea animației trebuie să adăugăm mai multe cadre. Faceți clic pe panoul temporar, următorul cadru va deveni albastru. Faceți clic dreapta și selectați Convertiți în cadre cheie din meniul drop-down. După aceste operații, cadrul 2, ca și primul, va fi indicat printr-un cerc negru.
Unele notații de manipulare a cadrelor în Flash MX 2004: Inserare cadru, Eliminare cadre, Inserare cadru cheie, Inserare cadru cheie necompletat, Ștergere cadru cheie, Conversie în cadre cheie, Conversie în cadre cheie goale, Gut Frames, Copiați cadre, Lipiți cadre, Ștergeți cadrele și Selectați toate cadrele - efectuați operații cu cadre specificate în numele comenzilor.
După ce am făcut mai multe cadre cheie, ar trebui să obținem o imagine ca aceasta.
Când transformați o linie dreaptă, poate fi necesar nu numai să îndoiți linia dreaptă, ci și să o schimbați în dimensiune, adică să transformați liber. În Flash MX 2004 o poți face așa.
Mutați indicatorul mouse-ului direct pe linie și faceți clic dreapta. Selectați Transformare gratuită din meniul drop-down. Sau din meniul principal selectați Modificare => Transformare => Transformare gratuită. Acum puteți îndoi linia și puteți obține orice formă a acestei figuri.
Soarele și razele sunt mult mai ușor de făcut, așa că pentru autotest vă sugerez să o faceți singur.
|
|
|
Acum trebuie să facem coroana copacului verde. Nu vom putea umple ca un nor, deoarece a fost format dintr-o figură închisă. Și coroana copacului este limitată de mai multe linii. Este posibil să pictezi peste el cu o pensulă, dar nu va fi foarte convenabil.
Flash MX 2004 oferă posibilitatea de a crea mai multe straturi. Prin urmare, să adăugăm un nou strat pe fundal și să pictăm peste el în zona coroanei copacului.
Crearea unui nou strat
Pentru a crea un nou strat, urmați acești pași:
1. Selectați stratul scenei documentului direct înaintea căruia ar trebui să fie amplasat noul strat.
2. Dacă creați un tip de strat obișnuit, efectuați una dintre următoarele:
- faceți clic pe butonul Inserare strat, primul din stânga jos al managerului de straturi;
- executați comanda Insert => Timeline => Layer (Insert => Timeline => Layer) din meniul principal;
- rulați comanda Inserare strat meniul contextual stratul selectat.
Tragerea unui strat cu mouse-ul
Pentru a trage un strat cu mouse-ul, procedați în felul următor:
1. Plasați indicatorul într-un spațiu gol de pe rândul stratului care este mutat și faceți clic pe butonul mouse-ului.
2. Trageți indicatorul în locul din managerul de straturi unde ar trebui să fie localizat acest strat (între alte straturi ale documentului sau în folderul unor straturi). Această locație este indicată printr-o linie dublă de despărțire care apare între straturi sau printr-o întunecare a pictogramei folderului din rândul de foldere a straturilor. De îndată ce o astfel de linie sau nuanță de folder apare în locația dorită din manager, eliberați butonul mouse-ului. Dacă a fost afișată o linie dublă, stratul selectat va fi inserat în locația sa, iar dacă folderul a fost umbrit, stratul se va muta în acest folderși va fi situat chiar în vârf.
La fiecare pixel ulterior transformăm liber cadrul. La final, puteți face o mișcare lentă a cadrului. Pentru asta a fost inventat Flash MX 2004 - pentru a facilita crearea animației. Creați un cadru cheie. Apoi, apăsând tasta Alt, trageți cadrul cheie 10 cadre cu butonul stâng al mouse-ului și eliberați-l. Când trageți, un mic semn + va fi adăugat la pictograma cursorului. În continuare, modificăm cadrul transferat.
Acum modificările intermediare ale imaginii vor fi calculate automat între două cadre.
Macromedia Flash MX 2004 oferă mai multe moduri de a crea secvențe de animație:
Efecte de animație - programul în sine creează o secvență de cadre care simulează un anumit efect în raport cu un anumit obiect;
Animație cadru cu cadru - utilizatorul creează fiecare cadru al animației viitoare;
Animație interpolată automată, sau animație de transformare, - utilizatorul specifică cadrele de început și de sfârșit, iar programul însuși creează cadre intermediare pe baza interpolării software.
Efecte de animație
Flash MX 2004 include efecte de animație prefabricate (efecte de cronologie) care vă permit să creați animații complexe folosind cantitate minimă actiuni. Puteți utiliza funcția Efecte cronologice la următoarele obiecte:
Obiecte grafice, inclusiv forme, obiecte grupate și simboluri grafice;
Imagini raster;
Când adăugați efecte de animație unui obiect, Flash creează automat un strat adecvat și toate transformările de mișcare și formă necesare pentru acel efect sunt implementate în acel strat. Noul strat primește automat același nume ca efectul.
De exemplu, să creăm un efect de „explozie” pe text. Pentru a face acest lucru, tastați o frază sau un cuvânt (Fig. 1), selectați-l folosind instrumentul Săgeată și executați comanda Inserare => Efecte cronologie => Efecte => Explodare.
Orez. 1. Obiect text selectat
Ca urmare, va apărea un panou cu același nume (Fig. 2), oferind posibilitatea de a configura o serie de parametri de efect.
Orez. 2. Explodare panou
Prezența unei ferestre de previzualizare vă permite să analizați diferite variații de efecte fără a părăsi panoul Exploda. După ce ați selectat opțiunile necesare, faceți clic pe butonul Bineși veți obține ceva ca această animație.
Efecte similare pot fi aplicate unei imagini raster. Să luăm în considerare un exemplu cu dispariția lină a unei imagini raster. Importul unui bitmap în scenă folosind o comandă File => Import => Import to stage(Fig. 3) și aplicați efectul Blur la comandă Inserare => Efecte cronologie => Efecte => Estompare clip video .
Orez. 3. Imagine raster, importat în scenă
Pentru a edita un efect de animație, selectați obiectul asociat efectului pe scenă și în fereastra care apare Proprietăți faceți clic pe butonul Editați | ×(Fig. 4) - ca urmare, va apărea un panou Estompa.
Orez. 4. Buton Editați | × situat în partea de jos a panoului Proprietăți
În panou Estompa puteți modifica din nou parametrii efectului și puteți salva noile setări (Fig. 5).
Orez. 5. Panoul Estompa vă permite să schimbați setările pentru efecte
Animație stop motion
Sa luam in considerare cel mai simplu exemplu— bucata de hârtie se deplasează dintr-un punct de pe ecran în altul cu rotație în jurul axei sale.
Orez. 6. Primul cadru cheie al animației
Să desenăm o frunză de arțar, de exemplu, așa cum se arată în Fig. 6, - cadru corespunzător pe panou Cronologie va deveni gri și va apărea un punct în interiorul acestuia, indicând că acesta este un cadru cheie. Un cadru cheie este un cadru în care conținutul este plasat sau modificat.
Orez. 7. Creați al doilea cadru trăgând și transformând primul
Apoi faceți clic dreapta pe cadrul adiacent și introduceți un alt cadru cheie folosind comanda Inserați un cadru cheie. Ca urmare, o copie a frunzei va apărea în acest cadru; mutați-l în jos (folosind instrumentul Săgeată) și rotiți-l folosind comanda Modificare => Transformare => Transformare gratuită(Fig. 7).
Să repetăm procedura astfel încât în al 6-lea cadru foaia să-și ocupe poziția finală (Fig. 8).
Orez. 8. Ultimul cadru de animație
Acordați atenție panoului Proprietăți(Fig. 8) - tipul de obiect este indicat în partea stângă. În fiecare cadru, frunza este un obiect de tip Formă(forma), alte tipuri de obiecte vor fi discutate puțin mai târziu.
Pentru a exporta un film ca fișier SEF (formatul nativ Macromedia pentru filme Flash), rulați comanda Fișier => Export => Export film. Ca rezultat, obținem următorul film leave1.fla). Puteți vizualiza filmul rezultat fără a părăsi programul Flash prin comandă Control => Testează filmul. Mai mult, pentru a vedea cât spațiu este ocupat de cadrele individuale ale filmului, ar trebui să rulați comanda. Ca rezultat, vom vedea că fiecare dintre cele șase cadre ocupă aproximativ 600 KB (Fig. 9). Astfel, dimensiunea întregului film este de 3686 de octeți.
Orez. 9. Vizionarea unui film în Profil de lățime de bandă
Pentru a evalua dacă este mult sau puțin, luați în considerare modul în care un film similar poate fi realizat folosind animația automată sau animația de transformare a mișcării.
Animație automată
Orez. 10. Obiectul se transformă automat într-un simbol grafic
Să vedem cum poți face aceeași animație și să obții un fișier rezultat mai compact. Selectați frunza desenată pe ecran cu instrumentul Săgeată și executați comanda Inserare => Cronologie => Creare interpolare de mișcare, ca urmare, prospectul va fi plasat într-un cadru, iar în panou Proprietăți va apărea un mesaj că obiectul selectat are proprietăți Grafic(Fig. 10). Aceasta înseamnă că obiectul animat este convertit automat într-un simbol grafic. Acum nu mai este posibil să-l editați în mod arbitrar cu instrumentul Săgeată ca obiect de tip Shape. Utilizarea simbolurilor este un concept important în Flash. Odată ce un simbol este creat, acesta poate fi folosit de mai multe ori într-un film fără a mări dimensiunea fișierului rezultat. Simbolurile sunt împărțite în simboluri grafice, simboluri butoane și simboluri clipuri video. În această lecție ne vom uita la un simbol grafic și vom reveni la alte tipuri de simboluri mai târziu. Fiecare simbol nou devine imediat parte a bibliotecii documentului curent (Fig. 11).
Orez. 11. Fiecare simbol nou devine parte a bibliotecii
Dacă executați comanda Fereastra => Biblioteca, apoi vă puteți asigura că în bibliotecă a apărut un simbol și i se atribuie implicit numele Tween 1. Pentru a atribui un alt nume unui simbol, faceți dublu clic pe nume și înlocuiți-l cu cel dorit. După ce am format simbolul grafic, să trecem la ultimul cadru al animației noastre (fie al 15-lea cadru) și să introducem un cadru cheie (folosind comanda Inserare Cadru cheie). În acest cadru va apărea o copie a simbolului, pe care o vom muta și roti în jurul axei sale (folosind comanda Modificați Transformare => Transformare liberă), ca în exemplul anterior. După cum se poate observa din fig. 12, toate cadrele dintre două cadre cheie sunt colorate în albastru și o săgeată se întinde de la primul cadru cheie la ultimul, ceea ce indică crearea animației Motion Tween.
Orez. 12. O săgeată pe un fundal albastru indică crearea animației Motion Tween
Prin executarea comenzii Control => Testează filmul, obținem informațiile prezentate în Fig. 13.
Orez. 13. Vizionarea unui film în modul Bandwidth Profiler
În ciuda faptului că în acest exemplu avem 15 mai degrabă decât șase cadre, ca în cel precedent, iar animația este mai netedă, dimensiunea fișierului rezultat este mai mică - doar 900 de octeți. După cum se poate observa din diagramă (Fig. 13), informațiile despre obiect sunt stocate numai în primul cadru, iar în fiecare cadru nou este necesar să rețineți doar noile poziții ale foii. Aceasta durează în medie doar 20 de octeți.
Pentru a ilustra caderea unei foi cu rotatie in jurul planului foii, repetam exemplul anterior, doar la modificarea ultimului cadru cheie adaugam comanda Modificare => Transformare => Flip Orizontală. Drept urmare, obținem următorul film.
Acum să ne uităm la un exemplu când o frunză se apropie de privitor. Pentru a face acest lucru, în cadrul final, în loc de oglindire ( Flip orizontal) vom mări dimensiunea foii. Pentru a evita senzația de încetinire atunci când un obiect se apropie de privitor, viteza de mișcare a acestuia trebuie mărită. Pentru a obține acest efect, trebuie să faceți clic pe primul cadru și să consultați secțiunea Uşuraîn panou Proprietăți. Valorile pozitive ale parametrului Ease determină încetinirea mișcării, în timp ce valorile negative determină accelerarea mișcării. Să alegem accelerația maximă a obiectului.
Orez. 14. Selectați accelerația maximă a obiectului Ușurință = -100
Pentru a face acest lucru, setați valoarea parametrului Uşura egal cu -100 (Fig. 14). Rezultatul este un film. Rețineți că primul cadru poate fi plasat și în spatele scenei, apoi vom obține un film în care frunza va zbura în cadru și se va deplasa către privitor. Puteți simula rotația unei foi în jurul unui centru de simetrie deplasat. Sper că cititorul însuși va putea experimenta, făcând mai dificilă modificarea cadrului final și schimbând astfel natura mișcării foii.
Din exemplele prezentate, este evident că animația automată în mișcare este eficientă atunci când transformarea unui obiect în timpul mișcării acestuia este specificată prin funcții simple (rotire, scalare etc.). Dacă este necesar să animați mișcări complexe (de exemplu, mișcarea mâinii unui personaj de desene animate), atunci animația de transformare a mișcării nu este aplicabilă. Fiecare cadru trebuie desenat manual, adică se folosește animația cadru cu cadru, constând dintr-un set de cadre cheie. Astfel, animația cadru cu cadru este cea mai versatilă, dar în același timp și cel mai laborios tip de animație, în plus, creează cele mai „grele” fișiere. Ori de câte ori este posibil să înlocuiți animația cadru cu cadru cu animație automată, aceasta este de preferat. Să ne uităm la o serie de exemple care vă permit să utilizați animația automată în mișcare atunci când simulați un zbor.
Mișcarea pe o traiectorie dată
Flash vă permite să setați mișcarea unui obiect pe o anumită cale. Pentru a seta această traiectorie, executați comanda Inserare => Cronologie => Ghid de mișcare.
Drept urmare, deasupra stratului curent va apărea un strat special, care implicit va avea numele Stratul de ghidare 1.
Să facem clic pe stratul de traiectorie și să folosim instrumentul creion pentru a desena o linie de-a lungul căreia intenționăm să mutăm foaia (Fig. 15).
Orez. 15. Exemplu de specificare a unei traiectorii de mișcare
Acum să trecem la primul cadru (click pe el cu mouse-ul) și în panoul care apare Proprietăți bifeaza casuta Snap(setează modul de fixare pe traiectoria mișcării) - fig. 16.
Orez. 16. Parametru Snap setează modul de fixare pe traiectoria mișcării
După ce bifați caseta Snap, centrul foii se va alinia cu traiectoria de mișcare. Folosind instrumentul Săgeată, puteți muta frunza de-a lungul traseului de mișcare, dar dacă încercați să rupeți foaia de pe traseu și să o așezați lângă ea, aceasta va fi trasă înapoi și „lipiți” din nou de calea de mișcare (Fig. 17).
Orez. 17. Obiectul pare să se lipească de traiectoria mișcării cu centrul său
Mergeți la ultimul cadru și legați în mod similar foaia de punctul final al căii de mișcare. Pentru a da volum filmului, adăugați transformare Flip orizontal, - ca rezultat obținem filmul .
Când o foaie se mișcă de-a lungul unei traiectorii, nu contează pentru noi cum va fi rotită în direcția de mișcare. Dar dacă stabilim în mod similar calea de zbor a unei păsări, atunci în unele părți ale curbei se dovedește că pasărea zboară prima coadă.
Evident, dacă vrem să animam zborul unui avion sau al unei păsări, atunci avem nevoie de ea pentru a mișca nasul înainte în orice moment. În Flash, acest tip de mișcare este foarte ușor de setat (Fig. 18).
Orez. 18. Dacă bifați caseta Orientați spre Cale, pasărea va zbura cu capul întâi
Caseta de selectare necesară Orientați spre Cale, iar mișcarea păsării se va schimba într-una complet familiară (sursa pentru acest videoclip este zborul unei păsări.fla).
Orez. 19. Adăugarea unui fundal cu o singură culoare
Dacă doriți să adăugați un fundal cu o singură culoare, faceți clic pe fundal și în panoul care apare Proprietăți(Fig. 19) în câmp fundal selectați culoarea de fundal dorită.
Dacă vrem să adăugăm imagine de fundal, vom avea nevoie de un strat separat pentru asta. În principiu, Flash oferă posibilitatea de a crea un sistem de straturi asemănător cu cele folosite în animația clasică, în care fundalul și diverse obiecte în mișcare sunt desenate fiecare pe propriul strat de transparență.
Prin plasare imagine de fundalși fiecare obiect animat pe propriul strat, este mult mai ușor să obții controlul asupra lor. Deci, pentru a adăuga o imagine de fundal, să creăm un nou strat pentru aceasta. Pentru a face acest lucru, faceți clic dreapta pe stratul prezentat în Fig. 19 este desemnat ca strat 1, iar în meniul derulant selectați linia Inserare strat. În stratul adăugat trageți soarele. Pentru a nu ne confunda cu numerele stratului, să dăm stratului numele „fond”. Pentru a face acest lucru, faceți clic pe numele curent și introduceți numele dorit (Fig. 20).
Orez. 20. Pe un strat nou, creați un obiect de fundal staționar
După cum se poate observa din fig. 20, pasărea se află în spatele soarelui, ceea ce este contrar bunului simț. Pentru a schimba straturile, trebuie doar să utilizați modul de glisare și plasare pentru a trage în jos stratul numit „fond.
Să edităm obiectele filmului (astfel încât pasărea să se rotească pe fundalul soarelui, să schimbăm traiectoria zborului său și să schimbăm raportul dintre dimensiunile soarelui și pasărea) și să obținem următorul videoclip.
Orez. 21. Pentru a anima norul, creați un strat separat
Acum să adăugăm obiecte în mișcare la animația noastră, de exemplu un nor. Pentru nor, creați un nou strat și setați animația de transformare a mișcării pe el. Pentru ca norul să zboare în scenă, îl vom poziționa așa cum se arată în Fig. 21. Ca rezultat, obținem următorul film (sursa pentru acest film este în fișierul atașat