een externe movieclip of foto in flash importeren - foto's verslepen

Een externe afbeelding in Flash importeren zorgt ervoor dat bij vele afbeeldingen de Flash-movie niet te groot wordt.
Ook kun je andere dingen met een movieclip doen: hiernaast kun je de movieclip ook verslepen. Ideaal om in een album op details in te zoomen.

1. Maak een flash-movie van 350 bij 250 pixels. Sla deze in dezelfde plaats op als schuif.fla. De afmetingen van de flash-movie zijn kleiner dan van de foto's, die we willen laten zien.
2. Maak naast deze schuif.fla een mapje met de naam fotos en stop daar de foto's in. In dit voorbeeld heten ze f1.jpg en f2.jpg.
3. Maak een laag met als naam menubalk, waarin je een passende (doorschijnende) menubalk maakt.
4. Maak daarboven een laag knoppen, met daarin twee knoppen (in dit voorbeeld zijn dit twee rechthoekjes geweest) en noem de instances van deze knoppen f1 en f2.
5. Helemaal onderaan maak je een laag waarin de foto's geïmporteerd gaan worden. Noem deze laag bijvoorbeeld foto's. Maak in de uiterse bovenhoek rechts een rechthoekje (maakt niet uit hoe groot of met welke kleur) en zet deze rechthoek om naar een movieclip met als naam bijvoorbeeld lijst. Deze movieclip wordt door het script straks vervangen door een foto.
6. Geef die movieclip als instancenaam de naam frame. Maak hier weer een movieclip van, er komt dus een movieclip in een movieclip. Het werken met movieclips geeft Flash de mogelijkheid om daar scripts aan toe te voegen. In de movieclip kader komt dan de foto, en in movieclip houder gaat gesleept en geschaald worden door de gebruiker.
7. Maak een actielaag aan en plaats daarin de volgende acties:
   

   f1.onRelease = function() {
   	loadMovie("fotos/f3.jpg","houder.frame");
   }
   f2.onRelease = function() {
   	loadMovie("fotos/f1.jpg","houder.frame");
   }

   Als je de movie test, moeten door het kikken op de knoppen de foto's al geladen worden (in de movieclip kader, die zelf in de movieclip houder zit wordt dan de foto). De foto's zijn nog wel te groot voor het kleine venster.

8. Door het script aan te vullen zal door het drukken op de knop niet alleen de foto's worden geladen, maar ook kleiner geschaald worden. De _xscale variabele van de houder zetten we op 59% evenals de _yscale variabele:
   

   f1.onRelease = function() {
   	loadMovie("fotos/f3.jpg","houder.frame");
   	houder._xscale = houder._yscale =59;
   }
   f2.onRelease = function() {
   	loadMovie("fotos/f1.jpg","houder.frame");
   	houder._xscale = houder._yscale =59;
   }

   De houder wordt in beide gevallen met 59% geschaald. Hierdoor passen de foto's nu beter als je de movie nu test. _xscale is dus de horizontale schaling in procenten.

1. De movieclip is versleepbaar door aan het script het volgende toe te voegen:

     houder.onMouseDown=function() {
   	startDrag("houder");
   }
     

2. Als je de movie nu test zal de foto continue de muis volgen als je erop gedrukt hebt. Het is natuurlijk wenselijk dit proces weer te stoppen. Dat kan door er weer een stukje script toe te voegen voor het geval de muisknop wordt losgelaten; dan moet het slepen dus stoppen:

   houder.onMouseUp=function() {
   	stopDrag();
   }

1. Maak twee extra knoppen bijvoorbeeld vergroot en passend. Noem de instances van deze knoppen respectievelijk groot en pas. Het wordt de bedoeling dat als je op de knop groot klikt, dat het schalingspercentage 100% wordt (het was immers 59%), terwijl bij de knop pas het percentage weer wordt teruggebracht naar 59%.
2. Voeg daarvoor het volgende script toe:
   

   groot.onRelease = function() {
   	houder._xscale = houder._yscale =100;
   }
   pas.onRelease = function() {
   	houder._xscale = houder._yscale =59;
   }

3. Test de movie.

1. De gebruiker kan door deze interface in de problemen komen. Test de movie, vergroot een afbeelding, schuif die vervolgens zo ver als mogelijk naar boven, en je ziet dan dat bij het verkleinen of een nieuwe foto lijkt alsof er helemaal geen foto meer is. Die foto is er wel, maar buiten de movie. We moeten dus ervoor zorgen dat bij het verkleinen of het laden van een foto dat de houder in de linkerbovenhoek van de movie komt. De _x variabele van de houder moet dus 0 worden, evenals de _y variabele. houder._x is de horizontale verplaatsing van de instance houder gemeten vanaf de linkerbovenhoek van de stage.
2. We gaan het script voor de knoppen f1 en f2 en pas dus aanvullen:

   f1.onRelease = function() {
   	loadMovie("fotos/f4.JPG", "houder.frame");
   	houder._xscale = houder._yscale = 59;
   	houder._x = houder._y = 0;
   };
   
   f2.onRelease = function() {
   	loadMovie("fotos/f1.JPG", "houder.frame");
   	houder._xscale = houder._yscale=59;
   	houder._x = houder._y =0;
   };
   
   pas.onRelease = function() {
   	houder._xscale = houder._yscale =59;
   	houder._x = houder._y =0;
   };

   Je zit nu ook een beetje de functie van de accolades { } in het actionscript. Bij knop f1 zijn nu maar liefst 3 acties die uitgevoerd worden als je op de knop klikt. Deze 3 acties worden gescheiden door puntkomma's en omgeven door accolades.