Skip to main content
Participant
February 5, 2011
Question

Draggable and Resizable Movie Clip

  • February 5, 2011
  • 1 reply
  • 667 views

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.

This topic has been closed for replies.

1 reply

Ned Murphy
Legend
February 5, 2011

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.

VijayWAuthor
Participant
February 6, 2011

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!