Meny
Är gratis
registrering
Hem  /  Installation och konfiguration/ O enkel animering i flash. Hur man skapar en blixtanimation Vad är en scen

Om den enklaste animationen i Flash. Hur man skapar en blixtanimation Vad är en scen

Har du någonsin undrat vad som döljer sig bakom den vackra animeringen av banners på Internet? Eller nymodiga tecknade serier skapade med hjälp av datorteknik? Oftast är de baserade på "kött", eller snarare, det är så här namnet översätts från engelska Flash-teknik... Idag ska vi prata om flash-animation för en webbplats:

Flash-teknik

Multimediaramverket har utvecklats av Macromedia. Men efter dess absorption (fusion) överfördes alla rättigheter till tekniken till den nya ägaren - Adobe System.

Område modern användning Adobe Flash :

  • Skapandet av webbapplikationer är en ganska ny riktning. Inkluderar hel eller partiell användning av Flash för att skapa webbplatser. Med partiell tillämpning skapar denna teknik enskilda element design: olika interaktiva menyer, animerade knappar, etc.

Jämfört med konventionella resurser på html baserad Flash-sajter har vissa funktioner som begränsar deras användning. Detta inkluderar de höga kostnaderna för utveckling, krävande serverresurser, långa nedladdningstider med långsamma internetanslutningar och några andra aspekter:

  • Implementering av multimediafunktioner - för att lyssna på ljud och spela upp video på webbplatser, mediespelare skapade på Flash-baserad... Deras utveckling inkluderar användningen av ett av skriptspråken (vanligtvis JavaScript):
  • Inom onlineannonsering används tekniken oftast för att skapa animerade banners. De innebär inte bara uppspelning av multimediareklam, utan också någon form av interaktion med användaren baserat på spelet.

Flash utvecklingsramverk och verktygslåda

För att skapa Flash-animationer används oftast de traditionella verktygen från Adobe:

  • Adobe Flash Professional - ett program för att skapa interaktiv animation (animator);
  • Adobe Flash Builder - en miljö för att skapa ett webbapplikationsgränssnitt;
  • Adobe Flash Player är en webbläsarintegrerad spelare för att spela Flash.

Utöver det kan ett antal multimediainnehåll av denna typ spelas upp tredje parts applikationer... De mest populära av dessa är Gnash, QuickTime och några andra:

Denna teknik låter dig visa alla typer av grafik ( raster, vektor, 3D). Och stöder även strömmande vidarebefordran av ljud- och videodata. En lätt version av Flash Lite har utvecklats speciellt för mobila enheter.

Huvudstandarden för Flash-filer är SWF-tillägget. Förkortningen står för Small Web Format. Video inspelad i Flash har filtilläggen FLV, F4V.

Vektorgrafik är kärnan i utvecklingen av interaktiv animation på Flash. Det är tack vare detta som det var möjligt att implementera stöd för multimediaplattformen och animeringskvalitetens oberoende från skärmupplösningen.

Filstorleken på flashapplikationen är densamma för alla användare oavsett tekniska egenskaper skärmupplösning).

Flash interaktiv animering är baserad på morphing (vektortyp), där det finns ett långsamt flöde mellan nyckelbildrutor. För att spela upp data används en flashspelare, vars arbete på många sätt liknar verket virtuell maskin JavaScript. Teknikens programvarukomponent implementeras med hjälp av ActionScript-språket.

Nackdelarna med tekniken inkluderar följande punkter:

  • Tung belastning på CPU klientmaskin. Detta beror på den låga effektiviteten hos den virtuella flashmaskinen, som är inbäddad tillsammans med spelaren i användarens webbläsare;
  • Hög sannolikhet för fel - Flash-animering kan spelas upp med stor sannolikhet för fel. Dessutom påverkar fel i Flash-uppspelning driften av hela klientapplikationen (webbläsaren) negativt. Detta beror på otillräcklig kontroll av feltoleransen programkod när du skapar flash-applikationer;
  • Underlåtenhet att indexera - Allt textinnehåll som visas i Flash-innehåll deltar inte i indexeringsprocessen. Denna begränsning är särskilt problematisk för de resurser som är baserade på denna teknik.

Översikt över tredjepartsprogramvara för Flash Creation

Sothink SWF Quicker togs som en prototypapplikation för att demonstrera grunderna för att skapa Flash. Enligt många proffs är programmet det mest begripliga och enklaste att lära sig.

Förutom att skapa och redigera, "vet" flash-redigeraren hur man arbetar med alla andra typer av webbanimationer (GIF, HTML och andra standarder):

Efter installationen går du till programmets användarvänliga gränssnitt. Tyvärr, efter att ha vandrat genom alla skrymslen och vrår av gränssnittsspråkväxlaren, hittade vi den inte.

För att förstå hur man gör Flash-animationer i denna applikation kommer vi att använda de inbyggda mallarna. Dialogrutan "Nytt från mall" visas omedelbart efter start av programmet. Dessutom kan den anropas via huvudmenyalternativet "Arkiv". Bland de föreslagna alternativen har vi valt att skapa en banner:

I nästa fönster i guiden, från rullgardinsmenyn, måste du välja en mall enligt vilken animeringen kommer att skapas. Nedanför är en liten ram där den valda mallen spelas:

I nästa steg måste du ställa in dimensionerna på bannern och ange 5 fraser med text som kommer att spelas upp i animationen. Dessutom måste du ange adressen till resursen som användaren kommer att ledas till genom att klicka på bannern:

Efter att ha kompilerat projektet och stängt guidefönstret kan du se den resulterande videon i den inbyggda spelaren. För att göra detta, klicka på den gröna pilen högst upp:

När du har stängt spelaren, låt oss titta närmare på applikationsgränssnittet. Observera att det består av två huvudfönster: det övre är avsett för redigering av videons tidsintervall och det nedre är ett normalt. grafikredigerare... Vart och ett av elementen är placerat på ett separat lager, som kan modifieras med hjälp av standardverktygen som finns på sidopanelen.

