Touchez défiler sur Air pour Android dans Adobe Flash

Question

J'essaie de faire un défilement tactile MovieClip avec de nombreux boutons. Je veux que ce bouton bouge en fonction des événements mouseDown ou mouseUp du MovieClip. J'espère que quelqu'un peut m'aider avec ce problème.

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); 
} 

Avant et après défilement:

Answer 1

Solution

1: Essayez de remplacer Math.max(Math.min(maxY, _startY + offsetY), minY); ce qui suit:

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

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

2: Déplacez tout votre contenu dans un seul conteneur. Il est plus facile de déplacer un objet que de déplacer plusieurs objets.

De nombreux objets:

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

Un objet:

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

Démonstration

Code est ci-dessous que vous pouvez déposer dans un nouveau projet et il compilera avec conteneur de défilement de travail. S'il vous plaît soyez conscient que d'autres auront probablement besoin d'un Minimal, Complete, and Verifiable example comme ça lorsque vous posez des questions.

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; 
} 

---

Réponse à FLA

Je recommande fortement que vous ne travaillez pas avec des scènes, en particulier parce qu'elles créent des états sales qui ne sont pas sous peu déchiffrable. En fait, comme vous semblez travailler pour une application mobile, vous devriez certainement envisager d'utiliser un framework UI à part entière tel que FeathersUI. Peu importe ...

Attardez Container

Les Timeline essaie de traiter chaque image comme un état unique pour le programme. Vous pouvez créer visuellement une interface utilisateur de cette façon, mais c'est maladroit. En outre, comme vous l'avez découvert, lorsque vous mélangez WYSIWYG avec la programmation fonctionnelle, il y a des choses que l'interface utilisateur Flash n'a jamais connues et qui ne "nettoie" jamais. Vous avez ajouté manuellement addChild(container), et vous devez également manuellement removeChild(container). Vous pouvez placer cela dans votre fonction d'écoute pour le bouton de retour.

Container planant au-dessus Titlebar

Tenez compte de votre menu principal heiarchy:

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

Comme vous pouvez le voir, les couches 0 par 2 sont vos objets du menu supérieur.Déplacer container derrière le menu est aussi simple que d'appeler addChildAt(), et de définir le deuxième argument à l'index 0.

addChildAt(container, 0); 

dernières images sont tronquées

La raison est que votre contenu ne soit pas positionné à y:0. Si vous voulez résoudre ce problème, soit déplacer le contenu pour commencer à y:0, ou ajouter le décalage de votre premier graphique à la valeur min ...

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