JimmiQR

I am getting runtime errors when I include both the TweenMax and TextPlugin. While trying to narrow it down, it appears to be some conflict when both of those files are included? No other code! Here is the other weird part; I only get this error when the files are hosted online, not when running on my local server instance. I also can NOT get the errors to trigger in Codepen or JsFiddle. Only on my own domain in production. Here is the 2-line file that causes the error: http://jimmiheiserman.com/archive/gsap/text-plugin-error.html Below are just the two lines (and versions) that are inside that file. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/TextPlugin.min.js"></script> The console error I get says: Uncaught SyntaxError: Invalid regular expression: /[-]|�[�-�]|�[�-�]|[⚔-⚗]|�[�-�]|[�-�][�-�]/: Range out of order in character class at new RegExp (<anonymous>) at TextPlugin.min.js:12 at TextPlugin.min.js:12 Each of the two files included individually does not trigger this error, but when they are both included, it does. Is it possible my domain is to blame for this? Can someone test this file on another domain? That seems conspiratorial to think my domain is mangling something, so my first idea is to think that there is just some conflict arising in the TextPlugin 2.0.1 and the TweenMax 2.0.1 and codepen and jsfiddle suppress the error? I get this error in both Chrome and FF (as expected, cause JS) Internal source version numbers: TweenMax VERSION: 2.0.1 DATE: 2018-05-30 TextPlugin VERSION: 0.6.2 DATE: 2018-02-15

Oh thanks! I read through those changes a few months ago, but I didn't understand how much different it was. I guess I didn't have as much a use for it then, so I gleaned over it. But this makes better sense now, and I will play with the new string params if I still think I need them.

I saw an example on your site that uses static constants for OverwriteManager, such as OverwriteManager.PREEXISTING: TweenMax.to(mc, 1, {x:100, overwrite:OverwriteManager.PREEXISTING}); But I can not get my editor to autocomplete or recognize that OverwriteManager Class. I dug through the imports available in greensock, but did not see it. I am on version 12. I would prefer to use the constants over numbers, as I think that is good practice, but I don't know how to go about getting this to recognize. FYI, I am using Flash Develop, in case the problem lies there.

Thank you both, and it is StepppedEase for the win! I tested it, and you are correct, the engine knows to not repaint the screen if there is no numerical change. So a bunch of frame events setting the alpha to .25 will not hurt the performance. I went with the first, simple approach, and no performance issue anymore! I stared to read up on SteppedEase more. I love how this was started with one case in mind, , but proves to be flexible enough for me to use it in an entirely different way (super slow tweens). After watching this video, I now realized this will also come in handy where I need to animate/rotate blocks on 90 degree increments. TweenLite remains my most favorite API to work with.

[Not even sure how to properly title this subject line, as it is an strange request] I have an odd need to be able to slooooowly and subtly tween some objects (over the course of minutes), but performance is sometimes a factor in these slow tweens. Take for instance, fading the alpha of a large displayObject from 1 to 0 over the duration of 3 minutes. This infinitesimal change is not even noticed by the user (but eventually gets there), yet the rendering engine is attempting to change the alpha by .002 alpha 30 times per second. When in reality, such a slow tween could actually be updated once every second and still have the same visual effect, with no performance hit. I was able to write a wonky function to do this, but it was very specific to one particular case, and not very flexible. I was wondering if there was some clever way to do this directly within my TweenLite/max or timelineLite/Max call? TweenLite.to(obj, 180, {alpha:0});// 3 min duration, yet only update once per second maybe?

I might have solved it, but not sure if it is the best way. But I am happy with it for now. Essentially, I use addFilter to add a new one, and then just remove any glow filter, which I guess TweenMax pops off the top one first. Say my object first has a wide, green glow applied ahead of time: displayObject.filters = [new GlowFilter(0x00ff00, 1, 10,10)]; Then, when I add my new smaller, red highlight glow using TweenMax, I make sure to addFilter:true TweenMax.to(displayObject, .5, { glowFilter:{color:0xFF0000, alpha:1, blurX:4, blurY:4, addFilter:true}} ); At this point I can see both the large green and the small red glow at the same time (actually looks yellow), all good. Then I just fade and remove any glow using: TweenMax.to(displayObject, 1, { glowFilter:{alpha:.5, remove:true }} ); (I do alpha .5 to make sure it is blipping away via the remove flag) Is it safe to rely on the fact that the top most GlowFilter is my newest tooltip one? For now, I think so. If there is a more accurate referential way, let me know.