Vi står ständigt inför flashanimationer - på Internet och i tv-sändningar. Att göra enkla Flash-animationer med Flash-teknik är snyggt enkel uppgift eftersom Flash erbjuder många användbara verktyg som förenklar hela processen. Om du vill skapa en blixtanimation eller tecknad film kan du skissa den på bara ett par timmar.

Steg

Del 1

Frame-by-frame flash-animation

    Grunderna i time-lapse-animation. Denna metod anses vara den huvudsakliga metoden för att skapa "traditionell" animation, där varje efterföljande bildruta innehåller en, men något modifierad bild. När alla bildrutor spelas upp kommer bilden till liv. Detta är samma teknik som används av frihandsanimatörer och är mer tidskrävande än interpolering (se nästa avsnitt).

    • Som standard spelar Flash upp 24 bilder per sekund (FPS). Det betyder att 24 bildrutor kommer att visas på en sekund, men alla behöver inte vara olika. Du kan ändra den här inställningen (om du vill) till 12 bilder per sekund, men med 24 bilder per sekund kommer animationen att spelas mjukare.

  1. Installera Flash Professional. Det finns många Flash-animationsprogram där ute, men det mest kraftfulla är Adobe Flash Professional CC. Du kan prova det här programmet gratis eller använda en annan produkt (om du inte vill registrera dig för Adobe Creative Cloud). Resten av den här artikeln beskriver hur du arbetar med Flash Professional.

    Eftersom bildruta-för-bildruta-animering kräver flera bilder (som skiljer sig något från varandra), måste du skapa dessa bilder manuellt. För att göra detta, använd Adobe Flash Professional eller rita bilder i valfri grafikredigerare.

    • Om du vill att dina bilder enkelt ska ändra storlek utan att förlora kvalitet, skapa bilder i vektor snarare än rastergrafik. Vektorbilder kommer att rita om sig själva när storleken ändras (det vill säga du undviker pixelering eller kantutjämning). Bitmaps är traditionella bilder som fotografier, handritade bilder och så vidare. Om du försöker förstora sådana bilder får du en mycket förvrängd bild.

  2. Skapa den första ramen. När du startar Adobe Flash Professional för första gången kommer du att se en tom arbetsyta (lager) och en tom tidslinje. När du lägger till ramar kommer tidslinjen att fyllas automatiskt. Du kan arbeta med lager precis som du gör i Photoshop.

    • Innan du lägger till en bild, skapa en grundläggande bakgrund för din animation. Byt namn på "Layer 1" till "Bakgrund" och docka det sedan. Skapa ett andra lager och döp det till vad du vill. Detta kommer att vara lagret som du kommer att skapa din animation på.
    • Lägg till ritningen på duken av den första ramen. Du kan importera ritningen från din dator, eller så kan du använda ritverktygen för att skapa ritningen direkt i programmet.
    • Den första ramen är "nyckel"-ramen. En nyckelbildruta är en bildruta som innehåller en bild och utgör ryggraden i en animation. Du kommer att skapa en ny nyckelbildruta varje gång bilden ändras.
    • Nyckelrutor på tidslinjen indikeras med en svart prick.
    • Du behöver inte en nyckelbildruta i varje efterföljande bildruta. Skapa en nyckelbild var fjärde till femte bildruta att göra bra animation.

  3. Konvertera bilden till symbol. I det här fallet kan du lägga till bilden i ramen flera gånger. Detta är särskilt användbart om du snabbt behöver lägga till flera bilder av samma typ i en ram (till exempel fiskar i ett akvarium).

    • Välj bilden. Högerklicka på bilden och välj "Konvertera till symbol". Bilden kommer att läggas till i biblioteket, vilket gör den lättare att använda i framtiden.
    • Ta bort ritningen. Oroa dig inte - du kan lägga till den i din ram genom att helt enkelt dra och släppa från biblioteket. På så sätt kan du lägga till samma bild flera gånger i ramen.

  4. Lägg till tomma ramar. När din första nyckelbildruta är klar, infoga tomma ramar och fortsätt sedan för att skapa den andra nyckelbildrutan. Tryck på F5 (fyra eller fem gånger) för att lägga till tomma ramar efter den första nyckelbildrutan.

    Skapa en andra nyckelbildruta (efter att du har lagt till några tomma ramar). Det finns två olika sätt att göra detta: du kan kopiera en befintlig nyckelbildruta och göra små justeringar av den, eller så kan du skapa en tom nyckelbildruta och lägga till en ny bild till den. Om du använder en ritning skapad i ett annat program, använd den andra metoden. Om du klistrar in en bild skapad med ritverktygen Adobe Flash Professional, använd den första metoden.

    • För att skapa en nyckelbildruta med innehållet i föregående nyckelbild, tryck på F6. För att skapa en tom nyckelbildruta, högerklicka på den sista bildrutan på tidslinjen och välj Infoga tom nyckelbildruta.
    • När du har skapat den andra nyckelbildrutan måste du ändra dess bild för att få liv i animationen. Om du har använt Adobe Flash Professionals ritverktyg, välj Transform-verktyget för att välja ett element i din ritning (som en karaktärs hand) och ändra det.
    • Om du infogar en ny bild vid varje nyckelbildruta, se till att den är på rätt plats (enligt den logiska sekvensen av ramar).

  5. Upprepa processen. När du har skapat två nyckelbildrutor, upprepa processen - lägg till några tomma bildrutor mellan varje nyckelbildruta och se till att animeringen går smidigt.

    • Gör små ändringar. Ju mindre (mer subtila) ändringar, desto mjukare spelas animationen. Om du till exempel vill att karaktären ska höja sin hand, ska den andra nyckelbildrutan inte innehålla en teckning som visar karaktären med en hand som redan är upplyft. Använd istället flera nyckelrutor för att flytta från arm ner till arm upp. I det här fallet blir animeringen smidigare.

  6. Konvertera ritningen. När du har skapat nyckelrutor och bana kan du transformera bilden så att den ändras smidigt när du rör dig längs tvillingens bana. Du kan ändra form, färg, lutning, storlek och andra parametrar för bilden.

    • Välj den ram där bilden ska omvandlas.
    • Öppna egenskapspanelen för bilden. För att göra detta, tryck på F3.
    • Ändra parametervärdena i fönstret för bildegenskaper. Du kan till exempel ändra nyansen eller färgen, lägga till filter, ändra storlek.
    • Du kan också använda verktyget Free Transform för att ändra bilden som du vill.

  7. Lägg till pricken över i:et. Testa den skapade animationen genom att trycka på Ctrl + Enter. Se till att ritningen (karaktären) ändras korrekt och att animationen spelas upp i rätt hastighet. Om animeringen spelas för snabbt, minska FPS eller öka längden på tvillingen.

    • Standard FPS är 24, så försök att sänka detta värde till 12. Ändra FPS-värdet i egenskapsfältet. Men vid FPS = 12 kanske animeringen inte spelas tillräckligt smidigt.
    • För att ändra längden på en tvilling, välj lagret som innehåller tvillingen och använd skjutreglaget för att ändra längden på tvillingen. Om du vill dubbla längden på tvillingen, flytta skjutreglaget 48 ramar. Kom ihåg att infoga bakgrunden i tomma ramar så att bakgrunden inte försvinner mitt i animeringen. För att göra detta, välj pho nytt lager, klicka på den sista bildrutan i animationen (på tidslinjen) och tryck sedan på F5.

