Praktiskt arbete "Skapa animering av en form i Flash" Metodisk handbok "Lärande att skapa animering i datavetenskapliga lektioner. Illustrerad handledning om animering för Internet Grundläggande typer av åtgärder

I denna handledning vill jag berätta för nybörjare i Flash hur man gör vackra tweens med form som exempel. Lektion gjord i Macromedia Flash 8.
Låt oss börja med det viktigaste - formanimering fungerar bara om du arbetar med grafiska objekt.

De där. efter att ha skapat de nödvändiga nyckelramarna de nödvändiga, i vårt fall textuella, objekt som de behöver förvandlas till grafiska. Så, låt oss börja.

Skapa ett nytt dokument, ange nödvändiga parametrar (storlek, bakgrundsfärg, bildhastighet). I mitt exempel är storleken 200x200, bakgrundsfärgen vit, bildfrekvensen 12.

Vi indikerar omedelbart att formanimationen kommer att ske i den första ramen: på fliken Egenskaper, i rullgardinsmenyn Tween, välj Shape animation. I den första ramen, med hjälp av textverktyget, T -knappen, skriver vi siffran 1. För att göra det enklare väljer du ett sans serif -teckensnitt, Arial, Tahoma, Verdana. Gå sedan till den 30: e ramen, tryck på F6, d.v.s. skapa en nyckelbild och redigera vårt nummer 1, ändra det till nummer 2.

Det finns också en subtil punkt här, om du bara tar bort siffran 1 och skriver siffran 2, måste du ställa in koordinaterna för siffran 2 på samma sätt som siffran 1, så att animeringen skapar effekten av att vrida siffrorna in i varandra. Om du fortsätter att skapa siffran 3, 4, 5 och vidare, bör koordinaterna för alla siffrorna vara desamma. Vi skrev klart siffrorna, nu måste de förvandlas till grafiska objekt.

Välj varje siffra i tur och ordning och välj snabbmenyn med höger musknapp, välj alternativet Break Apart, du kan också trycka på ctrl + B -tangentkombinationen eller välja alternativet Break Apart från modifieringsmenyn, beroende på vad som är bekvämast. Vi har gjort siffror till grafiska objekt.

Nu kan du spela den resulterande animationen med tangentkombinationen ctrl + Enter eller helt enkelt genom att dra reglaget längs tidslinjen. Men vår animation är inte särskilt vacker, omvandlingen av siffror från en till en annan är något "klumpig". Låt oss förbättra situationen. För detta har Flash en Shape Hint - det här är nyckelpunkterna för objektet som används i animering.

De kan infogas genom att öppna menyn Modify - Shape - Add Shape Hint eller genom att använda tangentkombinationen ctrl + shift + H. Prickarna sätts in som små röda cirklar med bokstäver i mitten. De heter alfabetiskt: a, b, c, d, etc. De infogas som standard i mitten av objektet. Ju fler poäng du ställer in, desto smidigare blir animationen. Genom att klicka på en punkt med höger musknapp kan du lägga till en ny punkt - Lägg till tips, ta bort en extra punkt - Ta bort tips och ta bort alla punkter - Ta bort alla tips.

Om du nu går till den andra nyckelramen med siffran 2 ser du exakt samma röda prickar med samma bokstäver i mitten.
Nu måste vi installera dem. Jag erbjuder min egen version, men du kan göra det annorlunda, eftersom det finns inga slutliga rekommendationer, du presenterar dem i enlighet med din egen uppfattning och smak.

Betydelsen av punkter är detta: du sätter punkt a på någon plats i det första objektet, går till det andra objektet och ställer också in punkt a på rätt plats. Under animeringen kommer dessa punkter att "flöda" in i varandra. Om allt görs korrekt blir punkten på det första objektet gul och på den andra grön. Skärmdumpen visar placeringen enligt min mening. Vi gör samma operation för 2: a, 3: e objektet, etc. Det kommer att bli många poäng, var försiktig så att du inte blir förvirrad.

Faktum är att om allt är gjort korrekt spelar vi den resulterande animationen med hjälp av ctrl + Enter -tangenterna eller helt enkelt sträcker reglaget längs tidslinjen och njuter av resultatet. Du kan använda den var som helst och på vilket sätt som helst, kom bara ihåg - den fungerar bara med grafiska objekt. Källan och den resulterande swf -filen bifogas.

