Flash-guiden

Flash-guiden

Välkommen till Webbdesignguidens Flash-guide!

Vad är Flash?

Flash utvecklas av Adobe och är en multimediaplattform speciellt utformad för webben. Med Flash kan man enkelt göra snygga animationer och filmer med interaktivitet utan programmeringskunskaper. Flash-pluginet finns enligt Adobe installerat på 98% av världens datorer.

Flash har en stor fördel i att en .swf (filformatet som en exporterad Flash-fil har) ser likadan ut i alla olika webbläsare, olikt ”vanlig” HTML/CSS/JavaScript som tolkas annorlunda beroende på webbläsare.

Vidare är Flash just nu det allra vanligaste sättet att visa video på nätet – t.ex. använder sig YouTube av Flash för att spela upp sina videoklipp.

Tack vare ActionScript 3.0 kan man även skapa avancerade spel som går att spela direkt i webbläsaren. FarmVille är bara ett exempel på ett mycket populärt Flash-spel.

Tweening

Man kan enkelt skapa animationer i Flash med hjälp av ”tweening”.

Börja med att öppna ett tomt Flash-dokument och rita en cirkel någonstans på det vita huvudområdet.

Gå nu till din timeline och högerklicka på ram 10 och välj ”Insert Keyframe”. En keyframe läggs då till i timeline. Keyframes är ”extra viktiga” frames där man sköter händelser och förändringar.

Markera sedan din cirkel och flytta den en bit, vart du vill. Efter det klickar du i timeline:n någonstans mellan frame 1 och frame 10, högerklickar och väljer ”Create Classic Tween”.

Du kan du testa din film genom att hålla nere Ctrl-tangenten och trycka Enter. Nu ser du att cirkeln animeras på ett läckert sätt. För att förhindra att filmen loopas om och om igen måste vi lägga till en snutt ActionScript. Läs mer om stop() i avsnittet ActionScript nedan.

Alpha tweening

Du kan tweena mer än ett cirkelns position, t.ex. kan du få den att sakta blekna/fade:a och och bli helt genomskinlig. Skapa ett nytt dokument och rita en cirkel igen. Ställ dig på frame 10 och högerklicka och välj ”Insert Keyframe”. Nu ska vi göra så att cirkeln över dessa 10 frames fade:ar ut och försvinner, och för att göra det måste vi konvertera cirkeln till en symbol.

Högerklicka på cirkeln och välj ”Convert to Symbol…” längst ner.

Nu dyker en ruta upp där du ska välja egenskaper för din nya symbol. Döp din symbol till vad du vill, se till att type är satt till Movie clip och tryck sen OK.

Gå sen till Properties-panelen under Color Effect, och välj Alpha. Sätt alpha:n till 0.

Sen gör du som i första exemplet och klickar någonstans mellan frame 1 och frame 10 i din timeline, och väljer Create Classic Tween.

Testar du nu f ilmen med Ctrl + Enter så ser du att du har en tween där din cirkel gradvis bleknar ut och försvinner.

Om symboler

En symbol är ett återanvändbart objekt i Flash som du kan vända närsomhelst i ditt projekt, och du når symboler genom att dra och släppa dem från ditt library.

Det finns tre olika symboler i Flash: Movie clip, Graphic och Button, där Movie clip ofta är den symbol man använder mest.

Movie clip är som små Flash-filmer inne i din Flash-film – de har en egen timeline och man kan placera Movie clips inuti Movie clips och de kan även kontrolleras med hjälp av ActionScript, vilket vi kommer till senare i denna guide.

Graphic används när man har en statisk bild som man behöver använda flera gånger.

Button används främst för att besökaren ska kunna navigera till olika frames på din timeline. Man kan också göra så att besökaren tas till en hemsideadress när man klickar på en knapp, samt lite andra saker. En Button har en egen timeline med fyra olika frames: Up, Over, Down och Hit. Med hjälp av dessa frames kan man bestämma vad som ska hända när besökaren för muspekaren över knappen eller trycker på knappen, samt hur knappen ska se ut i de olika lägena.

Varje symbol som du hämtat från ditt library har ett instance name. Om du drar tre likadana symboler från ditt library så kommer alla tre vara exakt samma sak för Flash, om du inte ger dem unika instance names. Du anger instance names under properties-panelen:

Efter att du gett din symbol ett unikt Instance name kan du sen ändra dessa egenskaper såsom storlek, alpha, färg, etc. utan att ursprungssymbolen i library:t påverkas.

ActionScript

ActionScript är det programmeringsspråk som Flash använder sig av för att skapa mer avancerade applikationer. Dock kan det vara mycket bra att känna till de enklaste och vanligaste ActionScript-funktionerna, även om man är nybörjare på Flash.

ActionScript-kod lägger man i ett eget lager på timeline. Man brukar döpa lagret till ”actions”, men egentligen kan man döpa det till vad man vill.

stop()

För att demonstrera stop() kan vi använda vårat tidigare exempel med den svarta cirkeln som tweenar. Utan någon ActionScript så loopar animationen om och om igen. Detta kan vi enkelt fixa:

Markera den tioende och sista frame:n i actions-lagret, högerklicka och välj ”Insert Keyframe”. Med denna keyframe markerad trycker du sen på tangenten f9 för att öppna actions-panelen, vilket är panelen där man skriver sin ActionScript. Skriv in stop(); i panelen. Som i de flesta programmeringsspråk använder man ett semikolon i slutet av varje rad som har text.

Om du nu testar din film med Ctrl + Enter så ser du att animationen slutar att spela på frame 10.

gotoAndPlay()

Med gotoAndPlay kan man hoppa till en specifierad frame och spela filmen därifrån. Kanske vill man infoga en knapp som tar besökaren till en annan del i filmen när knappen blir klickad. Du skriver numret på den frame som du vill hoppa till på detta sätt: gotoAndPlay(”5”);

gotoAndStop()

Som man kan kanske gissa utifrån namnet så gör denna funktion så att filmen hoppar till en specifierad frame, t.ex. gotoAndStop(”5”); och stannar därefter uppspelningen.

Code Snippets-panelen

I Flash Professional CS5 så har Adobe lagt till en Code Snippets-panel, där det finns vanliga ActionScript-kodsnuttar inlagda och sparade, så att man enkelt kan infoga nya funktioner med ett par musklick. Code Snippets-panelen är ett mycket bra ställe att börja på om man är nybörjare på ActionScript. Förutom att infoga kod så får man också en tydlig förklaringar och kommentarer på hur koden man infogat fungerar.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *