Grunder i Flash. Handledning och övningar

Transkript

1 Grunder i Flash Handledning och övningar

2 Introduktion Detta kompendie innehåller handledning samt 15 övningar i stigande svårighetsgrad. Övning 1-10 går igenom verktygslådan, övning symboler, bibliotek och animation, övning handlar om actionscript. Redovisning Varje övning sparas och redovisas på plats för handledare, men skall även läggas in på den webbplats ni skapar i en senare övning med Dreamweaver. Var därför noga med var ni sparar era övningar. I slutet av kursen ska ni ha lagt upp samtliga övningar på denna webbplats, denna fungerar då som slutredovisning av momentet Övningar. Flash Macromedia Flash är ett utvecklingsverktyg som främst används till att skapa små animationer inbäddade i Webbsidor. Men programmet Flash är så mycket mer. Flash är ett utmärkt program för att skapa illustrationer som objektgrafik. Tack vare actionscript är Flash även lämpad för att utveckla spel och andra interaktiva funktioner. Dessutom går det göra avancerade scriptfunktioner, formulär och anslutningar till serversidan. Flash:s XML stöd möjliggör intelligenta databaskopplingar och Quicktimestödet möjliggör skapandet av interaktiv video m.m. Flash styrka är ändå att kunna skapa olika typer av animationer, från små banners till tecknad film. Shockwaveplugin För att ta kunna ta del av Flashformatet måste din webbläsare ha ett speciellt shockwave/flash plugin som finns att ladda hem gratis på sidan Shockwave/flash är det vanligaste formatet för animeringar på webben, nu till och med större än Java. Det innebär att en stor del av Internetanvändarna (idag 98%) har flashplugin och kan ta del av Flash via sin Browser. Programmet Flashplayer som visar Flashfiler direkt ingår numera i operativsystemet Windows, vilket gynnar Flashformatet. Produktioner i Shockwaveformatet skapas vanligtvis i programmet Macromedia Director. Objektgrafik Grafiken som man arbetar med i Flash heter objektgrafik, denna typ av grafik brukar felaktigt kallas för vektorgrafik. Objektgrafik är uppbyggt av matematiska funktioner, dessa funktioner heter Bezierkurvor och går att skapa kurvor med, det är med andra ord andragradsfunktioner. Man brukar kalla denna grafik för vektorgrafik men objektgrafik är en utveckling från vektorgrafiken eftersom en vektor endast kan gå från punkt A till punkt B. Fördelen med objektgrafik är att den tar mindre utrymme att spara än en pixelbaserad bild, detta beror just på att den enda informationen som finns i bilden är matematiska funktioner och vilken kulör objekten ska ha. En annan fördel med objektgrafik är att dessa bilder går att skalförändra hur mycket som helst med bibehållen kvalitet, därför är det vanligt att man använder sig av objektgrafik när man skapar logotyper så att bilden kan användas på både kuvert och på stora fasadskyltar. Objektgrafik lämpar sig för illustrationer medan pixelgrafik passar för fotografiska bilder där nyanser ska förändras kontinuerligt.

3 Att arbeta med Flash Beträffande arbetsgången i Flash så spelar det ingen roll i vilken ordning du skapar dina bilder och animationer, för det går alltid att ändra och justera i efterhand. Dessutom kan du ångra det du gjort i upp till 300 steg! I Flash finns det dessutom ett flertal olika sätt att göra samma sak. Riktlinjer för arbetsgången kan kortfattat beskrivas så här: 1. Nytt Projekt, 2. Skapa och importera symboler 3. Placera och animera symboler på scenen 4. Exportera filmen. Nytt projekt skapas automatisk när du startar programmet. Börja med att spara projektfilen (.fla) och gör sedan inställningar för Scenens storlek, bakgrundsfärg och animationshastigheten i menyn Modify -> Movie. Frame Rate anges i enheten Frames Per Second vilket betyder antalet rutor per sekund. Scen, symbol och bibliotek ingår alltid i ett flashprojekt. Du kan skapa eller importera animationer, grafik, knappar, ljud o.s.v. som sparas som symboler i ditt bibliotek. Dessa placeras på en eller flera Scener, till sist exporteras allt ut som den färdiga flashfilmen. Det går att importera en hel del olika mediaformat till Flash. Vissa format läser Flash direkt och vissa format läses via QuickTime. För att dessa format ska fungera behöver du alltså ha QuickTime instalerat på din dator. Här följer några exempel på format: Bildformat:.jpg.psd.tiff.ill (version 7).gif.pict.png.bmp Ljudformat:.mp3.aiff.wave Videoformat:.mov (QuickTime) Export Export / Publicering När din Flashfilm är klar är det tid att spara projektet (.fla) och publicera resultatet. Detta görs antingen genom File -> Export Movie eller genom File -> Publish. Din Flashproduktion kan exporteras till: HTML (.html) QuickTime (.mov) Flash (.swf) JPEG Image (.jpg) GIF Image (.gif) PING Image (.png) Windows Projektor (.exe) Macintosh Projektor RealPlayer (.smil) Webbproduktion När det gäller webbproduktioner eftersträvar man alltid ett så litet format som möjligt, detta för att även modemsurfare ska kunna se resultatet och att det inte går segt. Flashformatet är väldigt sparsamt och filerna kan hållas väldigt små. Här är några konkreta råd för att hålla nere storleken: Använd objektbaserad grafik Återanvänd grafik, ljud och video. Använd komprimerade format som mp3 och jpeg.