Formgrafik har varit trendig de senaste åren. Den stora populariteten döljer dock det noggranna arbetet med att animera varje element på scenen.

Om du aldrig har gjort formanimering förut är det dags nu!

Vi valde 30 som hjälper dig att behärska principen om formanimering, samt lära dig hur du skapar och exporterar vektorillustrationer som är lämpliga för ytterligare animeringar.

Animação Feliz de Shapes med Textos

Sekvensanimering - Adobe After Effects -handledning

Shape Layer Repeater (radiell) - Handledning för Adobe After Effects

Handledning - Snabbtips 03 - 2D -cirklar och streckad linje

Animering av infografisk scen Avsnitt 1 After Effects

Earth Hour Tutorial Efter effekter

Att göra animerade mönster med hjälp av Shape Layers Repeater i After Effects

Summit 1.2 - Intro to Motion Graphics - After Effects

Hur man importerar och animerar en vektorfil i After Effects

Bekantskap med Ancor Point. Animering av handflator

Hur skapar jag växlar?

Radial Wipe Shape Transition

Nedräkning och nedräkning i Adobe After Effects

Arbetar med Lines Creator -skriptet

Cirklar är vårt allt! Lektion 1. Skapa ett intro

Cirklar är vårt allt! Lektion 2. Slinga tillbaka former

Cirklar är vårt allt! Lektion 3. Matchande färger i Adobe Kuler

Cirklar är vårt allt! Lektion 4. Arbeta med streck

Flytande cirklar effekt

Animerade former

Skapa en enkel formvideo

Skapa en formad animerad ikon

Skapa en enkel formintro

Spektakulär smartphone -form animation

Fantastisk form animation

Skapa en enkel formform

Former! Gör animerade mönster med hjälp av Shape Layers Repeater

Snygg form animation

Hur man gör en formad animerad banner

Praktiskt arbete nr 1

Praktiskt arbete nr 2:

Animera formen för siffran "1", omvandla smidigt till talet "2". För att göra detta, animera objektet i de första och sista ramarna. Använd siffror som objekt, anpassa dem utseende(storlek, färg, position, med hjälp av en uppsättning egenskaper på lämplig panel).

För att skapa en animering av formen på ett textobjekt vid de första och sista nyckelramarna måste talen "delas" - konverteras från text till grafik. Detta görs på detta sätt - kommandot split tillämpas på det valda objektet (menyläge "Modifiering" - "Split").

Praktiskt arbete nr 3:

Den resulterande animationen i den föregående uppgiften kanske inte passar oss på grund av det "fula" "överflödet" av objektets punkter i den första ramen till några punkter i objektet i den sista ramen. För att förbättra realismen att omvandla ett objekt till ett annat är det nödvändigt att ange till vilken punkt i objektet i den sista ramen den valda punkten för objektet i den första ramen kommer att "flöda".

För att göra detta kommer vi att utföra följande åtgärder (med hjälp av animationen från det tidigare verket):

Exempel på hur du skapar en formanimation ges i mappen "Animation" - "Shape animation".

Kort sammanfattning av föreläsningen:

Förutom animering med ändrade objektegenskaper (position, storlek, rotation, transparens, etc.) kan du skapa animering där objektets form ändras.

För att animera formen på ett textobjekt vid de första och sista nyckelramarna måste texten "delas" genom att konvertera den till grafik.

För att förbättra realismen att omvandla ett objekt till ett annat är det nödvändigt att ange till vilken punkt i objektet i den sista ramen den valda punkten för objektet i den första ramen kommer att "flöda". Ankarpunkter (kurvtips) används för detta.

Om du applicerar formtweening på former med i olika färger då kommer en färgförändring att ske under transformationen.

Nyckelbegrepp

• Form animation
• Dela upp text
• Kurvtips

Träningssats:

• För vilka objekt är det möjligt att skapa tweens i klassisk form?
• Är det möjligt att ändra färgen på ett animerat objekt när du skapar en formtween?
• Tilldela ankarpunkter (kurvtips) när du skapar en formtween?
• Vad menas med en grafisk framställning av ett textobjekt?
• Är formtweening tillämpligt på ett textobjekt? Vilka transformationer behöver du göra med textblocket för detta?

Övningar

