emsee

No, I've tried it using CodePen, and on my local dev environment. It just seems to be glitchy on mobile. On desktop it works perfectly fine. I'm testing on iOS 14.4.2 on an iPhone X.

That's odd. It was still being problematic on mobile, but now that I've checked on Desktop, it's working fine. Looks like I need to do more testing!

Unless I’m missing something, that doesn’t seem to resolve the issue. I’ve updated the pen, but it’s still jumping to near zero

Hey Jack, Thanks for your help! This hasn't quite solved the issue, but it's getting closer. The problem now is that scrollTrigger seems to be sending an update with a value close to zero - so essentially the scrollbar briefly jumps to the top of the page, then back to where it should be (which causes all manner of problems in my app). I've updated my pen to show the new problem: https://codepen.io/highlyinteractive/pen/xxgMQxL My first thought was to set a boolean to ignore the update while the reset is happening, but that doesn't seem to prevent it. Any ideas what's going on?

I'm using ScrollTrigger to, among other things, control webGL. It's working beautifully. However, I'm trying to set up a custom snapping system (ScrollTrigger's snap doesn't meet my needs) and hitting an issue when I disable then enable ScrollTrigger. I'm basically using ScrollTrigger to tween a value from 0-1 which I pass to my camera. When I get close to a certain value (in my codepen example, when I pass 0.1) I want to disable ScrollTrigger and manually tween to a new value. After some gubbins (not included in my pen), I set the scroll position using scroll() and re-enable ScrollTrigger. The problem is that ScrollTrigger seems to jump back to where it was disabled and then tween to the target position all over again! This only happens when I have Scrub enabled. If I set it to 0, there is no problem, but then I lose the nice smooth scrolling in my WebGL. Can anyone please help me prevent this problem? PS: Sorry if my CodePen looks a little odd. I've basically extracted the important code from my app, so the structure is a little funky.

OK, I'll check those out. I'm trying to tween the properties of a set of generated objects - pretty much exactly what I've demo'd

Thanks for the reply. Perhaps I'm using gsap wrong, but my understanding was that passing an array as the property to tween would apply the tween to each object in the array? But when I log this from inside the onUpdate function, I get a cyclic error. Here's a pen to demonstrate https://codepen.io/highlyinteractive/pen/wvMeXxP I guess I hoped there would be some kind of target attribute that I could use to modify the objects during the tween

I have an array of objects that I'm trying to animate with gsap, but I'm confused about how to use callbackScope with an array? let array = [obj1, obj2, obj3 ... ]; gsap.to(array, { duration: 1, callbackScope: array, onUpdate: function () { console.log(this.objectProperty); } }); If I was tweening a single object, this would be a reference to the object, but with an array of objects, it doesn't work. Would it be better to loop through the array & create multiple tweens that way? Is there any way to get the scope of each object in the array within the onUpdate function?

I have three tweens, each one with a sound effect called on start: //simplified code: TweenMax.to(this, 10, {alpha:1, delay:1, onStart:playSound1}); TweenMax.to(this, 10, {alpha:1, delay:2, onStart:playSound2}); TweenMax.to(this, 10, {alpha:1, delay:3, onStart:playSound3}); function playSound1():void { LoaderMax.getLoader("sound1").playSound(); } function playSound2():void { LoaderMax.getLoader("sound2").playSound(); } function playSound3():void { LoaderMax.getLoader("sound3").playSound(); } I would like the sounds to overlap, but instead, the first sound is cut off by the second, which in turn is cut off by the third. Can I get all three sounds overlapping? Is there a way to access the loaded sound object & play it through a separate channel manually? Thanks

Hi, Thanks for the update, it's really helpful. When I first tried it, I assumed it would set the number of repetitions to whatever value is passed. I guess it actually sets the current repetition (so if your repeat value is 3 and you set it to 1, it plays the loop twice more). Do you think it would be better to have two get/setters: One to set the repeat count & one to set the current repeat? Either way, I'm happy

Hi, I have a simple problem, which I wondered if VideoLoader has a solution to. If not, I can achieve it manually, but thought I'd ask. I've got a simple video which repeats 3 times: vid = new VideoLoader("video.flv", {name:"vid", container:this, repeat:3}); vid.load(); I call it like this: vid.playVideo(); ...but this only works once. The second time I try to play it, it doesn't play. I tried calling it this way instead: vid.gotoVideoTime(0); vid.playVideo(); ...but then it only plays once. Is there any way to maintain the repeat settings?

Woops - found my answer! onInit is called after the xml is loaded, but before any child loaders are created. Thanks Greensock - you think of everything!

Hello, I know it's possible to have mixed xml (with loader's and also other content), but I'm having trouble working out how to access XML in LoaderMax before child loaders have finished. For example, here's a simple version of my xml: <?xml version="1.0" encoding="utf-8"?> <content> <preload> <LoaderMax name="..." prependURLs="assets/" load="true"> <MP3Loader name="..." url="..." autoPlay="false"/> <ImageLoader name="..." url="..."/> </LoaderMax> </preload> <fonts> <LoaderMax name="..." prependURLs="assets/" load="true"> <SWFLoader name="..." url="..."/> <SWFLoader name="..." url="..."/> </LoaderMax> </fonts> <main> <prompts>Some other content</prompts> ... </main> </content> All good so far. I get an onChildComplete event for each item loaded, plus one for each LoaderMax itself. Once everything is loaded, I get an onComplete event. But... I really need an event for the XML file itself. I can access it once everything else has loaded, but I really need to access it before the load has completed (I'm assuming it's the first thing loaded?). Is this possible? I really hope it is!

