matthy

Hi Carl and Rodrigo, this sucks but indeed after reviewing its purely the browsers fault, thanks for the information! @Carl the last codepen link is broken

I am currently slowly trying to scale a box with a font in it. http://codepen.io/anon/pen/aOKQVy However on IE, and Chrome, (maybe also other browsers) the font really stutters. In Firefox, this problem does not occur. Anyone an idea what causes this and if this is fixable? thanks, Matthijs

Hi Carl, thank you for the reply. I sucks that it works out this way. "I noticed the text is really jittery when you are scaling, I'd definitely experiment with trying to fix that..." I think i can fix that if only already to just push it all down to bit map. The biggest problem still is the framedrops. Maybe animations with the starling framework can solve that but it sucks to start (partially) over again and learn a whole new framework. do you think the blitmask can be of any help? or does that only do work for scaling of large MC's

Hey, i have created a little game that i want to release as an app. All went well until i stumbled on some performance issues regarding the my menu. I use tweenlite's libary for scaling and moving animations of my menu. When i first tried it on my Galaxy S2 it was a bit laggy (framedrops) but no big deal as it is an old phone. However now i have the oneplus one (the fastest phone currently) and it is still dropping frames and consuming a hell lot of CPU Now i have thougth about trying the blitmask buffer: (https://greensock.com/blitmask) but as this is not about a big picture only showing part of it, but scaling a movieclip i was wondering if this would even help. A demo of the SWF output: http://websitekeuken.nl/demo/bloktris-app.swf The most laggy is the starting animation or press the "uitleg" tab and then drag the item down completely to replicate that animation. Does anyone have an idea to make this not dropping frames or at least a lot smoother? I mean phones can currently run whole 3d games with no trouble a simple menu animation should be no problem rigth? Things i already tried: - lowering the FPS; - setting render to Direct and GPU. - covert everything to bitmap what seems to work sligthly but still not a lot of succes. - newest compiler of the Flash CC demo I really hope someone can help me out with this one i am stuck working 10 hours on this problem. Thanks in advance. I really hope someone can help me out with this one i am stuck working 10 hours on this problem. Thanks in advance. The Base Menu class: package com.eigen.menu { /** * ... * @author matthijs */ // http://www.polymer-project.org/apps/topeka/ import com.greensock.BlitMask; import com.greensock.easing.Bounce; import com.greensock.easing.BounceIn; import com.greensock.easing.Elastic; import com.greensock.TimelineLite; import fl.transitions.easing.Regular; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import flash.display.MovieClip; import flash.display.Shape; import flash.display.Stage; import flash.errors.IllegalOperationError; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.getTimer; import com.greensock.TweenLite; import com.greensock.easing.Strong; import com.greensock.plugins.TweenPlugin; import flash.geom.Rectangle; // todo save inbouwen // http://stackoverflow.com/questions/24074092/flash-as3-save-and-load-data-for-ios-and-android-games public class DragMenu extends MovieClip { private var bounds : Rectangle; private var mc : MovieClip; var startX:Number, startY:Number; var border:MovieClip; var menuObjects:MenuObjects; var lockSwipe:Boolean = false; var isTransitioningOut = false; public function DragMenu() { startX = this.x; startY = this.y; } public function reboot() { TweenLite.killTweensOf(this); isTransitioningOut = false; visible = true; alpha = 1; this.addEventListener(Event.ENTER_FRAME, handleCollision) this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } public function init(menuObjects:MenuObjects) { this.visible = false; this.border = menuObjects.border; this.menuObjects = menuObjects; } public function show(type:String = ""):void { debug("show"); reboot(); if (type == "slide") animateInSlide(); else animateInElastic(); } function animateInElastic() { debug("animateInElastic"); x = startX y = startY; scaleX=0; scaleY=0; //var bm:BlitMask = new BlitMask(this, 300, 300, this.width, this.height, true); //TweenLite.to(content, 30, {x:-3000, onUpdate:bm.update}); //TweenLite.to(this, 4, { scaleX:1, scaleY:1, ease:Elastic.easeOut, onUpdate:bm.update } ); TweenLite.to(this, 4, { scaleX:1, scaleY:1, ease:Elastic.easeOut } ); } function animateOutElastic() { debug("animateOutElastic"); var myTimeline:TimelineLite = new TimelineLite(); var duration:Number = 1; myTimeline.add(TweenLite.to(this, duration, { x:startX, y:1024 + 1024/2, alpha:0 } ), 0, "start", 0); myTimeline.add(transitioningOutDone, duration); } function animateInSlide() { debug("animateInSlide"); scaleX = 1; scaleY = 1; y = -1024 + 1024/2; TweenLite.to(this, 2, { y:1024/2, ease:Bounce.easeOut } ); } function animateOutSlide() { debug("animateOutSlide"); isTransitioningOut = true; var myTimeline:TimelineLite = new TimelineLite(); var duration:Number = 2; myTimeline.add([new TweenLite(this, 0.3, { scaleX:1, scaleY:1, ease:Regular.easeOut }), new TweenLite(this, duration, { y:1024 + 1024 / 2, ease:Bounce.easeOut } )], 0, "start", 0); myTimeline.add(transitioningOutDone, duration); } protected function transitioningOutDone() { if (isTransitioningOut == false) return; x = startX; y = startY; visible = false; isTransitioningOut = false; } private function mouseDownHandler(event:MouseEvent):void { if (lockSwipe) return; this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); TweenLite.killTweensOf(this); scaleX=1; scaleY = 1; alpha = 1; var rec:Rectangle = new Rectangle(this.width/2,this.height/2-200,0,2000); this.startDrag(false, rec); } private function mouseUpHandler(event:MouseEvent):void { this.stopDrag(); TweenLite.killTweensOf(this); scaleX=1; scaleY = 1; TweenLite.to(this, 4, { x:startX, y:startY, ease:Elastic.easeOut } ); } function handleCollision( e:Event ):void { if (lockSwipe || isTransitioningOut) return; if(border != null && this.hitTestObject(border)) { trace (this.name + "handleCollision"); trace("x = " + x); trace("y = " + y); trace("scaleX = " + scaleX); this.stopDrag(); this.removeEventListener(Event.ENTER_FRAME, handleCollision) this.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); this.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); TweenLite.killTweensOf(this); animateOutElastic(); switchTo(); } } public function switchTo():void { throw new IllegalOperationError("Must override Concreate Class"); } protected function debug(message:String) { trace(this.name + " " + message); } } }

