Peter Stenlund, Solviks folkhögskola Version 2001-02-02 Får endast användas i privat bruk För att få ut det mesta av denna kurs bör du behärska fönster- och filhantering, ordbehanding och Internet. Helst bör du också ha provat på enkel bild- och musikhantering och HTML/hemsideproduktion. Det är utmärkt om du jobbat med något vektor/objektorienterat ritprogram. MACROMEDIA FLASH Vad är egentligen Flash De sista åren har företaget Macromedias program Flash blivit något av en standard när det gäller att skapa liv och rörelse till websidor. Flash är ett vektorbaserat ritprogram med möjlighet att jobba med lager samt importera pixelgrafik. Så långt gör Flash samma sak som de stora vektorbaserade ritprogram som finns på marknaden (Corel Draw, Adobe Illustrator samt Macromedia Freehand). Är du bekant med någon av dessa har du en stor fördel när det gäller att komma i gång med Flash. Det som skiljer Flash från dessa är tidsaxeln, ljudmöjligheterna samt möjligheten att omvandla skapad grafik till filmsnuttar och klickbara knappar samt koppla åtgårder till dessa. Dynamiken i Flash ligger i kombinationen av dessa i sig rätt enkla element. Liten filstorlek och flexibilitet två orsaker till programmets framgångar En stor orsak till framgången är att programmet genererar små filer med kort laddningstid. Detta är möjligt på grund av att programmet jobbar med vektorgrafik. Den andra orsaken till framgången är att Flash-filen trots den lilla filstorleken ger en mycket större flexibilitet är t.ex. ett javascript idag gör. Du kan i Flash få helt flytande övergångar i både tid (animeringar) och rum (layoutdispositioner) samt kombinera detta med ljud och musik. Två typer av grafik Vektorgrafik Liten filstorlek Upplösningsoberoende Stelt (passar till grafisk design) Program: Corel Draw, Illustrator, Freehand I Flash som grafik Pixelgrafik. Ofta stor filstorlek Upplösningsberoende Levande (passar till foton och målninngar) Program: Photoshop Paint Shop Pro I Flash som importerade bitmappar 1
Vad är det du ser när du startar programmet? Tidsaxeln med aktuell nyckelbild (jmf filmruta) markerad Scenen: Här lägger du objekten, i detta fall en markerad cirkel Verktygslådan: Här finns verktygen att påverka grafiken på scenen Du som är van vid något vektorbaserat rit- eller layoutprogram känner du igen vektygslådan och scenen (papperet, ritytan). Tidsaxeln hittar du även i film- (t.ex. Adobe Premiere) eller musikprogram (Cool Edit eller Steinberg Cubase). Som standard öppnas Flash med en scenstorlek (ritytan alltså) på 550 x 400 pixlar. Vill du ha annan storlek ändrar du det på Ändramenyn Film Lassovertyg: Markera delar av objekt Pilvertyget. Till att markera, flytta, storleksförändra och rotera grafik Pincett att suga upp färg från objekt Vyhanteringsverktyg Skaparverkyg; Oval- och rektangel att skapa objekt med både fyllning och linje Pennan att skapa linjer på fri hand Penseln att skapa fyllning på fri hand Linje att skapa räta linjer Ändra-verktyg: Ändra linje respektive fyllning på redan gjorda objekt Suddgummi att sudda delar av objekt Egenskaper till valt verktyg, i detta fall pilverktyget 2
Skapa objekt Övning 1 Skapa en röd cirkel med en blå konturlinje Markera ovalverktyget. Välj en blå färg och 8 punkters tjocklek på linjerutan och röd färg på fyllningsrutan (se bild nedan) Ett objekt = fyllning + linje Omarkerat objekt Hela objektet = fyllning + linje markerat Endast fyllningen markerad Endast vissa delar av objektet markerat Markera och radera objekt och delar av objekt Prova att markera din cirkel. Klickar du med pilverktyget på fyllningen markeras bara den, klickar du på linjen markeras bara den. Vill du markera både fyllning och linje på en gång dubbelklickar du. Om du använder lassoverktyget eller drar en ruta med pilverktyget genom halva cirkeln markeras endast delar av den. Du avmarkerar genom att klicka var som helst utanför markerat objekt. Du tar bort objekt eller delar av objekt genom att markera dessa och trycka på tangenten Delete alternativt använda suddvertyget Övning 2 Skapa ett antal cirklar och testa ett markera dessa på alla ovan beskrivna sätt. Radera dem sedan. Övning 3 Flytta objekt Markera objektet med pilverktyget. Peka med spetsen på pilen mitt i objektet och dra. Storleksförändra objekt Markera objektet med pilverktyget. Klicka i skala-rutan på egenskapsfältet. Åtta rektanglar dyker upp. Peka med spetsen på pilen på någon av rektanglarna och dra. Smälta samman objekt med lika färg Skapa två röda cirklar med valfri konturlinje, Markera bara konturlinjen. Tryck på tangenten Delete. Nu har du två cirklar utan någon konturlinje. Dra den ena cirkeln så den skymmer den andra. Avmarkera allt. När du markerar igen märker du att cirklarna smält samman. Det finns även ett antal sätt att förhindra detta (bl.a. att lägga likadana objekt i skilda lager) 3
Textverktyget När du skapar text grupperas texten på en gång. Du som är van vid Photoshop märker att det påminner redigeringsmöjligheterna i ett Textlager. Du kan alltså ändra färg och rätta stavfel men t.ex. inte sudda ut halva bokstäver. För att kunna göra detta måste du markera texten och välja Ändramenyn - Dela upp Nu förstår datorn inte längre att det är frågan om bokstäver och du kan t.ex. inte byta teckensnitt eller rätta stavfel däremot kan du sudda ut halva bokstäver mm. Markerad text där gruppen är delas upp Markerad text som grupp (detta är förhandsvalet) Övning 4 Skriv in lite text på scenen, storleksförändra, byt färg, rotera m.m. Dela upp texten och byt färg på endast vissa partier, sudda ut delar av texten tills du förstår principen med grupperad och icke grupperad text. Avancerad redigering av objekt. Det finns ytterligare massor av sätt att skapa komplexa former men då tenderar denna kurs att bli en kurs i vectorgrafik och förändring av bezierkurvor därför nöjer vi oss här med att kunna skapa text och enkla objekt. Det finns en utmärkt handledning som följer med Flash om du vill fördjupa dig. Du hittar den under Hjälpmenyn. Symboler Skapa en rektangel med orange fyllning och en 4 pixlar tjock blå konturlinje. Markera både fyllning och linje genom att dubbelklicka på den. Välj Infoga menyn Konvertera till symbol Nu dyker en egenskapsruta upp. Fyll i den som nedan. Markera rektangeln. Som du ser är markeringen nu annorlunda. Du kan inte längre separera linje och fyllning, sudda ut delar av den mm. Om man ska återanvända objekt flera gånger finns det skäl att konvertera den till symboler. Då behöver nämligen Flash inte spara en ny version för varje ny rektangel utan återanvänder symbolen. Så här ser en markerad symbol ut på scenen (till vänster) och i Fönstermenyn Bibliotek (till höger) 4
Detta går till så att alla symboler lagras i ett bibliotek. Detta biblioteket hittar du under Fönstermenyn Bibliotek. Öppna detta och du ser symbolen där (se bild nederst föregående sida) Nu ska vi lägga upp fyra rektanglar på scen. Detta gör vi genom att med pilverktyget ta tag i symbolen i biblioteket och dra ut den på scenen. Upprepa detta tills du har fyra rektanglar på scenen. Prova lägg dem så de skymmer varandra. Som du ser smälter de inte ihop längre utan lägger sig istället ovanför och under varandra. Du styr vilken som ska ligga överst respektive underst genom Ändramenyn Ordna Förekomster Var och en av de fyra rektanglarna på scenen är en förekomst av symbolen orange rektangel. Det betyder att de alla har sitt ursprung i symbolen men lever ett eget liv på scenen. Vi ska se hur. Klicka på vilken som helst av rektanglarna /förekomsterna. Välj Ändramenyn Förekomst Nu dyker en dialogruta upp. Klicka på fliken egenskaper och färgeffekt: special och dra det gröna reglaget till 53% och klicka på OK. Nu har fyllningen antagit en lila färg. Välj en annan av förekomsterna och Välj Ändramenyn Förekomst Nu dyker en dialogruta upp. Klicka på fliken egenskaper och färgeffekt: alfa. Välj 40% och klicka OK Nu blir förekomsten bara 40% synlig. Lägg den ovanför en annan av förekomsterna så ser du. Klicka på ytterligare en av förekomsterna, välj storleksverktyget och förstora den. Klicka på den sista av förekomsterna Välj Ändramenyn Förekomst Nu dyker en dialogruta upp. Klicka på fliken egenskaper och färgeffekt: special och färga den på valfritt sätt Det kan då se ut som nedan. 4 förekomster utifrån samma symbol 5
Lager Har du jobbat med Photoshop är du redan bekant med lager. Lager kan liknas vi ett antal OH-blad som staplas på varandra. Aktivt lager är mörkt. I detta fall den blå texten hej. Vill du byta ordning på lagren tar du tag i lagret och drar det Genom att dubbelklicka på lagernamnet kan du döpa om lager Genom att klicka på ögat och låset kan man göra lagren synliga/osynliga samt redigerbara/icke redigerbara Genom att klicka på + skapar du nya lager Klickar du på papperskorgen raderas markerat lager Övning 5 Scenen ovanför består av tre lager med cirkeln, texten och rektangeln i var sitt lager. Försök åstadkomma detta själv. Lägg till ytterligare lager, ta bort lager, byt ordning med lager och byt namn på lager tills du känner att du förstår principen. Även här finns det mycket mer att lära sig men vi nöjer oss med detta så länge. Övning 6 Skapa två valfria former med hjälp av oval och rektangelverktyget. Spara dessa som två symboler och dra ut ett valfritt antal förekomster som du ändrar och åstadkommer en bild som bygger på en färgmässig ide. (t.ex. komplementfärger eller många nianser inom ett snävt område). Du kan även ändra bakgrundsfärgen på scenen genom Ändramenyn Film I bilden ovanför har enbart symbolen orange rektangel används, men jag har använt 37 förekomster av denna. I Ändramenyn Justera kan du markera flera förekomster och få dem att linjera exakt eller hålla samma avstånd sinsemellan osv. Ett annat användbart tips är att använda rutnätet som visas genom Visamenyn Rutnät. Där kan du även göra nätet magnetiskt genom Visamenyn - Fäst. Färgen på rutnätet kan du påverka genom Ändramenyn Film 6
Tidslinjen och animering. Tidslinjen består av en matris rutor med möjlighet att lägga in bilder. Bilderna motsvarar en filmruta på en filmremsa. I filmsammanhang brukar man säga att det behövs 25 bilder i sekunden för att ögat ska uppfatta stillbilder som rörliga men i datasammanhang har man tummat på kraven och brukar nöja sig med 12 bilder/sekund. Det är också förhandsvalet i Flash. Vill man ändra bildhastighet ändrar man det i Ändramenyn Film På bilden nedan är stora delar av tidslinjen tom (i lager 4 är t.ex. alla rutor utom den första utan bilder). I tidlinjematrisen kan man lägga in två typer av bilder, nyckelbilder och vanliga bilder. Det görs i Infogamenyn. I tidslinjen markeras nyckelbilder med en tom eller fylld ring nertill. Tom ring betyder att scenen är tom och fylld att det finns något på scenen. Det är bara i nyckelbilder man kan påverka vad som händer på scenen. Vanliga bilder används för att behålla ett objekt på scenen under längre tidsrymd. Nyckelbild med nåt på scenen Matris med bild Matris utan bild Nyckelbild utan något på scenen Uppspelningsmarkering Vi ska titta närmare lite på animeringen nertill som beskriver scenen vid ruta 4 I lager 4 finns just denna ruta bara tom matris. I lagret landskap syns de objekt (gräset och träden) man placerade in i nyckelbilden på första rutan. Detta objekt går alltså inte redigera från ruta 4 eftersom det inte finns någon nyckelbild där, däremot är det ju nödvändigt med en bild eftersom landskapet ska finns i bakgrunden under hela filmsekvensen. I lagret boll finns däremot en nyckelbild med fylld ring, det betyder att det finns något på scenen som är möjligt att redigera (den gula bollen). Detta lager är exempel på en steg för steg animering. I lagret bil finns inte heller någon nyckelbild, däremot finns det en nyckelbild både i ruta 1 och 5. I ruta 1 befinner sig bilen till vänster på scenen och i rutan 5 befinner sig bilen till höger på scenen. I rutorna däremellan (2-4) räknar datorn ut ett medelvärde mellan de två positionerna. Detta gör att man kan få bilen att köra från väster till höger utan att flytta den bild för bild. Detta är inte bara en arbetsbesparande animering utan också en animering som skapar små filer. Interpolerad animering kallas denna typ av animering. 7
Steg för steg-animering Skapa en valfri symbol. Jag för min del använder den gamla godingen orange rektangel Skapa en nyckelbild i ruta 1. Detta görs i Infogamenyn Nyckelbild. Dra ut en förekomst av symbolen från biblioteksfönstret. Markera den. Klicka in dig i ruta 2 på tidsaxeln. Skapa en nyckelbild i ruta 2. Flytta förekomsten lite åt höger. Se till att den är markerad. Klicka in dig i ruta 3 på tidsaxeln. Skapa en nyckelbild i ruta 3. Flytta förekomsten lite till åt höger. Fortsätt på detta sätt tills du har cirka 10 rutor. Det finns olika sätt att spela upp animeringar. 1. Ta tag i uppspelningsmarkören och dra den över tidslinjen 2. Tryck på tangenten Enter 3. Öppna Fönstermenyn Kontrollenhet och välj Play-knappen på bandspelaren När du testat att det fungerar tar du bort hela animeringen genom att markera alla nyckelbilder i tidslinjen och Infoga Ta bort nyckelbild. Nu finns bilderna kvar. Gå till Infogamenyn - Ta bort bild. Nu har du en tom matris. Interpolerad animering. Utgå från en tom matris. Radera eventuella nyckelbilder och bilder. Infoga därefter en nyckelbild i ruta 1. Dra ut en förekomst av en enkel symbol från biblioteksfönstret. Markera ruta 10. Infoga en bild. Nu finns förekomsten på scenen från ruta 1 10. Du kan dock endast redigera den på ruta 1 eftersom det är bara där det finns en nyckelbild. Markera ruta 10 och infoga en nyckelbild. Nu kan du redigera förekomsten i ruta 10. Flytta förekomsten till valfri position på scenen. Markera en valfri bild mellan ruta 2 9. Välj Infogamenyn Skapa rörelseinpolering. Nu räknar datorn ut en rörelse i rutorna mellan nyckelbilderna (ruta 1 10). Provkör animeringen. Klicka in dig i ruta 10 nyckelbild och flytta förekomsten till en ny position. Testkör animationen. Klicka in dig i ruta 1 nyckelbild. Markera förekomsten. Gör den större och bara 30 % synlig. Testkör animationen. 8
Skapa knappar En knapp är en typ av symbol. Sedan tidigare har du ju skapat symbolen orange rektangel där beteendet var grafik. Välj Infoga-menyn och Ny symbol Denna ruta kommer då upp. Fyll i den som nedan och klicka OK. Nu kommer du in i ett redigeringsläge. Redigeringsläget skiljer sig från scenen genom att du har ett markeringskors i mitten på redigeringsytan. Korset markerar centrum på den blivande symbolen. För att komma tillbaka till den vanliga scenen klickar du på Scen1 uppe till vänster. Specifikt för redigeringsläget för knappar är att tidslinjen är utbytt mot fyra knapplägen. Dock fungerar knappläget precis som tidslinjen med bilder och nyckelbilder. För att skapa en knapp skapar du alltså en nyckelbild för vart och ett av de fyra lägena och placerar något på scenen. Upp-läget Tvärs över-läget Ner-läget Träff-läget Så här ser knappen ut när muspekaren inte befinner sig ovanför träffläget Så här ser knappen ut när muspekaren befinner sig över träffläget Så här ser knappen ut nät man håller musknappen nertryckt över träffläget Här bestämmer du vilken area som ska vara träffläge 9
Lägg valfria former till de fyra träfflägena. När du lagt in nyckelbilder och skapat grafik till de fyra träfflägena återgår du till scenen genom att klicka på scen1 uppe i vänstra hörnet. Du kommer nu tillbaka till scenen. Skapa en nyckelbild i ruta 1 och ruta 10. Skriv ordet hej på scenen i ruta 10. Återgå till nyckelbilden i ruta 1. Gå till biblioteksfönstret och dra in en förekomst av symbolen min egen knapp på scenen. För att kunna kontrollera om knappen fungerar måste du aktivera knappen. Det gör du i Kontrollmenyn Avtivera knappar Skapa interaktivitet med hjälp av knappar När man skapat en knapp vill man ju att något ska hända när man klickar på den. I Flash handlar det ofta om att hoppa till en viss bildruta, till en annan scen eller kanske till en URL. För att få det att fungera kopplar man en åtgärd till knappen. Avakivera först knappen i Kontroll-menyn så att du kan markera den. Högerklicka sedan på knappen. Då öppnas en meny med bl.a, egenskaper. Klicka på detta val. Nu dyker en egenskapsruta upp. Klicka på fliken Åtgärder. Klicka på + för att lägga till en åtgärd. Välj åtgärden Go To och välj bild 10 (se nedan) och klicka OK. Gå till nyckelbilden i ruta 1. Aktivera knappen i Kontrollmenyn och testa att klicka på knappen. Nu hoppar filmen fram till ruta 10 när du klickar på knappen du gjort. Då ser du på tidslinjen och att ordet hej (som du ju la in i nyckelbild 10 tidigare) dyker upp. Kombinera symboler Strykan i Flash ligger mycket i att kombinera symboler. Till exempel kan man skapa mer levande knappar. 1. Skapa en filmklippssymbol Välj Ny symbol och välj filmklipp som beteende. Döp filmklippet till min egen filmsnutt Du kommer nu in i redigeringsläget för filmklipp. Redigeringsytan är förvillande lik scenen, tidslinjen och lagren finns där, det är bara hålkorsmarkeringen och länken uppe till vänster som skvallrar att detta inte är scenen. Skapa en enkel interpoleringsanimation och återgå sedan till scenen. 2. Skapa en knapp där du infogar filmklippssymbolen i Tvärs över-läget Välj Ny symbol och välj knapp som beteende. Döp knappen till min nya knapp Lägg in en valfri grafik på Över, Ner och Träff-läget. I Tvärs över-läget öppnar du biblioteksfönstret och infogar symbolen min egen filmsnutt Animeringen kommer alltså att visas först när du håller muspekaren ovanför träffläget. 10
3. Testa knappen genom att testköra filmen Återgå till scenen. Skapa en nyckelbild i ruta 1. Öppna symbolbiblioteket och dra in en förekomst av min nya knapp på scenen. Aktivera knapparna. Tyvärr kan du inte se animeringen i tvärsöver-läget utan du måste köra en testfilm. Detta gör du genom att Kontrollmenyn Testfilm. Ta alltid för vana att testköra filmerna på detta sätt, först då kan du få en riktig uppfattning om hur det skulle se ut i någon annans dator. Ljud I Flash kan du också koppla ljud till nyckelbilder. Ljudet måste vara i wav format. Det är lämpligt att ha ljudet i ett eget lager. Välj ett ny film genom Arkivmenyn Ny Skapa en nyckelbild i ruta 1. Skapa en bild i ruta 40. Återgå till nyckelbilden i ruta 1. Vi ska här använda ett ljud som följer med programmets ljudbibliotek. Detta kommer man åt genom att välja Biblioteksmenyn-Ljud. Välj ljudet Beam Scan och dra ut en förekomst på scenen. På tidslinjen kan du se att ljudet är 25 rutor långt Testspela det genom att trycka på Enter-tangenten. Skapa en nyckelbild i ruta 30 och infoga ljudet Book Drops där. Testspela tidslinjen. Ljudet Beam scan Ljudet Book drops Även om ljudet Beam Scan hörs i 25 rutor är det ändå bara i nyckelbilden i ruta 1 du kan påverka ljudet. Markera ruta1 och välj Ändramenyn -Bild Nu öppnas dialogrutan Bildegenskaper. Klicka på Ljudfliken. 11
Som du ser kan du här påverka ljudet på en massa sätt, tona in och tona ut, låta det vandra mellan högtalarna o.s.v. Testa och lek med reglagen tills du förstår möjligheterna men ljud. Vill du ha egna ljud behöver du kunna enkel ljudredigering. Med lite kunskap kan du spela in eget ljud med mikrofon till ljudkortet eller omvandla musik på CD-skivor till wav-filer som sedan kan importeras i Flash. Ett enkelt och bra shareware-program för musikredigering är CoolEdit (musikens Paint Shop Pro) där du kan förbereda ljudsnuttar för Flash på samma sätt man i ett bildprogram kan förbereda bitmapbilder för import i Flash. Genom att dra i volymreglagen kan du tona ljudet i varje kanal för sig Här finns ett antal förprogrammerade effekter Beam scan är ett stereoljud med höger och vänster kanal Här kan du loopa aktuellt ljud ett antal gånger Överkurs: Här ställer du in hur ljudet ska förhålla sig till bildhastigheten och bilder i andra lager 12
Exportera Vad är det för vits med att ha en fin snäcka om man inte får visa den för någon, sa en gång lilla knyttet. Med tiden får du kanske ihop en filmsnutt/multimediaproduktion med ljud, animeringar och klickbara knappar, men det kan ingen annan än den som har Flash installerat i sin dator ta del av, dessutom blir filerna lätt flera MB stora. Flash-produktioner kan dock exporteras i ett swf-format och köras i varje modern webläsare med Shockwave plug in installerad. Med tiden kommer troligen funktionen att läsa swf-filer att byggas in direkt i webläsarna. Det är mycket enkelt att exportera en flashproduktion. Välj Arkivmenyn Exportera film och välj lämplig mapp på din hårdisk. Du får då upp nedanstående dialogruta. Ställ in värden som denna och klicka OK. Du har då en liten behändig Flash-fil som du kan infoga i ett HTML-dokument på samma sätt som en bild. Vill du ha hjälp med att skriva HTML-koden klickar du i Flash istället på Arkiv-menyn och Publicera. Utifrån valda inställingar skapar Flash då både HTML-filen som behövs och infogar automatiskt flashfilen. Swf-filerna blir oftast förvånansvärt små. Detta beror på att symboler återanvänds i förekomster, bitmappar komprimeras till JPG-filer och wav-filerna görs om till mp3-format. 13