Del 3

Lägga till ljudeffekter och musik

  1. Spela in eller ladda ner ljudeffekter och musik. Du kan lägga till ljudeffekter till din animation för att göra den mer effektiv. Musik kommer att göra animationer mer spännande och kan göra bra animationer till fantastiska. Flash stöder en mängd olika ljudfilformat, inklusive AAC, MP3, WAV och AU. Välj ett format som garanterar högkvalitativt ljud med den minsta filstorleken.

    • MP3-formatet garanterar ljud av hög kvalitet med den minsta filstorleken. WAV-filer är stora.

  2. Importera ljudfiler till biblioteket för att snabbt kunna lägga till ljud och musik till animationer. Klicka på Arkiv - Importera - Importera till bibliotek. Hitta ljudfilen på din dator. Se till att ljudfilen har ett lätt att komma ihåg namn så att du snabbt kan hitta den.

    Skapa ett nytt lager för varje ljudfil. Detta är inte nödvändigt och du kan lägga till ljud till befintliga lager, men om du infogar ljudfilen på ett separat lager får du bättre kontroll över animationsljudspåret.

    Skapa en nyckelbild för att börja spela upp ljudet. På ljudlagret väljer du animeringsramen från vilken ljudet ska börja spelas. Tryck på F7 för att infoga en tom nyckelbildruta. Om du till exempel vill infoga en ljudfil som ska spelas upp under hela animeringen, välj den första bildrutan på ljudfillagret. Om du lägger till en karaktärs röst väljer du ramen där karaktären börjar tala.

Hittills har vi tittat på Flash-filmer som spelades upp utan tittarnas inblandning från början till slut. Men Flash låter dig också skapa interaktiva applikationer där användaren kan styra visningen av innehåll. I den här lektionen kommer vi att börja bekanta oss med elementen i Action Script-skriptspråket och titta på hur du kan använda det för att skapa interaktiva applikationer. Som ett exempel, låt oss skapa ett fotoalbum med delar av ett interaktivt gränssnitt. Men innan vi fortsätter med beskrivningen av Action Script är det nödvändigt att berätta om ytterligare en typ av symboler som vi har lämnat utan uppmärksamhet tills nu - det här är knappsymboler. För att bygga ett interaktivt gränssnitt är de ett måste.

Skapa knappar

Knappen är ett interaktivt filmklipp med fyra bildrutor. När vi ställer in en symbol till en knapptyp, skapar Flash en tidslinje med fyra ramar för den nya symbolen:

Up-state är en ram som motsvarar situationen när knappen inte är nedtryckt och muspekaren inte är över knappen;

Over-state - en ram som illustrerar utseendet på en knapp när muspekaren är över knappen, men knappen inte är nedtryckt;

Ned-läge - denna ram visar utseendet på knappen när den trycks ned;

Hit-state - definierar området där knappen reagerar på musklick; detta område syns inte i klippet.

För att skapa en knapp, kör kommandot Infoga => Ny symbol (du kan skriva kortkommandot Ctrl + F8). I dialogrutan Skapa ny symbol som visas anger du ett namn för knappsymbolen (till exempel but1) och väljer knappen Knappsymbol.

Flash växlar till symbolredigeringsläge och ger upp-, över-, ned- och träffaramar. Den första bildrutan, Upp, blir en tom nyckelbildruta. Låt oss rita en otryckt vy av knappen i denna ram (Fig. 1).

Ris. 1. UPP-knappram

Låt oss välja den andra ramen, markerad som Över och som motsvarar tillståndet när markören placeras över knappen. Låt oss infoga en nyckelbildruta i denna bildruta (genom kommandot Infoga => Nyckelbildruta), som ett resultat av vilket en nyckelbildruta dyker upp, som helt upprepar innehållet i Up-bildrutan. Låt oss ändra färgen på knappen som visas i fig. 2.

Fig 2. Överram av en knapp

På liknande sätt, lägg till nästa ram (Down-frame) och rita det nedtryckta tillståndet för knappen (Fig. 3).

Ris. 3. Nedramsknappar

Vi kommer inte att rita något i Hit-frame ännu, men vi återkommer till denna ram lite senare.

Låt oss gå till huvudscenen, ringa upp biblioteket med kommandot Fönster => Bibliotek och skapa en instans av knappsymbolen genom att dra den till scenen (Fig. 4.)

Ris. 4. Låt oss skapa en instans av knappen genom att dra den från biblioteket

Som ett resultat får vi följande film. Som du kan se från den här filmen trycks knappen ned inte bara när vi klickar på knappens centrala (arbets-) område, utan också när vi klickar på ramen runt den. Detta beror på det faktum att om träfframen inte ritas, kommer knappens arbetsområde att motsvara upp-ramen.

För att knappen endast ska tryckas in i arbetsområdet är det nödvändigt att definiera detta område i Hit-frame, det vill säga rita en knapp utan ram (se fig. 5)

