MP3-spelare (MX)

Vänta! Det kan ta en stund att ladda MP3-spelaren (500 KB)...
Visa spellistan med pilen, välj musik spela upp den med play-knappen!

Det finns två olika sätt för en användare att spela upp en mp3-fil i Flash. Den ena metoden består i att Flash laddar filen från en server och spelar upp den strömmande (streaming) det vill säga under tiden som musiken laddas. Med den andra metoden som vi skall beskriva här spelar man upp en ljudfil som ligger i Biblioteket. Man kan säga att ljudet då länkas via ActionScript.

Steg 1 beskriver det grundläggande: hur en ljudfil används av ActionScript för att spela upp den, att stoppa ljudet samt att reglera ljudstyrkan. Steg 2 visar exempel på hur man kan använda detta till att göra en jukebox med valbara låtar i Flashmiljö.

Denna guide förutsätter att du har grundkunskaperna i Flash! (Innan du börjar med övningen kan det vara bra att kunna grunderna i Flash » )

 

Grunderna

1. Börja med att justera filmens egenskaper med menyn "Ändra/Film" (Modify/Document). Skriv in att hastigheten skall vara 21 fps och sätt storleken till 135x175 px:
   
   
   
2. Infoga 2 nya lager så att det sammanlagt finns 3 lager i tidslinjen. Namnge lagren till "knappar", "slider" och "actions":
   
   
   
3. Markera bildruta 1 i lagret "slider" och rita en rektangel med storleken 10x55 px. Låt Flash centrera denna horisontellt på scenen. Panelen för att justera (align) hittar du på menyn "Ändra/Räta upp/Centrera lodrät" (Modify/Align/Center Horizontal). Lägg märke till att "Räta upp på Scenen" (Align to Stage) måste vara aktivt:
   
   
   
4. Konvertera figuren till Symbol (F8) och välj egenskapen Filmklipp (Movieclip). Döp symbolen till "sliderMC" och låt registreringspunkten vara nederst i mitten:
   
   
   
5. Låt symbolen du nyss gjorde vara markerad på Scenen. Ge den "förekomstnamnet" (instance name) "slider". Detta är det unika namnet på symbolen där den förekommer i filmen som används av ActionScript:
   
   
   
6. Dubbelklicka på symbolen för att fortsätta med att editera det i eget fönster. Infoga ett nytt lager så att symbolen får två lager. Lagren kan få heta "vertikalt" och "horisontalt":
   
   
   
7. Nu skall du få användning några av de hjälpmedel som Macromedia låter följa med Flash men som många aldrig använder. Öppna panelen för "Fönster/Allmänna Bibliotek/Knappar" (Window/Common Libraries/Buttons):
   
   
   
   Gå till katalogen som heter "oval buttons" och leta rätt på den gröna knappen. Dra den ut på Scenen i lagret "horisontalt":
   
   
   
   
   Markera den gröna knappen och dela upp den med CTRL + B. Du kan även använda menyn "Ändra/Dela upp" (Modify/Break Apart).
   Konvertera den sedan till symbol/filmklipp med namnet "slideBarMC" och ange registreringspunkten i mitten:
   
   
   
   
   "Räta upp" (Align) den på Scenen både horisontalt och vertikalt på samma sätt som du gjorde med det förra filmklippet och ge den förekomstnamnet ”slideBar”:
   
   
   
   Använd Transformverktyget (Transform tool) för att "vinkla" den som du vill ha den i förhållande till en vertikal linje:
   
   
   
   Det går också att skriva in ett värde i fönstret för Transformera (Transform):
   
   
   
   
   Eventuellt kan du också behöva minska den något i storlek. Tänk på att du alltid kan välja att editera dina symboler antigen via Biblioteket med CTRL + L (eller genom en högerklickning):
   
   
   
