jameslavis

Thanks Carl. That is some crazy stuff. With my level of understanding, that's likely out of my league. This is also just a prototype that will be in existence with users for a few weeks. So I'm looking to optmize the existing demo for the remainder of their user. So to remove the clunkiness, what we chatted about makes sense. With my base knowledge, this is what I'm going to try. If you can see a much simpler way, let me know, I've bolded the way I'm thinking to go about it. function mouseDownHandler(event: MouseEvent): void { TweenLite.killTweensOf(main); y1 = y2 = main.y; yOffset = this.mouseY - main.y; yOverlap = Math.max(0, main.height - bounds.height); t1 = t2 = getTimer(); main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event: MouseEvent): void { var y: Number = this.mouseY - yOffset; //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { main.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { main.y = (y + bounds.top - yOverlap) * 0.5; } else { main.y = y; } 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) { y2 = y1; t2 = t1; y1 = main.y; t1 = t; } event.updateAfterEvent(); if (main.y < 30) { main.OFbandTWO.visible = true; } else if (main.y < 20) { main.OFbandTWO.visible = true; main.OFbandTHREE.visible = true; } else if (main.y < 0) { main.OFbandTWO.visible = true; main.OFbandTHREE.visible = true; main.OFbandFOUR.visible = true; } else { main.OFbandTWO.visible = false; main.OFbandTHREE.visible = false; main.OFbandFOUR.visible = false; } } function mouseUpHandler(event: MouseEvent): void { blitMask.bitmapMode = true; main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time: Number = (getTimer() - t2) / 1000; var yVelocity: Number = (main.y - y2) / time; ThrowPropsPlugin.to(main, { throwProps: { y: { velocity: yVelocity, max: bounds.top, min: bounds.top - yOverlap, resistance: 50 } }, onUpdate: blitMask.update, ease: Strong.easeOut }, 2, 0.3, 0.5); blitMask.bitmapMode = false; }