Ris. 5. Knappens träffram

Efter att vi lagt till den önskade Hit-frame kommer vi att få nästa film, där ett tryck på ramen inte trycker på knappen.

För att göra en knapp interaktiv är det nödvändigt att associera faktumet att trycka på knappen med utförandet av vissa kommandon, det vill säga att beskriva ett visst scenario. För skript i Flash finns det ett speciellt språk som heter Action Script. I den här lektionen kommer vi bara att beröra en liten del av det här språkets möjligheter, och i framtiden kommer vi att återgå till strukturen och syntaxen för Action Script när exemplen på att skapa interaktiva filmer i Flash blir mer komplexa.

Förstå Action Script

Action Script är ett skriptspråk, en uppsättning instruktioner som styr element i en Flash-film. Action Scripts kan bäddas in i filmen eller lagras i en extern textfil med AS-tillägget.

När du bäddar in ett manus i en film kan du bädda in det i olika delar av filmen. Mer specifikt kan Action Scripts innehålla nyckelbildrutor, knappinstanser och filmklippsinstanser. Följaktligen kallas skripten Frame Action, Button Action och MovieClip Action.

Action Scripts exekveras när vissa händelser utlöses av användaren eller systemet. Mekanismen som indikerar Blixt vilken operatör som ska exekveras när en händelse inträffar kallas en händelsehanterare.

Action Script har sin egen syntax, ungefär som JavaScript. Flash MX 2004 stöder Action Script av alla tidigare versioner Blixt.

Ett av de grundläggande begreppen i Action Script är Actions - kommandon som ger instruktioner under körningen av en SWF-fil. Till exempel skickar gotoAndStop () spelhuvudet (Playhead) till en specifik bildruta eller etikett. Namnet på språket kommer från ordet Actions - Action Script (bokstavligen - action script). Vi kommer att bekanta oss med de flesta av begreppen i detta språk på specifika exempel.

Interaktivt fotoalbum

Låt oss demonstrera hur man använder knappar för att styra ett fotoalbum – skapa en uppsättning bilder och lägg till två knappar som rullar bilden fram och tillbaka.

Placera det första fotot på huvudtidslinjen och lägg till en knapp från standarduppsättningen. Få tillgång till önskad mapp kör kommandot Windows => Kontrollpaneler Gemensamma bibliotek => Knappar (Fig. 6).

Ris. 6. Lägg till en knapp från standardbiblioteket

Som ett resultat av att utföra detta kommando kommer en panel att dyka upp som innehåller en stor uppsättning förritade knappar olika typer... Låt oss välja till exempel Key Buttons (knappar som ser ut som tangentbordstangenter), öppna motsvarande mapp, välj tangent-vänster-knappen (Fig. 7) och skapa en instans av denna knapp (genom att dra den till scenen).

Ris. 7. Objekt i mappen Key Buttons

Observera att när du placerar den andra knappen (nyckel-höger) på scenen och flyttar den för att passa in med den första knappen, ger programmet en ledtråd (streckad linje) som gör att du kan placera knappen exakt (Figur 8).

Ris. 8. Automatisk justering av knappar på samma nivå

För att lägga till ett skript måste du anropa Action Script-editorn genom kommandot Fönster => Utvecklingspaneler => Åtgärder eller genom att trycka på F9-tangenten. Om du ska skriva skript ofta, då är detta tangentbordskommando värt att komma ihåg. Som ett resultat kommer Action Script-redigeraren att visas (fig. 9).

Ris. 9. Paneler i Action Script-redigeraren

Om du experimenterar genom att markera olika element i scenen, medan du övervakar meddelandena i Action Script-redigeringspanelerna, kommer du att upptäcka att programmet frågar dig om vilket element du kan "hänga" kod på. Om du väljer en ram på scenen visas inskriptionen Actions - Frame i det övre vänstra hörnet av redigerarpanelen, om du klickar på knappen kommer inskriptionen Actions - Button att visas, det vill säga programmet uppmanar att den inmatade koden kommer att referera till knappens skript. Och om du väljer ett foto, kommer ett meddelande att visas i fältet som är avsett för att ange ett skript: Det aktuella urvalet kan inte ha åtgärder som tillämpas på det (skriptet kan inte tillämpas på det valda objektet).

Vi kommer att tilldela ett skript till en knapp. V senaste versionerna ActionScript har förmågan att skriva centraliserad kod, det vill säga kod som finns på ett ställe, och denna förmåga gör att du bättre förstår stora program. Dock i enkla exempel(vilket vi överväger) att tilldela ett skript till en knapp är helt giltigt.

Så för knappen med vänsterpilen måste vi formalisera följande scenario: "Om knappen släpps på en viss ram, är det från denna ram nödvändigt att gå till föregående ram." I enlighet med syntaxen för Action Script-språket (fig. 10), kommer det att se ut så här:

Den första raden innehåller händelsehanteraren på () knappen, som har följande format:

Nu kommer vi att lägga till flera nyckelramar så att knapparna som skapats i den första ramen kommer att kopieras in i dem, och vi kommer att placera de nödvändiga fotona i de nyskapade ramarna.

Om vi ​​startar den skapade filmen för exekvering kommer bildrutorna att spelas kontinuerligt efter varandra, och därför måste vi först och främst ge kommandot "Stopp" på den första bildrutan. För att göra detta, lägg till lämpligt kommando i den första bildrutan (fig. 11).

Ris. 11. Skript tilldelat den första bildrutan

Observera: kommandot är inte längre tilldelat knappen, utan till ramen. Det faktum att ett skript har tilldelats ramen noteras på huvudtidslinjen - en liten bokstav "a" visas ovanför den fetstilta punkten i rambeteckningen.

Som ett resultat fick vi följande film.

Om vi ​​bara har ett fåtal ramar i fotoalbumet räcker det med två knappar - "Framåt" och "Tillbaka", men om fotouppsättningen är stor är det önskvärt att även ha knappar som skickar till början och slutet av filmen. I nästa exempel kommer vi att lägga till motsvarande knappar: "Till den första bilden" och "Till den sista bilden". Du kan välja knappar med ett passande minnesminne från standardbiblioteket med knappar från mappen Circle Buttons (Fig. 12).

Med hjälp av det här exemplet kommer vi att bekanta oss med ett annat kommando gotoAndStop (), som låter dig gå till önskad ram och sedan stoppa.

Ris. 12. Knappar från mappen Circle Buttons

På knappen för att gå till den första ramen (den tredje från vänster i Fig. 13), kommer vi att lägga till koden, som visas i Fig. 13.

Ris. 13. Scenario för knappen "Till första bildrutan"

I fallet med ett fotoalbum med fem ramar, lägg till övergångsskriptet "Till sista bildrutan" till den sista knappen:

Automatiserad scripting

Hittills har vi skrivit alla kommandon manuellt, men ActionScript-redigeringspanelerna tillhandahåller en mängd olika automatiska skripttjänster. Låt oss överväga dessa möjligheter.

Ris. 14. Automatiserade skriptverktyg

I handlingsskriptredigeringsfönstret kan du välja, dra, flytta om och ta bort kommandon.

Låt oss visa hur du kan skriva samma skript för "Forward"-knappen i automatiserat läge. Genom att välja mappen Movie Clip Control (det övre vänstra fönstret i Fig. 14), kan du komma åt händelsehanteraren på och sedan antingen dubbelklicka på motsvarande objekt eller dra uttrycket till skriptskrivfältet i Dra och släpp-läget.

Ris. 15. Tips för att slutföra uttryck

Som ett resultat kommer det nödvändiga uttrycket och en antydan om formuläret att visas på arbetsfältet (fig. 15): du väljer önskat kommando från menyn och uttrycket slutförs automatiskt. Som du kan se från menyn kan du välja inte bara det tillstånd som är kopplat till knapparna på skärmen - du kan också välja från menyn fig. 15 klausul tangent Tryck på " ", Eller tangenttryckning" ”, Vilket motsvarar att trycka på tangentbordstangenterna (vänsterpil, högerpil), det vill säga det är möjligt att skapa ett fotoalbum som kommer att “vändas” med hjälp av tangentbordstangenterna.

Ris. 16. Åtkomst till en knappsats

Använda tangenttryckningskommandot " ”(Fig. 16), gå sedan till mappen Timeline Control, välj kommandot nextFrame och dra det till arbetsytan (Fig. 17).

Ris. 17. Kommandot nextFrame finns i mappen Timeline Control

För knappen som överför filmen till början av fotoalbumet kan du välja att trycka på Home-knappen från menyn som en händelse och sedan (bild 18) dra kommandot gotoAndStop till fältet, vilket resulterar i en annan ledtråd om möjlig syntax för detta kommando kommer att visas.

Pilarna i verktygstipset visar de olika syntaxalternativen. Programmet erbjuder två alternativ (fig. 18 och 19), det vill säga det erbjuder att ställa in en scen och en ram, eller bara en bildruta. I vårt fall räcker det att endast ange ramen (Frame). Om namnet på scenen utelämnas, utförs som standard övergången till ramen för den aktuella scenen.

Ris. 18. Tips om möjlig kommandosyntax

Ris. 19. Piltriangeln låter dig bläddra bland syntaxalternativ

Efter att vi tilldelar alla knappar till motsvarande tangentbordsknappar, vi kommer att få nästa film, där sökning av bilder kommer att göras från tangentbordet, och att klicka på skärmknapparna med musen kommer inte att orsaka några konsekvenser.

Är det möjligt att tillhandahålla ett scenario där olika händelser leder till samma handlingar? Det visar sig att det är möjligt - för detta, i on-händelsehanteraren, måste du räkna upp listan med händelsenamn. Om du sätter ett kommatecken i listan över händelser efter den första händelsen, kommer själva programmet att erbjuda dig en meny (bild 20).

Ris. 20. När du anger ett kommatecken i listan över händelser, visas en meny med ytterligare kommandon automatiskt

Låt oss lägga till den första händelsen (genom att trycka på tangentbordsknappen) den andra händelsen (släpp skärmknappen):

på (knapptryck " ", släpp)

Låt oss upprepa proceduren för resten av knapparna och som ett resultat kommer vi att få ett fotoalbum, där sökning av bilder kommer att ske både med musen och med tangentbordet (den ursprungliga FLA-filen kan erhållas från länk).

I det övervägda exemplet använde vi en övergång efter ramnummer, men den här metoden är inte alltid bekväm: om numreringen av ramar ändras under redigeringsprocessen kan logiken brytas. Det är bekvämare att använda övergång efter rammärke. Tänk på ett exempel som inte bara kräver att man bläddrar igenom albumet utan också flyttar till olika avsnitt, det vill säga mer komplex navigering.

Låt albumet bestå av teckningar, datorgrafik och fotografier.

Den första ramen i avsnittet "bilder" kommer att heta Bilder, på samma sätt som de första ramarna i andra avsnitt kommer vi att tilldela etiketter grafik och foto.

Skapa ett etikettplaceringslager och döp det till etiketter. För att sätta ett märke på en ram, i egenskapspanelen är det nödvändigt att välja typ av märke Namn och skriva ner dess namn. I vårt fall, Bilder (Fig. 21). Placera etiketterna på samma sätt i ramarna 5 och 10 (Fig. 22).

Ris. 21. Ett exempel på att tilldela en etikett till en ram

Lägg nu till ett nytt lager och namnge det Actions. I den första nyckelbildrutan i lagret Actions, anropa panelen Actions Frame (genom att trycka på F9-knappen) och skriv kommandot stop () (se fig. 22)

Ris. 22. Scenario för den första bilden

Låt oss lägga till ett annat lager som heter Ämnen, där vi kommer att ge titlar till motsvarande ramar: "Bilder" (Fig. 23), "Grafik" och "Foton".

Ris. 23. Rubrik för ramar i avsnittet "Bilder".

Lägg nu till på sidan av menyknapparna med samma namn, som vi kommer att placera på ett nytt lager som heter Meny.