4 Exportera som Flash Det minsta exportformatet är just.swf. En.exe fil blir t.e.x. upp till tio gånger större än swf. När du exporterar filen finns ett antal val för att komprimera dess innehåll ytterligare. Du kan påverka audio, video och bildformat. Hur hårt man ska komprimera är en subjektiv fråga, komprimera så mycket som möjligt utan att sänka kvalitén för mycket. Testa dig fram. Exportera som QuickTime Filer som innehåller video måste än så länge exporteras som QuickTime. Utveckling sker. Några inställningstips: Välj Layer: Top för att lagren ska ligga i rätt ordning. Om du har play knapp så välj Paused At Start. Utvecklingsmiljön I stort kan man säga att flash är uppdelat i fem huvudavdelningar, Verktyg, Tidslinjen, Scenen, informationsfönster och Menyraden längst upp. Dessa delar beskrivs närmare längre fram. Personligt utseende De olika informationsfönsterna innehåller ett antal flikar, dessa kan i sin tur dras ut till egna fönster eller till andra rutor. Av utrymmesskäl är det bra att bara visa de fönster som just du använder ofta. När du hittat din stil kan du spara den under Windows -> Save Panel Layout. Det går även att spara sin egna uppsättning med snabbkommandon, detta görs under Edit->Keyboard Shortcuts. Här finner du även fördefinierade sättningar för Photoshop och Freehand. Snabbkommandon ur View-menyn <kommando> + <L> Vissa bibliotek <Kommando> + <Alt> + <A> Visa Action <tabb> Dölj alla informationsrutor <Kommando> + <h> Döljer objektets kantlinjer <Kommando> + <+> Zoom in <Kommando> + <-> Zoom ut

5 Menyraden Innehåller en mängd olika inställningar och upplägget påminner om andra programs menyrader speciellt program från Macromedia. Nedan beskrivs kolumnerna innehåll: File innehåller filhantering som open, save och close dessutom finns export, publish och import här. Edit innehåller funktioner för att kopiera och klistra in texter och Frames. Dessutom finns preferences och keyboard shortcuts. View innehåller zoom inställningar och inställningar för linjal och rutnät. Dessa används för att kunna plocka fram stödlinjer. Insert innehåller alternativ för att lägga till olika saker som ny scen, lager, frames m.m. Modify innehåller alternativ för att ändra och justera scenen, lager, olika objekt o.s.v. Det går även att justera interpoleringar och flytta fram eller bak olika objekt. Text innehåller textinstälningar. Control innehåller olika funktioner för att spela upp filmklipp eller hela filmen. Window menyn används för att plocka fram olika paneler och informationsfönster. Genom denna menyn öppnas fönstrene Action och Libary. Help innehåller hjälpfiler och exempel. Snabbkommandon Modify Kommando + G Kommando + B Kommando + Shift + H Group Break Apart Add Shape Hints Window Kommando + L Libary Kommando + alt + A Action Control Return Play Kommando + Enter Kommando + Alt + Enter Test Movie Test Scene

6 Verktygen Dessa verktyg är till för att skapa och modifiera bilder. En snabb genomgång av verktygen: Arrow för att markera och flytta runt objekt. Med alternativen rotera och skala om. Sub select för att komma åt ankarpunkterna i ett objekt. Line för att rita streck. Lasso för att markera och frillägga vissa delar. Pen för att rita figurer m.h.a. ankarpunkter och styrhandtag. Text för att rita upp textrutor. Oval för att rita cirklar och ovaler. Rectangel för att rita fyrkanter med alternativet hörnradie. Pencil för att rita med linjefärgen. Alternativ finns för hur mjuka kurvorna blir. Brush för att rita linjer med fyllnadsfärgen. Ink Bottle för att skapa linje runt objekt. Paint Bucket för att fylla objekt med ny fyllnadsfärg med alternativ för att skala och rotera innehållet och definiera tillåtna gap. Dropper för att välja kulör ur ett ritobjekt. Eraser Används för att sudda. Alternativ för olika storlekar samt vad som ska suddas. Hand Används för att förflytta scenen. Zoom Används för att zooma in och ut (håll nere alt). Verktygsalternativ När du valt ett verktyg ändras innehållet i fönstret Options och olika alternativ visas för det valda verktyget. I Detta fall visas alternativen för Arrow. Alternativen är Jämna ut och Räta ut för att göra markerat ritobjekt rundar eller kantigare. Magnet fäster objektet mot stödlinje eller annat objekt, till sist rotera och skalförändra objekt.