8. Återvänd till Scene1 där huvudtidslinjen finns. Markera bildruta 1 i lagret "knappar":
   
   
   
   
   Rita nu knapparna som skall användas för att spela upp respektive stoppa ljudet. Eller du kan, som här använda två av knapparna i Allmänna Biblioteket. Den här gången lånar vi ifrån mappen "Playback" och denna gången behöver vi ju inte ändra något på symbolerna:
   
   
   
   
   Dra knapparna ”gel Right” och ”gel Stop” ut på Scenen:
   
   
   
   
   Ange förekomstnamnen till "spelknapp" och "stoppknapp":
   
   
   
9. Importera din ljudfil i mp3-format. OBS! Flash inte kan hantera kvaliteter som överstiger 128 kbps. Importera den direkt tilli Biblioteket (Library):
   
   
   
   
   För att den skall kunna spelas upp måste du nu "länka" den till ActionScript. Öppna Biblioteket med CTRL + L, högermarkera och klicka på "Länkning" (Linkage):
   
   
   
   Kalla ljudet för "ljud1" och välj även att för "Exportera för ActionScript" (Export for ActionScript):
   
   
   
10. Det är nu dags att ge Flash den information som behövs för att knapparna och filmklippen skall fungera som vi vill. Markera bildruta 1 i lagret "actions" och högerklicka för att aktivera åtgärdspanelen (actions):
    
    
    
    Flash visar att det är en "bildruteåtgärd" (frame action) och att det är i första bildrutan (Frame 1):
    
    
    
    Aktivera "expertläge" genom att klicka på ikonen uppe i höger hörn av åtgärdspanelen:
    
    
    
    
    Nu kan du skriva in eller kopiera/klistra in följande kod som här återges i blått:
    
    bgSound = new Sound(this);
    bgSound.attachSound("ljud1");
    spelknapp.enabled=true;
    slider.slideBar._y = -50;
    slider.slideBar.onEnterFrame = function() {
    bgSound.setVolume(0-this._y);
    };
    slider.slideBar.onPress = function() {
    startDrag(this, false, this._x, -50, this._x, 0);
    };
    slider.slideBar.onRelease = slider.slideBar.onReleaseOutside=function () {
    stopDrag();
    };
    stoppknapp.onRelease = function() {
    bgSound.stop();
    spelknapp.enabled=true;
    stoppknapp.enabled=false;
    };
    spelknapp.onRelease = function() {
    bgSound.start(0, 99);
    spelknapp.enabled=false;
    stoppknapp.enabled=true;
    };
    stop();
    
    H är följer en kortfattad beskrivning av scriptet som används:

    På rad 1 skapar vi ett nytt ljudobjekt på denna ("this") tidslinjen.
    Rad 2 talar om vilket ljud ("ljud1") vi refererar till.
    Rad 3 ger oss möjligheten att starta ljudet med spelknappen.
    I rad 4 bestämmer vi "reglagets" position.
    Rad 5 - 7 omvandlar reglagets negativa position till ett positivt värde för ljudets volym.
    Rad 8 till 13 begränsar åtgärden till en rektangel motsvarande en "träffyta".
    Rad 14 till 18 talar om vad stoppknappen skall göra: stoppa ljudet, aktivera spelknappen och avaktivera stoppknappen.
    Rad 19 till 23 talar om vad spelknappen skall göra: spela upp ljudet, avaktivera spelknappen och aktivera stoppknappen.
    
    TIPS! Du kan låta Flash visa kodens radnummer:
    
    
    
    
    

Testa nu filmen med CTRL + Enter!

 

 

Spelare med valbara spår

Det följande är förslag till hur man kan använda grunderna för att skapa en musikspelare där det går att välja vilket spår eller låt som ska spelas.

1. För att få plats med mer grafik behöver du justera filmens egenskaper. I följande exempel är scenens storlek 410x480 px:
   
   
   
2. Om vi skall kunna bläddra från en ljudfil till en annan behövs 2 nya knappar: en för att bläddra framåt och en att bläddra bakåt. Gör egna knappar eller använd knappar som Macromedia bjuder på. I vårat exempel har använts knappen som heter "gel Fast Forward" som har editerats enkelt för att bättre passa i sammanganget:
   
   
   
   
   Ordna de nya knapparna och de du redan har som du vill ha dom i rätt lager. Här är de ordnade med jämna mellanrum på en vågrät rad:
   
   
   
   
   Förläng tidslinjen (F5) i alla 3 lager till minst 5 bildrutor och infoga nyckelbildrutor (F6) i ruta 2, 3, 4 och 5 i lagret med knapparna:
   
   
   
   Vi väntar med att tilldela knapparna åtgärder till lite senare.
   
3. Hur vill du att din spelare skall se ut? Musiken är förstås viktigast, men du bör ge den ett visuellt skal som du är nöjd med. I det här exemplet har använts två grafiskt enkla figurer samt ett "infofönster" som visar en logoliknande symbol i startläget av filmen (bildruta 1). Logosymbolen är ett filmklipp som består av text och två grafiksymboler:
   
   
   
   
   Du kanske både kan och vill göra detta själv men om du föredrar att använda exemplets skalgrafik kan du hämta denna här »
   
   Om du väljer att hämta skalgrafiken öppnar du filen i Flash, markerar alla 3 lager och kopierar all bildrutor från menyn "Editera/Kopiera bildrutor" (Edit/Copy frames). I filmen med mp3-spelaren infogar du sedan ett nytt lager under de andra, markerar första bildrutan där och använder dig av "Klistra in bildrutor" (Paste frames) på menyn Editera (Edit):
   
   
   
   
   Förläng också dessa lager till 5 bildrutor. I lagret med "slider" gäller det att flytta symbolen dit du vill ha den. Se till att de gröna knapparna befinner sig i en position du är nöjd med:
   
   
   
4. Om vi vill använda flera ljudfiler än en så behövs en lista över de olika ljud som finns att välja på. Denna skapar vi med början i filmens bildruta 2. Listan består av en bakgrund, över bakgrunden knappar, så många som det finns ljudfiler och däröver igen text med titel, artist eller annat som identifierar "ljudspåren".
   
   Infoga 3 nya lager. Här har de fått namnen "bakgrund", "buttons" och "text":
   
   
   
   Markera bildruta 2 och infoga nyckelbildruta (F6) i lagret "bakgrund". Rita valfri bakgrund för knapparna och texten som utgör spellistan (du behöver inte tilldela dem egenskapen Symbol):
   
   
   
5. Skapa knappar i lagret "buttons" som skall transportera användaren från spellistan till rätt låt/spår. Eftersom texten har eget lager räcker det att göra en enda knapp som sedan dupliceras och får olika åtgärder. Markera bildruta 2 i detta lager och infoga nyckelbildruta där du ritar en rektangel med valfri färg. Placera den där du vill att den översta knappen i listan skall vara:
   
   
   
   Knappar gör du genom att rita och konvertera till symbolen Knapp (Button). Sedan dubbelklickar du på knappen för att editera den. Här har vi gjort så att knappen vänder på sig vid "mouse over":
   
   
   
   
   Använd menyn "Ändra/Justera/Vända horisontalt" (Modify/Align/Flip horizontal) för att vid läget "över" få knappen att ändra läge:
   
   
   
   Placera så många förekomster av knapparna vertikalt under varann som du behöver.
   Markera därefter bildruta 2 i lagret "text" och använd textverktyget för att skriva in texten. I textrutan skriver du in den information som behövs för att skilja sångarna åt. Vanligast är väl att informera om både artist, album och titel. Välj font i fönstret för egenskaper. Här har använts "Times New Roman", men med dubbelt avstånd mellan tecknen:
   
   
   
   
   Skriv sedan resten av texten. Tänk på att texterna i exemplet är förenklade och att du troligtvis önskar att ha med mera information om musiken än i exemplet ovan.
   
6. Det måste gå att ta sig ifrån bildruta 1 till bildruta 2. Det gör vi med två knappar i eget lager. Infoga nytt lager (här kallad pilknappar) ovanför lagret med bakgrunden och tillverka två knappar som används för att visa respektive dölja spellistan:
   
   
   
7. Filmen har sin "startposition" i bildruta 1 och i bildruta 2 ligger nu spellistan från vilken man kan välja vilken ljudfil som skall spela. Vi planerar att importera 3 låtar och låter därför dessa spelas i bildrutorna 3, 4 och 5. Där skall vi nu göra små animationer som kan spelas upp när musiken spelas. Infoga nytt lager "filmklipp". Låt detta befinna sig ovanför de andra lagren men under lagret med "actions":
   
   
   
   Infoga ny symbol med menyn "Infoga/Ny symbol" (Insert/New symbol) eller med CTRL +F8. Välj här Filmklipp och döp detta till ”sound1”:
   
   
   
   I editeringsfönstret för filmklippet infogar du nytt lager så du nu har två lager. Här heter dessa "text" och "masklager":
   
   
   
   Använd textverktyget för att skriva den text du vill skall vara synlig när den första ljudfilen spelas upp. Låt den vara centrerad på Scenen i läger X = 0, Y = 0:
   
   
   
   Förläng tidslinjen i båda lager (F5+musklick) till 200 bildrutor. (Vill du ha snabbare animation så väljer du ett mindre antal bildrutor, men det kan förstås ändras i efterhand). Infoga nyckelbildruta i bildruta 200 i textlagret:
   
   
   
   Markera lagret "masklager", använd menyn "Ändra/Lager" (Modify/layer) och välj alternativet mask i dialogrutan för att göra det här lagret maskerande:
   
   
   
   
   Gör nu likadant med lagret "text": markera och ändra egenskaperna för lagret. Välj "maskerat lager" (Masked):
   
   
   
   
   Rita en rektangel i masklagret. Låt rektangelsns mittpunkt vara "centerregistrerad" med X=0 och y=0. Här har använts den fönsterliknande rektangel som ingick i filen med "skalgrafiken":
   
   
   
   Nu kommer masklagret att dölja allt på det underliggande lagret förutom det rektangulära fönstret som ligger på det. Tänk på att storleksförhållandet mellan "fönstret" och texten bör vara så att fönstret täcker texten dvs att hela texten syns samtidigt i filmen.
   
   
   Infoga nyckelbildrutor i bildrutorna 100 och 101 i textlagret. Du behöver nu göra några positionsändringar av texten i X-led för att sedan skapa interpolering. Låt texten ha X-värdet -180 i bildruta 100 och (+)180 i bildruta 181:
   
   
   
   Infoga rörelseinterpolering (Motion Tween). Det gör du genom att markera bildruta 1 och sedan ta hjälp av menyn "Infoga/Skapa Rörelseinterpolering" (Insert/Create Motion Tween):
   
   
   
   
   Upprepa samma procedur i bildruta 101. När rörelseinterpoleringen är infogad syns den karaktäristiska "pilformade" linjen i tidslinjen:
   
   
   
   Eftersom det finns 3 ljudfiler behöver vi också 3 filmklipp. Högerklicka på filmklippet "sound1" i Biblioteket och välj att "duplicera" detta (duplicate):
   
   
   
   Kalla de två nya filmklippen för "sound2" och "sound3". Högerklicka på dessa i Biblioteket för att editera i separat fönster. Dubbelklicka på textsymbolen som heter "Tween1". Nu kan du ändra texten så att den kommer att passa för det nya filmklippet:
   
   
   
   Vi placerar nu ut de 3 filmklippen i lagret "filmklipp" i bildrutorna 3, 4 och 5. Men allra först avlägsnar vi "logosymbolen" i just bildruta 3 så den inte visas ovanpå filmklippen. Markera bildrutan, infoga nyckelbildruta och klipp ut med CTRL + X
   
   
   
   Placera ut filmklippen i rätt lager i bildrutorna 3 och 4 och 5:
   
   
   
   
   Använd fönstret Info "Fönster/Info" (Window/Info) till att ta reda på den exakta placeringen och låt alla tre filmklippen ha samma placering:
   
   
   
8. Det sista du behöver göra innan vi tar itu med ActionScript är att importera de resterande ljudfilerna. Importera filerna som i punkt 5 och länka till ActionScript från Biblioteket. Denna gången kallar länkningens identifierare för "ljud2" respektive "ljud3":
   
   
   
   Nu rundar vi av med lite ActionScript. Vi har i det föregående planerat för ljudet att spela upp i bildrutorna 3, 4 och 5. Alltså måste vi i lagret "actions" flytta scriptet som nu ligger i bildruta 1 till bildruta 3, infoga nyckelbildrutor i bildruta 4 och 5 och upprepa scriptet i dessa bildrutor:
   
   
   
   När vi nu har flyttat första scriptet måste vi se till att den första bildrutan behåller sin "stopaction" och infoga följande script i bildruta 1:
   
   stop()
   
   
   Såhär ser det ut i åtgärdsfönstret:
   
   
   
   
   
9. Låt oss sedan göra det lite enkelt för Flash och för oss genom att ge bildrutorna "bildruteetiketter" dvs ett namn som gör det lätt för Flash att orientera sig i tidslinjen. Infoga nytt lager under lagret "actions" alltså näst överst. Markera i följd bildrutorna 1, 2, 3, 4 och 5 och infoga nyckelbildrutor. I panelen för egenskaper (Fönster/Egenskaper) namnger du sedan rutorna i tur och ordning "start", "spellista", "ljud1", "ljud2" och "ljud3":
   
   
   
   
   
10. Leta upp lagret som innehåller knapparna som skall visa och dölja spellistan. Skriv in i åtgärdsfönstret följande koder.
    
    Denna koden visar listan:
    
    on (release) {
    gotoAndStop("spellista");
    }
    
    
    Och den här koden döljer:

    
    on (release) {
    gotoAndStop("start");
    }
    
    
    

11. Gå sedan till lagret som innehåller knapparna inne i spellistan (den som leder till de olika låtarna) och utdela scripten enligt följande:
    
    
    Översta knappen skall ha följande kod:

    on (release) {
    gotoAndStop("ljud1");
    }

    Den nästa knappen får:

    on (release) {
    gotoAndStop("ljud2");
    }

    Och den tredje knappen uppifrån skall ha:

    on (release) {
    gotoAndStop("ljud3");
    }
    
    
    Eftersom knappen som spelar upp och knappen som stoppar ljudet styrs av bildruteåtgärderna vi har utdelat, så skall dessa inte ha några åtgärder. Däremot behöver knapparna som bläddrar framåt och bakåt några enkla åtgärder i bildrutorna 3, 4 och 5. I bildruta 3 skall bakåtknappen ha följande åtgärd:

    
    on (release) {
    gotoAndStop("ljud3");
    }

    
    Framåtknappen skall tillsägas att gå en bildruta framåt i både bildruta 3 och bildruta 4:

    on (release) {
    _root.nextFrame () ;
    }

    
    Framåtknappen skall i bildruta 5 tilldelas följande kod:

    on (release) {
    gotoAndStop("ljud1");
    }

    
    Bakåtknappen måste gå en bildruta bakåt i bildruta 4 och 5:

    on (release) {
    _root.prevFrame () ;
    }

    
    Nu kan man "cirkulera" bland spår 1 - 3 motsvarande bildruta 3 - 5.
    
    

Testa nu filmen med CTRL + Enter!
Tänk på att när en ljudfil spelas upp så måste Flash först stoppa ljudet innan en annan ljudfil kan börja spela. Det går därför inte att klangmässigt bläddra från ett ljud till ett annat.