Låt oss skriva ut det första menyalternativet "Bilder" från vänsterkanten och översätta det till en knappsymbol. Använd pilverktyget, välj textblocket "Bilder" och kör kommandot Ändra => Konvertera till symbol (du kan också utföra detta kommando med F8-tangenten), i panelen Konvertera till symbol, ställ in symboltypen för knapp och definiera dess namn som bildknapp (Fig. 24 ).

Ris. 24. Tilldela namnet på bildknappen till knappen för övergången till avsnittet med bilder

Låt oss skapa fyra ramar för knappen "Bilder": den första representerar helt enkelt den ursprungliga texten (fig. 25), den andra - samma text bara i blått, vi hoppar över den tredje ramen (i det här fallet ned- ram kommer att vara samma som Over-frame ), och i Hit-frame kommer vi att rita ett rektangulärt område som kommer att definiera området för att trycka på knappen (Fig. 26).

Ris. 25. Upp-ram av bildknappen

Ris. 26. Tryck på bildknappens ram

Nu måste vi hänga skriptet på den nyskapade knappen. För att göra detta, välj knappen i Scen 1 och, genom att trycka på F9, ring åtgärdspanelen och lägg sedan till koden som visas i Fig. 27.

Ris. 27. Scenario för övergång till en ram med en etikett

Använder scener

Som du vet låter Flash dig skapa ganska komplexa filmer som kan innehålla interaktiva element, animationer, klipp etc. Naturligtvis finns det ett behov av att lagra och söka efter olika delar av filmen. Om du arbetar med ett stort och komplext projekt är det lämpligt att dela upp det i flera hanterbara fragment, som var och en innehåller en specifik händelsesekvens (animering, interaktiv dialog med användaren, etc.). Detta kommer att göra det möjligt att avsevärt förenkla arbetet. Scener spelar rollen som sådana fragment i Flash-filmer. De är logiskt sett kompletta miniatyrfilmer som tillsammans utgör en enda Flash-film. När du skapar stora projekt kan användningen av scener spara tid avsevärt.

Vad är en scen

Scenskapande är en effektiv teknik som låter dig dela upp ett specifikt projekt i separata hanterbara bitar. Varje scen är, som redan nämnts, en miniatyrfilm. Antalet scener som används i en Flash-film begränsas endast av mängden datorminne. Scener spelas upp sekventiellt, i den ordning som visas i scenpanelen, och samtidigt som de är separata, men ändå nära besläktade. Under uppspelning finns det aldrig en märkbar fördröjning mellan dem. Möjligheterna att använda scenerna är varierande och nästan obegränsade. När du till exempel arbetar med ett webbplatsprojekt kan du implementera avsnitt och underavsnitt som scener. På senare tid har korta animerade Flash-filmer, vars innehåll kan delas in i logiska delar med hjälp av scener, blivit alltmer populära på webben.

Scenpanel

Listan över scener som finns i filmen nås via scenpanelen.

på), som öppnas när du anropar kommandot Fönster> Designpaneler> Scen (Fönster> Designpaneler> Scen). Den här panelen låter dig se en lista över tillgängliga scener.

och ställ in ordningen för deras uppspelning i filmen - det bestäms av ordningen på scenerna i listan. Med hjälp av Scenpanelen kan du dessutom duplicera, lägga till, ta bort och flytta scener i listan.

Alternativmenyn på scenpanelen innehåller bara tre kommandon: Maximera panel, Stäng panel och Hjälp.

Scenpanel

Redigera panel

Redigeringspanelen är placerad ovanför tidslinjen, under huvudprogrammets meny. För att öppna panelen, använd kommandot Fönster> Verktygsfält> Redigera. Du har redan använt den här panelen när du arbetar med Symbol Editor-fönstret för att avsluta symbolredigeringsläget (se kapitel 6). Detta avsnitt kommer att fokusera på funktionalitet på redigeringspanelen för att arbeta med scener.

Redigeringspanelen innehåller namnet på den aktuella scenen (i figuren är den aktuella scenen Scen 2). Du kan byta till en annan scen med knappen Redigera scen på höger sida av redigeringspanelen, och namnet på den valda scenen kommer att visas på raden. Funktionen för knappen Redigera scen beskrivs i avsnittet "Byta scener".

Redigera scenknappsmeny

Scenskapande och manipulation

Som nämnts är Scenpanelen, som du öppnar med Fönster> Designpaneler> Scene, till för att arbeta med scener. I det här avsnittet kommer du att lära dig hur du kan använda den här panelen för att lägga till, duplicera, byta namn på och ändra ordning på scener.

Lägg till en scen

När komplexiteten i ditt projekt växer måste du hela tiden lägga till nya scener för att distribuera logiska bitar av dess innehåll. Du kan göra detta med hjälp av scenpanelen. För att lägga till en scen, följ dessa steg.

Se till att det nödvändiga dokumentet är öppet. Välj Fönster > Designpaneler > Scen för att öppna scenpanelen.

Klicka på knappen Lägg till scen, som finns i det nedre högra hörnet av panelen, eller ring kommandot Scene på Infoga-menyn. Efter dessa åtgärder kommer namnet på den nya scenen att visas i Scenpanelfönstret. Som standard namnges varje ny scen med ett sekventiellt nummer som är ett mer än namnet på den aktuella scenen (till exempel scen 1, scen 2, etc.). Namnet placeras därefter i listan.

Välj en ny scen i scenpanelen och skapa dess innehåll. När du skapar en ny scen växlar Flash till den automatiskt.

Lista över scener i scenpanelen

Ta bort en scen

Du kan radera en scen på detta sätt.

Öppna Scenpanelen genom att gå till Fönster> Designpaneler> Scene. Välj scenen du vill ta bort.

Klicka på knappen Ta bort scen i det nedre högra hörnet av panelen. För att bekräfta borttagningen av scenen, klicka på OK-knappen i dialogrutan som öppnas.

Duplicerar en scen

I de tidigare kapitlen har vi redan pratat om att skapa dubbletter av olika element. När det gäller att kopiera animation, och ännu mer ett komplext projekt med stor mängd scener, skulle processen vara ganska besvärlig utan dubblettfunktionen, som gör att du kan skapa exakta kopior av vilken scen som helst med bara en knapptryckning.