7 Scenen På Scenen läggs de objekt eller skapas den grafik som ska ingå i den färdiga filmen. Ett bra tips är att bara rita fast rekvisisita på scenen som t.ex. en bakgrundsbild. Animationer och grafik som ska röra sig över scenen bör istället skapas som symboler. Dessa symboler läggs sedan på Scenen. Detta för att hela projektet blir mer överskådlig och din exporterade produktion tar mindre utrymme p.g.a. att man kan återanvända objekten. Scenen kan täckas med stödlinjer och rutnät för att du lättare ska kunna placera dina objekt. Detta görs i menyn View->Rulers / Grid / Guide. Tidslinjen Tidslinjen finns ovanför scenen och är en förutsättning för att skapa tidsberoende händelser. Bilden nedan visar att det finns något innehåll på scenen fram till ruta 20. Innehåll börjar och slutar med en Keyframe (punkterna ruta 1, 20) eller frame (ruta 19). Keyframe betyder att det finns ett eller flera objekt på scenen som är sig likt fram till nästa keyframe. Genom att markera en Keyframe markerar du alla objekt som finns på det lagret, tvärtom så markeras den keyframe som objektet tillhör när du på scenen markerar ett ritobjekt. Ritobjekten på Scenen hör således alltid samman med en Keyframe i tidslinjen. Lager Lager brukar jämföras med att lägga genomskinliga overheadpapper på varandra. Det som ligger i det översta lagret täcker således det som finns under. Lageralternativ nås genom att högerklicka på ett lager. Här kan du döpa lagret och välja visa (ögat), visa linjer (rektangeln) och lås (låset). Dessutom kan du välja lagertyp. Guidelager används till att rita en guidelinje som inte kommer att synas i den exporterade filen. Tips! Genom att lägga ett lager under guidelagret (guided) kan du rita symboler som kan röra sig efter din guidelinje. Masklager täcker det underliggande lagret (masked) och blir genomskinligt endast där du ritar något. Alltså tvärtemot ett vanligt lager. Tips! Låt en cirkel glida fram i guidelagret, effekten blir att den lyser upp det bakomliggande lagret.

8 Informationsfönster Till höger på skärmen finns de olika informationsfönstrena. Vilka som visas bestämmer du. Det är bara att stänga ett fönster eller öppna ett nytt genom menyn Window. I dessa fönster kan du göra fininställningar över de symboler, texter, grafik o.s.v. som används i ditt projekt. Info / Transform I Inforutan kan du avläsa det markerade objektets position och storlek. Och du kan numeriskt ändra på storlek och position efter att du ritat objektet. I fönstret Transform går det att numeriskt skeva rotera och skala det markerade objektet. Observera att ett importeratbitmappobjekt som skalas upp för mycket blir pixligt. Stroke / Fill I Stroke -fönstret ställs linjetjockleken och linjens kulör. Det går även att välja olika typer av streckade och solida linjer. Obs! det går utmärkt att ändra en linje i efterhand. I fönstret Fill går det att välja och finjustera ifyllnadsfärg. Förutom enfärgade tonplattor kan du välja en toning mellan olika färger. Tips! du använda en bitmapp bild som fyllnadsfärg. Med detta val kan du skapa väldigt häftiga effekter. Mixer / Swatches I Mixer går det att numeriskt välja kulör och ställa in graden genomskinlighet (alpha). Dessutom ikonerna Linjekulör, fyllningskulör, standardkulör (svart/vit), transparens och skifta Linje/fyllnings -kulör. I fönstret Swatches visas din palett. Det går att byta, radera och kopiera palett genom pilen i övre högra hörnet. Tips! Kopiera en av de nedre färgerna, toning eller regnbåge. Justera sedan din kopia i fönstret Fill. På detta vis kan du skapa din egna effektfulla fyllnadsfärg! Tips! Använd webbsäkra färger för att ditt resuktat ska se lika ut på olika plattformar. Character / Paragraph / Text Options Här väljs teckensnitt, teckenkulör, teckenstorlek m.m. Du kan även formatera stycken och styra annan vanlig texthantering. I fliken Text Options kan alternativen Static Text, Dynamic Text eller Input Text väljas. Dessa använd till att läsa in text till variabler eller skriva ut dess värde. Detta är en förutsättning för att kunna skapa formulär. Instance I fönstret Instance görs inställningar över de unika förekomsterna av de symboler som placerats på scenen. Bilden visar Symbolen döpt till cirkel medan förekomsten är döpt till Cirkel1. Längst ner finns val för att editera symbolen, kopiera den eller kolla vilka action som gäller. Effect Här görs vissa färgeffekter till de symboler som ligger på scenen. Du kan t.ex. öka eller minska ljuset, genomskinligheten eller ändra kulör.

9 Tips! Testa gärna att ändra genomskinligheten på en symbol genom en Motion Tween, från solid till genomskinlig och tillbaka igen. När du lägger ut flera förekomster av denna symbol på Scenen på olika lager och vid olika frames kan det bli väldigt effektfullt. Frame Mellan två Keyframes kan du göra en mjuk övergång (interpolering). Markera detta område på tidslinjen och välj sedan typ av övergång, det bekräftas med en pil mellan punkterna. Interpoleringsalternativen är: None, Motion och Shape. Motion används på hela symboler eller ritobjekt. Vanliga effekter är att flytta ett föremål eller att skalförändra det. Som alternativ finns även rotering och accelererande rörelse som väljs i Easing. Bilden nedan visar en rektangel som jag förflyttar och skalar upp: Shape används för att ändra formen på ett föremål, i detta fall måste du först markera föremålet och välja Modify -> Break Apart. Detta för att kunna påverka de ankarpunkter och kurvor som objektet är uppbyggt av och inte objektet som helhet. Genom Shape kan du förvandla en figur till en helt annan figur. Tips! Placera ut Shape hints genom menyn Modify -> Transform på din figur. Då talar du om för flash vilka delar av figuren som ska motsvaras i din nya figur. Bilden nedan visar en rektangel som förvandlas till en text: Sound I detta fönster får du reda på information av de ljud som du importerat i projektet. Här finns möjlighet till fade, synkronisering och ställa in antalet loopar. Du kan även se ljudet genom att trycka på edit.

10 ÖVNINGAR Illustrationer i Flash Flash är som sagt ett program för animationer och illustrationer på webben. Grafiken man arbetar med är objektgrafik. Objektgrafik är uppbyggd av bezierkurvor, matematiska funktioner, vilket gör att den tar mindre plats minnesmässigt och på så sätt lämpar sig utmärkt på webben. En annan fördel med objektgrafik är att den går att skalförändra hur mycket man vill med bibehållen kvalité. Redovisning I denna laboration ska vi gå igenom verktygspaletten samt träna på olika tekniker för att skapa illustrationer i Flash. Varje övning sparas och redovisas på plats för handledare, men skall även läggas in på den webbplats ni skapar i en senare övning med Dreamweaver. Var därför noga med var ni sparar era övningar. I slutet av kursen ska ni ha lagt upp samtliga övningar på denna webbplats, denna fungerar då som slutredovisning av momentet Övningar. Övning 1 - Ovaler och rektanglar 1. Starta Flash och öppna dokumentet illustrate.fla genom File > Open 2. Klicka på ovalverktyget i verktygspaletten, (se bild) 3. Rita en oval på arbetsytan, eller Scenen som den kallas i flash. Tips! Om du håller ner shift samtidigt så blir ovalen rund. 4. Nu ska du fylla ovalen med en färg. Då finns det två sätt att gå tillväga på, antingen väljer du fyllning och linjefärg i verktygspaletten innan du ritar ovalen eller så markerar du din oval och väljer fyllning och linjefärg i Property inpector. 5. Se till att hela ovalen är markerad och ändra både fyllningsfärg och linjefärg. 6. Ändra linjetjocklek till 2.0 genom att dra i reglaget för linjestjocklek i property inpector 7. Ändra linjestil till punkter 8. När du väljer ett verktyg i verktygspaletten ändras kontrollparametrarna efter verktyget. 9. Välj rektangelverktyget och ändra rundningen av hörnen till 20 punkter i kontrollpanelen. 10. Rita en rektangel på scenen. 11. Ändra fyllningsfärg 12. Ändra linjefärg och storlek

11 Övning 2 - Pennverktyget 1. Gå till sida 2 i dokumentet illustrate.fla 2. Välj pennverktyget i verktygspaletten. Gå till kontrollpanelen för pennverktyget och välj raka linjer. 3. Rita nu liknande figurer som dom här: 4. Välj smooth i kontrollpanelen för pennverktyget och rita en liknande figur: 5. Som du märker mjukar flash automatiskt upp linjerna. Pröva de andra kontrollerna för pennverktyget. 6. När du använder pennverktyget kan du justera inställningarna i property inspector precis som för ovaler och rektanglar. Välj nu en valfri färg för pennverktyget. 7. Ändra linjetjocklek till 2 8. Ändra linjetyp till prickad linje 9. Rita nu linjen på scenen 10. Pröva även de andra kontrolleran för pennverktyget. Övning 3 - Måla och fylla 1. Gå till sida 3 i dokumentet illustrate.fla 2. Välj penselverktyget och testa olika inställningar i kontrollpanelen för verktyget genom att måla på bilen.

12 3. När det gäller målarburken kan man ställa in känsligheten för figurer som inte är helt slutna. Välj målarburken i verktygspaletten och pröva de olika kontrollmöjligheterna i kontrollpanelen när du fyller ovalen. Notera att ovalen inte är sluten. 4. Ha målarburksverktyget markerat och gå in i property inspector för att ställa in fyllnadsfärg. Välj bland övertoningsfärgerna: 5. Fyll cirkeln på scenen. 6. När du använder övertoningar kan du kontrollera storlek, vinkel och centrering för övertoningen. Antingen kan du justera mha målarburken, klicka och håll i cirkeln så förflyttas övertoningen efter hur du rör musen. Du kan även använda omvandlingsverktyget nedan: 7. Experimentera genom att ändra övertoningen med verktyget.

13 Övning 4 - Förändra linjevariabler med bläckverktyget 1. Gå till sidan 4 i dokumentet illustrate.fla 2. Markera verktyget bläckflaska i verktygspaletten. 3. Gå till property inspector och ställ in linjestil till prickat, linjetjocklek till 2 och färg till rött. 4. Klicka på cirkelns linje. Övning 5 - Suddigummit Med suddigummit kan du radera linjer och fyllningar men du kan även ställa in det så att det bara raderar linjer eller fyllningar, eller markerade fyllningar m.m. Denna övning går ut på att lära dig raderverktygets egenskaper. 1. Gå till sidan 5 i dokumentet illustrate.fla 2. Välj raderverktyget ur verktygspaletten och ställ in det på normal i kontrollpanelen och radera lite på den ena bilen. 3. Välj radera fyllning i kontrollpanelen och radera lite på den andra bilen. 4. Välj tappkranen i kontrollpanelen och klicka på en fyllning på en av bilarna. 5. Experimentera med inställningarna och raderverktyget.