I think its better to post the real swf I thought the demo made more it easy but i see its only confusing here is a link to the game http://www.websitekeuken.nl/demo/1.swf try pressing the "q, w, e, r, t" keys and then with some speed.

I am sorry if I was a bit unclear about everything. What the best solution would be, if that the tween that is tweening goes away. And the tween that has to be tweened replaces it. So 1. Press -> gives yellow glow. 2. glow isnt finished 3 New Press gives -> red glow. 4. yellow glow removes itself and red glow appears. Something even better would be that they could interact separate from each other, so you would have 2 glows trough each other and the glow would not react at each other in stead of whats happening right now. i hope its clear rigth now else yust ask cheers matthy

Hi, i have made a function that when you press a certain key on your keyboard the mc gives a glow (tweenMax) the glow is in yoyo so after 2 seconds its gone again. the problem with this is when pressing to fast the tweens will stay and wont go away with the yoyo effect. example public function Engine() { TweenMax.to(this.blok, 1, { glowFilter: { color:0xffff00, alpha:1, blurX:20, blurY:20, strength:3, quality:3 }, overwrite:2, repeat:1, yoyo:true } ); var ExlodeTimer = new Timer(1400); ExlodeTimer.addEventListener(TimerEvent.TIMER, glow2); ExlodeTimer.start(); } function glow2(e:Event) { TweenMax.to(this.blok, 1, { glowFilter: { color:0xcc0033, alpha:1, blurX:20, blurY:20, strength:3, quality:3 }, overwrite:2, repeat:1, yoyo:true } ); } example on: http://www.websitekeuken.nl/demo/test.swf dl source file on: http://www.websitekeuken.nl/demo/test.zip does anyone have a solution for this, so that it will go away? thanks matthy

yeah i get the point, well thanks anyway, i will get a far end with this

