26 réponses à ce sujet

[Yakub]

L'idee c'est de faire un peu comme sur abode reader, de pourvoir zoomer sur une image et ensuite de pouvoir cliquer dessus pour ce deplacer a l'interieur .

[Monsieur Spi]

Hello, avec quelle techno et quel langage ?

[Yakub]

Bonjour Monsieur Spi,

Sous AS3 avec Air for Android .

[Yakub]

En as3 for desktop avec l'ecouteur MouseEvent et la fonction StartDrag, StopDrag cela fonction parfaitement, mais sous application portable ca ne marche pas

[Yakub]

pol2095,


Merci, cette fonction est plus complexe que le startDrag et stopDrag a cause des parametres, hormis ton lien en Anglais je ne trouve pas trop d'explication simple sur ces parametres, peux tu me dire comment ca fonctionne ?

J'ai un élément nommé Plan sur ma scène que j'aimerai bouger, cela donnerai ça dans ma fonction ?

e.target.startTouchDrag(e.PlanID, false, 3emeParamatre);

le 3emeParamtre que dois je renseigner dedans ?
Merci pour ton aide

[pol2095]

le 3ème paramètres est facultatif, regarde la doc

import flash.events.TouchEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

Plan.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
Plan.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);

function onTouchBegin(event:TouchEvent):void
{
        event.target.startTouchDrag(event.touchPointID);
}
 
function onTouchEnd(event:TouchEvent):void
{
        event.target.stopTouchDrag(event.touchPointID);
}

[Yakub]

pol2095,


Merci je test ce code

[Yakub]

pol2095,

j'ai testé ce code cela fonction mais je ne peux plus faire de zoom car j'ai du modifié le Multitouch.inputMode, aurais tu une solution pour pouvroir realiser les deux mouvements ?

Fichier(s) joint(s)

•  AED.fla   113.59 Ko   11 téléchargement(s)

[pol2095]

Je ne pense pas qu'on puisse utiliser les 2 en même temps, il faudrait recréer "GESTURE_ZOOM" avec MultitouchInputMode.TOUCH_POINT.

[Yakub]

Que veux tu dire par "qu'on ne puisse pas utiliser les 2 en meme temps " ?
Pour utiliser un ecouteur d'evenement de type GESTURE_ZOOM je suis obligé d'ecrire,

Multitouch.inputMode = MultitouchInputMode.GESTURE pour pouvoir zoomer sur l'element "Plan" , mais si je souhaite egalement le deplacer je suis obliger d'ecrire Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT c'est bien ca ?

Je ne peux pas faire une appli avec la possibilité de deplacer un objet et de pouvoir zoomer dessus en AS3 si je comprends bien ???

[Yakub]

Puis je ecrire MultitouchInputMode.TOUCH_POINT, et MultitouchInputMode.GESTURE a l'interieur des ecouteurs d'evements pour realiser les deux mouvements ?

[Yakub]

Je souhaiterais utiliser les deux ou trouver une methodes qui puisse me permettre de :

-De zoomer sur mon Plan
-De le deplacer pour voyage dedans
-De clique sur un element via le TOUCH_TAP
-De faire un wipe pour fermer le symbole .

Un peu comme une visionneuse photo sur telephone

[pol2095]

J'ai réalisé quelque chose de similaire avec Starling qui utilise MultitouchInputMode.TOUCH_POINT et pas les fonctions prédifinies d'Adobe.

[Yakub]

pol2095


tu peux m'en dire un peu plus , j'avoue etre complètement bloqué , je ne comprends pourquoi c'est aussi complexe que ca pour realiser quelque chose de simple .

[pol2095]

si tu veux déplacer un object avec "MultitouchInputMode.GESTURE" il faut utiliser "GESTURE_PAN" (avec 2 doigts)

Multitouch.inputMode = MultitouchInputMode.GESTURE;

Plan.addEventListener(TransformGestureEvent.GESTURE_PAN, panHandler);

function panHandler(event:TransformGestureEvent):void
{
event.currentTarget.x += event.offsetX;
event.currentTarget.y += event.offsetY;
}

[pol2095]

Une autre façon de faire est d'utiliser "MultitouchInputMode.TOUCH_POINT", voilà un exemple qui recréer "
GESTURE_ZOOM" avec un drag à un doigt

package
{
        import com.MySprite;
        import flash.display.Bitmap;
        import flash.display.Sprite;
        import flash.events.Event;
        import flash.ui.Multitouch;
        import flash.ui.MultitouchInputMode;

        public class Main extends Sprite
        {
                [Embed(source = "./Image.jpg")]
                private static const MyImage:Class;
       
                public function Main()
                {
                        this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
                }
       
                private function addedToStageHandler(event:Event):void
                {
                        this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
               
                        Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
               
                        var mySprite:MySprite = new MySprite();
                        this.addChild(mySprite);
                        var myImage:Bitmap = new MyImage();
                        myImage.scaleX = myImage.scaleY = 0.2;
                        mySprite.addChild( myImage );
                }
        }
}

package com
{
        import flash.display.DisplayObject;
        import flash.display.Sprite;
        import flash.events.Event;
        import flash.events.TouchEvent;
        import flash.geom.Point;
        import flash.geom.Rectangle;

        public class MySprite extends Sprite
        {
                private var touches:Vector.<TouchEvent> = new <TouchEvent>[];
                private var touchPointID:int = -1;
                private var previousPosA:Point;
                private var previousPosB:Point;
                private var touchesContains:Vector.<Boolean> = new <Boolean>[];
       
                public function MySprite()
                {
                        this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
                }
       
                private function addedToStageHandler(event:Event):void
                {
                        this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
               
                        stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
                        stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
                }
       
                private function onTouchBegin(event:TouchEvent):void
                {
                        touches.push( event );
                        touchesContains.push( this.contains( event.target as DisplayObject ) );
                        if( touches.length == 1 )
                        {
                                if( this.contains( event.target as DisplayObject ) )
                                {
                                        touchPointID = event.touchPointID;
                                        this.startTouchDrag(event.touchPointID);
                                }
                        }
                        else if( touchPointID != -1 )
                        {
                                this.stopTouchDrag(touchPointID);
                                touchPointID = -1;
                        }
               
                        if( touches.length == 1 )
                        {
                                previousPosA  = new Point( event.stageX, event.stageY );
                        }
                        else if( touches.length == 2 )
                        {
                                previousPosB  = new Point( event.stageX, event.stageY );
                                stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
                        }
                }
       
                private function onTouchMove(event:TouchEvent):void
                {
                        if( touches.length == 2 )
                        {
                                var index:int = touchIndex( event );
                                touchesContains[ index ] = this.contains( event.target as DisplayObject );
                       
                                var currentPosA:Point = index == 0 ? new Point( event.stageX, event.stageY ) : previousPosA.clone();
                                var currentPosB:Point = index == 1 ? new Point( event.stageX, event.stageY ) : previousPosB.clone();
                       
                                if( touchesContains[0] || touchesContains[1] )
                                {
                                        var currentVector:Point  = currentPosA.subtract(currentPosB);
                                        var previousVector:Point = previousPosA.subtract(previousPosB);
                               
                                        var sizeDiff:Number = currentVector.length / previousVector.length;
                               
                                        if( Math.abs( sizeDiff - 1 ) > 0.01 ) zoomImage( sizeDiff - 1, midPoint( currentPosA, currentPosB ) );
                                }
                                previousPosA  = currentPosA.clone();
                                previousPosB  = currentPosB.clone();
                        }
                }
       
                private function zoomImage(zoomAmount:Number, midPoint:Point):void
                {
                        zoomAmount *= 2;
                        if( this.scaleX + zoomAmount < 0.8 ) zoomAmount = 0.8 - this.scaleX;
                        var local:Point = this.globalToLocal( midPoint );
                        var x:Number = local.x;
                        var y:Number = local.y;
                        this.scaleX += zoomAmount;
                        this.scaleY += zoomAmount;
                        this.x -= x * zoomAmount;
                        this.y -= y * zoomAmount;
                }
         
                private function onTouchEnd(event:TouchEvent):void
                {
                        var index:int = touchIndex( event );
                        touches.splice( index, 1 );
                        touchesContains.splice( index, 1 );
                        if( touches.length == 1 )
                        {
                                if( index == 0 ) previousPosA = previousPosB.clone();
                                stage.removeEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
                        }
                        if( touchPointID != -1 )
                        {
                                this.stopTouchDrag(touchPointID);
                                touchPointID = -1;
                        }
                }
       
                private function touchIndex(event:TouchEvent):int
                {
                        for(var i:int = 0; i < touches.length; i++)
                        {
                                if( touches[i].touchPointID == event.touchPointID )
                                {
                                        return i;
                                }
                        }
                        return -1;
                }
       
                private function midPoint(currentPosA:Point, currentPosB:Point):Point
                {
                        var midPoint:Point = Point.interpolate(currentPosA, currentPosB, 0.5);
                        var rect:Rectangle = this.getRect( stage );
               
                        if( midPoint.x < rect.x )
                        {
                                midPoint.x = rect.x;
                        }
                        else if( midPoint.x > rect.x + rect.width )
                        {
                                midPoint.x = rect.x + rect.width;
                        }
               
                        if( midPoint.y < rect.y )
                        {
                                midPoint.y = rect.y;
                        }
                        else if( midPoint.y > rect.y + rect.height )
                        {
                                midPoint.y = rect.y + rect.height;
                        }
               
                        return midPoint;
                }
       
                public function dispose():void
                {
                        stage.removeEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
                        stage.removeEventListener(TouchEvent.TOUCH_END, onTouchEnd);
                        touches = null;
                        touchesContains = null;
                }
        }
}