14 Övning 6 - Markera linjer och former 1. Gå till sidan 6 i dokumentet illustrate.fla 2. Välj pilverktyget från verktygspaletten och klicka i mitten av ovalen. 3. Fyllningen markeras. Klicka och håll samtidigt som du flyttar musen åt höger. Fyllningen hamnar nu utanför ovalen. Gå till edit > undo 4. Dubbelklicka nu i mitten av ovalen och gör samma sak som ovan. Aha! dubbelklick markerar både linje och fyllning, enkelklick bara det man klickar på. 5. Pröva nu att enkelklicka / dubbelklicka på en av linjerna 6. Håll sedan ner shift och klicka på en av linjerna. 7. Gå till sidan 7 i dokumentet illustrate.fla 8. Välj pilverktyget från verktygspaletten och drag från kryss till kryss. Du markerar nu hela trädet. Använd smooth kontrollen i kontrollpanelen. Klicka på den flera gånger medan trädet är markerat och notera skillnaderna i trädet. 9. Välj lassot från verktygspaletten och dra en linje runt en del av trädet. Håll sedan musen över den markerade delen och märk hur markören ändras till en pil. Klicka och flytta den markerade delen. 10. Gå till sidan 8 i dokumentet illustrate.fla 11. Välj lassot från verktygspaletten och klicka i kryssen på scenen. Du avslutar med dubbelklick. 12. När du väl markerat en yta kan du flytta, omforma eller använda någon annan av kontrollerna för lassot i kontrollpanelen. Pröva! 13. Återställ nu ovalen genom ångra funktionen eller äpple + Z 14. Välj pilverktyget från verktygspaletten. 15. Avmarkera ovalen genom att klicka på en tom plats på scenen 16. Klicka nu på ovalens linje 17. Använd Property inspector för att ändra linjens stil till prickar, färg till röd och tjocklek till På samma sätt kan du ändra fyllnaden i ovalen. Prova!

15 Övning 7 - Omforma linjer och objekt 1. Gå till sidan 9 i dokumentet illustrate.fla 2. Välj pilvertyget och ta tag i den övre spetsen på triangeln utan att markera den först. Markören ska ändras till något av följande: 3. Ändra triangelns form genom att dra i hörnen 4. Om du tar tag mitt på linjen får markören den rundade formen. Testa och dra! 5. Du kan även välja verktyget för att omforma fritt: 6. Med detta verktyg kan du rotera, skeva, ändra skala m.m beroende på vad du väljer i kontrollpanelen. Experimentera! 7. När du roterar kan du ändra rotationspunkt genom att flytta den vita cirkeln. 8. Genom att använda transform fönstret kan du mer exakt styra omformningen för din figur. Gå till window > transform och skriv i de värden som du vill ditt markerade objekt ska använda. Skala tex 50% och skeva 45 grader. Övning 8 - Segment och grupper 1. Gå till sidan 10 i dokumentet illustrate.fla 2. Välj pilverktyget från verktygspaletten 3. Markera trädet och flytta det ovanpå huset 4. Avmarkera genom att klicka på en tom plats på scenen 5. Försök nu markera trädet igen och flytta tillbaks det 6. Ha ha ha.. 7. När två figurer har samma färg grupperas de ihop. 8. Gå till sidan 11 i dokumentet illustrate.fla 9. Gör nu samma sak som i förra uppgiften. 10. När två figurer har olika färg segmenteras de istället. 11. Du kan undvika att segmentera figurer genom att gruppera dem istället. 12. Gå till sidan 12 i dokumentet illustrate.fla 13. Markera trädet med pilverktyget 14. Gå till Modify > Group 15. Flytta trädet över huset 16. Avmarkera och försök flytta tillbaks det 17. Om du klickar på trädet ser du i property inspectorn att trädet är grupperat. 18. Klicka på huset, det är inte grupperat 19. Spika fast taket på huset med hjälp av hammarverktyget.

16 Textbehandling i Flash I Flash kan du editera precis som i vilken annan texteditor som helst. Du kan ändra font, storlek, stil, färg, placering etc. Du kan även göra om text till objekt och på så sätt modifiera mer fritt. Övning 9 I den här labben ska du lära dig att lägga till text i ditt dokument, formatera den och dela upp den i objekt. Vidare ska du lära dig att skapa textfält för att ge interaktivitet i flashfilmer. Skapa och formatera text 1. Gå till File > Open och öppna dokumentet text.fla 2. Välj textverktyget i verktygspaletten och klicka på scenen. Skriv in en text i textblocket. Textblocket expanderar medans du skriver. 3. Skapa ett nytt textblock men definiera bredden genom att klicka/håll och dra ut. Nu blir bredden fixerad när du skriver in text. Notera att handtaget är en rektangel när bredden är fixerad och cirkel när textmassan anpassar bredden. 4. Om du dubbelklickar på det rektangulära handtaget blir det cirkulärt. Arbeta med fonter 1. Gå till sidan 2 i dokumentet text.fla 2. Markera texten med textverktyget i verktygspaletten 3. Ändra färg och fontstil i property inspectorn 4. Gå till sidan 3 i dokumentet text.fla 5. Markera båda textblocken mha av shift tangenten 6. Ändra färg och fontstil i property inspectorn 7. Ändringarna påverkar båda textblocken som du ser. Skapa ett fält för text. 1. Gå till sidan 4 i dokumentet text.fla 2. Välj textverktyget i verktygspaletten och klicka på texten. 3. Gå till Property inspector och välj input text i rullgardinsmenyn. Som du märker flyttas den lilla cirkeln från över högra hörnet till nedre högra hörnet. Input text skapar en textbox där användarna kan lägga in text Static text skapar en text som inte går att ändra Dynamic text skapar en textbox som går att uppdatera från extern källa, tex en server.