You are dead right my friend in the pressure being put on flash. Now I have a base understanding of flash, so if I have one large movie clip and each content band is a sub movie clip, you are right that I could dynamically load the content above or below the screen (as it's the eyes of the user). So you'll have to help me understand the best way to do this. Would I make all submovieclips not visible by command until they reach a specific y coordinate? That would likely entail a function call in the mouse drag function. Or could you recommend another way? also keeping in mind if they "flick" the main moviecilp, the child movieclips would have to be added damn fast!

it's a big fella. So I'm doing this as a mockup for a long parallax style web page. So I drag and scroll an entire long panel of movieclips that are 1280x720. About 14 of those in a row. I've read with your work that you can engage and disengage the blitmask. I haven't been able to do this successfully. I'm wondering if this will help the smoothness? ideas?

hey guys, I'm not an expert coder by any means and this is for a proof of concept. I have a large movieclip called "main" that contains sub movieclips of pictures. Now the code I have put in below allows me to drag and throw the main moviecilp like a regular parallax web page. Due to the size of the photos and child movieclips it's a little choppy, only when I flick the movieclip. So can you guys see any way to clean this code up? I've looked at reducing the size of the child mcs but I still get a stutter if someone flicks it quick. Or do you wizards know any other code snippets that will do what I need in a more concise and effective manner? Listen, any help is greatly appreciately. BTW i'm using the throwprops plug in by greensock. main.CFbandEIGHTEEN.CFbandEIGHTEENbutton.addEventListener(MouseEvent.CLICK, CFbandEIGHTEENbutton); var bounds: Rectangle = new Rectangle(0, 0, 1280.15, 720); var blitMask: BlitMask = new BlitMask(main, bounds.x, bounds.y, bounds.width, bounds.height, false); blitMask.bitmapMode = false; // allows me to click on the child movieclips var t1: uint, t2: uint, y1: Number, y2: Number, yOverlap: Number, yOffset: Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event: MouseEvent): void { TweenLite.killTweensOf(main); y1 = y2 = main.y; yOffset = this.mouseY - main.y; yOverlap = Math.max(0, main.height - bounds.height); t1 = t2 = getTimer(); main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event: MouseEvent): void { var y: Number = this.mouseY - yOffset; //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { main.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { main.y = (y + bounds.top - yOverlap) * 0.5; } else { main.y = y; } 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) { y2 = y1; t2 = t1; y1 = main.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event: MouseEvent): void { main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time: Number = (getTimer() - t2) / 1000; var yVelocity: Number = (main.y - y2) / time; ThrowPropsPlugin.to(main, { throwProps: { y: { velocity: yVelocity, max: bounds.top, min: bounds.top - yOverlap, resistance: 50 } }, onUpdate: blitMask.update, ease: Strong.easeOut }, 2, 0.3, 0.5); }

or only put it here. I can't tell the difference function mouseUpHandler(event:MouseEvent):void { main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (main.y - y2) / time; ThrowPropsPlugin.to(main, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:50} }, onStart:blitMask.enableBitmapMode, onUpdate:blitMask.update, onComplete:blitMask.disableBitmapMode, ease:Strong.easeOut }, 2, 0.3, 0.5); }

hey guys, using throwprops and blitmask. using the code from the generator. since I have buttons in my movieclip, I can't have blitmask going all the time. so I can't tell if it's enabling or not. can someone with some skills check to see if I've done this correct, or if there's a better way? I've bolded the two places. I didn't use the enable/disable but true/false modes. var bounds:Rectangle = new Rectangle(0, 0, 1280.15, 720); var blitMask:BlitMask = new BlitMask(main, bounds.x, bounds.y, bounds.width, bounds.height, false); //blitMask.bitmapMode = false; var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(main); y1 = y2 = main.y; yOffset = this.mouseY - main.y; yOverlap = Math.max(0, main.height - bounds.height); t1 = t2 = getTimer(); blitMask.bitmapMode = true; main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { main.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { main.y = (y + bounds.top - yOverlap) * 0.5; } else { main.y = y; } 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) { y2 = y1; t2 = t1; y1 = main.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (main.y - y2) / time; ThrowPropsPlugin.to(main, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:50} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 2, 0.3, 0.5); blitMask.bitmapMode = false; }

I see how to do it, but it's the syntax of where. I was doing the disable in the mouseup, and the enable in the mouse down. I didn't notice a different with the blitmask.. so it's gotta be how and where I'm putting the command.

Hey folks, I have the blitmask disabled so I can have interactivity in my vertical scroller. But after scouring the forums I found a post that mentions you can turn it on and off by enabling and disabling it based upon the mouse down vs. mouse up. I'm using base code generated by a greensock post to make the vertical scroll using THROWPROPS. Can anyone help a newbie coder enable and disable blitmask as I definitely see the benefits. My code is below and the page I'm referencing is here: https://greensock.com/blitmask var bounds:Rectangle = new Rectangle(0, 0, 1280.15, 720); var blitMask:BlitMask = new BlitMask(main, bounds.x, bounds.y, bounds.width, bounds.height, false); blitMask.bitmapMode = false; var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(main); y1 = y2 = main.y; yOffset = this.mouseY - main.y; yOverlap = Math.max(0, main.height - bounds.height); t1 = t2 = getTimer(); main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { main.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { main.y = (y + bounds.top - yOverlap) * 0.5; } else { main.y = y; } 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) { y2 = y1; t2 = t1; y1 = main.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (main.y - y2) / time; ThrowPropsPlugin.to(main, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:50} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 2, 0.3, 0.5); } function OFbandSEVENsimbutton(e: MouseEvent): void { main.OFbandSEVEN.gotoAndStop(2); } function CFbandSEVENsimbutton(e: MouseEvent): void { main.CFbandSEVEN.gotoAndStop(2); }

ideas?

Hey folks, I'm doing a mockup of a webpage that you drag and have content bands that you can click. These content bands are separate movieclips and contained within a long parent movieclip called "main". I have an arrow in that I'd like to trigger one of the content bands to change to another keyframe. Seems simple enough. But I think the listener for the parent drag is overriding it's ability to change or get recognized. I went with the mouse down listener for the drag and the mouseclick for the button tap. Still doesn't kick. Logically I can't see why. Ideas? Have the areas bolded. Really simple stuff in theory. I'm pretty new in the coding world so I hope someone can point me in the right direction. 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.*; TweenPlugin.activate([ThrowPropsPlugin]); main.bandfourarrow.addEventListener(MouseEvent.CLICK, ofbandsevenbutton); var bounds:Rectangle = new Rectangle(0, 0, 1280.15, 720); var blitMask:BlitMask = new BlitMask(main, bounds.x, bounds.y, bounds.width, bounds.height, false); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(main); y1 = y2 = main.y; yOffset = this.mouseY - main.y; yOverlap = Math.max(0, main.height - bounds.height); t1 = t2 = getTimer(); main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { main.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { main.y = (y + bounds.top - yOverlap) * 0.5; } else { main.y = y; } 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) { y2 = y1; t2 = t1; y1 = main.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (main.y - y2) / time; ThrowPropsPlugin.to(main, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:50} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 2, 0.3, 0.5); } function ofbandsevenbutton(e: MouseEvent): void { main.bandfourarrow.gotoAndStop(2); }