een externe afbeelding in Flash importeren - een fotoalbum

Een externe afbeelding in Flash importeren zorgt ervoor dat bij vele afbeeldingen de Flash-movie niet te groot wordt.
Ook kun je verder gaan door zelfs een Flash-album te maken.

Hiernaast een album, waarbij uit 'gemak' de foto's niet apart verkleind zijn voor de knoppen. Dit is makkelijk voor de klant, maar heeft een vertraging en een vermindering van beeldkwaliteit tot gevolg.
De swf is 1 kB groot terwijl de 6 afbeeldingen in grootte varieëren tussen 270 kB en 414 kB!!

een foto importeren

  1. Flash kan foto's met bestandstype *.jpg importeren. Het jpg-bestand mag géén progressieve compressie hebben. Het is bovendien zeer aan te bevelen in PhotoShop (of een ander beeldbewerkingspakket) de foto's op het juiste formaat te schalen. Schalen binnen Flash kan wel, maar levert vertraging en een slechtere beeldkwaliteit op.
    Voorbereiding.
    In deze oefening worden alle bestanden eerst op een grootte van 600 bij 450 pixels gebracht. Bovendien zijn ze opgeslagen als f1.jpg, f2.jpg, f3.jpg,......f6.jpg. Deze namen komen straks in het script weer terug. Alle foto's staan in een mapje fotos. Deze map staat naast het flash-bestand.
    ( Helaas lukt het importeren van *.png-bestanden niet. Het kan alleen met *.jpg-bestanden, waarbij er géén progressieve compressie gebruikt mag wordenn Natuurlijk kun je van andere bestandtypen natuurlijk ook eerst een *.swf maken en deze dit swf-bestand importeren op dezelfde manier zoals we dat in deze oefening doen. wellicht kun je er dan eerst nog een animatie in de swf-movie maken!)
  2. Start Flash, maak een nieuw document. Voor deze training heeft deze een grootte van 750 bij 500 pixels zodat de foto's er goed inpassen, met de knoppen er nog naast. De achtergrondkleur is naar eigen inzicht. De toetscombinatie CTRL+2 (+2) zorgt ervoor dat de stage volledig in beeld is.
  3. Noem de eerste laag fotolaag en trek een rechthoek. Kleur en rand doen er niet toe, als het zelf maar kunt zien. Deze rechthoek wordt straks door de foto vervangen. Als je hem helemaal selecteert, dan kun je in de property-balk de grootte aanpassen tot 600 bij 450 pixels. Dan kun je hem op een postitie brengen zoals je dat zelf goed vindt, in ieder geval met ruimte voor de knoppen.
  4. Kies Modify >> Convert to Symbol... om hem tot movieclip om te zetten. Geef hem als naam vlak mee.
  5. Geef hem ook de instance-naam houder mee.
  6. Sla je flashdocument op naast de map fotos.
  7. Maak een nieuwe laag akties. Open het aktie-venster (Flash MX gebruikers zetten die in de Expert-mode als dat nog niet het geval is.) Wijs het eerste frame aan in de aktielaag.
  8. Voer het volgende script in:
    loadMovie("fotos/f1.jpg","houder");
    Hierbij is loadMovie de actie, die plaatsvindt zodra de movie speelt; fotos/ de mapnaam waar de foto's in zitten; f1.JPG de naam van de foto en houder de naam van de movie-clip die vervangen wordt door de foto. Daarbij zal de linker-bovenkant van de foto op de plaats van de linker bovenkant van de movieclip komen.
    Test de movie. Sla deze op. Je ziet het is eenvoudig om een afbeelding in een flash-movie te laden. Kijk bovendien maar eens hoe klein de flash-movie is. Bij het inleveren van een project (of het up-loaden van een site) is het natuurlijk wel van belang de map met foto's ook in te leveren.
  9. een foto importeren, door op een knop te klikken

  10. Teken een eenvoudige vorm, die als knop kan dienen. Maak er op de welbekende wijze een knop van en geef hem als instance-naam knop1 mee.
  11. Sleep er nog een instance van die knop op de stage, en noem die knop2.
  12. Het script dat er al staat is als volgt uit te breiden:
    loadMovie("fotos/f1.jpg","houder");
    knop1.onRelease = function() {
    	loadMovie("fotos/f1.jpg","houder");
    }
    knop2.onRelease = function() {
    	loadMovie("fotos/f2.jpg","houder");
    }
    Naast het al laden van de eerste foto zal er nadat er op knop2 gedrukt wordt (knop2.onRelease = function()) de movieclip houder met f2 worden gevuld uit de map fotos/.
  13. Dit kun je uitbreiden met -tig knoppen.
  14. gebruiksvriendelijke voor eigenaar en bezoeker:
    Knoppen automatisch de afbeelding verkleind meegeven

    Voor de gebruiker is het wellicht wenselijk dat de knop een verkleinde afbeelding van de foto is. Enig denken over de voorgaande materie leert dat een movieclip te vervangen is door een foto. Dat gaan we dan ook doen. De eigenaar die de site onderhoudt heeft dan automatisch goede knoppen, zonder dat hij het Flash-document opnieuw moet bewerken.

  15. Gooi de knoppen weg. We moeten immers movie-clips hebben, omdat die door een afbeelding kunnen worden vervangen.
  16. Maak weer een rechthoekje op de plaats van de "knop". Zet hem om naar movieclip, bijvoorbeeld met de naam knop.
  17. Geef hem de instance-naam knop1.
  18. Klik dubbel op de movie-clip knop je zou nu de vorm kunnen bewerken. Zet deze vorm echter om naar opnieuw een movie-clip met als naam houder en de instance-naam knophouder. Deze movie-clip -in een movie-clip- wordt straks de afbeelding, en aan de movie-clip knop1 wordt dan de actie gekoppeld dat er een afbeelding geladen moet worden in houder.
    We werken hier met een movieclip in een andere movieclip. Elk van deze wordt door een script aangestuurd. De movieclip knophouder wordt door een afbeelding vervangen. Als dat is gebeud, kan er geen script meer op werken. Je kunt nog wel script op knop1 loslaten, die de knop bijvoorbeeld 10 keer zo klein maakt als de afbeelding.
  19. Ga terug naar Scene 1 en sleep nog een knop uit de bibliotheek (of kopieer knop1) en geef de instance van deze knop de naam knop2.
  20. Wijs het script nu weer aan. Er komen een paar regels tussen.
    loadMovie("fotos/f1.JPG","houder");
    	
    loadMovie("fotos/f1.jpg","knop1.knophouder");
    knop1._xscale=knop1._yscale=10;
    loadMovie("fotos/f2.jpg","knop2.knophouder");
    knop2._xscale=knop2._yscale=10;
    
    knop1.onRelease = function() {
    	loadMovie("fotos/f1.jpg","houder");
    }
    knop2.onRelease = function() {
    	loadMovie("fotos/f2.jpg","houder");
    }
      
    De rode en felgroene regels laden op dezelfde manier de afbeeldingen als we hierboven gedaan hebben.
    Er wordt echter telkens een regel toegevoegd knop1._xscale=knop1._yscale=10; die de knop1 horizontaal tot 10% verkleind (_xscale) en vertikaal tot 10% verkleind (_yscale=10).
    Het zou ook mogelijk (en beter) zijn dat er vooraf kleine afbeeldingen van de foto's staan opgeslagen (bijvoorbeeld fotoklein1.jpg), dan zou die op de plaats van de knop kunnen worden ingeladen, en dan hoeft er niet verkleind te worden in Flash. Dit is als je telkens andere foto's wil laten zien wel bewerkelijker.
  21. Dit script kun je voor meerdere foto's uitbreiden. Het script wordt dan wel erg veel groter. Per knop 3 regels script!

  22. Wellicht verderop een manier om het aantal scriptregels binnen de perken te houden en met het script nog meer effecten aan de knoppen toe te voegen zoals boven aan deze pagina.

    ge-avanceerder: een roll-over effect in de knoppen

    We gebruiken tot nu toe geen echte knop, en dat gaan we ook niet doen. Het lukt niet met script de knop zelf te sturen. We schrijven het script dus voor knoppen, die in Flash eigenlijk movieclips zijn. In het voorbeeld heb ik 7 knoppen, en voor iedere knop zal dan 10 regels script nodig zijn om te vertellen wat er gebeurt als je met je muis erover gaat, en wat er gebeurt als je met je muis weer van de knop vertrekt. Dat wordt heel veel script. Het is daarom nu eenvoudiger het script aan de knop in de bibliotheek te koppelen. Dan wordt het script vanzelf in elk van de knoppen op de stage meegenomen. Dat scheelt heel wat regels script schrijven. Het nadeel is wel, dat er nu script op 2 plaatsen in het flash-document staat: 1 keer in frame 1 van de hoofdmovie, en een keer in frame een van de moviecip knop.
  23. Haal eerst de script-regels
    knop1._xscale=knop1._yscale=10;
    en
    knop2._xscale=knop2._yscale=10;
    weer weg. (als je de moevie nu test, zijn de knoppen veel te groot. we gaan het script nu in de knop zelf plaatsen.
  24. Klik dubbel op de movieclip knop in de bibliotheek. Voeg daar het volgende script aan toe:
    this._xscale=this._yscale = 10;
    this._alpha = 60;
    this.onRollOver = function()  {
    	this._xscale = this._yscale=15;
    	this._x -= 15;
    	this._y -= 10;
    	this._alpha = 100;
    }
    this.onRollOut = function()  {
    	this._x += 15;
    	this._y += 10;
    	this._xscale = this._yscale=10;
    	this._alpha = 60;
    }
    het script
    this._xscale=this._yscale=10;
    betekent dat het script betrekking heeft op de knop, waar nu het script in geplaatst is. Elke instance van de knop wordt nu 10 keer horizontaal en vertikaal kleiner geschaald. We hoeven dat dus niet meer apart voor elke knop te schrijven. dat is het handige van this.
    Het script zegt in de volgende regels dat de knop een transparantie krijgt en this.onRelaese geeft aan dat je iets gaat vertellen wat er moet gebeuren als een knop door de muis wordt bedekt. In dit script moet de knop minder geschaald worden: in plaats van 10% wordt dat nu 15%. Omdat de schaling vanuit de linkerbovenhoek gaat, moet je de movieclip knop ook iets naar links en naar boven verschuiven: Met this._x -= 15 en this._y -= 10; trek je van de x- en y-coördinaat van de movieclip 15 respectievelijk 10 pixels af.
    De _alpha waarde van this wordt bij de roll-over op 100 gezet.

    Nadat de muis weer van de movieclip knop afgegaan is weer beschreven wat er met de movieclip weer moet gebeuren.het omgekeerde verhaal dus voor schalen, verplaatsen en transparantie.
    Als je straks meerdere knoppen gebruikt, geldt dit script voor al die knoppen!!
    Je kunt eventueel ook nog een rode rand om de knoppen plaatsen, door in de movieclip knop een extra laag te maken, en daarin een rood kader te tekenen. Laat die dan in de linkerbovenhoek beginnen, en teken hem op ware grootte: 600 bij 450 pixels. (waarschijnlijk veel groter dan de movieclip houder.) Geef de rand een forse dikte:8 of meer pixels door de schaling van het script wordt hij immers flink kleiner. Je kunt via View >> Rulers de linealen zichtbaar maken.
  25. Keer terug naar Scene1 en test je movie. In Scene1 zie wel dat de kaders van de knoppen elkaar overlappen. Ze worden immers pas door het uitvoeren van het script op maat gezet.
  26. de foto's laten overvloeien

    De movie wordt nu pas leuker als je meerdere knoppen en foto's hebt. Zorg ervoor dat je minimaal 5 foto's en 5 knoppen hebt. Doe dit vergelijkbaar met de knoppen knop1 en knop2. Laat alles naar behoren werken.
    Nu wordt het de bedoeling, zoals je hiernaast ziet dat de foto's overvloeien. Je kunt een dergelijk overvloei ook en wellicht eenvoudiger bereiken door van de foto's eerst animaties in Flash te maken, die van transparantie overgaan naar niet transparant. via een motiontween. Maar je kunt dan nog niet zomaar door de opkomende foto, de foto daaronder bekijken. het is nog geen echte overvloei. Daarvoor moet de nieuwe movie-clip als het ware bovenop de vorige worden geladen. En dat alles onafhankelijk van de volgorde van hoe de gebruiker klikt!. Je kunt dit dus niet eenvoudig met lagen oplossen, omdat na het tonen van de bovenste laag de onderste foto's nooit meer getoond kunnen worden. De oplossing is alleen met script mogelijk. In het script wordt een nieuwe movieclip uit de bibliotheek gehaald, bovenop gezet, en daarin wordt de nieuwe foto -of een flash-movie- van buitenaf geladen....

     

  27. We laten eerst zien hoe het laden vanuit de bibliotheek gaat. Dat gaat via het script AttachMovie.
    Gooi eerst de houder weg en verwijder uit het script de eerste regel: loadMovie("fotos/f1.jpg","houder");
  28. Wijs het Symbol vlak in de bibliotheek aan. Klik in het venster bibliotheek zit onderaan een balk.
    Klik daarin op de witte i in het blauwe rondje. Er komt nu een venster zoals hieronder, dat je ook hebt gezien toen je van het vlak een movieclip maakte. Zet nu een vinkje in het vakje Linkage. Er komt vanzelf een vinkje in Export in first frame en er komt een naam in het vakje Identifier. De naam vlak kun je wel laten staan. We zullen die in het script straks gebruiken.

    Klik nu voor accoord.
  29. Open het script in frame 1 van jouw document en plaats daarin (bovenaan)
    attachMovie("vlak", "houder", 0);
    loadMovie("fotos/f1.jpg", "houder");
    attachmovie() betekent dat er een moviesymbol uit de bibliotheek gehaald wordt en dat foto daat een variable van is geworden. De instance krijgt vervolgens de naam houder.
    Daarna wordt er in houder een foto geladen.
  30. Vul deze regels aan met scrip om de foto te verplaatsen en hem een transparantie van 10% te geven:
    attachMovie("vlak", "houder", 0);
    loadMovie("fotos/f1.jpg", "houder");
    houder._x = 20;
    houder._y = 20;
    houder._alpha = 10;
    Bij het testen van de movie ziet de foto erg tranparant. Ook de andere foto's komen transparant over. Ze worden immers in de transparante houder geladen.
  31. We gaan nu het script veranderen voor als iemand op de knoppen klikt. Ook daar moet er een attachMovie gebruikt gaan worden. Deze komt dan boven de laag houder te liggen.
    voeg eerst in het script een teller n toe: n=1;
  32. Vervolgens haal je bij de atie van knop2 de regel loadMovie("fotos/f2.jpg", "houder") weg en vervang dat door:
    	foto = attachMovie("vlak", "houder"+n, n);
    	loadMovie("fotos/f2.jpg", "foto");
    Als je nu de movie test, dan zal bij een klik op de tweede knop het script een foto linksboven in de hoek zeten, zonder transparantie.
    foto = attachMovie("vlak", "houder"+n, n); betekent dat er en movieclip op de stage komt en deze krijgt meteen de variabele-naam foto. Het is het bibliotheek-symbol vlak en krijgt als instance-naam houder1, omdat n nu de waarde 1 heeft in het script. Bovendien komt hij op niveau 1 terecht boven de movie.
  33. Wil je dan bovendien ervoor zorgen, dat deze ook transparant en op de goede plaats terecht komt, dan moet er voor clip nog 2 of 3 regels script bijkomen:
    knop2.onRelease = function() {
    	foto = attachMovie("vlak", "houder"+n, n);
    	loadMovie("fotos/f2.jpg", "foto");
    	foto._x = foto._y = 20;
    	foto._alpha = 10;
    	n++;
    }
    Als je nu test, zie je dat de tweede foto transparant over de eerste heen komt. Door het ophogen van de teller n met de regel n++; wordt de waarde van n nu 2 en zal als je opnieuw op de tweede knop klikt, er nog een laag met een foto eroverheen geplaatst worden.
  34. Wijzig zo ook de script voor de actie bij knop1 en bij knop3.
  35. Nu moet de _alpha van elke foto gaan oplopen. Diit doen we door een aparte functie in het script op te nemen. Voeg onder aan het script de volgende code toe:
    function onEnterFrame():Void
    {
    	foto._alpha += 2;
    }
    Hierdoor zal elke foto na het klikken een hogere _alpha krijgen. Behalve de foto waarmee we starten.
    Dit komt omdat deze geen variable geworden is met de naam foto. Dit kan natuurlijk alsnog:
    wijzig de regel attachMovie("vlak", "houder", 0); in: foto = attachMovie("vlak", "houder", 0);
  36. Maak nu nog meer knoppen aan, die naar de andere foto's gaan.
  37. het kan nog mooier: ook de knoppen komen via het script op de stage.

    Hoewel de functionaliteit van de movie nu al optimaal is, kan het script met dat atachMovie() zelfs de knoppen op de stage plaatsen.!
  38. Gooi de knoppen maar weg. De hele laag fotolaag kan dus weggegooid.
    verwijder ook de volgende scripttregels:
    loadMovie("fotos/f1.jpg","knop1.knophouder");
    loadMovie("fotos/f2.jpg","knop2.knophouder");
    loadMovie("fotos/f3.jpg","knop3.knophouder");
  39. Ga weer naar de bibliotheek en zorg ervoor dat de movieclip knop een linkage krijgt.
  40. Voeg het volgende script toe:
    for (i=1; i<=7; i++) {
    	knopclip = attachMovie("knop","knop"+i, i);
     	knopclip.knophouder.loadMovie("fotos/f"+i+".jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = i*65-40;
    }
    Als je de movie nu test, zie je dat er door het klikken knoppen verdwijnen. Dit komt omdat bij het laden van de knoppen,7 niveau's worden bezet. Die wordne door het klikken vervolgens bezet door de foto's. Dit is te voorkomen door de fotos's bij niveau 8 te laten beginnen: zet de regel n=1; dus om in n=8;
  41. Je hebt nu een movie, die volledig leeg begint, en vervolgens een prima fotoalbum blijkt te zijn.
    Het laatst toegevoegde script werkt met een lus: for. Dit wil zeggen voor elke waarde van i= 1, 2, 3, 4, 5, 6, 7 wordt het script tussen de accolades uitgevoerd. Je zou het script ook zonder lus kunnen uitschrijven, maar dan staat er veel meer script. Het ziet er dan als volgt uit:
    	knopclip = attachMovie("knop","knop1", 1);
     	knopclip.knophouder.loadMovie("fotos/f1.jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = 25;
    	
    	knopclip = attachMovie("knop","knop2", 2);
     	knopclip.knophouder.loadMovie("fotos/f2.jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = 90;
    	
    	knopclip = attachMovie("knop","knop3", 3);
     	knopclip.knophouder.loadMovie("fotos/f3.jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = 155;
    	
    	knopclip = attachMovie("knop","knop4", 4);
     	knopclip.knophouder.loadMovie("fotos/f4.jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = 220;
    	
    	knopclip = attachMovie("knop","knop5", 5);
     	knopclip.knophouder.loadMovie("fotos/f5.jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = 285;
    	
    	knopclip = attachMovie("knop","knop6", 6);
     	knopclip.knophouder.loadMovie("fotos/f6.jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = 350;
    	
    	knopclip = attachMovie("knop","knop7", 7);
     	knopclip.knophouder.loadMovie("fotos/f7.jpg");
    	knopclip._xscale = knopclip._yscale =10;
    	knopclip._alpha = 60;
    	knopclip._x = 650;
    	knopclip._y = 415;
    Je ziet dat door een slim gebruik van lusen de computer je heel veel werk uit handen kan nemen!!

terug