• Skapa en rökanimation.
• Skapa tweens och förändringar i form av ett moln på himlen.
• Animera lågans form.
• Animera en bannerduk som vinkar i vinden.

• Beräknad animering av formtypen
• Ljudformat
• Ljudanimation

Beräknad animering av formtypen

Animationstyp Form(form) låter dig skapa effekter - metamorfos, vilket tvingar en form att "flöda" in i en annan. Samtidigt låter Flash dig ändra koordinaterna för ett objekt, dess storlek och färg.

När du använder denna typ av animering måste du komma ihåg att Flash endast fungerar med grafiska primitiv (linjer och fyllningar) och inte kommer att kunna animera grupper, symboler, textblock eller bitmappar. För att fortfarande använda dessa element i ditt arbete måste du bryta dem i delar (primitiv) med kommandot Ändra> Bryt isär.

För att studera denna typ av beräknad animering kommer vi att simulera en metamorfos, där en cirkel förvandlas till en kvadrat, under transformationen kommer figuren att röra sig, ändra färg och storlek.
Så, skapa ett nytt 100x300 px dokument, namnge det metafor och spara det på hårddisken.

I den första ramen i videon använder du Oval -verktyget högst upp i scenen för att rita en cirkel. Gå sedan till ram 20 och gör den nyckel. Längst ner på scenen, i ram 20, ritar du en fyrkant med verktyget Rektangel och tar bort cirkeln och väljer den med pilverktyget. Kvadraten du ritar ska vara större än cirkeln. Välj färgerna på cirkeln och kvadrera själv; du kan ställa in formerna på samma vertikal med hjälp av infopaletten.

När du har spelat alla dessa ögonblick går du tillbaka till bildruta 1 och, med hänvisning till paletten Egenskaper, i avsnittet Tween, ställer du in formvärdet. Lägg märke till att lagrets utrymme på tidslinjepaletten mellan ramar 1 och 20 är fylld med ljus salladsfärg och från ram 1 till 20 sträcker sig en pil. Om det finns en prickad linje på paletten istället för en pil, betyder det att du gjorde något fel, till exempel använde du inte grafiska primitiv i ditt arbete, utan en grupp eller symboler ...

Testa din film med kommandot Kontroll> Testa film.

Experimentera med tidslinjepaletten. Du kan styra rörelsens karaktär genom att använda avsnittet Lätt, som redan är bekant för dig från materialet från föregående föreläsning, och också bestämma karaktären på sättet att transformera formen i processen med dess metamorfos. För att göra detta måste du hänvisa till avsnittet Blandning(övergång), här kommer du att erbjudas två alternativ:

Distributiv(utsmetad) - Konturerna av linjer och fyllningar i mellanramar slätas ut.

Vinklad (kantig)- konturer av linjer och fyllningar i mellanramar behåller uppenbara hörn och raka linjer.

Var uppmärksam på tidslinjepaletten för den här videon, dess animation skiljer sig något från beskrivningen ovan, jag tror att genom att noggrant studera karaktären av figurens rörelse kan du självständigt räkna ut innehållet i det övre lagret på vilket animation presenteras.

Anmärkningar:
I detta arbete är bildfrekvensen 24 fps!

Animationen åtföljs av ljud. För att få hennes upprepade upprepning inte att se ut som en aggressiv ljudattack, vid publicering, på HTML -fliken, avmarkerade jag avsiktligt Loop -sektionen. Detta gjordes för att webbläsaren bara skulle kunna spela upp videon en gång! Om du vill titta på videon igen använder du webbläsarens verktygsfält och uppdaterar sidan. Och för framtiden bör användningen av ljudbett i dina videor tas på största allvar.

För det första: ljudet "väger" mycket. För det andra: om du inte kan styra ljudet programmatiskt, det vill säga att du inte ger användaren möjlighet att stänga av eller slå på ljudet när som helst, ska du inte använda det alls i loopade videor, till exempel i reklambanderoller. Men animering och några interaktiva element är helt enkelt otänkbara utan ljud. Därför kommer vi inom ramen för denna föreläsning att uppehålla oss mer i detta, men för närvarande, observera att ett separat lager är valt för ljudfragmentet på tidslinjepaletten.

I den här videon finns ytterligare ett lager - bakgrund (bottenlager), på detta lager finns statiska element - dekorationer.