[Yakub]

Bonjour
pol2095


Merci je test ce code, et je reviens demain pour faire un feedback

[Yakub]

Bonjour Pol2095,

Bon apres avoir testé plusieurs possibilité, je trouve que la fonction zoom fonctionne tres mal sous flash, du coup je vais abandonner cette fonction sur mon appli car une fois sur trois le zoom ne se fait pas, de plus le zoom ne ce fait pas sur l'endroit clické mais sur des coordonnées fixe et donc a chaque fois que je zoom je dois faire un drag and drop car je n'ai pas zoomé sur l’endroit voulu, ce n'est pas réellement un zoom c'est un agrandissement de mon symbole .

par contre sur mon application bureau, j'aimerai pouvoir le faire avec le scroll de la souris je vais ouvrir un topic la dessus en esperant qu'une solution existe pour par exemple recuperer la position du pointeur de la souris de zoomer sur cette endroit .

Merci pour ton aide

[pol2095]

As-tu tester le code plus haut ?

pour le scroll de la souris

sprite.addEventListener(MouseEvent.MOUSE_WHEEL, zoomImage);

function zoomImage(event:MouseEvent):void
{
        var zoomAmount:Number = 0.1;
 
        if( event.delta < 0 ) zoomAmount *= -1;
        var x:int = sprite.mouseX;
        var y:int = sprite.mouseY;
        sprite.scaleX += zoomAmount;
        sprite.scaleY += zoomAmount;
        sprite.x -= x * zoomAmount;
        sprite.y -= y * zoomAmount;
}

[Yakub]

Re-Bonjour Pol2095

Le zoom ne fonctionne pas si bien que ca tout compte fait, cela marche pour bien pour le dé-zoom mais pas pour le zoom
J'ai tenter de reprendre ton code en créeant dans la boucle IF un Else et inverser les signes mais ca ne prends pas en compte la position de la souris j'ai l'impression .

Tu as une idée ?

[Yakub]

bonjour Plo2095,

Super j'ai simplement rajoute une condition Else en changeant le signe la variable zoomAmount *=1 et le zoom fonction parfaitement maintenant .
Merci pour ton aide Plo2095

[Yakub]

Bonjour,

Dans la continuité de ma petit animation j'aimerai rajouter une fonction sympathique qui rendrait l'outil plus dynamique .
J'ai aujourd’hui un objet sur la scene nomme "plan" ,je peux faire un drag and drop sur cet objet et zoomer dessus donc l'objetif premier est atteint.

L'objet "plan" est compose de plusieurs sous-objet sur lequel je peux clique et en cliquant dessus un peu comme une map monde, sur laquel on pourrait zoomer, et clique sur les pays qui serait en surbrillance .
Je dispose également d'un Input box et si je tape un mot clé comme France,Espagne etc ... le pays en question va être en surbrillance ( exactement la même fonction que quand si je clique sur le pays)

J'ai réalisé cela en utilisant une boucle SWITCH-CASE,et maintenant je pense a autre chose.
Une fonction qui serait intéressant c'est d'avoir le pays en surbrillance mais aussi avec un Zoom, et les coordonnées x,y personnalise . Pour faire cela il suffit de modifier les proprietes de l'objet "plan" avec les proprietes .x, .y, ScaleY, et ScaleX pour chaque "Case" dans ma boucle SWITCH-CASE, et dans le "DEFAUT" de la boucle remetre les proprietes .x, .y, ScaleY, et ScaleX par defaut .

J'ai essayé de faire cela et ça fonctionne tres bien, en tapant par exemple France je passe de ma map a une vue zoomé, la France centré sur l'ecran et en surbrillance . Maintenant je trouve tout cela un peut statique et j'aimerai avoir un movement (.x , .y) et un zoom (.ScaleX, ScaleY) progressif, et la c'est d'un autre niveau plutot que juste changer les proprietes de l'objet plan je vais devoir passer pour une fonction je pense (avec une fonction enter-frame ).

Si vous avez une idee n'hesitez pas ? Je vous remercie )

[pol2095]

Félicitations

Regarde la classe Tween pour les effets