Draggen met stappen

[Woutawizz]

Hallo flashers! :S

Om dit alvast op te helderen: Ik ben een gigantische flash-newb... Ik ben zelf altijd een HTML/CSS/JS mannetje geweest, maar nu ben ik vandaag toch maar eens begonnen aan flash.

Nou ben ik bezig met een soort van foto carroussel en het lukt aardig, maar het zijn de kleine details waar ik moeite mee heb.

Voorbeeld: linkage (http://cssfreak.nl/)

Nou is het de bedoeling dat die slider i.p.v. soepel heen en weer gaat, het in stappen doet (30 om precies te zijn). Met de pijlen links/rechts lukt dat wel, maar ik heb geen idee hoe dat moet met het draggen.

Heeft iemand wat tips voor me of wat leesvoer? (Ik leer graag, dus leesvoer is een plus)

Nu zei ik wel dat het de kleine details waren waar ik moeite mee had, maar nu ik hier toch ben: hoe kan ik op een goede manier uitlezen op welke stap de handle (witte stip) staat?

Voor de nieuwsgierigen onder ons... de AS die ik gebruik:
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.MouseEvent;

var handle:Sprite = new Sprite();
handle.graphics.beginFill(0xFFFFFF);
handle.graphics.drawCircle(-22, 14, 3.5);
handle.buttonMode = true;

var bounds:Rectangle = new Rectangle(0, 0, 262, 0);

addChild(handle);

handle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
nextPic.addEventListener(MouseEvent.MOUSE_DOWN, nextPicture);
prevPic.addEventListener(MouseEvent.MOUSE_DOWN, previousPicture);

function mouseDown(event:MouseEvent):void {
handle.startDrag(false, bounds);
// TODO: Show correct image
}

function mouseReleased(event:MouseEvent):void {
handle.stopDrag();
// TODO: Show correct image
}

function nextPicture(event:MouseEvent) {
handle.x -= 9.050;
// TODO: Keep within range
// TODO: Show correct image
}

function previousPicture(event:MouseEvent) {
handle.x += 9.050;
// TODO: Keep within range
// TODO: Show correct image
}

function loadPicture(id) {
// TODO: Load/show correct image
}

Deze AS staat in frame 1 op een aparte layer in de timeline. En ik gebruik Flash CS3.

Greetz,

Woutawizz.

[miep]

startDrag

if .. mouseX > 100

this.x = 100

if mouseX > 300
this.x = 300;

zoiets :)

[Woutawizz]

startDrag

if .. mouseX > 100

this.x = 100

if mouseX > 300
this.x = 300;

zoiets :)

Dat zou een hele hoop code worden als ik 30 stappen nodig heb, maar het helpt me wel op weg... Met wat wiskunde kom ik waarschijnlijk al een heel eind.

Thnx voor de schop in de goede richting! ;)

Greetz,

Woutawizz

[Dauntless]

Bouw zelf de startDrag() functionaliteit na: Luister naar een MOUSE_MOVE en houd via MOUSE_DOWN en MOUSE_UP een boolean bij die aangeeft of de muis ingeklikt is op het bolletje of niet. In de MOUSE_MOVE ga je dan zo iets hebben:

if(gekliktOpBolletje) bolletje.x = Math.floor(mouseX / 30) * 30;

[theFlashWizard]

Er is net een top stukje leesvoer bijgekomen :)
Actionscript Tutorials -> Boeken (http://www.flashfocus.nl/forum/showthread.php?t=6338#boeken) -> http://www.flashfocus.nl/forum/showthread.php?t=8100#post316783

[Woutawizz]

Boeken!!! :P

Weer een aanvulling op mijn toch al uitgebreide collectie... |)

Oh... en die link met AS tutorials in je sig is ook handig FlashWiz

[Woutawizz]

Even snel een kleine update, voor zover is alles gelukt zoals ik het wilde dankzij de hulp en tips hier...

Resultaat: (linkage (http://cssfreak.nl/carrousel.html))

Het kan allemaal wat eleganter, maar voor nu ben ik tevreden :) Alle data wordt ingeladen vanuit een xml bestand, dus dat vond ik ook al een behoorlijke sprong in de goede richting.

[theFlashWizard]

Het lijkt alleen alsof hij altijd naar links van de muis wordt gezet. Gebruikt je soms een floor? Probeerhet anders eens met een Math.random.

[Woutawizz]

Het lijkt alleen alsof hij altijd naar links van de muis wordt gezet. Gebruikt je soms een floor? Probeerhet anders eens met een Math.random.
Ik gebruik idd een floor, het zou ideaal zijn als er een functie zou zijn waarmee je kan afronden op een bepaald getal (bv: meervouden van 7).

Maar het zit er dik in dat ik daar een functie voor zou moeten schrijven, wat wel moet lukken.

De AS die uitrekent waar de handle moet komen te staan:function slide(e:MouseEvent):void {
var position = Math.floor(controls.mouseX / ratio);
var n = 0;

if(position <= 0) {
controls.handle.x = 0;
} else if (position >= ratio * steps) {
controls.handle.x = ratio * steps;
n = Math.round(steps);
} else {
controls.handle.x = position;
n = Math.round(position);
}
moveHandle(n);
}

[theFlashWizard]

Delen door het aantal 0'en waarop je het wilt afronden, afronden en weer vermenigvuldigen met dat zelfde aantal 0'en.

[Dauntless]

En dus, voor veelvouden van 7:
var rounded = Math.floor(numberToRound / 7) * 7;
(Mocht het niet duidelijk zijn :))