Kontrollera formändringar med formtips

För att hantera mer komplexa formförändringar, sk Formtips(förankringspunkter), som avgör hur den ursprungliga formen kommer att lindas in i den nya formen. Med andra ord används ankarpunkter för att identifiera de punkterna i den ursprungliga formen, vars relativa position måste bevaras, detta är ett slags pärlor som fixar vissa element i bilden. Det mest typiska exemplet på användning av ankarpunkter är animering av ansiktsuttryck, där några av dess delar (till exempel ögonen) inte ska delta i transformationen.

Ankarpunkter indikeras i bilden med små cirklar med bokstäver. Brev (från a innan z) används som namn (identifierare) för ankarpunkter. Varje förankringspunkt på källbilden måste motsvara en punkt med samma namn på den resulterande bilden. Totalt kan högst 26 förankringspunkter användas för en siffra (beroende på antalet bokstäver i alfabetet). Ankarpunkter på originalbilden är gula, på den resulterande bilden är de gröna.

För att placera knutpunkter måste du göra följande:

• Klicka på vänster musknapp i ramen som motsvarar originalbilden.
• Se menyn Ändra> Form> Lägg till formtips(ändra> form> lägg till förankringspunkt) som ett resultat visas ett "tomt" av den första förankringspunkten på scenen i din ram - en röd cirkel med en bokstav a.
• Flytta den med musen med hjälp av pilverktyget med Snap to Objects -modifieraren aktiverad till den punkt i bilden som du vill markera som ankare.
• Vänsterklicka på ramen som motsvarar den resulterande bilden; det kommer också att finnas en röd cirkel på scenen med samma bokstav som i den ursprungliga ramen.
• Flytta cirkeln till punkten i bilden, som ska motsvara den som är markerad i den ursprungliga ramen, efter att cirkeln har flyttats ändras färg till grönt.
• Gå tillbaka till den första ramen och se till att förankringspunktens färg ändras till gul.

Om du behöver fortsätta placera ankarpunkter, upprepa stegen ovan.

Anmärkningar:
Om du använder flera förankringspunkter under transformationen, ordna dem medurs, från bildens övre vänstra hörn. Detta beror på att Flash bearbetar ankarpunkterna alfabetiskt.

Under processen att placera knutpunkter, är det lämpligt att regelbundet testa din video. För att ändra ankarpunktens position, dra den helt enkelt till en ny plats (detta kan göras både på den första och den sista ramen i sekvensen). Dessutom kan du alltid ta bort onödiga poäng eller lägga till nya. Om du är nöjd med resultatet av arbetet kan du dölja förankringspunkterna. Alla ovanstående operationer utförs enklast med hjälp av snabbmenyn. För att öppna den, högerklicka på en av ankarpunkterna. Menyn innehåller fyra kommandon, varav de tre första endast är tillgängliga för förankringspunkterna i källbilden:

Lägg till tips(lägg till ankarpunkt) - när kommandot körs visas ett tomt med en ny ankare på scenen. Ta bort ledtråd(ta bort ankarpunkt) - ankarfunktionen som du högerklickade på för att öppna menyn kommer att raderas.
Ta bort alla tips(radera alla ankare) - tar bort alla ankare.
Visa tips(visa nodpunkter) - det här läget används som standard (det finns en bock bredvid kommandonamnet). Om du väljer det igen blir ankarpunkterna osynliga. Detta alternativ bör endast användas efter det önskade resultatet har uppnåtts, eftersom du måste gå tillbaka till menyn Ändra> Form> Lägg till formtips för att återgå till läget för att visa ankare.

Var uppmärksam på de animerade flashvideos som presenteras i denna föreläsning, i det första fallet blir koalabjörnen till en uggla utan att använda ankare, i det andra fallet styr vi animationen med hjälp av tre par ankare.

Ljudformat

Ljud är elastiska vågor som sprids i gaser, vätskor och fasta ämnen och uppfattas av örat på människor och djur. En person hör ljud med frekvenser från 16 Hz till 20 kHz. Ljud med frekvenser upp till 16 Hz kallas infraljud, 2 · 10 4 - 10 9 Hz - ultraljud och 10 9 - 10 13 Hz - överljud. I processen med att digitalisera ljud registreras alla dess vågegenskaper. Denna inspelning kallas pulskodsmodulering och är en sekventiell inspelning av diskreta värden. Enhetens kapacitet, beräknad i bitar, indikerar hur många värden samtidigt i ett inspelat diskret fragment som ljudet tas. Ju högre bitdjup, desto mer matchar ljudet originalet. Varje ljudfil kan ses som en databas. Den har sin egen struktur, vars parametrar vanligtvis anges i början av filen. Sedan kommer en strukturerad lista med värden för vissa fält. Ibland, i stället för värden, finns det formler för att minska filstorleken.

Låt oss titta närmare på de ljuddataformat som vi oftast kommer att använda vid dubbning av videor i Macromedia Flash.

WAV (vågform)- ett diskret format för lagring och överföring av ljudsignaler i digital form, kännetecknad av hög kvalitet och tyvärr otrolig storlek. Wav -formatet kan lagra stereo- eller monofiler med 8 eller 16 bitars sampling. Förutom de vanliga diskreta värdena, bitness, antal kanaler och volymnivåvärden kan många fler parametrar specificeras i wav: positionsmärken för synkronisering, det totala antalet diskreta värden, uppspelningsordningen för olika delar av ljudfilen , och det finns också en plats för dig att placera det finns textinformation.

MP3 (MPEG Layer3)- Streamingsformatet för lagring och överföring av ljudsignaler i digital form är mycket kompakt. Används främst för ljud i realtid via nätverkskanaler och för CD-ljudkodning. Termen "streaming" betyder att dataöverföring sker som en ström av oberoende separata datablock - ramar. För detta är den ursprungliga signalen under kodningen uppdelad i sektioner med lika lång varaktighet, kallade ramar och kodas separat. Vid avkodning bildas signalen från en sekvens av avkodade ramar. Bithastigheten vid kodning av en signal som liknar CD -ljud (44,1 kHz 16Bit Stereo) indikerar den totala mängden av strömmen - mängden information som överförs per tidsenhet. Detta värde sträcker sig från 320kbs (320 kilobit per sekund, även känt som kbs, kbps eller kb / s), till 96kbs och lägre.

Ljudanimation

Så här lägger du till ljud i en film:

Importera en eller flera ljudfiler i wav- eller mp3 -format till din film. För att göra detta, gå till Arkiv> Importera -menyn. Filerna placeras automatiskt i ditt filmbibliotek som symboler. Öppna filmbiblioteket med menyn Fönster> Bibliotek och kolla in det.

Skapa ett nytt lager på tidslinjepaletten och placera ett ljudfragment på det med hjälp av symbolerna i ditt bibliotek - dra det från biblioteket till scenen. "Expandera" ljudet - lägg till ramar (inte nyckel) med kommandot Infoga ram så att ljudvågformen expanderas helt på paletten i detta lager. Flash låter dig skapa flera ljudlager, och varje lager fungerar som en separat ljudkanal. Det betyder att när filmen spelas upp spelas ljud på olika lager som sammanfaller i tid samtidigt.

Gå till den första ramen i ljudskiktet och se avsnittet Egenskaper Ljud(ljud). Om ditt bibliotek innehåller flera ljudfragment kan du när som helst ersätta det valda ljudet med ett annat genom att använda rullgardinsmenyn i det här avsnittet. Längst ner på paletten kan du se de ursprungliga parametrarna för ljudfragmentet: bandbredd, mono / stereo, bitdjup, varaktighet, upptaget minnesutrymme.

Falla ner Synkronisera(synkronisera) välj ett sätt att synkronisera ljudet:

Händelse(händelse) - ljudet synkroniseras genom att binda det till specifika händelser i filmen, till exempel när du klickar på en knapp. Händelsebaserat ljud spelas upp från det ögonblick det övergår till motsvarande nyckelbildruta och fortsätter oavsett tidslinjen, även om filmen stoppas (förutsatt att ljudet är tillräckligt länge, förstås).

Start(start) - den här metoden skiljer sig från den föregående genom att vid nästa förekomst av en given händelse börjar en ny instans av ljud spelas, även om uppspelningen av den föregående ännu inte har slutförts.

Sluta(stopp) - Det angivna ljudet slutar spela.

