JFP

Hi there, oh. Thank you both, I already looked around.. couldnt find any as cool as what I see you guys doing. Thanks for your thoughts anyhow.

Hi there! Im trying to use the gsap-pixi colormatrix filter plugin on images that are mapped to geometry in my three.js module, but I dont know exactly how to tell pixi that its talking to a three.js image map, or if that is even possible. Might help to show how Im loading the images onto the geometry in three const vidTxt1 = new THREE.TextureLoader().load( 'txtrs/welcome.png' ); // load png, have three recognize it as 'vidTxt1' var plane2 = new THREE.Mesh( // makes a new mesh called plane2 new THREE.PlaneGeometry(2.08, 1.55, 2.2), // dimensions of the new mesh plane new THREE.MeshBasicMaterial({ // new material called vidTxt1 hereby added to plane2 map: vidTxt1 }) ); plane2.position.set(0.1, 1, 0); // position plane2 in space scene.add(plano2); // add plane2 to scene // alrighty.. heres where I'm lost? // I would have thought to proceed like this: var image1 = new PIXI.Sprite.from( vidTxt1 ); gsap.timeline({ repeat: -1 }) .to(image1, { pixi: { colorize: "red", colorizeAmount: 1 } }) .to(image1, { pixi: { hue: 180 } }) .to(image1, { pixi: { saturation: 0 } }) // but the console tells me Uncaught TypeError: PIXI.Sprite is undefined // Any idea how I could tell pixi that I want it to mess with vidTxt1 ? Your insights would be really helpful. :)

Yeah that works great, thanks a ton. Here's what happened with that help. Probably not good on mobile - freezes my browser up there. But desktop is fine. https://www.jopl.de/underConstruction/11b.html Next I'll try to figure out how to make this kind of thing interactive so you can grab stuff and spin it. I should add whats slowing it down is most probably my clumsy use of three's post processing, not gsap.

Cool I'll check that out! Question, could I technically write a function into any gsap timeline item, a function that manipulates the values of the godrays over time, nested in that timeline until the next timeline item gets called and I can manipulate them back to what they were before? Like I dunno, animate a change of the colors of the sun and the godrays to different values and then back again?

Alright well it needs tweaking, wouldnt recommend this on mobile right now cuz theres too much goin on for smoothness unless your phone is superpowerful I guess, but bam! Woohoo https://www.jopl.de/underConstruction/4d.html Some garbage collection issues maybe, or just too much going on for browsers runtime to handle when the text gets too long, probably tweak some 3d parameters or take them out completely, or just generally make it leaner it but it works! Chrome runs it smoothest on desktop. Ohoho.. and it crashed my Chrome after about ten minutes. Those godray shaders and the fact that theres bevels on the text, I can give it less curvature and a lot of those little blue ball flying thingies and other stuff can still be reduced in complexity for smoother performance. Thanks a lot for your help! p.s. I referr to you as "the dudes from greensock" this file doesnt mean anything and is intended purely to make itself happen. No other reason. This is just the first things that came into my head. If you find it uncool then I can change it. Whatever. I ...correct me if Im wrong but isnt it kind of a big deal that you guys can give three.js a timeline? Opens up whole other ways of using three in my mind. I don't think it had that capacity before. Least I never saw it, but Ive been totally out of the loop for a long time.

Okay that's awesome thanks so much, but it's gonna be a bit more complicated because it turns out that file I got the createText and refreshText functions from loads fonts a bit differently than the one I was using as a reference originally and that seems to have a big impact, so I need to recalibrate a bunch of stuff. By the way the new one can load ttf files directly, apparently. So there's stuff that needs stripping away and stuff that needs adding. There was some vars declared earlier on in the second that are neccessary too. But I'm on it. And I know a lot more now with your help. I'll let you know when something meaningful happens.