Öppna scenpanelen genom att gå till Fönster> Designpaneler> Scen och välj den scen du vill duplicera.

Klicka på knappen Duplicera scen som finns i det nedre högra hörnet av scenpanelen.

Scenpanelfönstret visar namnet på den duplicerade scenen. Observera att den består av namnet på originalscenen och ordet soru (kopia).

Duplicera scen

Byter namn på scener

Eftersom standardnamnen som tilldelas dubbletter och nya scener endast skiljer sig åt i sekvensnummer, är det svårt att identifiera scenen när man söker efter specifikt innehåll. Därför är det tillrådligt att i stora projekt tilldela speciella namn till scener som kännetecknar deras innehåll. Att byta namn på en scen bör inte ta mycket av din tid.

Öppna scenpanelen genom att välja Fönster> Designpaneler> Scen och dubbelklicka på det scennamn du vill ändra. I det här fallet kommer det att vara möjligt att redigera scenens namn.

Ange ett nytt namn och tryck på Returt / Enter-tangenten, eller dubbelklicka utanför scenpanelen.

Byter namn på en scen i scenpanelen

Ändra ordningen på scenerna

Ordningen i vilken scennamnen placeras i scenpanelen avgör i vilken ordning scener i filmen spelas. Scennamn i denna panel kan flyttas för att ställa in uppspelningsordningen för scener oavsett i vilken ordning de skapades.

Öppna scenpanelen genom att välja Fönster> Designpaneler> Scen.

Flytta muspekaren över namnet på scenen du vill ordna om, klicka vänster knapp och, medan du håller den, flytta pekaren till önskad plats på panelen. Observera att när du flyttar pekaren visas en blå linje som indikerar en möjlig ny position för scenens namn i listan.

Flytta en scen i scenpanelen

Växla mellan scener

Du kan använda följande navigeringshjälpmedel för att växla mellan olika scener i en film medan du arbetar med ett Flash-projekt.

Scenpanel. För att navigera till önskad scen i filmen, klicka på scenens namn i scenpanelen. Kom ihåg att namnet på den valda scenen visas i redigeringspanelen.

Knappen Redigera scen. När du klickar på den här knappen, som finns på höger sida av redigeringspanelen, kommer du åt en meny med namnen på alla scener i filmen. För att gå till önskad scen, välj motsvarande menyalternativ.

Panelen Movie Explorer. Öppnad med Fönster> Andra paneler> Filmutforskaren, visar den här panelen den hierarkiska strukturen för en film (se kapitel 8) och låter dig söka efter scener, symboler och förekomster av symboler samt ersätta text och teckensnitt.

Scener representeras i filmutforskarens panel som hierarkiska objekt av högre ordning. För att navigera till en specifik scen, hitta dess namn i filmutforskarens panel och klicka på den. Som standard visar denna panel bara innehållet i den valda scenen. För att se innehållet i alla scener samtidigt, aktivera kommandot Visa alla scener i menyn Alternativ på den här panelen.

Movie Explorer-panel med scenlista

Scentestning

För att testa den skapade filmen direkt i Flash-utvecklingsmiljön måste du trycka på Retur/Enter-tangenten, men i det här fallet kommer visningsalternativen att begränsas till den valda scenen. Sekventiell uppspelning av alla scener är möjlig först efter att filmen har publicerats och Flash behövs inte längre. För att testa, följ dessa steg.

För att testa en enskild scen, välj den i scenpanelen och tryck på Retur/Enter, eller efter att ha valt en scen, öppna kontrollmenyn och aktivera kommandot Test Scene.

För att testa filmen, ring kommandot Testa film på kontrollmenyn eller använd tangentkombinationen Cmd / Ctrl + Retur / Enter. Detta öppnar ett nytt fönster där alla scener i filmen kommer att spelas upp i den sekvens som definieras i scenpanelen.

Du kan också spela upp alla scener i en film genom att välja Spela upp alla scener från kontrollmenyn.

Scenkontroll med ActionScript

Scener kan avsevärt förenkla den övergripande organisationen av filminnehåll. Förinställd sekvensåtergivningen av scenerna avgör filmernas linjäritet. Men förutom fördelarna (till exempel är samtidig uppspelning av två scener utesluten) har linjära filmer också nackdelar förknippade med oförmågan att ändra ordningen för uppspelning av scener. För att lösa detta problem används ActionScript-skript (särskilt ramåtgärder) för att manipulera scener.

Kapitel 13 diskuterar ActionScript-skript och användningen av ramåtgärder mer i detalj.Det här avsnittet beskriver några av de åtgärder som du kan använda för att manipulera scener.

gotoAndStopO - när den här åtgärden anropas sker en övergång till en specifik scen och bildruta och filmen slutar spela.

gotoAndPlay () - anropar den här åtgärden gör att uppspelningshuvudet hoppar till en specifik scen och bildruta (filmuppspelningen fortsätter från denna bildruta).

spela upp О - Med den här åtgärden kan du fortsätta att spela upp filmen efter att ha stoppats.

stop О - med denna åtgärd kan du stoppa filmuppspelningen.

Jag välkomnar alla!
Så på begäran skriver jag en lektion om den enklaste animationen i Flash. Vi börjar smått, som man säger. Sedan lovar jag att lägga till fler (genom pop-up, om de inte skriver).

Öppna Flash MX.
Före oss är vår arbetsscen, meny, verktygsfält, etc. Längst ner finns ett fönster så här: Egenskaper. Det finns grundläggande inställningar för din tecknade serie (Fig. 1).
Vi är intresserade av FRAME RATE där - rullningshastigheten för din tecknade serie. Annars betyder 12 fps att 12 bildrutor (bildruta) av din tecknade serie kommer att spelas på en sekund. Denna hastighet är standard och i princip vad du behöver. Om du behöver sakta ner din animation - minska den, du måste göra det snabbare - öka den här siffran.