I found it crashing when the System memory got to around 1.8GB - which I guess is the Windows limit as I don't think single processes can use more than 2GB each. Might be different on Mac. Not sure what bitmap dimensions you'd need to use that much memory up

OK, I'm near certain it's a memory issue. At a certain point, the player just isn't able to generate any more bitmap tiles & falls over.

OK, I think my problem is that I'm pushing flash beyond its limits. I've made a stupid little demo which is trying to blit some obscenely large sprites. I'm not sure exactly why the BlitMask is failing though. Here's my flashdevelop project: http://www.highlyinteractive.com/dump/blitTest.zip

That would be a great solution had I not foolishly obfuscated my actual goal! I'm actually working across two computers - so the example above is actually supposed to scroll a long image across two screens, passing seamlessly from one to the next. I think I managed to solve it though: var offset:int = 0; var numScreens:int = 8; var otherScreens:int = numScreens - 1; TweenMax.fromTo(blit, 2, { scrollX:(1 / otherScreens * offset) % otherScreens }, { scrollX:1 + ((1 / otherScreens * offset) % otherScreens), ease:Linear.easeNone } ); If you change the offset for each screen, that seems to do the trick (edit: and the BlitMask should wrap)

I'm having this problem as well (with a large target, not a large blitmask). I'm trying to replicate it in a separate piece of code, but the error is difficult to replicate. It looks like it's happening when the internal bitmap is segmented. I'll try to post more info soon.

Hi, If anyone is up for a challenge, I'm having real trouble with the scrollX settings for BlitMask. I'm trying to scroll the identical contents of two Blitmasks, placing them side-by-side and offsetting one. Here's an example class: package { import com.greensock.BlitMask; import com.greensock.easing.Linear; import com.greensock.TweenMax; import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; import flash.text.TextFormat; public class Main extends Sprite { private const W:int = 300; private const S:int = 350; private const C:int = 10; private var img1:Sprite; private var img2:Sprite; private var img3:Sprite; private var txt1:TextField; private var txt2:TextField; private var txt3:TextField; private var blit1:BlitMask; private var blit2:BlitMask; private var blit3:BlitMask; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point img1 = new Sprite(); img1.graphics.beginFill(0xff0033); img1.graphics.drawRect(0, 0, 3500, 200); img1.graphics.endFill(); addChild(img1); txt1 = new TextField(); txt1.text = "X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0" txt1.width = 1750; txt1.scaleX = txt1.scaleY = 1.9; txt1.setTextFormat(new TextFormat("Arial", 100, 0, true)); img1.addChild(txt1); img2 = new Sprite(); img2.graphics.beginFill(0xff0066); img2.graphics.drawRect(0, 0, 3500, 200); img2.graphics.endFill(); addChild(img2); txt2 = new TextField(); txt2.text = "X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0" txt2.width = 1750; txt2.scaleX = txt2.scaleY = 1.9; txt2.setTextFormat(new TextFormat("Arial", 100, 0, true)); img2.addChild(txt2); img3 = new Sprite(); img3.graphics.beginFill(0xff3399); img3.graphics.drawRect(0, 0, 3500, 200); img3.graphics.endFill(); addChild(img3); txt3 = new TextField(); txt3.text = "X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0 X1 X2 X3 X4 X5 X6 X7 X8 X9 X0" txt3.width = 1750; txt3.scaleX = txt3.scaleY = 1.9; txt3.setTextFormat(new TextFormat("Arial", 100, 0, true)); img3.addChild(txt3); blit1 = new BlitMask(img1, 0 , 0, 300, 200, false, true, 0, true); blit2 = new BlitMask(img2, 350, 0, 300, 200, false, true, 0, true); blit3 = new BlitMask(img3, 0, 200, 700, 200, false, true, 0, true); var b1_offset:int = 0; var b2_offset:int = 1; var b1_end:Number = 1 - (W / S * C) var b2_start:Number = (W / S * C); TweenMax.fromTo(blit1, 10, { scrollX:0 }, { scrollX:b1_end, ease:Linear.easeNone } ); TweenMax.fromTo(blit2, 10, { scrollX:b2_start }, { scrollX:1, ease:Linear.easeNone } ); //need to match this: TweenMax.fromTo(blit3, 10, { scrollX:0 }, { scrollX:1, ease:Linear.easeNone } ); } } } So the aim is to make the contents of the top two BlitMasks match the third by offsetting the end position of blit1 (b1_end) and the start position of blit2 (b2_start). Only it doesn't work how I would expect & I can't get my head around it. Fabulous prizes to anyone who can help

Hi, I'm trying to add a wipe transition to an image that is being panned with Blitmask, but as the height of the blitmask changes, the scrollY is also changed. Is there a way to do this, or should I come up with a different way to do the wipe? Here's my code: blit = new BlitMask(image, 0, 0, 1920, 1080, false, true); blit.y = 1080; blit.height = 0; blit.scrollY = 0; var t:Array = new Array(); t.push( new TweenMax(blit, 1, { y:0, height:1080, delay:startTime } ) ); t.push( new TweenMax(blit, 10, { scrollY:1, delay:startTime } ) ); t.push( new TweenMax(blit, 1, { height:0, delay:startTime + 8 } ) ); score = new TimelineMax(); score.appendMultiple(t);