Well I guess .. roughly speaking I plug this refreshText function into the update function to remove the current message text function refreshText() { group.remove( textMesh1 ); if ( ! text ) return; createText(); } That then calls createText from onStart in the next timeline item .. ish.. but so how do I jump to the next timeline item.. or wait I guess that happens automatically? So I guess its either that or a stack of onCompletes that destroyText and then reference a bunch of onStarts that createText. And I guess once I figure out how to do it with whole words then I can start to get into substrings to do it character by character. function createText() { textGeo = new THREE.TextGeometry( text, { font: font, size: size, height: height, curveSegments: curveSegments, bevelThickness: bevelThickness, bevelSize: bevelSize, bevelEnabled: true } ); textGeo.computeBoundingBox(); textGeo.computeVertexNormals(); const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x ); textMesh1 = new THREE.Mesh( textGeo, material ); textMesh1.position.x = centerOffset; textMesh1.position.y = hover; textMesh1.position.z = 0; textMesh1.rotation.x = 0; textMesh1.rotation.y = Math.PI * 2; group.add( textMesh1 ); } Least... thats what the plan might be very very roughly speaking... on paper. And no plan ever survives first contact with the enemy. Cuz how easing fits in to all that or the correct syntax is pfffsh way beyond me right now. So but whatever, I guess thats the broad strategy. Ish.

Alright found it, maybe this can help. In this example file you can change the text by typing on the keyboard https://threejs.org/examples/#webgl_loader_ttf Theres this stuff in the events section of the code, I know this isn't preformatted text, but maybe some method or so can be taken from this and used somehow? Seems like they're talking to textMeshes and text.substrings // EVENTS container.style.touchAction = 'none'; container.addEventListener( 'pointerdown', onPointerDown ); document.addEventListener( 'keypress', onDocumentKeyPress ); document.addEventListener( 'keydown', onDocumentKeyDown ); } function onDocumentKeyDown( event ) { if ( firstLetter ) { firstLetter = false; text = ''; } const keyCode = event.keyCode; // backspace if ( keyCode === 8 ) { event.preventDefault(); text = text.substring( 0, text.length - 1 ); refreshText(); return false; } } function onDocumentKeyPress( event ) { const keyCode = event.which; // backspace if ( keyCode === 8 ) { event.preventDefault(); } else { const ch = String.fromCharCode( keyCode ); text += ch; refreshText(); } } function createText() { textGeo = new THREE.TextGeometry( text, { font: font, size: size, height: height, curveSegments: curveSegments, bevelThickness: bevelThickness, bevelSize: bevelSize, bevelEnabled: true } ); textGeo.computeBoundingBox(); textGeo.computeVertexNormals(); const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x ); textMesh1 = new THREE.Mesh( textGeo, material ); textMesh1.position.x = centerOffset; textMesh1.position.y = hover; textMesh1.position.z = 0; textMesh1.rotation.x = 0; textMesh1.rotation.y = Math.PI * 2; group.add( textMesh1 ); if ( mirror ) { textMesh2 = new THREE.Mesh( textGeo, material ); textMesh2.position.x = centerOffset; textMesh2.position.y = - hover; textMesh2.position.z = height; textMesh2.rotation.x = Math.PI; textMesh2.rotation.y = Math.PI * 2; group.add( textMesh2 ); } } function refreshText() { group.remove( textMesh1 ); if ( mirror ) group.remove( textMesh2 ); if ( ! text ) return; createText(); } Yeah probably not. I dunno. If I knew how to setTimeout in the right place.. I have no idea. Maybe a timer would be a better tool to look at. Your kung fu is way beyond mine dude, Im not aware of timelines in three.js. I mean I see them in fbx animations and I know those files use timer functions. Ill take a look at those but I think that stuff is only used to speed up or slow prebaked 3D animations down. Three.js seems more like a bunch of constants than variables, but .. you never know, I havent been messing with this stuff for long. Ill take a look.

Well I just type it in the VB Studio editor and then upload it. Dunno how that works on the fly.. I know that you can add a timer function and.. Hmmm... actually There is one example file in the three.js docs somewhere where you can type in a different word and it appears in 3d text, I'll go look for / at it and get back to you in a sec

Hi, well after you set up your scene and stuff like camera and lighting, it goes like // load font const loader = new THREE.FontLoader(); loader.load('fonts/helvetiker_regular.typeface.json', function (font) { // set up color const color = new THREE.Color(0x006699); // set up material const matDark = new THREE.MeshBasicMaterial( { color: color, side: THREE.DoubleSide } ); // message (text content) const message = " Three.js\n BasicText."; // generate fontshapes const shapes = font.generateShapes( message, 20 ); const geometry = new THREE.ShapeGeometry(shapes); // so the camera stays focused on the middle of the text geometry.computeBoundingBox(); const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x ); geometry.translate( xMid, 0, 0 ); // marry geometry and material, position & add to scene const text = new THREE.Mesh( geometry, matDark ); text.position.z = - 150; scene.add(text); }); //end Textload function So maybe this isnt normal text, maybe its some kind of svg abomination (fonts been converted to json before loaded) and thus gsap doesnt see it? No idea how the json gets interpreted as the right characters or all that kind of thing. When I change the const message into const message="blablabla"; that works fine when I upload and look at it. Oh and Im not using json text because of those legal issues I mentioned earlier, heh, its because thats just the way three.js seems to interpret text far as I know... which, um.. isnt superfar. That const shapes = font.generateShapes( message, 20 ); thing - 20 is the size of the text, message is the words you type into the message constant. You could just as well use vars all over that whole thing and it wouldnt make a difference.

Alright I will, thanks. Im still getting errors here, it cant set the property "text" on the string " stuff ". Ive tried a bunch of stuff, nothing I know seems to work. Both the single use one I uncommented here and the timeline approach throw the same error. var message = "stuff"; // text animation var proxy = document.createElement("div"); proxy.innerText = message; // gsap.to(proxy, 2, { text: "beep", delay: 2, onUpdate: function () { // message.text = proxy.innerText; // } // }); var mw = gsap.timeline({ onUpdate: updateText, defaults: { ease: "power4.inOut", duration: 1 } }); mw.to(proxy, { text: "foo" }); .to(proxy, { text: "bar" }) .to(proxy, { text: "baz" }); function updateText() { message = proxy.innerText; } heres the whole error if it helps 4c.html:104 Uncaught TypeError: Cannot create property 'text' on string 'stuff' at Tween.onUpdate [as _onUpdate] (4c.html:104) at _callback (gsap-core.js?module:938) at Tween.render (gsap-core.js?module:3172) at _lazyRender (gsap-core.js?module:187) at _lazySafeRender (gsap-core.js?module:193) at Array.updateRoot (gsap-core.js?module:2564) at _tick (gsap-core.js?module:1252) I um.. dont mean to bug you with this stuff and Im thankful for your help, defintely renewing my shocking membership if I can get three to work with gsap if that means anything to you guys

Yeah that url's been doctored, its not actually "url" I just.. I dunno I didnt put in the full path here. But I get the same thing when I do use the right url. Okay so its not a problem to use three.js locally and gsap over cdn, okay. Justtried and no errors, thank you. Incidentally, using gsap over cdn .. yeah, see, I live in Germany, and they changed the laws and theres people getting sued by these crazy toxic lawyers for pulling google fonts from google servers instead of pulling fonts locally off their own servers. Its about some kind of tracking issues. So my quesiton there is, crazy as it sounds, does gsap do any location tracking or store any kind of user data when pulled off a cdn?

Hmm, I tried that, as a result it wont load any of the three.js files either. I put the gsap folder inside the three folder - could that be whats causing it? GEThttps://www.url/jsm/gsap/src/gsap.js[HTTP/2 404 Not Found 85ms] Loading module from “https://www.url/jsm/gsap/src/gsap.js” was blocked because of a disallowed MIME type (“text/html”). 4c.html Loading failed for the module with source “https://www.url/jsm/gsap/src/gsap.js”. 4c.html:13:1 Loading failed for the module with source “https://www.url/jsm/build/three.module.js”. 4c.html:13:1 Loading failed for the module with source “https://www.url/jsm/libs/stats.module.js”. 4c.html:13:1 Loading failed for the module with source “https://www.url/jsm/controls/OrbitControls.js”. 4c.html:13:1 Loading failed for the module with source “https://www.url/jsm/shaders/GodRaysShader.js”. 4c.html:13:1 Loading failed for the module with source “https://www.url/jsm/loaders/FBXLoader.js”. 4c.html:13:1 Loading failed for the module with source “https://www.url/jsm/gsap/src/TextPlugin.js”. To avoid misunderstandings this is what my import part looks like, its at the top of the file: <script type="module"> import * as THREE from 'https://www.url/jsm/build/three.module.js'; import Stats from 'https://www.url/jsm/libs/stats.module.js'; import { OrbitControls } from 'https://www.url/jsm/controls/OrbitControls.js'; import { GodRaysFakeSunShader, GodRaysDepthMaskShader, GodRaysCombineShader, GodRaysGenerateShader } from 'https://www.url/jsm/shaders/GodRaysShader.js'; import { FBXLoader } from 'https://www.url/jsm/loaders/FBXLoader.js'; import { gsap } from 'https://www.url/jsm/gsap/src/gsap.js'; import { TextPlugin } from 'https://www.url/jsm/gsap/src/TextPlugin.js'; gsap.registerPlugin(TextPlugin); console.log('imported all'); I dont exactly get what you meant when you said "Make sure those files are the modules files. You should exports at the bottom of the file." ?

Hi. One little thing about importing to module, Im goin import * as TextPlugin from 'https://www.url/jsm/gsap/src/TextPlugin.js'; import * as gsap from 'https://www.url/jsm/gsap/src/index.js'; (also tried to import all.js as gsap, then tried different combinations of importing from umd or esm, but in the above code it seems like its importing stuff but inspector throws "gsap.to is not a function" { which was "Uncaught TypeError: setting getter-only property "window"" before when I was importing from umd}). So.. like, where are timelines defined in the source files? I used to have to import timelineLite.as or timelineMax to get em workin, but I don't know what js file contains/defines them now? Or does TextPlugin already have that in it and Im doing something else wrong? Wait, gsap.to isnt timeline, its core, no? Tried gsap-core.js.

See now that sounds awesome. Im gonna try that and get back to you. It sort of worked yesterday but I didnt know to call the target 'proxy'. That's awesome dude, thank you. You guys are some of the coolest people on the web, Im not even kidding.