17 Övning 10 - Omforma text I flash kan du konvertera textblock till omformningsbara objekt. Med pilverktyget kan du sedan forma om fonterna som du vill. Men när du väl har gjort om textblocket till objekt kan du inte längre editera det som text. Du kan inte heller konvertera tillbaka text som du modifierat. 1. Gå till sidan 5 i dokumentet text.fla 2. Välj pilverktyget och markera texten på scen. 3. Gå till Modify > Break apart. Nu bryts textblocket sönder till individuella bokstäver. 4. Gå till Modify > Break apart igen. Nu blir bokstäverna objekt som du kan omforma fritt 5. Avmarkera texten genom att klicka på en tom plats på scenen. 6. Välj verktyget för fri omformning 7. Ta tag i hörnet på en bokstav och omforma. 8. Gå till sidan 6 i dokumentet text.fla 9. Markera de båda textblocken. 10. Centrera texten genom property inspectr och centrera ikonen 11. Klicka på format knappen i property inspector och experimentera med inställningarna. Notera hur textblocket anpassar sig.

18 Symboler Att arbeta med symboler är att arbeta objektorienterat. När du en gång skapat en symbol kan du sedan lägga ut oändligt många kopior utan att filstorleken ändras nämnvärt. Om du gör en ändring i symbolen ändras alla förekomster medan en ändring i en förekomst bara påverkar just den kopian. Du kan skapa en ny symbol på olika sett. Antingen genom Insert -> New Symbol eller genom att markera ett färdigt ritobjekt och välja Insert -> Convert to Symbol. När du gjort det får du se följande ruta, där du namnger och bestämmer symboltyp: Movie Clip Är som en ny scen med egen tidlinje och egna lager. Ett Movie Clip har inga storleksgränser bara ett kryss som markerar dess centrum. I ett Movie Clip kan du skapa en animation som du sedan kan lägga ut kopior av på scenen. På Scenen kan du sedan förflytta och skala om ditt Movie Clip. Button Vid tillverkning av knappar finns det ingen tidslinje, istället finns det fyra fasta steg. Ett för knappens utseende, ett för hur knappen ser ut när musen är över, ett för utseendet vid musklickning och ett för att markera det klickbara området. En knapp lämpar sig bra för Object Action, alltså en viss händelse kopplad till musklickning. Graphic Är helt enkelt grafik. Antingen Flashtillverkad bild eller importerad bild, pixel eller objektbaserad. Bibliotek Standardbibliotek Det finns ett antal standardbibliotek som följer med programmet. Dessa nås genom menyn Windows -> Common Libraries. Där finner du bland annat knapp, ljud, bild och filmklips bibliotek. Tips! Titta igenom dessa bibliotek för att få ideér, kolla speciellt hur knapparna är uppbyggda och hur filmklippen är uppbyggda av ett flertal undersymboler. Bibliotek Biblioteket är unikt för varje projekt. I biblioteket ligger de symboler som ingår i projektet, egentillverkade symboler och importerade mediafiler. Biblioteket nås genom menyn Window -> Library eller genom kommando + L. I en jämförelse med en teater skulle biblioteket symbolisera den rekvisita och de skådespelare som finns att tillgå för en viss pjäs. Allt finns i kulisserna och plockas in på scenen vid behov. I biblioteket : Symboler: Graphic Button Movie Clip Importerad media: Video Bitmap Sound

19 Övningar Övning 11 - Skapa och editera symboler En symbol är en återanvändbar bild, animation eller knapp. Symboler hjälper dig att hålla nere filstorleken och underlättar editeringen av din flashfilm. Symboler används också vid mer avancerad interaktivitet. I denna övning ska vi lära oss skapa och editera symboler samt se hur de används på scenen. 1. Öppna dokumentet symbols.fla 2. Gå till Window > Library och öppna fönstret library 3. Markera bilen med pilverktyget från verktygspaletten 4. Dra den sedan till library fönstret. En dialogruta kommer upp. 5. Namnge symbolen bil och välj grafic som behavior 6. Bilen på scenen är nu en kopia av bilen i biblioteket. Symbolen du skapade finns alltså i biblioteket tillsammans med andra symboler som redan fanns där. För varje dokument du skapar hör ett bibliotek där du kan lägga symboler som du skapar för dokumentet 7. Gå till sidan 2 i dokumentet symbols.fla. 8. Dra över tre kopior av bilen från ditt bibliotek till scenen 9. Skala, rotera och omforma dina bilar. Som du märker behandlas bilarna som individuella objekt. 10. Du kan även ändra färg för din kopia. Gå till Color i Property Inspector och välj Tint 11. Nu kan du välja RGB värdena. Gör din bil kylskåpsblå. Notera att det dyker upp en ruta för färg där man kan välja färg från en färgkarta. 12. Du kan även göra din bil transparant. Dra en ny kopia av bilen till din scen. Lägg den över din andra kopia. Välj alpha under Color i Property Inspector. Välj 50%

20 13. Du kan även editera originalbilen i biblioteket. Gå till sidan 3 i dokumentet symbols.fla 14. Gå till Edit > Edit Symbols. 15. Välj verktyget för att omforma fritt och förändra bilen. 16. Gå till Edit > Edit Dokument för att komma tillbaka till dokumentet. Övning 12 - Symboler, animationer 1. Justera Scenen. Ställ in storleken till 400 x 300 pixlar och välj bakgrundsfärg. 2. Skapa en knapp. Döp till fram. Rita en knapp. Ändra färg eller annan justering i de olika lägena Up, Over och Down. 3. Skapa ett filmklipp. Döp till Symbolen. Gör en figurinterpolering. En figur som övergår till en annan figur och tillbaka. Det kan utspela sig över 20 bildrutor. 4. Skapa ett nytt filmklipp. Döp till forsta. Lägg in symbolen (filmklipp i filmklipp) och skapa en enkel förflyttning fram och tillbaka som utspelar sig över 20 bildrutor. 5. Skapa ett filmklipp. Döp till andra. Här ska symbolens storlek skalas om från obefintlig till heltäckande. 6. Skapa ett filmklipp. Döp till tredje. Här ska symbolen följa en guidad linje. Välj Infoga guidelager. 7. Skapa ett filmklipp. Döp till fjarde. Här ska symbolen endast synas bakom en glidande cirkel. Infoga ett nytt lager och högerklicka, välj Lageralternativ -> Mask. 8. Skapa ett filmklipp. Döp till femte. Här ska symbolen kunna styras i X- led m.h.a. knappar och piltangenter.

