Touch scrollen auf Air für Android in Adobe Flash

Question

Ich versuche, ein Touch-basiertes Scrollen MovieClip mit vielen Tasten zu machen. Ich möchte, dass sich diese Taste gemäß den Ereignissen mouseDown oder mouseUp des MovieClips bewegt. Ich hoffe, dass mir jemand mit diesem Problem helfen kann.

var maxY:Number = 725; 
var minY:Number = 350; 
var _startY:Number; 
var _startMouseY:Number; 
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); 

function mouseDownHandler(event:MouseEvent):void { 
    _startY = davies.y; 
    _startY = toa.y; 
    _startMouseY = mouseY; 
    stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler, false, 0, true); 
    stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler, false, 0, true); 
} 

function stage_mouseMoveHandler(event:MouseEvent):void { 
    var offsetY:Number = mouseY - _startMouseY; 
    background_scroll_product.y = Math.max(Math.min(maxY, _startY + offsetY), minY); 
    davies.y = Math.max(Math.min(maxY, _startY + offsetY), minY); 
    toa.y = Math.max(Math.min(maxY, _startY + offsetY), minY); 
} 

function stage_mouseUpHandler(event:MouseEvent):void { 
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler); 
    stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler); 
} 

Vor und nach der Taste:

Answer 1

Lösung

1: Versuchen Math.max(Math.min(maxY, _startY + offsetY), minY); mit folgenden ersetzen:

clamp(mouseY - _startY + offsetY, minY, maxY); 

function clamp(original:Number, low:Number, high:Number):Number { 
    return (original > high) ? high : (original < low) ? low : original; 
} 

2: Verschieben Sie alle Ihre Inhalte in einen einzelnen Container. Es ist einfacher, ein Objekt zu verschieben, als viele Objekte zu verschieben.

Viele Objekte:

0:MainTimeline 
    0:background_scroll_product //.y += offsetY; 
    1:davies     //.y += offsetY; 
    2:toa      //.y += offsetY; 
    ... 

Ein Objekt:

0:MainTimeline 
    0:container //.y += offsetY; 
     0:background_scroll_product 
     1:davies 
     2:toa 
     ... 

Demonstration

Im Folgenden finden Sie Code, den Sie in ein neues Projekt fallen kann, und es wird mit einem kompilieren funktionierender Scroll-Container. Bitte denken Sie daran, dass andere wahrscheinlich ein Minimal, Complete, and Verifiable example so brauchen, wenn Sie Fragen stellen.

var background_scroll_product, davies, toa; 
demoSetup(); 

/* ^^^ Omit this if you already have these objects defined ^^^ */ 

// Create a container for our content. 
var container:Sprite = new Sprite(); 
addChild(container); 

// Put the content inside the container. 
container.addChild(background_scroll_product); 
container.addChild(davies); 
container.addChild(toa); 

// setup the min based on the size of the contents. 
var loc:Object = { 
    "max":50, 
    "min":stage.stageHeight - container.height 
}; 

addEventListener("mouseDown", mouseHandler); 

function mouseHandler(e:Event):void { 
    switch (e.type) { 
     case "mouseDown": 
      loc.start = mouseY; 
      loc.container = container.y; 
      addEventListener("mouseUp", mouseHandler); 
      addEventListener("mouseMove", mouseHandler); 
      break; 
     case "mouseUp": 
      removeEventListener("mouseUp", mouseHandler) 
      removeEventListener("mouseMove", mouseHandler); 
      break; 
     case "mouseMove": 
      // Scroll the container. 
      container.y = clamp(mouseY - loc.start + loc.container, loc.min, loc.max); 
      break; 
    } 
} 

function clamp(original:Number, low:Number, high:Number):Number { 
    return (original > high) ? high : (original < low) ? low : original; 
} 

function demoSetup():void { 
    // This sets up a facsimile of the project, to create a Minimal, and Verifiable example. 
    var bg:Sprite = new Sprite(); 
    bg.graphics.beginFill(0xA1A1A1); 
    bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight); 
    bg.graphics.endFill(); 
    addChild(bg); 

    background_scroll_product = new Shape(); 
    background_scroll_product.graphics.beginFill(0xf0e3e5); 
    background_scroll_product.graphics.drawRect(0, 0, 250, 750); 
    background_scroll_product.graphics.endFill(); 

    davies = new Shape(); 
    davies.graphics.beginFill(0x243066); 
    davies.graphics.drawRect(0, 0, 200, 400); 
    davies.graphics.endFill(); 
    davies.x = davies.y = 25; 

    toa = new Shape(); 
    toa.graphics.beginFill(0xdc3734); 
    toa.graphics.drawRect(0, 0, 200, 200); 
    toa.graphics.endFill(); 
    toa.x = 25; 
    toa.y = 525; 
} 

---

Antwort auf FLA

ich Ihnen empfehlen, nicht mit Szenen arbeiten, und zwar, weil sie schmutzig Staaten schaffen, die nicht unmittelbar drohende entzifferbar sind. In der Tat, wenn Sie auf eine mobile App hinarbeiten, sollten Sie in Erwägung ziehen, ein umfassendes UI-Framework wie FeathersUI zu verwenden. Egal ...

Verweilender Container

Die Timeline versucht jeden Frame als eindeutigen Zustand für das Programm zu behandeln. Sie können auf diese Weise eine Benutzeroberfläche visuell erstellen, aber es ist klobig. Darüber hinaus gibt es, wie Sie festgestellt haben, beim Mischen von WYSIWYG mit funktionaler Programmierung Dinge, die die Flash-Benutzeroberfläche nie wahrgenommen hat und niemals "aufräumt". Sie haben addChild(container) manuell hinzugefügt, und Sie werden auch manuell removeChild(container) erwartet. Sie können das in Ihrer Listener-Funktion für die Zurück-Schaltfläche platzieren.

Container über Titlebar schweben

Ihre Hauptmenü heiarchy Bedenken Sie:

0: instance15 (Shape) 
1: button_back (SimpleButton) 
2: instance16 (StaticText) 
3: container (Sprite) 

Wie Sie sehen können, Schichten 0 durch 2 Objekte oberen Menü sind.Das Verschieben von container hinter dem Menü ist so einfach wie das Aufrufen von addChildAt() und das Festlegen des zweiten Arguments auf dem 0-Index.

addChildAt(container, 0); 

Letzte Bilder werden abgeschnitten

Der Grund dafür ist, dass Ihre Inhalte nicht auf y:0 positioniert ist. Wenn Sie das reparieren wollen, entweder den Inhalt an y:0 starten bewegen, oder fügen Sie den Offset der ersten Grafik auf den Minimalwert ...

"min":this.loaderInfo.height - container.height - davies.y