Oh, yeah it did work a little. I was trying to use a gsap timeline and the TextPlugin to animate that bright blue text beneath the 3D logo with the purple godrays on the link I just added, something like this (I know my syntax is rough here, just trying to get it to work inside three.js though - I was having trouble finding out how to reference the selector / target because the var doesn't have an id or a classname in my js file. In my three.js file, its just called 'message', it can be a const or a var but I cant seem to get the gsap timeline to recognize it so that I can animate whatever words I want to write into it using the TextPlugin. That's what I was trying to ask for advice on yesterday. var mw = new gsap.timeline({ repeat:-1 }); mw.add(TweenMax.to(message, 1, { alpha: '1', text: 'Asset Creation', ease: 'power4.inOut', delay: '3' })); mw.add(TweenMax.to(message, 1, { text: '2D Animation', ease: 'power4.inOut', delay: '3' })); mw.add(TweenMax.to(message, 1, { text: '3D Animation', ease: 'power4.inOut', delay: '3' })); mw.add(TweenMax.to(message, 1, { text: 'Exhibit Concepts', ease: 'power4.inOut', delay: '3' })); mw.add(TweenMax.to(message, 1, { text: 'Final Cut', ease: 'power4.inOut', delay: '3' })); mw.add(TweenMax.to(message, 1, { text: 'Video Editing', ease: 'power4.inOut', delay: '3' })); mw.add(TweenMax.to(message, 1, { text: 'Voice-over Narration', ease: 'power4.inOut', delay: '3' })); mw.add(TweenMax.to(message, 1, { text: 'Voice-over Narration', ease: 'power4.inOut', alpha: '0', delay: '3' }));

Oh man, seems like no matter how I try to get three.js imported (npm or script tags) on a gsap template or other codepen it throws between 68 and 72 error messages even when the page is blank over there. The cross origin policies arent letting me do anything with three.js on codepen. Would it help to link to a demo on my own server instead? But I mean that won't be editable either. So for what its worth, here's how it looks: https://www.jopl.de/underConstruction/4.html And here's the code part that deals with the text const tloader = new THREE.FontLoader(); tloader.load('url/jsm/fonts/helvetiker_regular.typeface.json', function (font) { const color = 0xffffff; const matDark = new THREE.LineBasicMaterial({ color: 0x006699, side: THREE.DoubleSide }); // Your help yesterday var message = "gsap text test"; var proxy = document.createElement("div"); proxy.innerText = "gsap animated text test"; gsap.to(proxy, { text: "beep", delay: 2, onUpdate: function () { // it didnt know what to do with object.text object.text = proxy.innerText; } }); // My attempts from yesterday w/ old syntax before you helped var message = 'gsap TextPlugin Text'; var mw = new TimelineLite({ repeat:-1}); mw.add(TweenMax.to(message, 1, { text:'boop'})); mw.add(TweenMax.to(message, 1,{ text: 'blort' })); // Bounding Box const shapes = font.generateShapes(message, 100); const geometry = new THREE.ShapeGeometry(shapes); geometry.computeBoundingBox(); const xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x); geometry.translate(xMid, 0, 0); // position, scale and add text const text = new THREE.Mesh(geometry, matDark); text.position.set(+0, -200, -80); text.scale.multiplyScalar(0.65); scene.add(text); }); Obviously help would be awesome but under the circumstances I understand completely if you're like.. dude, get a codepen workin. I tried for like an hour without a greensock template and an hour with one and couldn't get the inspector to stop throwing three.js cross origin redness at me. Did it just like in the video you guys have but it was like nope. I stopped being interested in the web after flash bowed out and it started to get boring in my opinion so I went and learned 3D animation instead but now Im back because Im starting to see new possibilities that I didnt see five years ago. Might have missed a lot of stuff. Like erm how to make a codepen that defies cross origin requests.. fr'instance. Much to my current chagrine.

Dear Jack, thank you very much for replying. It throws errors but I'm sure that's because I'm doing something wrong. I've been going at this and a different thing since yesterday afternoon and now it's well into the next morning, and my head is swimming. I don't have the wherewithall to make a codepen right now, I need to catch a quick bunch of z's. I hope that's okay, sorry to wimp out like this right now. If it's okay I'll come back later with one, I'm really done.

Hello there, Im trying out three.js combined with the gsap TextPlugin. Ive got a variable called message that Im trying to change the text of. I cant seem to figure out how to talk to a gsap selector / target when it isnt an html object with an id or a class. Would that even work? Your help would be really appreciated. const tloader = new THREE.FontLoader(); tloader.load('url_to_fonts/helvetiker_regular.typeface.json', function (font) { const color = 0xffffff; const matDark = new THREE.LineBasicMaterial({ color: 0x006699, side: THREE.DoubleSide }); var select = e => document.querySelector(e); var message = select('message'); var message = 'gsap animated text test'; var mw = new TimelineLite({ repeat: -1}); mw.add(TweenMax.to(message, 1, { text: 'boop' })); mw.add(TweenMax.to(message, 1, { text: 'blort' })); const shapes = font.generateShapes(message, 100); const geometry = new THREE.ShapeGeometry(shapes); geometry.computeBoundingBox(); const xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x); geometry.translate(xMid, 0, 0); // make shape ( N.B. edge view not visible ) const text = new THREE.Mesh(geometry, matDark); text.position.set(+0, -200, -80); text.scale.multiplyScalar(0.65); scene.add(text); });

It did, I think. I just called super.dispose(); before the loader.dispose(true); Seems like you disarmed the timebomb, thanks

Hi there, there's a weird function I don't quite understand the purpose of in a script I hired somebody to write. Im hunting for a bug that causes the application Im working on to crash sometimes. I'm wondering if it's the following: override public function dispose():void { trace("dispose" + this.name); thumbholder.removeEventListener(MouseEvent.CLICK, onThumbClick); infoWindow.closer.removeEventListener(MouseEvent.CLICK, onCloseClick); langChooser.removeEventListener(Event.CHANGE, onLangChange); } Would the script above have any influence on thie following: private function closeInfo():void { if (loader != null) { loader.dispose(true); loader = null; } TweenMax.to(infoWindow, 1, {autoAlpha:0}); infoWindow.whiteout.gotoAndStop(1); langChooser.visible = false; } Because there's also a bunch of images and mp4's that get loaded - would the overriding of the dispose function leave those videos and images in the memory, bloating it until the application crashes due to overfilling the memory? I mean do just the eventListeners get removed this way or does overriding dispose() this way still permit the command to get rid of anything else in the loader? Any help would be much appreciated. edit: Also, nothing gets traced out in the debugger so trace("dispose" + this.name); seems odd to me as well..

Oh my God thanks so much for answering, I'd just updated it and thought I'd gotten it figured down to something fishy in the constructor arguments!

Dear someone, Ive been trying to solve this for literally 10 hours. Ive tried having my timeline and restart method in a function and to my knowledge, exhausted all existing snippets & videos on the internet. This makes the timeline jump straight to the end in bizarre bursts, play the video, then restart for me, but when it restarts the video no longer plays.. (I did include restart instead of play because Im trying to get a timeline to loop.) Ive gotten every conceivable outcome except the one I am trying to achieve and can no longer think about the problem clearly. Any help would be wildly appreciated, here's what I've got - bear in mind this is probably jumbled gibberish by now.. this is simply the latest version of the code which Ive tried to get as close to the original but seems to be bringing me further from the goal - at this point it just sits there laughing at me Ok now Ive ctrl+z'd all the way back to when it was working more closely.. seems to do what it should... one time import com.greensock.*; import com.greensock.easing.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.VideoLoader; import com.greensock.loading.LoaderMax; TweenMax.to(img7,0,{alpha:0}); TweenMax.to(img8,0,{alpha:0}); TweenMax.to(img9,0,{alpha:0}); /* var video:VideoLoader = new VideoLoader("OneWeb1.mp4", {onComplete:electricSats, container:videoHolder, width:879, height:437, scaleMode:"stretch", crop:true, autoPlay:false}); video.addEventListener(VideoLoader.VIDEO_COMPLETE, onComplete);*/ //video.pause(); var myTimeline:TimelineMax = new TimelineMax() trace("Starting timeline"); myTimeline.to(img7, 0, {alpha:0}) //.addLabel("spinn") .to(videoHolder, 0 , {alpha:0}) .to(bubi, 0, {x:383.80}) .to(img7, 1, {alpha:1}, {onComplete:trace("img1")}) .to(img7, 1, {alpha:0, delay:0}) .to(img8, 0, {alpha:0}) .to(bubi, 0, {x:427.80}) .to(img8, 1, {alpha:1}, trace("img2")) .to(img8, 1, {alpha:0, delay:0}) .to(img9, 0, {alpha:0}) .to(bubi, 0, {x:467.80}) .to(img9, 1, {alpha:1}, trace("img3")) .to(img9, 1, {alpha:0, delay:0}) .to(bubi, 0, {x:511.80}) .to(videoHolder, 1 , {alpha:1}, trace("videoHolder alpha 1")) var video:VideoLoader = new VideoLoader("OneWeb1.mp4", {container:videoHolder, width:879, height:437, scaleMode:"stretch", crop:true, autoPlay:false}); video.addEventListener(VideoLoader.VIDEO_COMPLETE, onComplete); video.load(); myTimeline.addCallback(video.playVideo, 7); //video.gotoVideoTime(0, true); //video.gotoVideoTime(0, true, true); //addChild(VideoLoader.content); //video.gotoVideoTime(0); // myTimeline.insert(TweenMax.to(video, 0, )); //myTimeline.gotoVideoTime(0); //timeline.pause(); /* function playVideo(e:LoaderEvent):void{ VideoLoader.video.gotoVideoTime(0.1, true); } */ // function rewindAndPause(evt:Event=null):void{ trace("timeLine restart1"); video.pauseVideo(); //rewind the video so that when we fade it in again later, it's already displaying the first frame and there's no delay skipping to it. ; video.gotoVideoTime(0); TweenMax.to(videoHolder, 1, {alpha:0, onComplete:restartLine, delay:1}); }; function onComplete(e:LoaderEvent):void{ trace("video done playing"); video.removeEventListener(VideoLoader.VIDEO_COMPLETE, onComplete); trace("video done playing2"); TweenMax.to(this,0, {onComplete:rewindAndPause, delay:1}); trace("video done playing3"); }; function restartLine(evt:Event=null):void{ trace("timeLine restart2"); myTimeline.restart(); } stop(); please help! All I want is three images to fade in and out in succession, then a video to play, then repeat the timeline ad infinitum.. Im losin it here..

Hi thanks for your reply, so it isn't possible to have an interactive, wrapping, infinitely swipeable blitmask?

Hi there, I'm stumped, and it's probably because I've been up all night with this code.. After staring at it and tinkering with it, borrowiing bits from other snippets and trying various combinations for so long it all seems like an ugly, jumbled mess to me now and I can no longer tell up from down. There's no denying it anymore, I need help. There's a bug in here that I can't pin down. At first it would seem everything is normal, but then you realize there is something gravely wrong with how the overlap or the offset is being massacred on mouseDown. Or mouseMove. I've given up, any help would be really appreciated. Ive also enclosed my practice fla. 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]); var bounds: Rectangle = new Rectangle(100, 100, 1280, 600); var blitMask: BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, true, false, 0, true); TweenLite.delayedCall(0.1, blitMask.update, [null, 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; var isMoving: Boolean = false; var isCatched: Boolean = false; blitMask.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event: MouseEvent): void { TweenLite.killTweensOf(mc); blitMask.disableBitmapMode(); if (isMoving == true) { isCatched = true; isMoving = false; } x1 = x2 = mc.x; xOffset = this.mouseX + mc.x; xOverlap = Math.max(0.5, mc.width - bounds.width); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event: MouseEvent): void { isMoving = true; if (blitMask.bitmapMode == false) { blitMask.enableBitmapMode(); } 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; ThrowPropsPlugin.to(mc, { throwProps: { x: { velocity: xVelocity, resistance: 50 } }, onUpdate: blitMask.update, onComplete: throwComplete, ease: Strong.easeOut }, 10, 0.3, 1); } function throwComplete() { isMoving = false; isCatched = false; blitMask.disableBitmapMode(); blitMask.update(null, true); } mc.mc_1.addEventListener(MouseEvent.CLICK, onC); function onC(e: MouseEvent) { if (isMoving == false && isCatched == false) { mc.isc.text = "Item Clicked.."; mc.mc_2.play(); } else { mc.isc.text = ""; } } mc.mc_2.addEventListener(MouseEvent.CLICK, onD); function onD(e: MouseEvent) { if (isMoving == false && isCatched == false) { mc.mc_2.play(); mc.isc.text = ""; } else { // mc.isc.text = ""; } } It's supposed to wrap, and then on swipe just glide smoothely to a halt - doesn't matter where - ie not have any bounds. Please help? disableBitmapTest.zip