Forums Développement Multimédia

Aller au contenu

- - - - -

fonction drag and drop pour Android

CODE PAO DETENTE

26 réponses à ce sujet

#1 Yakub

  • Guests

Posté 25 June 2018 - 03:55 AM

Bonjour,

J'aimerai savoir si il existe une fonction similaire a StartDrag(), StopDrag() pour une application mobile ?
J'ai utilisé les Move_BEGIN , Move_END mais cela ne fonctionne pas comme je le voudrais .

J'ai trouvé pas mal de tuto pour deplacer un element mais pour mon cas cela ne fonctionne pas comme je le voudrais, car mon image est zoomable ( avec les 2 doigts ) et donc si je zoom et ensuite je souhaite me deplacer dans l'image avec les fonctions Move_BEGIN , Move_END au click cela selectionne l'image en la magnetisant en haut a gauche pour la deplacer et ce n'est pas le resultat voulu .

Quelqu'un a une solution pour palier a ce probleme svp ?

#2 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 25 June 2018 - 10:07 AM

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 .

#3 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 25 June 2018 - 12:10 PM

Hello, avec quelle techno et quel langage ?

#4 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 25 June 2018 - 13:32 PM

Bonjour Monsieur Spi,

Sous AS3 avec Air for Android .

#5 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 25 June 2018 - 13:35 PM

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

#6 pol2095

  • Guests

Posté 25 June 2018 - 14:53 PM

regarde Touch and drag

#7 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 25 June 2018 - 18:30 PM

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

#8 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1747 messages

Posté 25 June 2018 - 21:54 PM

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


#9 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 26 June 2018 - 03:39 AM

pol2095,


Merci je test ce code

#10 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 26 June 2018 - 19:06 PM

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)

  • Fichier joint  AED.fla   113.59 Ko   5 téléchargement(s)


#11 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1747 messages

Posté 27 June 2018 - 08:12 AM

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

#12 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 27 June 2018 - 17:49 PM

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 ???

#13 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 28 June 2018 - 05:55 AM

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

#14 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 28 June 2018 - 06:12 AM

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

#15 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1747 messages

Posté 28 June 2018 - 17:04 PM

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

#16 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 28 June 2018 - 17:09 PM

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 .

#17 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1747 messages

Posté 28 June 2018 - 19:47 PM

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


#18 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1747 messages

Posté 30 June 2018 - 07:47 AM

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

;-)

#19 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 01 July 2018 - 19:19 PM

Bonjour
pol2095


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

#20 Invité

  • Guests

Posté 10 July 2018 - 18:25 PM

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

#21 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 10 July 2018 - 18:26 PM

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

#22 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1747 messages

Posté 12 July 2018 - 08:20 AM

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


#23 Yakub

  • Guests

Posté 23 July 2018 - 15:52 PM

Bonjour pol2095,

Niquel pour le zoom ca fonctionne ! Merci beaucoup

#24 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 29 July 2018 - 14:30 PM

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 ?

#25 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 21 August 2018 - 06:40 AM

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

#26 Yakub

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 21 August 2018 - 07:11 AM

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 )

#27 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1747 messages

Posté 23 August 2018 - 15:52 PM

Félicitations

Regarde la classe Tween pour les effets




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP