clickable movieclip in movieclip ThrowProps

[wearn]

Hello,

 

Iam developing a Ipad app and i would like to use the throwprops plugin for my menu. The plugin works fine when i trow the movieclip (Y) but i can not click on the movieclips inside this movieclip.

 

I tried the search engine, and the solution thats given wont work for me. Can anybody help me out? Its for my graduation

 

Regards.

 

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.events.MouseEvent;
import flash.text.*;
import flash.display.*;

import flash.events.MouseEvent;
import flash.net.URLRequest;

// onRelease
testtest.addEventListener(MouseEvent.CLICK,onReleaseMyButton);
function onReleaseMyButton(event:MouseEvent):void {
trace("CHECK CLICK");

}


TweenPlugin.activate([ThrowPropsPlugin]);

var bounds:Rectangle = new Rectangle(0, 0, 768, 768);
graphics.beginFill(0x888888, 0);
graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
graphics.endFill();

//here is where I reference the MovieClip.
var mc:Sprite = myMovieClip;



myMovieClip.cacheAsBitmap = true;
myMovieClip.cacheAsBitmapMatrix = new Matrix();

myMovieClip.werner.text = "bureaustoelen";
myMovieClip.werner2.text = "web 2 print";


var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, true);

var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number;

blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
TweenLite.killTweensOf(mc);
//x1 = x2 = mc.x;
//xOffset = this.mouseX - mc.x;
//xOverlap = Math.max(0, mc.width - bounds.width);
y1 = y2 = mc.y;
yOffset = this.mouseY - mc.y;
yOverlap = Math.max(0, mc.height - bounds.height);
t1 = t2 = getTimer();
mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);


}

function mouseMoveHandler(event:MouseEvent):void {
var y:Number = this.mouseY - yOffset;
//if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
if (y > bounds.top) {
mc.y = (y + bounds.top) * 0.5;
} else if (y < bounds.top - yOverlap) {
mc.y = (y + bounds.top - yOverlap) * 0.5;
} else {
mc.y = y;
}
var x:Number = this.mouseX - xOffset;
if (x > bounds.left) {
mc.x = (x + bounds.left) * 0.5;
} else if (x < bounds.left - xOverlap) {
mc.x = (x + bounds.left - xOverlap) * 0.5;
} else {
mc.x = x;
}
blitMask.update();
var t:uint = getTimer();
//if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
if (t - t2 > 50) {
x2 = x1;
x1 = mc.x;
y2 = y1;
t2 = t1;
y1 = mc.y;
t1 = t;
}
event.updateAfterEvent();
}

function mouseUpHandler(event:MouseEvent):void {
mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
var time:Number = (getTimer() - t2) / 1000;
var xVelocity:Number = (mc.x - x2) / time;
var yVelocity:Number = (mc.y - y2) / time;
ThrowPropsPlugin.to(mc, {throwProps:{
y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
}, onUpdate:blitMask.update, ease:Strong.easeOut
}, 10, 0.3, 1);
}

[GreenSock]

I believe this has been answered here:

http://forums.greensock.com/topic/6661-throwprops-minor-question/

 

This may be helpful too:

http://forums.greensock.com/topic/6080-solved-click-or-touch-through-blitmask-to-movieclip/

 

Basically, you need to keep in mind that when BlitMask's bitmapMode is true (the default), you're only seeing a Bitmap version of your content and it is not interactive (hence the big performance gain), but if you need interactivity (and are willing to negate the performance gains of using a Bitmap), just set bitmapMode to false.

 

If you want to do that right after the tween is done, you can set the tween's onComplete to call the BlitMask's disableBitmapMode() method. It's there for convenience.

 

Does that help?

[wearn]

Thank you for the reply. My skills are not good enough to implement the code. Where do i have to put the blitMask.bitmapMode = false; code?...i can not find the oncomplete call

 

Regards

[GreenSock]

I assume you meant something like this:

 

// onRelease
testtest.addEventListener(MouseEvent.CLICK, onReleaseMyButton);
function onReleaseMyButton(event:MouseEvent):void {
trace("CHECK CLICK");
}

TweenPlugin.activate([ThrowPropsPlugin]);

var bounds:Rectangle = new Rectangle(0,0,768,768);
graphics.beginFill(0x888888, 0);
graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
graphics.endFill();

//here is where I reference the MovieClip.;
var mc:Sprite = myMovieClip;

mc.cacheAsBitmap = true;
mc.cacheAsBitmapMatrix = new Matrix();

mc.werner.text = "bureaustoelen";
mc.werner2.text = "web 2 print";


var blitMask:BlitMask = new BlitMask(mc,bounds.x,bounds.y,bounds.width,bounds.height,true);
blitMask.bitmapMode = false;

var t1:uint,t2:uint,y1:Number,y2:Number,x1:Number,x2:Number,xOverlap:Number,xOffset:Number,yOverlap:Number,yOffset:Number;

blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
TweenLite.killTweensOf(mc);
//x1 = x2 = mc.x;
//xOffset = this.mouseX - mc.x;
//xOverlap = Math.max(0, mc.width - bounds.width);
y1 = y2 = mc.y;
yOffset = this.mouseY - mc.y;
yOverlap = Math.max(0,mc.height - bounds.height);
t1 = t2 = getTimer();
mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

function mouseMoveHandler(event:MouseEvent):void {
var y:Number = this.mouseY - yOffset;
//if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
if (y > bounds.top)	{
	mc.y = (y + bounds.top) * 0.5;
} else if (y < bounds.top - yOverlap) {
	mc.y = (y + bounds.top - yOverlap) * 0.5;
} else {
	mc.y = y;
}
var x:Number = this.mouseX - xOffset;
if (x > bounds.left) {
	mc.x = (x + bounds.left) * 0.5;
} else if (x < bounds.left - xOverlap) {
	mc.x = (x + bounds.left - xOverlap) * 0.5;
} else {
	mc.x = x;
}
blitMask.bitmapMode = true;
blitMask.update();
var t:uint = getTimer();
//if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
if (t - t2 > 50) {
	x2 = x1;
	x1 = mc.x;
	y2 = y1;
	t2 = t1;
	y1 = mc.y;
	t1 = t;
}
event.updateAfterEvent();
}

function mouseUpHandler(event:MouseEvent):void {
mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
var time:Number = (getTimer() - t2) / 1000;
var xVelocity:Number = (mc.x - x2) / time;
var yVelocity:Number = (mc.y - y2) / time;
ThrowPropsPlugin.to(mc, {throwProps:{
		y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
		x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
	}, onUpdate:blitMask.update, onComplete:blitMask.disableBitmapMode, ease:Strong.easeOut
}, 10, 0.3, 1);
}

[wearn]

Hello Jack, i am having a lot of problems with the code for my app. This whole day i worked for a solution to get this code working, but my skills are to bad. Can you please help me out? I have to get it work at 10 januari for my graduation:).

[GreenSock]

If you have a very specific question about a GreenSock tool, sure, we'd be happy to help. We don't generally provide free consulting services for troubleshooting your project's code, though. We just don't have the resources to offer that to everyone who asks. We're SUPER busy improving the tools, answering questions, creating learning resources, etc. Maybe you could hire a professional developer to help you out?

[wearn]

Hello Jack, thank you for your answer. I am having a problem with the trowprobs plugin and the solution to click / scroll in a list. I have implemented the solution in this topic: http://forums.greensock.com/topic/6675-click-event-and-scroll-event-conflict/

 

But i can not fix the problem to realy hit the button. Hopefully you can help me out. I would like a trace "hit button 1" when i click on the first item in the list..and so on..

 

This is the .fla file. http://www.thuis-bios.nl/ipadapp/menu_app.zip

 

Hopefully it is something small and anyone can help me out:)

 

Regards,

 

Werner

[Carl]

Hi Wearn,

 

Please see the attached CS5 fla and swf.

When you click on a button you will get a trace of the button name.

 

Also, in order to enable interactivity on the BlitMask's target the blitMask needs to have its bitmapMode set to false. When bitmapMode is false you do not get the speed benefits of BlitMask which are important when the BlitMask's target is being thrown.

 

I put in a few extra hooks so that the bitmapMode is true when the throw happens (for speed) and false when it is appropriate to capture clicks on the buttons.

 

bitmapMode will be set to false when the tween completes and also when the user does a MOUSE_DOWN while the object is being thrown.

 

In the top right-hand corner of the swf you will see a textfield that displays the current bitmapMode. You can remove that by removing the text field on the stage AND the ActionScript in frame 1 of the maintimeline that looks like this

 

 

addEventListener(Event.ENTER_FRAME, enterFrameHandler)

function enterFrameHandler(e:Event):void{
output_txt.text = "bitmapMode = " + paneeltje.blitMask.bitmapMode;
}

 

Enjoy your graduation!

menu_app_revised.zip