Ström(ström) - strömning av ljud. Flash ger "forcerad" synkronisering mellan animering och strömmande ljud (till exempel om animeringsramar inte kan spelas på en webbsida med samma hastighet som strömmande ljud, hoppar Flash -spelare över vissa bildrutor). Strömmande ljud slutar alltid spela när animationen slutar. Dessutom varar strömmande ljud aldrig längre än de associerade animeringsramarna spelar.

Antalet repetitioner av ljudet kan ställas in i avsnittet Slinga(cykler). Det "ändlösa" uppspelningsläget är inte implementerat, men det kan simuleras genom att ange ett tillräckligt stort antal i detta avsnitt.

Du kan ställa in ljudeffekter som påverkar ljudvolymen. De förberedda inställningarna väljs från listrutan Effekt(effekten):

Ingen- det finns inga effekter, det här objektet bör väljas om du inte gillade de valda effekterna.

Vänster kanal- startar bara ljudet i den vänstra kanalen.
Höger kanal- startar ljud bara i rätt kanal.
Tona vänster till höger- smidig övergång av ljud mellan kanaler från vänster till höger.
Tona höger till vänster- smidig övergång av ljud mellan kanaler från höger till vänster.
Tona in- en gradvis ökning av ljudets amplitud.
Tona ut- en gradvis minskning av ljudets amplitud.

Om du behöver en annan typ av effekt bör du välja objektet i den här listan. Beställnings(andra) och gör sedan justeringar med panelerna som visar ljudets vågform. I det här fallet är följande åtgärder möjliga:

• Det finns vertikala markörer på skalan som indikerar uppspelningstiden för ljudinspelningen. Genom att dra dessa markörer kan du klippa av oönskade sektioner i början och i slutet av ljudinspelningen.
• Variabel ljudvolym kan ställas in med hjälp av speciella markörer på vågformspanelen. Genom att lägga till en sådan markör (genom att klicka) eller ändra dess position (genom att dra), ändrar vi volymnivån vid vissa tillfällen. Det kan vara upp till åtta markörer totalt, vilket motsvarar samma tidpunkter i vänster och höger kanalpanel. Kanalernas volym samtidigt kan vara olika. För att ta bort en markör måste den dras ut ur panelen.

Andra kontroller är endast för bekvämlighet. Så du kan ändra skalan för tidsaxeln med knapparna Zooma in och Zooma ut. Du kan ändra hur tidslinjen visas med knapparna Sekunder(sekunder) och Ramar(ramar).

Om du inte har ett eget ljudbibliotek kan du använda Macromedia Flash -biblioteket genom att gå till Fönster> Gemensamma bibliotek> Ljud.

Ljudinspelning och korrigering

När du arbetar med en animerad eller interaktiv video kommer du säkert att vilja spela in ditt eget musikaliska eller talfragment. Så du spelade in lite ljud med en mikrofon och sparade det som lite ljud. Wav.

Varje wav -fil har en ganska stor storlek, men detta är en lätt borttagbar defekt, eftersom vi kan konvertera den till en mp3 -fil med PlayCentre, och även korrigera detta fragment med hjälp av specialprogram, till exempel Ljudsmide eller Steinberg Wave Lab.

Vid inspelning från en mikrofon visas pauser före och efter ett ljudfragment (till exempel ett ord). Buller dyker upp. Rösten är förvrängd. Alla dessa brister, med hjälp av de program som anges ovan, kan enkelt elimineras även av en nybörjare.

I dessa program representeras ljud grafiskt i form av en våg. Därför kan vi här, med kirurgisk precision, klippa av de delar vi inte behöver. Lägg till olika effekter, till exempel "A la Masyanya", förvandla en kvinnas röst till en mans röst och dröm i allmänhet för ditt nöje.

Läxor: Grundläggande animering i Macromedia Flash MX

Först måste du kopiera de animerade flashvideos som presenteras i materialet i denna föreläsning.

För det andra, för att skapa en video som låter dig illustrera de underbara raderna från en dikt av Sergei Alexandrovich Yesenin:

Ah, och jag är själv i det ofta ringande
Jag såg igår i dimman:
Röd månads föl
Spänd till vår släde ...

Totalt: du har fyra filer i fla -format (om den totala storleken på filerna överstiger 150 Kb, packa filerna i ett arkiv) och skicka dem till läraren.

Jag önskar dig framgång i din oberoende studie av Macromedia Flash MX!