2 Replies Latest reply on Feb 5, 2011 11:22 PM by VijayW

    Draggable and Resizable Movie Clip

    VijayW

      I have a movieClip (timeline_mc) which is behind a mask and is scrollable (in Left/Right dir only) using two buttons.

      I dynamically add movieClips (MyEvent_mc) on timeline_mc (using attachMovie) so that the added clips moves with timeline_mc.

      I allowed dragging the child movie clips using startDrag() on timeline_mc only.

      I am showing a tooltip (another movieclip with dynamic text - showing current position of
      MyEvent_mc on timeline_mc) on rollOver of child movieclips.

      ToolTips are visible during drag and i reposition them thru tooltip.onMouseMove

      Everything's working fine and neat (upto here).

      Now, I need the child moviclips (
      MyEvent_mc) to be resizable (ony widthwise).

      I managed to display a small black box (Dragger_mc) on right border of child movieClip as well (used same RollOver function as for tooltip)


      Now, I need to apply startDrag on the black box (Dragger_mc) and with its drag, need to resize (
      MyEvent_mc) accordingly.


      Question is : How?

      When I take my mouse over the Dragger_mc, both, the tooltip_mc & dragger_mc, starts flickering.

       

      Note: I see a similar question was asked at http://forums.adobe.com/message/514740, but the code suggested is not visible.


      Thanks.

        • 1. Re: Draggable and Resizable Movie Clip
          Ned Murphy Adobe Community Professional & MVP

          It sounds like your rollover is being rolled off as you try to get to the dragger_mc.  If you made the dragger_mc a sibling of the event_mc, meaning they both live inside a parent mc that has the rollover code, then you should be able to move from the event to the dragger as long as there is no gap between them.

          • 2. Re: Draggable and Resizable Movie Clip
            VijayW Level 1

            Ned, thanks for the reply.

             

            I guess I forgot to mention the placement/layers of movieclips.

             

            I've only one keyframe with 4 layers. Topmost is where all action code is written.

             

            Navigation buttons (Left/right) are placed on second - these are movie clips.

             

            Third is Mask. There's no movie clip - just shape.

             

            Last is where timeline_mc is placed.

             

            I call a function from Javascript to create Event_mc on to timeline_mc.

             

            On RollOver of Event_mc, the Tooltip_mc & Dragger_mc created on _root

             

            here is this code:

            //this gets called for each dynamic Event_mc created (passed as tagTarget)
            function setToolTipAndDragger(tagTarget:MovieClip, id:String):Void
            {
                //Handle the rollOver event
                tagTarget.onRollOver = function() {
                    trace("tagTarget.onRollOver");
                    tagTarget.useHandCursor = false; //disable hand cursor
                    
                    //add dragger
                    myDragger = _root.createEmptyMovieClip("myDragger", 12);
                    //attach the Dragger from the library
                    myDragger.attachMovie("Dragger", "Dragger", myDragger._parent.getNextHighestDepth());
                    var dObj = getDraggerXY(id);//get correct X,Y each time
                    myDragger._x = dObj.x;
                    myDragger._y = dObj.y;        
                    
                    //create a movieclip to hold the tooltip MC
                    myTip= _root.createEmptyMovieClip("myTip", 10);
                    //attach the tooltip MC from the library
                    myTip.attachMovie("toolTip_MC", "toolTip_MC", 10);
                    var obj = getTooltipXY(id);//get correct X,Y each time
                    myTip._x = obj.x;
                    myTip._y = obj.y;
                    //position the tooltip and dragger on mouse move
                    myTip.onMouseMove = function() {
                        var obj = getTooltipXY(id);
                        myTip._x = obj.x;
                        myTip._y = obj.y;            
                        
                        var dObj = getDraggerXY(id);
                        myDragger._x = dObj.x;
                        myDragger._y = dObj.y;        
                    }
                    beingResized = false;
                    resizingId = id;
                    trace("resizingId set: " + resizingId);
                    myDragger.onMouseDown = startResizing;
                    myDragger.onMouseUp = stopResizing;        
                    myDragger.onEnterFrame = checkAndResize;
                }
                //remove the tool tip
                tagTarget.onRollOut = function() {
                    trace("tagTarget.onRollOut");
                    delete myTip.onMouseMove;
                    removeMovieClip(myTip);
                    delete myDragger.onMouseDown;
                    delete myDragger.onMouseUp;        
                    removeMovieClip(myDragger);
                    beingResized = false;
                    resizingId = "";
                }
            }
            function startResizing() {
                 if (this.hitTest(_xmouse,_ymouse)) {
                      var resizingEvent:MovieClip = mc_timeline[EVENT_PREFIX + resizingId];
                      resizingEvent.swapDepths(resizingEvent._parent.getNextHighestDepth());
                      trace("resize start: " + this._x + " , " + resizingId + ", " + resizingEvent._x);
                      beingResized = true;
                      delete resizingEvent.onPress;                //allow dragging the dragger only in horiztly
                      this.startDrag("false",resizingEvent._x,this._y,Math.min(btnRight._x, TIMELINE_LENGTH),this._y);
                 }
            }
            function checkAndResize() 
            {
                 if(beingResized) 
                 {
                            //Am still on my way to write this code
                           mc_timeline[EVENT_PREFIX + resizingId]._width += 1;
                 }
            }
            
            function stopResizing() {
                 if(beingResized) {
                      this.stopDrag();
                      trace("resize stop");     
                 }
                 mc_timeline[EVENT_PREFIX + resizingId].onPress = startDragging;//not shown here...
                 beingResized = false;
                 resizingId = "";
            }
            
            

             

             

             

            the problem with above code is "sometimes" the startResizing function doesnt get resizingId & in turn resizingEvent, intermittently (mostly observed when, the Event_Mc is dragged and dropped and then tried to resize)

             

            I am sure all this bunch can be re-written in a lean-n-thin way, but considering my first stint with Flash+AS, for only last 3-4 days, picking 'ideas' from forums, expecting experts to guide me with this.

             

            All suggestions, ideas are welcome!