Jump to content

Lasercode last won the day on November 21 2012

Lasercode had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Lasercode

  1. Hi,

    I read some topics where people WANT the smoothing applied by modern browsers, if you rotate or zoom images for instance. That is NOT what I search for.

    In my example there are three spans with border. Two of them are being rotated and get new top/left positions, and even if their final rotation is 90 degrees, they become smoothed. How can i DISABLE this somehow? I was really searching a long time, and all I assume is that this is browser rendering dependent, but maybe I can get a hint here.


    Btw: When I reverse that animation back from picture 2 to picture 1, they are crisp again.


  2. function twoEases( time, tweenObject, easingIn, easingOut ){
      TweenMax.to( $('element'), time/2, {rotation: tweenObject/2, ease:easingIn,
                TweenMax.to( $('element'), time/2, {rotation: tweenObject, ease:easingOut });
    twoEases ( 2, 90, Cubic.easeIn, Elastic.easeOut);

    I had the same issue and this worked for me.

    • Like 1
  3. Hi again,

    I tried it out, I even got close, but I cant quite find the right way. (JS is mostly for string conversion). I tried "quadratic", as this seemed to be the right one for the export values from drawscript, but with "soft" I came closest. Any help?

    <DOCTYPE html>
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    	<script src="pathAni.js"></script>
    	<!--<script src="bezierStringProcessor.js"></script>-->
    <body style="margin:0px">
    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M10,10c30.968,30.323,59.354,120,121.29,73.548
    <div id="main" style="float:left; position:relative; width:20px; height:20px; background-color:red;"></div>
    var e;
    var animate;
    var bezierString        = "bezierCurveTo(60,30,89,120,151,73);bezierCurveTo(213,27,257,53,268,91);bezierCurveTo(280,129,393,86,420,83);bezierCurveTo(447,80,568,132,490,186);bezierCurveTo(413,240,236,320,217,251);bezierCurveTo(199,183,219,136,148,167);bezierCurveTo(76,197,100,382,43,278);";
    var mainSubstring       = bezierString.split("bezierCurveTo");
    var pointAmount 	= mainSubstring.length-1;
    var valueSubstring      = [];
    var valueSetArray       = [];
    var finalTweenMaxObject = [];
    for(var i = 0; i < mainSubstring.length; i++){	
    	valueSubstring[i] = ( mainSubstring[i].split( "(" ))[1];
    for(var j = 1; j < valueSubstring.length; j++){
    	valueSetArray[j-1] = valueSubstring[j].substring( 0, valueSubstring[j].indexOf( ")" ));
    for(var k = 0; k < pointAmount; k++){
    	finalTweenMaxObject.push({ x: parseInt( valueSetArray[k].split(",")[0] ), y: parseInt( valueSetArray[k].split(",")[1] ) });	
    	finalTweenMaxObject.push({ x: parseInt( valueSetArray[k].split(",")[2] ), y: parseInt( valueSetArray[k].split(",")[3] ) });
    	finalTweenMaxObject.push({ x: parseInt( valueSetArray[k].split(",")[4] ), y: parseInt( valueSetArray[k].split(",")[5] ) });
    window.onload = function(){
    	e = document.getElementById("main");	
    	window.animate = function(){
    		TweenMax.to(window.e, 10, {bezier:{type:"soft", values:finalTweenMaxObject, autoRotate:true}, repeat:-1, ease:Power1.easeInOut});
  4. Well, I seem to be at the point of no further possible progression. My feeling still survives after the brainmelting holidays, but I think the problem lies too deep in memory processing and bitshifting/copying the pixels. So whatever, my knowledge isnt sufficient at this point of time, which you probably agree with ;)


    But to achieve any progression at all, I used your blitmask and afterwards set the mask property of it to a circle shape. In my first example I used a 3000x3000px png and had a wonderful performance, BUT my PC is equipped quite well, so I'll check it on a lame machine soon.


    ...I still believe.

  5. It's just not as fast as a straight copyPixels().


    Okay, but that doesn't mean "slow" already, does it? If an irregular shape can be used for a lot faster masking operation than the flash internal masking does, there still was achieved a little optimization.


    I will try something out today. I want to play a bit with the shape masking of a blitmasked MovieClip/Bitmap. As we discussed before, this could already be a lot faster than only using flash's masking. Even if this is not exactly what I initially wanted, I need to move on with my game and this could be very helpful already.


    But I will stick to this over the holidays.

  6. Okay. Cool.


    You use 3 parameters in the copyPixels() function:

    _bd.copyPixels(bd, _sliceRect, _destPoint);


    I really only glanced through some info quickly, but the optional fourth param "alphaBitmapData" seems to be very interesting. Can you eliminate my thought, or could that be a progress?


    I need to sleep, it's 2 am. I'll post you some conclusions tomorrow, hopefully.


    Good night.

  7. Yeah...maybe I got my head above the parapet. But all this new stuff (I'm also on arduino combined with flash atm) really keeps me awake at night and I am so damn interested, that I feel like a child on coke that just met God.


    I'll keep my energy back a little from now on. No one needs posts without solutions. That makes this forum so good.


    Btw: I think you post really good questions, as I read some of them before. Keep it up. I learn much from it.

  8. Hello dude.


    Your first explanation is right. But I am not sure, if you should use GSAP for just putting an Object to another place. A zero time tween is quite...short :) So if this is a real world example I would probably just set the values like


    slideShow.start.y = slideShow.second.x;


    But yes. All in all your are right.

    • Like 1
  9. Hi again,


    I see.


    TweenMax.to(playerStone, 1, {x: [stone.x + fieldWidth] });
    TweenMax.to(playerStone, 1, {x: ["+=" + fieldWidth] });


    The first line would say:

    - move "playerStone" to where "stone"s X var is plus fieldWidth


    The second line says:

    - move "playerStone" to where it already is (X) and then add fieldWidth.


    Nevertheless, I think you wanted "stone.x" to be "playerStone.x" and then it'd probably be the same. Maybe it's a tiny bit faster writing "+=" because you dont need to call the var itself. The "+=" operator does that for you. On the other hand, maybe it takes some time to break up the ["+=" + XYZ] string and calculate/return the final values, instead of doing it directly.


    But actually I dont think that there are much more differences, so it would not be that different in performing.


    Hmm... I'd appreciate to get some greensock explanation now, too.

    I start feeling a bit unsecure while thinking about your (good) question. Well...did I get your question at all? :)

    • Like 1
  10. Hey,


    I was moving too fast without proper knowledge (esp. about matrices). I'm now getting closer to your point. My brain formed another question, though.


    I need to know, if I get the way you are doing things here. Let's take blitmask without the updating option for this example.


    Creating the BitmapData would only be needed once, correct?

    You then cache the pixel data and give the possibility to move/scale it by using the matrix transformation rules/data, still correct?

    If I am right until here, what if you just "die-cut" the former final BitmapData with a circular algorithm once, too? Right after. Then you cache THAT object, and leave everything else as is.


    Would that be a good approach for a well performing way?


    EDIT: Maybe one could create another reference BitmapObject with pixels shaping a circle in it and only 2 kinds of pixels. Like I said before, some transparent, some not. (Or black/white, or whatever is fastest to query). Then one could create a temporary array of all rows of pixels, check out in a loop which ones are interesting, and then plot the new BitmapData object. That change in my idea is only important, if the cicular algorithm takes longer than this operation.


    The most important thing to keep up performace is to kill the repetition of this process in every frame, right? My feeling that this could work somehow still doesnt die.


    Gimme hope, Joanna.

  11. Hi Jeremy,


    I just DID use it. And I did before. Let's say for example you got a game, where you move a stone with the 4 arrow keys. You want the stone to move in a grid kind of area. Every field is X pixels from another. Now you could go and use hardcoded values, because you KNOW the pixel size of each field. But we want to keep things dyncamic for further use or easy design corrections later, so we use the relative movement. We could then say:


    TweenMax.to(playerStone, 1, {x: ["+=" + fieldWidth] }); // square brackets for creating a String, don't know if necessary.


    instead of


    TweenMax.to(playerStone, 1, {x:"+= 20"});


    and then we never need to touch it again.


    Did that clear things up?

  12. Yes. I understand you. But my feeling told me that there is a way to just require the circular matrix calculation once.


    Like I said, I am not that deep into your classes or even as3, as I am more of a designer. I just think of creating kind of an object that gets "prepared" to only get the necessary data. Like an array, that doesnt have the possibility to receive data to certain indices, not because they were blocked, rather because they just dont exist, and thus dont need to be checked in every frame.


    I checked out arduino and processing lately and maybe thats why I think that way. You got a setup and then a loop where stuff is being executed.


    Even IF I get the point that bitmapData needs to be drawn every frame, I nevertheless dont understand why my thought is maybe wrong. Thats why I will try to look deeper into BitmapData when I got time. I am no TOTAL noob, so... Its just a feeling that it must work somehow.

  13. Hello ... again.


    I read about the blitmask now, and it is (mostly) clear to me, that and why it's a rectangular sprite.


    Now...I am pretty sure, that it is possible to create a Bitmap Data object, that is built a little bit differently. I am not good enough to do it in AS though, and so I just like to discuss my idea with you guys.


    So, my theory is that the bitmap data object is a bit like a matrix filled with pixeldata. If there was a circular algorithm built in, one could - row after row - check out the needed pixels (opaque), and the ones we dont need (transparent) and thus build a circular blitmask.


    The same would then even work with elliptical shapes - divisionwise...on one of the x or y axis. Yeah...you know what I mean, eh?


    Well..yeah. That's it for now.


    Are you on that already? Is there some error in my idea? Is it already achievable with some of your great stuff? Is it silly implementing what AS3 can do (well...you do that all the time dont you? ;) )


    Let me know..I'm pretty darn curious.




    EDIT: I rethought and...is it a good thing to mask the blit-masked MC with a cirular shape. It doesnt seem that clean actually, hmm.....but the "normal" mask only masks a single and shrunk Bitmap then, and it could be performant. But I still think, that this is a rather dirty workaround, right?

  14. Hey folks,


    maybe it's that I am blind, or just an idiot, but how can I get the moment when the last element of the (staggerTo) array starts tweening? I tried getTweensOf and all kinds of workarounds, but I failed :(


    My example:

    TweenMax.staggerTo(stepArray, tweenSpeed, {alpha:1, scaleX:1.5, scaleY:1.5, dropShadowFilter:{blurX:15, blurY:15, distance:5, alpha:0.33}, ease:Cubic.easeInOut, onComplete:tweenScaleDown, onCompleteParams:["{self}"]}, stepStaggerAmount);



    Sorry if that's a dumb question, but I tried stuff for hours now and cant get it.




  15. Hi folks,


    I am not really new to this, but I get a hard time trying to do the following:


    I got an array of MCs named "stepArray". I want to animate through it after a dice function which gives me a number between 1 and 6 (if 5, the stepArray will have 5 elements and so on). Whatever, I need to know when the last element of the array has finished tweening, because that is the time the dice can be used again and is set free. If you need more input, please reply.


    function animatePlayerMove ():void {
    function tweenScaleUp():void {
     TweenMax.allTo(stepArray, tweenSpeed, {alpha:1, scaleX:1.5, scaleY:1.5, dropShadowFilter:{blurX:15, blurY:15, distance:5, alpha:0.33}, ease:Cubic.easeInOut, onComplete:tweenScaleDown}, stepStaggerAmount);
    function tweenScaleDown():void {
     tma = TweenMax.allTo(stepArray, 0.2, {alpha:1, scaleX:1, scaleY:1, dropShadowFilter:{blurX:5, blurY:5, distance:5, alpha:0.33}, ease:Cubic.easeInOut}, stepStaggerAmount);
     addEventListener(Event.ENTER_FRAME, checkStepAnimationprogress);
    function checkStepAnimationprogress (e:Event):void {
     if(tma[tma.length-1].currentProgress == 1){ //This doesnt work properly even with totalProgress
    	 removeEventListener(Event.ENTER_FRAME, checkStepAnimationprogress);


    Obviously there is some mistake in my logics and I hope someone here will help.