thanks it now 100% working! One question i have seen that when drawing line the speed isn't correct. when you draw for instance a line with small distance and then one with a big distance you see that in the beginning its very slow and then it goes like a rocket is this normal? and if so is this changeable that it has the same speed anywhere, (else i have to consider the length with every path i draw ) the ease = Linear.easeNone so that cant be the problem. and I know the time is settable but i am talking about the length of the pieces from point to point. example screenshot:

Thanks greensock you really helped me a big time in here! But I am having a big time finding out this problem: I used the code from the other topic and its working fine but its not bezieringtrough the second point. sometimes the line isn't also that aquarate with the tween but i think thats because of the same problem. the code import flash.geom.Point; import com.greensock.plugins.BezierPlugin; var points:Array = [new Point(0, 0), new Point(100, 50), new Point(50, 200), new Point(300, 300)]; var data:Object = {x:[], y:[]}; for (var i:int = 0; i < points.length; i++) { data.x.push(points[i].x); data.y.push(points[i].y); } var curveToData:Object = BezierPlugin.parseBeziers(data, true); this.graphics.clear(); this.graphics.lineStyle(2, 0x000000); this.graphics.moveTo(points[0].x, points[0].y); for (i = 1; i < curveToData.x.length; i++) { this.graphics.curveTo(curveToData.x[i][1], curveToData.y[i][1], curveToData.x[i][2], curveToData.y[i][2]); } Here is a demo of what i got: swf: http://www.websitekeuken.nl/demo/drawer.swf source: http://www.websitekeuken.nl/demo/drawer.zip click on field to create points Arrow left = delete last point. Space bar = tween. do you know why it isnt beziering trough the 2nd point? Thanks Matthy

its a bit late reply but i let it boil for some time to think if i could found a solution. now i think i got it because it all doesn't have to be that precise. i made a function where i can place points and it makes a array of those points so it will bezier trough it. however because of the bezier abilty the lines aren't always that predictable. what i have seen on the site http://www.greensock.com/tweenmax/ is a example of the beziertrough which creates a line how it will follow. i would love to have a example maker of the exact same thing but then in 900 x 700px. is the linedrawer in the example a simple function i can find/get/implement myself? thanks Matthy

Hi, i am using tweenmax and loving the features. and i was extreamly exited when i found out that tweenmax had a function called beziertrough where i could make my movepaths for my arcade fligth game. and it even had an easing function . however i am experiencing some difficulties.i want him to move from lets say {x:100,y:0}{x:100,y:300}{x:300,y:300}{x:300,y:900} but instead of going to this points it also make enormous curves wich are way to overreacted see example: http://img39.imageshack.us/img39/1218/curvy.png is there a way to make these curves less uhhm curvy? thanks Matthy

no the first problem i get in to is that i can't find the place to change it. but actualy the real problem lies here: if I make a instance of a tweenMax and its in a function so: public function makeTween() { colorTween = new TweenMax(this, 0.35, { glowFilter: { color:0xFFFFFF, alpha:1, blurX:20, blurY:20, strength:3, quality:3 }, overwrite:2, repeat:1, yoyo:true } ); } and i call makeTween while colortween is still tweening so between 0.7 second (x2 because of yoyo). The old tween will hang. and therefore the white light wont go away. I tried things like kill and restart but without any succes. if you know a awnser to this problem most of my issues are solved regards matthy EDIT: lololol this seems to work but why i dont know is this the rigth way?? if (colorTween) { colorTween.restart(); } var tweenColor = StaticFunctions.returnColor(kleur); colorTween = new TweenMax(this, 0.35, { glowFilter: { color:tweenColor, alpha:1, blurX:20, blurY:20, strength:3, quality:3 }, overwrite:2, repeat:1, yoyo:true } );

when i make a tween i use this: colorTween = new TweenMax(this, 0.35, { glowFilter: { color:0xFFFFFF, alpha:1, blurX:20, blurY:20, strength:3, quality:3 }, overwrite:2, repeat:1, yoyo:true } ); and then i start the tween when triggert by using:colorTween.restart(); now because the tween should change in different colors i have a staticfunction that returns a color var tweenColor:String = StaticFunctions.returnColor(color); now what i want is to change the color inside the glowfilter i tried colorTween.glowFilter.color = tweenClolor; but with no succes any ideas? thanks Matthy

hey thank you very much for the great support! i will try it out a.s.a.p.