Låt oss nu gå vidare till själva animationen.
Det finns två huvudsakliga sätt i Flash: forminterpolering och rörelseinterpolering.
Låt oss överväga den första. Shape - (eng.) Shape. Du förstår redan att här blir det frågan om att ändra formen. Skapa en form som en blå fyrkant. Ovanför, på tidslinjen, kommer en cirkel på en grå bakgrund att dyka upp på den första bildrutan - vi har skapat en nyckelbildruta. Låt oss nu skapa samma ram vid bildruta 10. Detta kan göras på två sätt: flytta musen över bildruta 10, klicka (ramen blir blå) och välj från menyn: Infoga-> nyckelbildruta; annars kan du: peka på bildruta 10, klicka, tryck på F6. På tidslinjen är alla 10 bildrutor gråa. Den röda linjen visar vilken ram vi befinner oss på. (bild 2)

Gå till bildruta 10. Välj vår fyrkant (med musen eller genom att trycka på ctrl + A, - denna tangentkombination väljer allt som vi har i arbetsyta). Vi flyttar vår ruta någonstans åt sidan (se till att du är i 10:e ramen!) Och ändrar färgen till till exempel gul. Gå nu tillbaka till den första bildrutan. Det finns ett Tween-val på raden Egenskaper, där standard är "ingen". Det vill säga ingen animation. Ändra det till "form". I tidslinjen blir våra ramar ljusgröna med en pil. När allt är klart trycker du på "enter". SKÖNHETEN! Fyrkanten rör sig och ändrar till och med färg! Gå till bildruta 10 igen. Välj allt (ctrl + A). Och tryck på delete-tangenten (det vill säga radera). I stället för kvadraten ritar du någon form av röd cirkel. Gå till den första bilden igen och tryck på enter. Fyrkanten är nu en cirkel och röd. Du har redan förstått att du inte behöver rita varje bildruta - flash kommer att göra det åt dig! Även om du behöver speciell noggrannhet, eller något, kan du rita. då kommer filen att växa i storlek. Om du behöver en mjukare övergång från en kvadrat till samma, till exempel en cirkel, gör den här processen inte för 10, utan, säg, 25 ramar. Om du behöver mer invecklade rörelser och rörelser finns det lagermasker för detta, men jag ska prata om dem någon gång nästa gång. Figur 3 visar hur din animation ser ut på tidslinjen. Nu kan du rita en enkel film om formändring!

Låt oss nu överväga det andra sättet att ställa in animering: rörelseinterpolering (översättning av något i stil med: bygga mellanliggande animering av rörelse). Det blir lite mer komplicerat här. Öppna den nya flash-filen igen.
Vad är skillnaden mellan form och rörelse? Det faktum att vi i det andra fallet inte kommer att arbeta med formulär, utan på färdiga föremål, d.v.s. symboler. En symbol är så att säga den enklaste enheten för animering i Flash. Detta är det vanligaste sättet att måla. Vi upprepar allt igen - i den första ramen rita en liten blå fyrkant. markera den och tryck på F8 (eller kör sekventiellt: Infoga-> konvertera till symbol). En dialogruta visas framför oss (fig. 4).

Vad är det? Det finns tre typer av symboler i Flash: ett filmklipp är någon form av extra animation inuti en symbol. det vill säga, den här symbolen innehåller någon form av animation osv. har exakt samma tidslinje som huvudscenen; knapp (knapp) - ett element som reagerar på att trycka, närvaron av musen över den, etc. Kort sagt är knappen; och det tredje elementet, det mest statiska, är grafiskt. Det vill säga bara en grafik, en sorts bild. Vi kommer att arbeta med det senare. Vi kallar det på något sätt, klicka på "OK". En cirkel dyker upp på fyrkanten - annars, mitten av vår symbol (centrum kan också ställas in i den dialogrutan). Alla våra symboler förs in i biblioteket. Därifrån kan vi redigera dem, infoga dem där det behövs och där inte, ta bort, lägga till. För att titta på ditt bibliotek tryck F11 eller följ dessa steg: Fönster -> Bibliotek. I den 10:e bildrutan skapar du en nyckelbildruta (F6). Nu kan vi flytta vår ruta någonstans. Då kommer vi att göra det osynligt: ​​för detta kommer vi att välja det i den 10:e ramen. I egenskapspanelen, i färgsektionen, ställ in alfa (transparens). Låt oss ställa in attributet i procent till det: 0. Låt oss gå tillbaka till den första bilden. Låt oss utföra samma åtgärder som för forminterpolering, men istället för form markerar vi rörelse. Ramarna i tidslinjen blir lila och en pil sträcker sig genom dem, som visas i Fig. 5. Tryck på enter.

Vi kommer att ha en "fyrkantig flyger in i tomrummet"-effekt. Grattis! Du vet hur man gör primitiv grafik i Flash!
En annan viktig funktion är att för varje animation måste vi ha ett separat lager (Layer). Om du behöver lägga till ytterligare ett lager använder du kommandot: Infoga-> Lager.
Och bara lite om tidslinjen.
Som du redan förstått - ljusgrön med en pil - forminterpolering, lila med en pil - rörelseinterpolering. Ljusgrön eller lila med linjer - du angav en animation, men den här animationen kan inte skapas - du gjorde något fel. Grå färg - alla ramar med denna skuggning är en exakt kopia av föregående nyckelbildruta (nyckelbildruta). En vit linje betyder att det inte finns något i dessa ramar. Den svarta cirkeln är en nyckelbild. Den vita cirkeln är en tom nyckelbildruta. Tja, det är allt. (fig. 6)

Det var allt tills vidare. Detta är det minsta du kan arbeta med. Lär dig sedan hur du lägger till ljud, styr ljud och fortsätt och skriva Masyanya. :) Jag lovar att jag definitivt kommer att skriva en lektion till snart - om avancerad animering i flash. Om hur man gör en "fjäderdroppe", om masker, om kontroll över att ändra formen i forminterpolering, e. Då ska jag skriva något annat.
Om det hjälpte någon - säg tack till hela FLASHER.RU-webbplatsen. Det här är det bästa som finns på webben.
Jag var glad och glad över att äta! Om du har några frågor, gå till forumet eller: [e-postskyddad]
(с) från St. Dimitryi aka Nirva till Flasher.ru
http://flasher.ru