21 Actions ActionScript är skriptspråket i Flash och påminner en hel del om JavaScript. ActionScript används för att styra objekten, navigering och till att skapa interaktivitet.. Scriptningen är utökad och det har medfört att det nu går att tillverka avancerade spel, formulär, enkäter och chattsystem m.m. När du skriver scripten kan du välja expertläge eller normalläge i övre högra hörnet i Action-fönstret. I expertläge kan du redigera funktioner och parametrar direkt i textfönstret. Det skapar en större frihet att snabbt kunna klistra in funktioner m.m. Object Action / Frame Action Frame Action är de händelser som ska ske vid en speciell tidpunkt. Du når Frame Action genom att markera en keyframe på tidlinjen. Genom att markera ett objekt, tillexempel en knapp på scenen är det Object Action som gäller. En händelse som är förknippad med just den markerade förekomsten av en symbol. Syntax för Basic Action gotoandplay(scen,bildruta); // gotoandstop(scen,bildruta); Gå tilll vald bildruta och spela/stoppa filmen. play(); // stop(); Spela/stoppa filmen. togglehighquality(); Sätter på och stänger av kantutjämning. stopallsounds(); Stänger av filmens alla ljud geturl(url [, fönster[, variabler]]); Används för att länka till webbsida fscommand(kommando, argument) Anropar ett Javascript i HTML-koden som heter Dofscommand. loadmovie(url [, plats/mål[, variabler]]);//unloadmovie(plats); Läser in/tar bort annan Flashfilm telltarget(mål){sats;} Används för att styra annat objekt. ifframeloaded(scen, bildruta) {sats;} Kontrollerar om innehållet i en viss bildruta är tillgängligt lokalt. on(mouseevent){sats;} Anger vilken mushändelse som utlöser en händelse.

22 Exempel Pause, Play och tidslinjenavigering Genom att använda tidslinje programmering kan man skapa nästan alla funktioner genom s.k. horisontell programmering. Här beskrivs hur du kan skapa funktionerna Play, Pause och Go To till din film. Detta exempel förutsätter att du har knappar inlagda på scenen. Börja med att lägga in Frame Action Stop på ruta ett på tidslinjen, detta för att att filmen inte ska starta direkt. Det går även att välja alternativet Paused at Start när du exporterar din film. Nästa steg är att markera den knapp du vill använda som stoppknapp, öppna actionfönstret och välja just Stop. Förbind sedan händelsen Play till playknappen på samma sätt. Lägg sedan till knappar för tidslinjenavigering och använd funktionen Goto för att snabbt förflytta dig på tidslinjen. Denna funktion kan t.ex. användas som scenval i en film eller till ett menysystem. Webbnavigering Du kan binda Basic Action -> Get URL till både tidslinjen eller till ett objekt. Detta medför att du automatiskt kommer till en webbsida vid viss tidpunkt eller vid knapptryckning. Skriv bara in webbadressen efter URL och välj hur sidan ska öpnnas efter Window. Ex1: geturl ( _self ); Öppnar Spray i aktuell ram. Ex2: geturl ( sid2.html, _blank, POST ); Öppnar interna sidan sid2.html i nytt fönster och skickar variabler med HTTPmetoden POST. Fullscreen Visar den färdiga swf-filen i fullskärmsläge i en webbbrowser. Glöm inte att någonstans sätta ett objekt som ändrar tillbaka till vanligt läge också. Ex: fscommand ( fullscreen, true) Inladdare Genom att använda kommandot If frame Loaded kan man visa en väntescen medan filmen laddas. Om Kommandot läggs till key Frame nr 1, står filmen stilla och väntar tills allt t.o.m. Frame 50 är inladdat. I ruta ett lägger du det Movie clip som ska visas medan inladdning sker. ifframeloaded(50) { gotoandplay(2); }

23 Mer om Actionscript Funktioner Funktioner är naturligtvis nyttiga att använda. En funktion kan skrivas antingen på en frame i en tidsaxel, eller på ett movieclip, för att sedan anropas från ett annat MC eller knapp. Här är en funktion som får ett movieclip med instansnamnet helge att flytta sig ett visst antal pixlar i x-led. Om funktionen skrivs i en frame på tidsaxeln ser det ut så här: function funktionsnamn (variabelnamn) { _root.helge._x += variabelnamn; } Och denna funktion anropas från en knapp så här: on (press) { funktionsnamn (15); } Vi skickar in värdet 15 till funktionen och MC:t helge flyttar sig 15 px åt höger. Variabler En variabel kan deklareras lite var som helst, antingen i en tidslinje eller i ett objekt, men globala sådana bör skrivas i scenens tidslinje. Det vanliga sättet att skriva en variabel är tex så här: var namn = 0; man kan även utelämna var. För att öka på en variabel med önskat värde skrivs ex: kalle +=10; Detta tar det befintliga värdet på kalle och ökar det med 10.

