35 besökare, 2 medlemmar och 3 Studenter är online nu
Loopia

Flash

Komponenten ScrollPane med ActionScriptet Load Movie (MX)

Flash innehåller färdiga Komponenter (Components) som kan anpassas efter dina egna behov. En komponent består av ett antal Filmklipp (Movieclip) som är sammankopplade med ActionScript. Flash MX innehåller sju komponenter; CheckBox, ComboBox, ListBox, PushButton, RadioButton, ScrollBar och ScrollPane som denna övning handlar om. Komponenten ScrollPane visar en scrollruta med bläddringslister som kan innehålla Filmklipp (Movieclip) och även fotografier om de först konverteras till Filmklipp. OBS! ScrollPane kan bara innehålla Filmklipp. Om du vill ha text som innehåll måste du skriva texten i ett dynamiskt textfält i Filmklippet och bädda in samtliga fonter. För text är komponenten ScrollBar därför mera lämplig. I den här övningen visar vi hur du använda komponenten ScrollPane till att ladda in separata Flashfilmer bestående av fotografier med åtgärden "loadMovie". Du gör först filmklippet, drar  därefter en ScrollPane ut på Scenen, ger den rätta egenskaper och slutligen skapar du de filmer som skall laddas. Övningen utgår ifrån att du har behandlat bilderna i Photoshop eller ett annat bildbehandlingsprogram så att du har två exemplar av varje bild. Den ena uppsättningen skall bestå av tumnaglar och den andra av bilderna i den storlek du vill att de skall visas i den färdiga Flashfilmen. Eftersom Flash är ett vektorgrafiskt program är det viktigt att du skalar bilderna innan de importeras i Flash. Du kan läsa mera om Bitmapp-grafik i övningen "Bitmapp-grafik" » Använd gärna bilderna i exemplet om du inte har möjlighet att förbereda egna fotografier: fotografier.zip (659 Kb) »

