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
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":
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.
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.
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:
Å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);
}
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
Ö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:
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.
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.
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
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":
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.
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:
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!
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!
Logga in
skriv ut »