24 IF satser IF satser läser en variabels värde och jämför detta med något Denna IF sats ser efter om värdet på variabeln kalle är 10. Är värdet 10 så ska MC:t lasse som ligger direkt på scenen spela upp frame 2, annars ska man gå till lasses frame 5 och stanna. if (kalle == 10) { _root.lasse.gotoandplay (2); }else{ _root.lasse.gotoandstop (5); } Textfält Textfält kan användas för att skriva ut text statiskt eller från variabler eller ta emot text vid inskrivning. Ett textfält skapas med hjälp av textverktyget, och därefter väljer man aktuellt val i text options fönstret. Valet static anger den text man skriver i mha textverktyget. Valet dynamic anger att man tänker läsa in text dynamiskt från exempelvis en variabel. Valet input ger att man som användare av Flash filmen själv kan mata in text. Textfältet bör ha ett variabelnamn om man vill manipulera detta fält, det anger man i textoptions fönstret. Här skickar vi en sträng samt ett värde till två olika textfält från en knapp. Field1 skriver ut texten Hej!. Field2 kommer således att skriva ut det numeriska värdet för x-positionen på MC:t lasse. on (release) { field1 = Hej! ; field2 = _root.lasse._x; }

25 Övningar Övning 13 - Lägg ut på Scenen, Action 1. Lägg in alla objekten (filmklippen) på Scenen, i ordning med två bildrutor per objekt. Symbolen i ruta 1-2, forsta i ruta 3-4, andra i ruta 5-6 o.s.v. Döp detta lager till filmklipp. 2. Skapa ett nytt lager och lägg in knappen fram på scenen i detta lager, döp lagret till knappar. 3. Markera knappen och lägg till Object Action Play. Markera sedan alla Nyckelbildrutor ( en i taget) i lager filmklipp och välj Frame Action Stop. 4. Lägg till knappar som direktlänkar till de olika filmklippen. Plus knapp som länkar till annan HTML-sida. 5. Testa Scenen. (ctrl + alt + enter) Övning 14 - Gör en inladdare 1. Flytta fram alla bildrutor 10 steg, så att Symbolen ligger i ruta 11 o.s.v. 2. Skapa ett filmklipp döpt till ladda som du lägger i ruta Skriv in de ActionScript som behövs för att Ladda ska visas medan resterande innehåll håller på att laddas ner. Publicera som HTML 4. Välj att exportera filmen i flashformat (.swf). Med standard inställningar. 5. Öpnna Dreamweaver och ställ in bakgrundsfärg till samma som Flashfilen samt skriv in en titel. Spara. 6. Importera och centrera Flashfilmen mitt på sidan. 7. Spara och visa sidan genom en Webbbrowser.

26 Övning 15 - Actionscript 1. Bakgrund Skapa 3D rum med korrekt perspektiv och ljussättning. Använd linjal, fyll med bitmap, och skapa egna tonplattor. 2. Knappar Skapa två knappar m.h.a. Flash och Photoshop (Layer -> Layer style -> Bevel and Emboss). Spara ut bilderna som PNG-24. Flytta vänster Flytta höger Skapa två knappar i flash med lager och skuggeffekt. ZOOM in ZOOM out Skapa knapp i flash som innehåller text. Actionknapp. Placera knappar m.h.a. Align 3. ZOOM -funktion Börja med att skapa ett MovieClip som kan innehålla valfri figur placerat i MC centrum. Lägg in MC på scenen och döp instansen till Harry. Skriv in följande Object Action till Harry Variabeln skala skall få sitt värde vid knapptryckning. onclipevent (enterframe) { //sker hela tiden if (_root.skala == 0) { //om variabeln skala är 0 _xscale = _xscale+(20-_xscale)/3; //skala MCt till angivna koordinater _yscale = _yscale+(50-_yscale)/3; // /3 ger hastigheten } else if (_root.skala == 1) { _xscale = _xscale+(100-_xscale)/10; _yscale = _yscale+(100-_yscale)/10; } }

27 4. Flytta -funktion Lägg till denna funktion till Harry. onclipevent (enterframe) { //sker hela tiden if (_root.pos == 0) { //om variabeln pos är 0 _x = _x+(240-_x)/3; //flytta MCt till angivna koordinater //_y = _y+(50-_y)/3; // /3 ger hastigheten } else if (_root.pos == 1) { _x = _x+(490-_x)/10; //_y = _y+(100-_y)/10; } } 5.(Extra): Flytta- & Zoom- funktion Skapa knapparna fram och bak. Skapa en funktion som flyttar Harry i Y-led, samtidigt som Harry proportionerligt skalas om.

28 Flashlänkar Det finns en mängd sidor på webben som är till mer eller mindre nytta när man utvecklar i Flash. Vill man snabbt och enkelt hitta en färdig FLA-fil som man kopierar och ändrar efter eget huvud finns det mesta på: Där finns också ljud, spel, tutorials och liknande. Finns inte det man söker där kan man prova som är liknande sidor, men inte lika omfattande som FlashKit. Det bästa stället att hitta hjälp och ställa frågor på svenska är Där får man ofta snabba och bra svar, det finns även en hel del FLA:s att ladda hem här. För övrigt ett bra exempel på en helt databasdriven flash-sida. Generella frågor kring flash får man givetvis svar på via Macromedias internationella eller skandinaviska sida. För att se vad som kan göras i shockwave-formatet kolla Där finns en mängd spel, videos och andra skojjigheter. När inspirationen tryter är ett besök på väl värt mödan. Här finns 100 tals exempel på mycket god och finurlig webdesign. Det mesta är skapat i Flash.