Baukereg
%Europe/Berlin %663 %2007, 15:55
Je ziet het steeds vaker: MovieClips, al dan niet videomateriaal, die heen en weer worden gespoeld, alsof het dezelfde functies heeft als een videorecorder.
Enkele voorbeelden:
1) http://www.lincoln.com/reachhigher
2) http://www.ikea.com/ms/en_US/rooms_ideas/ckl/default.html
Nu wordt geregeld op het forum de vraag gesteld hoe je dit kunt bereiken. Nou, hiervoor heb ik de MovieCap geschreven.
Wat is een MovieCap
Een MovieCap staat voor Movie Capture, refererend aan de term die bij videomontage gebruikt wordt. De MovieCap class is niets meer dan een subclass van de welbekende standaard MovieClip, om je extra controlle en functionaliteit te geven.
Package: nl.regnerusmedia.display
Class: MovieCap
Extends: flash.display.MovieClip
Constructor
new MovieCap()
Public Properties
leftBoundry:int (write-only)
rightBoundry:int (write-only)
Geven de grenzen aan van het 'speelgebied' dat afgespeeld moet worden, standaard de hele MovieClip
Public Methods
resetBoundries()
Reset het 'speelgebied' zodat het de hele MovieClip beslaat
startPlay(speed:int = 1, loop:Boolean = false, endLabel:String = "")
Speel de MovieClip af
stopPlay()
Stop het afspelen van de MovieClip
rewind()
Zet de MovieClip positie gelijk aan leftBoundry
forward()
Zet de MovieClip positie gelijk aan rightBoundry
slideTo(framelabel:String, speed:int = 1, ignoreBoundries:Boolean = false)
Laat de MovieClip richting een bepaald framelabel 'glijden'
gotoPercent(value:int, scale:int = 100)
Zet de MovieClip positie op een bepaald percentage
Uitleg
Over 'speelgebied' en boundries
Een MovieClip speelt altijd af van het eerste frame (1) tot het laatste (totalFrames). Voor een MovieCap is dit 'speelgebied' variabel door het gebruik van leftBoundry en rightBoundry. Zo kun je bijvoorbeeld aangeven dat een MovieClip alleen het gebied tussen frame 5 en 50 moet afspelen. Met de methode resetBoundries kun je het speelgebied weer aanpassen aan het standaard speelgebied van de MovieClip.
MyMovieCap.leftBoundry = 5;
MyMovieCap.rightBoundry = 50;
MyMovieCap.resetBoundries();
Over het afspelen van je MovieCap
Anders dan een MovieClip begint een MovieCap niet standaard met afspelen. Middels de methode startPlay kun je dat activeren. Hierbij kun je aangeven met welke snelheidsratio die moet gebeuren (speed:int), of de MovieCap moet loopen (loop:Boolean) en of de MovieCap moet stoppen op een bepaald framelabel (endLabel:String). Het mooie is dat speed ook negatief kan zijn, zodat je dus terugspoeld. Het volgende voorbeeld speelt terug op dubbele snelheid vanaf de rightBoundry naar label 'stopHere':
MyMovieCap.forward(); // zet MovieCap op rightBoundry
MyMovieCap.startPlay(-2, false, "stopHere");
Naast forward() is er ook de methode rewind();
Over het gebruik van slideTo()
Naast het normaal afspelen van je MovieCap kun je ook kiezen voor de methode slideTo(). Dit zorgt ervoor dat de MovieCap als het ware naar een bepaald framelabel 'glijdt'. Deze methode kiest automatisch de snelste weg (voor- of achteruit)! Ook kun je instellen dat de methode geen rekening houdt met de boundries, wat weer handig is voor loopende animaties (zoals de auto in het eerste voorbeeld, zie bovenaan). Het volgende voorbeeld 'glijdt' naar framelabel "stopHere" op normale snelheid, waarbij boundries worden genegeerd:
MyMovieCap.slideTo("stopHere", 1, true);
Over het gebruik van gotoPercent()
En een kleine toevoeging aan de class is de methode gotoPercent, waarmee je de MovieClip op een bepaald percentage van het speelveld kan zetten. Hierbij kun je zelf de schaal aangeven, bijvoorbeeld 8 op de schaal van 15:
MyMovieCap.gotoPercent(8, 15);
Of als nog mooier voorbeeld, de MovieCap aanpassen aan de positie van je muis:
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateClip);
function updateClip(e:MouseEvent) {
_MyMovieCap.gotoPercent(mouseX, stage.stageWidth);
}
Zo, dat was een heel verhaal. Ben er ook al de hele dag mee bezig (met het schrijven van de class hé, niet alleen het schrijven van deze post ^^).
Dus graag hoor ik jullie commentaar. Aanpassingen? Verbeteringen? Toevoegingen? Ik hoor ze graag!
Enkele voorbeelden:
1) http://www.lincoln.com/reachhigher
2) http://www.ikea.com/ms/en_US/rooms_ideas/ckl/default.html
Nu wordt geregeld op het forum de vraag gesteld hoe je dit kunt bereiken. Nou, hiervoor heb ik de MovieCap geschreven.
Wat is een MovieCap
Een MovieCap staat voor Movie Capture, refererend aan de term die bij videomontage gebruikt wordt. De MovieCap class is niets meer dan een subclass van de welbekende standaard MovieClip, om je extra controlle en functionaliteit te geven.
Package: nl.regnerusmedia.display
Class: MovieCap
Extends: flash.display.MovieClip
Constructor
new MovieCap()
Public Properties
leftBoundry:int (write-only)
rightBoundry:int (write-only)
Geven de grenzen aan van het 'speelgebied' dat afgespeeld moet worden, standaard de hele MovieClip
Public Methods
resetBoundries()
Reset het 'speelgebied' zodat het de hele MovieClip beslaat
startPlay(speed:int = 1, loop:Boolean = false, endLabel:String = "")
Speel de MovieClip af
stopPlay()
Stop het afspelen van de MovieClip
rewind()
Zet de MovieClip positie gelijk aan leftBoundry
forward()
Zet de MovieClip positie gelijk aan rightBoundry
slideTo(framelabel:String, speed:int = 1, ignoreBoundries:Boolean = false)
Laat de MovieClip richting een bepaald framelabel 'glijden'
gotoPercent(value:int, scale:int = 100)
Zet de MovieClip positie op een bepaald percentage
Uitleg
Over 'speelgebied' en boundries
Een MovieClip speelt altijd af van het eerste frame (1) tot het laatste (totalFrames). Voor een MovieCap is dit 'speelgebied' variabel door het gebruik van leftBoundry en rightBoundry. Zo kun je bijvoorbeeld aangeven dat een MovieClip alleen het gebied tussen frame 5 en 50 moet afspelen. Met de methode resetBoundries kun je het speelgebied weer aanpassen aan het standaard speelgebied van de MovieClip.
MyMovieCap.leftBoundry = 5;
MyMovieCap.rightBoundry = 50;
MyMovieCap.resetBoundries();
Over het afspelen van je MovieCap
Anders dan een MovieClip begint een MovieCap niet standaard met afspelen. Middels de methode startPlay kun je dat activeren. Hierbij kun je aangeven met welke snelheidsratio die moet gebeuren (speed:int), of de MovieCap moet loopen (loop:Boolean) en of de MovieCap moet stoppen op een bepaald framelabel (endLabel:String). Het mooie is dat speed ook negatief kan zijn, zodat je dus terugspoeld. Het volgende voorbeeld speelt terug op dubbele snelheid vanaf de rightBoundry naar label 'stopHere':
MyMovieCap.forward(); // zet MovieCap op rightBoundry
MyMovieCap.startPlay(-2, false, "stopHere");
Naast forward() is er ook de methode rewind();
Over het gebruik van slideTo()
Naast het normaal afspelen van je MovieCap kun je ook kiezen voor de methode slideTo(). Dit zorgt ervoor dat de MovieCap als het ware naar een bepaald framelabel 'glijdt'. Deze methode kiest automatisch de snelste weg (voor- of achteruit)! Ook kun je instellen dat de methode geen rekening houdt met de boundries, wat weer handig is voor loopende animaties (zoals de auto in het eerste voorbeeld, zie bovenaan). Het volgende voorbeeld 'glijdt' naar framelabel "stopHere" op normale snelheid, waarbij boundries worden genegeerd:
MyMovieCap.slideTo("stopHere", 1, true);
Over het gebruik van gotoPercent()
En een kleine toevoeging aan de class is de methode gotoPercent, waarmee je de MovieClip op een bepaald percentage van het speelveld kan zetten. Hierbij kun je zelf de schaal aangeven, bijvoorbeeld 8 op de schaal van 15:
MyMovieCap.gotoPercent(8, 15);
Of als nog mooier voorbeeld, de MovieCap aanpassen aan de positie van je muis:
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateClip);
function updateClip(e:MouseEvent) {
_MyMovieCap.gotoPercent(mouseX, stage.stageWidth);
}
Zo, dat was een heel verhaal. Ben er ook al de hele dag mee bezig (met het schrijven van de class hé, niet alleen het schrijven van deze post ^^).
Dus graag hoor ik jullie commentaar. Aanpassingen? Verbeteringen? Toevoegingen? Ik hoor ze graag!