Filmklipp

  1. Börja med att infoga ny symbol med menyn "Infoga/Ny symbol" (Insert/New Symbol). Symbolen skall vara Filmklipp (Movieclip). Om inte dialogrutan för symbol visar avancerade egenskaper måste du aktivera dessa genom att klicka på "Avancerad" (Advanced). Ge Filmklippet ett namn. I det här exemplet används namnet "miniatyrer":



    Bocka för "Exportera till ActionScript" (Export for ActionScript) och "Exportera i första rutan" (Export in first frame) eftersom Filmklippet skall användas i ActionScript senare:



    När du bekräftat valen med OK kommer du automatiskt till Editeringsfönstret för Filmklippet "miniatyrer":

  2. Förbered dina fotografier så att du har en stor bild och en miniatyr av densamma. Använd gärna bilderna i exemplet om du inte har möjlighet att förbereda egna fotografier: fotografier.zip (659 Kb) »

    Importera
    alla miniatyrbilderna till Biblioteket med menyn "Arkiv/Importera till Bibliotek" (File/Import to Library):


    Visa Biblioteket (Library) med CTRL + L och dra miniatyrerna till scenen:



    Placera ut miniatyrerna i den ordning du önskar. I detta exempel är de placerade vertikalt direkt under varandra eftersom bilderna som skall visas ska scrollas verikalt.
  3. Markeravarje miniatyrbild för att konvertera den till en Symbol som har egenskapen Knapp (Button) med menyn "Infoga/Konvertera till Symbol/Knapp"(Insert/Convert to Symbol/Button) eller tryck F8:


    Varje miniatyr skall öppna var sin Flashplayer-film (.swf) med fotografiet som du senare gör under punkt 3 i denna övning. När du döper symbolerna kan det vara praktiskt att använda namn som associerar till de motsvarande filmerna som skall visa fotografierna i full storlek. Tex kan namnet miniatyr01 vara den Knapp som laddar filmen bild01.swf. Du bör alltså redan nu bestämma vad de separata filmerna som du gör under punkt 3 skall få heta.
  4. Egentligen behöver det här Filmklippet endast ett Lager men om du vill att bilderna skall synas mot en bakgrund som skiljer sig ifrån Flashfilmens bakgrund så infogar du ett nytt lager och ritar en bakgrund:

  5. Återvänd till lagret med knapparna för att koppla dem till ActionScript. Högerklicka på den första miniatyren (Button) för att öppna fönstret för Åtgärder (Actions):



    Du kan välja mellan att "klicka fram" scriptet i normalläge eller att editera i expertläge:



    I Normalläge klickar du först på "Browser/Network" och dubbelklickar sedan på "loadMovie".  I rutan för URL skriver du in filmens namn om den ligger i samma katalog som den du just håller på med, alltså den som innehåller din ScrollPane. (Gör den inte det skriver du i hela adressen: "http://www.dinDomain.com/flash/flashfilm.swf")

    Var och en av miniatyrerna skall länkas till motsvarande film. Ingenting annat än filmens namn skall dock ändras i Scripten. Alla skall länkas till Level 2:



    Åtgärden "loadMovie" används i första hand för att undvika att Flashfilmerna blir alldeles för stora. I stället för en stor film gör man flera små filmer. Vi måste då tala om för Flash vilken filmnivå vi refererar till i ActionScript. Filmklippet, huvudfilmen och filmerna som skall laddas befinner sig på tre olika nivåer i förhållande till varandra. I förhållande till knapparna befinner sig filmen med ScrollPane på nivå 1 och filmerna som laddas på nivå 2. (Knapparna är under huvudtidslinjen, filmerna över.) Om du väljer Expertläge så kan du helt enkelt skriva eller klistra in följande kod manuellt och sedan ändra filmens namn för varje ny knapp:

    on (release) {
    loadMovieNum("
    film01.swf", 2);
    }

  6. När du har delat ut åtgärder till alla knapparna (Buttons) är Filmklippet klart! Du kan nu återvända till Scen 1 (Scene 1). Filmklippet skall förbli i Biblioteket så Scenen är fortfarande tom:

 

ScrollPane till miniatyrerna

  1. Öppna panelen för Komponenter (Components) från menyn "Fönster/Komponenter" (Window/Components) eller med CTRL + F7. Dra ut en ScrollPane dvs en scrollruta på Scenen:

  2. Om inte panelen för egenskaper redan är öppen måste du ta fram den från menyn "Fönster/Egenskaper" (Window/Properties) eller med CTRL+F3. Markera din ScrollPane för att tilldela den nödvändiga egenskaper. OBS! Innan du ändrar de förinställda värdena för höjd och bredd kan du behöva kontrollera Filmklippets dimensioner om du inte redan har det noterat. Högerklicka på Filmklippet "miniatyrer" i biblioteket för att komma till Filmklippets editeringsfönster:



    Kontrollera de exakta längd- och höjdvärdena för Filmklippet i fönstret Info (CTRL+I) eller in fönstret Egenskaper. I exemplet är Bakgrunden markerad:



    (Om du inte har använt någon bakgrund är det minityrernas utrymme som du kontrollerar genom att markera alla bilderna med CTRL+A.) Hur bred scrollrutan skall vara är delvis en smaksak men tänk på att värdet i egenskapsfönstret för bredden inkluderar sroll-listen som här är 16 pixlar. Och om du använder bakgrund så bör ju en del av den vara synlig i scrollrutan. Höjden av rutan beror i någon mån på miniatyrernas totala höjd. Men framför allt beror det på hur mycket av dessa som skall vara synlig innan man börjar scrolla.
  3. Gå tillbaka till Scen 1 för att komplettera inställningarna i fönstret Egenskaper. Du kan välja mellan att scrolla horisontalt, vertikalt eller att låta Flash "bestämma":



    I exemplet ovan har vi dessutom namngivit Lagret och Förekomsten (instance) till ScrollPane men det är egentligen inte nödvändigt i det här sammanhanget.

    Scroll Content - Här skriver du in namnet på Filmklippet. OBS Viktigt!
    Horizontal Scroll - Scrollar/Scrollar ej satt till true/false.
    Vertical Scroll - Scrollar/Scrollar ej satt till true/false.
    Om scrollning är satt till "auto" så finns scroll-list i mån av behov.
    Om "Drag Content" är satt till true/false kan man rulla/ej rulla och dra i Filmklippet med musen.
  4. När du är klar med dessa inställningar är din film med ScrollPane klar sånär som på en viktig sak. Du har väl inte glömt att varje miniatyr skall öppna var sin Flashfilm med fotografi i full storlek? Det är dags att bestämma Filmklippets placering i förhållande till var på Scenen fotografierna skall visas. Placera din Scrollpane så att den står bra i förhållande till platsen för fotografier. Det viktigaste är förstås att fotona inte dyker upp för nära scrollrutan. Tänk igenom olika möjligheter. Alla bilder behöver kanske inte visas på samma ställe? Alla bilder skall kanske inte ha samma storlek? Placera din ScrollPane på Scenen där du vill ha den och så att den inte "krockar" med inladdade fotografier. Visa gärna den exakta placeringen med CTRL + I:


    När du är klar med dessa inställningar är din film med ScrollPane klar! Om du inte redan sparat den så spara nu dokumentet som "ScrollPane.fla". Publicera under menyn "Arkiv"/"Publicera" (File/Publish). Testa filmen med CTRL +Enter. Om du inte är nöjd med scrollrutans egenskaper måste du förstås finjustera dessa.  

    TIPS! Om du vill kan du anpassa utseendet för komponenten ScrollPane ytterligare. Komponenten består av olika objekt som du kan finna i ditt Bibliotek (Library). Visa Biblioteket med CTRL + L:



    Välj den del du vill anpassa, högerklicka och välj "Editera" (Edit). OBS! Undvik att göra ändringar i mappen "Core Assets" om du inte är säker på att du behärskar det du gör. Den är avsedd för utvecklare och avancerade användare. I detta exempel har en viss färgmodifiering gjorts av några av scrollrutans grafiska element. Det är dock helt och hållet "utsmyckning" och utan betydelse för rutans funktionalitet.

    Följande är inte nödvändigt, men du kan ta med dig fotonas placering till nästa punkt i övningen: Rita en enkel bildram kring det fält där fotografierna skall visas. Klipp sedan ut denna med "Editera/Klipp ut" (Edit/Cut). Under punkt 3.1 klistrar du in ramen igen på samma plats. På det sättet ges placeringen "automatiskt" utan att du behöver ange matematiska värden. Dessutom är det möjligen önskvärt att ge bilderna en ram. Ramen kan också stå kvar i filmen med scrollrutan, men eftersom fotografierna laddas ovanpå denna kommer den att försvinna om du inte väljer att vidga den:



    Om du behöver justera linjernas egenskaper gör du det under menyn "Fönster"/"Egenskaper" (Window/Properties) eller CTRL + F3:

 

Fotografierna som Flashplayerfilmer

FlashPlayer-filmerna som ska visa de stora fotografierna skapar du i en egen Flashfilm som du därifrån publicerar till separata FlashPlayer-filmer

  1. Skapa nytt dokument med samma storlek som dokumentet med ScrollPane. Klistra nu in bildramen under menyn "Editera/Klistra in på plats" (Edit/Paste in place) eller med CTRL+SHIFT+V. Om du valde att inte använda någon ram kan du gå tillbaka till dokumentet med ScrollPane för att kolla upp fotografiernas placering. (Eller du kanske valde att anteckna värdena i Infofönstret?) Infoga nytt lager under det första. Här heter det "fotografier":

  2. a) Importera den första bilden som skall visas i full storlek och placera den i samma position på Scenen som bildramen. Använd menyn "Arkiv/Importera" (File/Import). Visa åter infopaletten vid behov när du placerar.

    b) Alternativt kan du Importera alla 10 foton till Biblioteket och sedan dra bilderna ut på Scenen efterhand som du behöver dom. OBS! Varje film skall endast innehålla ett foto men storleken av den publicerade filmen påverkas inte av hur många bilder Biblioteket innehåller. Använd menyn "Arkiv/Importera till Bibliotek” (File/Import to Library).

    Öppna Biblioteket med CTRL+L och placera fotografiet som skall visas i den första filmen på samma plats som bildramen:



    Nu när placeringen är klar kan du radera lagret med ramen om du föredrar att bilderna visas utan ram.
  3. För att få bästa visningskvalitet är det en bra idé att konvertera bilderna till Grafiska Symboler med menyn "Infoga/Konvertera till Symbol" (Insert/Convert to Symbol) eller med F8:

  4. När du placerat ut den första bilden sparar du Filmen med namnet "film01. fla"" i samma mapp som Filmen med ScrollPane eller det namn som du använde i Åtgärdsfönstret för Filmklippets Knappar. Publicera under menyn "Arkiv/Publicera" (File/Publish) eller med SHIFT+F12. Flash skapar filmen "film01.swf". Första filmen klar!
  5. a) Om du importerade endast en bild under punkt 3.2 raderar du bilden på scenen och importerar nästa bild, konverterar till symbol, sparar och publicerar. Fortsätt sedan med den tredje bilden i nytt dokument, spara, publicera etc till du är klar med alla tio filmer.

    b) Om du valde att importera alla bilderna till Biblioteket gör du så här: Radera bilden på scenen, dra ut nästa bild från Biblioteket och placera den rätt. Konvertera den till Grafisk Symbol, spara filmen och publicera.

    OBS! Rensa Scenen för varje ny film du gör och börja om så att endast ramen står kvar:



    När du har sparat och publicerat samtliga filmer skall alla befinna sig samma katalog som filmen "ScrollPane.swf" oavsett vilken metod du väljer. De filer som slutligen behövs för att din ScrollPane ska fungera är "huvudfilmen" som visar miniatyrbilderna och de filmer som innehåller varje fotografi:

Och nu till det roligaste: Gå tillbaka till "ScrollPane. fla" och gör en ny test med CTRL + ENTER!