I am building a tooltip class that upon rollover of a displayobject, I will highlight the object with a tweened glow. When you roll off, the glow will go away. But, if the objects already has its own glow applied, I don't want to interfere with it during removal of my new tooltip highlight glow. I see there is a param for addFilter:boolean, that I think will allow me to add my new glow filter to an object that already has it's own glow filter. And there is a remove:boolean that will auto cleanup that filter at the end of the tween. but what if I want to keep the new highlight-glow attached until a later time, such as rollout? I think what I am trying to do is store the new glowFilter in a variable, so I can later remove that specific glow filter by reference. But I don't see how I can do this within the Tween engine. It looks like almost all the tools are there for me, but not quite. What am I missing? To reiterate, I don't mind if an object has two glow filters applied; one from before, and one from my rollover. But I want to leave the original glow intact, if it had one.

If you are not a coder, it may prove difficult to replicate something like this. I would first start with the ability to get all the points of the map into an array. Including the elbow turns. So you have 5 points; Start, first corner, box 1, box 2, box 3. To move a movieclip along that path, you would use TweenLite, and tween the x and y positions. Start with learning the ability to tween a displayobject to one of those points. TweenLite.to(displayObject, 1, { x:100, y:200, onComplete:someFunction } ); function someFunction():void{ // do something } after the circle moves to each point, the function will be called, where you can then decide on what you want to do, including starting another tween. If you are not a coder, and have used Flash primarily on the timeline, this will be a much more difficult transition to pick up. But if you have dabbled in AS3 code a bit before, then you can more easily pick up the syntax and usage of TweenLite. But what you are looking to do requires knowledge of a bunch of Actionscript techniques, including MouseListeners, Function calls, and TweenLite.

Carl, thanks so much for working out other solutions to this problem. I checked out your code and pulled down the files to explore it. This effect you laid out only solves part of the problem. Your example does not take into account images that have gray tones, as my eyeballs, or ringed domes do. Also, your solution assumed I would only need to mask a circle, rather than a complex photograph or something similar. (I used a circle shape only as a color example). But that is ok, I explored it further. But what you created made me realized you still had a great start, and I am always amazed at what blendModes can do visually. If I would create two images from a single one in a photo editing program, one as the gray scale, one as the mask to be tinted, I could get the effect I am looking for, even with a complex object. It would involve your solution, with a hybrid of my second png as a tinted mask of sorts. You could make the tie and beer be any color, with vibrant colors of your choosing. This would not be as flexible as I was hoping, as the images could not be that dynamic, but would require creating a mask to tint first. Then, I finally solved it all!! In my application, I create these assets that need to have shades of gray and shades of a color as a base of green. Then I hardcode values into a ColorMatrixFilter function that will turn values of green into vibrant equivalents in red, blue, yellow, purple, and teal. No muddle colors! This solution may be more specific to me, than in general, because I set a rule that my art assets that require this hue effect will all start with a base of green (as in green-screen). Also, I pass in ints into my function that represent colorcodes already in my application. But others can work with this and tweak it. public static function getHueFilter(colorId:int):ColorMatrixFilter { // assumes starting from green based bitmap var matrix:Array = new Array(); switch (colorId) { case 0://green to red matrix = matrix.concat([0, 1, 0, 0, 0]); matrix = matrix.concat([1, 0, 0, 0, 0]); matrix = matrix.concat([1, 0, 0, 0, 0]); break; case 1://just green matrix = matrix.concat([1, 0, 0, 0, 0]); matrix = matrix.concat([0, 1, 0, 0, 0]); matrix = matrix.concat([0, 0, 1, 0, 0]); break; case 2://green to blue matrix = matrix.concat([1, 0, 0, 0, 0]); matrix = matrix.concat([1, 0, 0, 0, 0]); matrix = matrix.concat([0, 1, 0, 0, 0]); break; case 3://green to yellow matrix = matrix.concat([0, 1, 0, 0, 0]); matrix = matrix.concat([0, 1, 0, 0, 0]); matrix = matrix.concat([1, 0, 0, 0, 0]); break; case 4://green to purple matrix=matrix.concat([0,1,0,0,0]); matrix=matrix.concat([1,0,0,0,0]); matrix=matrix.concat([0,1,0,0,0]); break; case 5://green to teal matrix = matrix.concat([1, 0, 0, 0, 0]); matrix = matrix.concat([0, 1, 0, 0, 0]); matrix = matrix.concat([0, 1, 0, 0, 0]); break; } matrix = matrix.concat([0, 0, 0, 1, 0]);// alpha return new ColorMatrixFilter(matrix); } Was I completely oblivious to not realize this earlier? Perhaps I should have. The thing I didn't understand during my frustratingly long search for a proper hue function, is why no one wrote one! Even what I am showing is not proper, as it only outputs very specific colors, RGBYTP. But in the 20+ lost hours I tackled this problem, I did not find one example, class, or package that did this for Actionscript. I don't know the visual math enough to tackle the full 360 wheel in a single algorithm but someone surely does, no? I think it would be so handy. It is one of those tools no one knows they need, until they are shown just how broken the built in Flash hue feature really is. Perhaps a plugin for Club GreenSock True Hue™? (That's a freeby) Thanks Carl for all your help!!

Thank you very much. Yes, I replicated what you said, and I too see that now. Grrrr. That is very unfortunate for me (and I assume others). This has been bothering me for a few days, and I really hope I didn't hit a wall with this. I drew circles in a smoother gradient using your (and Adobes) hue algorithm to see a better pattern of what was happening. In the drawing above, many starting colors can not be hue-adjusted to many other colors. Take trying to convert to yellow, for example! Now it appears my situation is beyond the GreenSock Animation Platform and is a core Flash problem, and I thank you for your response. But I would like to leave this one last and very specific situation here for you and future readers to ponder/confirm. So, based on everything I have learned on this to date, if someone wants to adjust a dynamic complex bitmap that contains grays and purple to a complex bitmap that contains yellow and maintains the grays, (very common in Photoshop and game design) they are out of luck? In AS3 anyway? (at the very least, this is quite a colorful thread)

I have been poking around some more, and now I am really confused as to what the hue property is supposed to do. I also lack an art background, so I could be interpreting the color wheel incorrectly. I generated 6 circles, all solid primary and secondary light-based colors. Red, Green, Blue, Yellow, Purple, Teal. Then I created 6 more circles from each base circle and adjusted the hue of each of those colors by a degree of 60. I was still expecting bright colors that fall on the perimeter of this color wheel model: http://bluelobsterar...or-wheel-lg.jpg . More specifically, I was expecting to be able to generate a bright RGBYTP from each of those bases. I was shocked to see grays, pastels, and earth tones from a hue adjustment of bright colors. Each of my 6 bases generated uniquely unexpected results [attached] I generated those with this code: for (var j:int = 0; j < 6; j++) { for (var i:int = 0; i < 7; i++) { var sprite:Sprite = new Sprite(); var baseColor:uint; if (j == 0) baseColor = 0xFF0000; if (j == 1) baseColor = 0x00FF00; if (j == 2) baseColor = 0x0000FF; if (j == 3) baseColor = 0xFFFF00; if (j == 4) baseColor = 0xFF00FF; if (j == 5) baseColor = 0x00FFFF; sprite.graphics.beginFill(baseColor); sprite.graphics.drawEllipse(40 * i + 10, 300 + (60 * j) + 10, 40, 40); addChild(sprite); TweenMax.to(sprite, .5, {colorMatrixFilter:{hue:i * 60 }} ); } } I have no idea what I am doing wrong.

I am using version 12.0, and I am wondering if this hue situation is a bug, or a limitation. I expect to take a solid colored object, adjust its hue around the 360 color wheel, and get a solid color back, but the colors I get are muddled. The saturation is off. I make a solid green object of 0x00FF00 (100% green). When I adjust the hue by 180, I expect it to go to the opposite side of the RGB color wheel to 100% purple, but it goes to 0xFF6EFF, or 255 for red and blue, as expected, but a green value of 110 (not 0), giving me a muddled purple. Similarly, when I try to adjust the same bright green object to bright red, using a hue adjustment of 240, it is a muddled red. I poked into the code, and see the use of Luminosity constants for R, G, and B at 0.212671, 0.715160, and 0.072169. Perhaps these are not the best constants? Perhaps the algorithm for hue adjustment on line 165 in ColorMatrixPlugin.as in version 12.0 is incorrect? var c:Number = Math.cos(n), s:Number = Math.sin(n), temp:Array = [(_lumR + (c * (1 - _lumR))) + (s * (-_lumR)), (_lumG + (c * (-_lumG))) + (s * (-_lumG)), (_lumB + (c * (-_lumB))) + (s * (1 - _lumB)), 0, 0, (_lumR + (c * (-_lumR))) + (s * 0.143), (_lumG + (c * (1 - _lumG))) + (s * 0.14), (_lumB + (c * (-_lumB))) + (s * -0.283), 0, 0, (_lumR + (c * (-_lumR))) + (s * (-(1 - _lumR))), (_lumG + (c * (-_lumG))) + (s * _lumG), (_lumB + (c * (1 - _lumB))) + (s * _lumB), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]; It is pretty complex, as I assume it needs to be, but could there be something askew in there? If I use a bright green object of 0x00FF00, and adjust the hue value by 60, 120, 180, 240, or 300; I was hoping I could get bright versions of teal, blue, purple, red, yellow. but it appears I can not get bright objects out of the hue transformation function. [in my attached image, I use two identical looking bright green circles, and adjust the right one to get bright red using code, but it does not come out as bright red. TweenMax.to(adjustedSprite, 1, {colorMatrixFilter:{hue:240 }} ); I remember reading about how Flash doesn't always work like Photoshop does, but this is just a color wheel hue issue, no? Thanks in advance, jimmi.