Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emsee

How to use Blitmask scrollX (challenging)

Recommended Posts

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 ;)

Link to post
Share on other sites
  • 2 weeks later...

I think a simpler approach would be to just tween blit3's scrollX (the one you're wanting the others to match) and then use an onUpdate in that tween to reposition img1 and img2 and then update() their BlitMasks, like this:

 

TweenMax.fromTo(blit3, 10, { scrollX:0 }, { scrollX:1, ease:Linear.easeNone, onUpdate:reconcile });
function reconcile():void {
   img1.x = img2.x = img3.x;
   blit1.update();
   blit2.update();
}

Link to post
Share on other sites

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)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×