Simple n°Blocks error?

[Guest]

Salutations~

 

A request for assistance here if possible. I'm learning to use greensock as an alternative to natural tweening and transforming and have been developing some script for a client using some brilliant coding Andrea Pizzigalli made that creates a grid masking over an image to give it a fade in effect using blocks in it's transition.

 

It works perfectly with some additions I made to make it link off to webpages as well as movieclip alterations. Unfortunately it' is currently set to stop 1 block short of being full stage width. I've done some tinkering myself but I can't seem to get it to go the entire stage's length (even though I can reduce the length it travels).

 

I guess I have to chalk it up to as3/greensock inexperience...

Anyone think they can give me a hand?

 

Code:

/******************www.choosepizzi.com*/
/****Actionscript 3.0 + Grid slideShow*/
/*********Develop by Pizzigalli Andrea*/
/***************************09-12-2009*/
/*If you want change the n° of blocks 
you must change "var nBlocks:Number=15"*/

//Import the class that i need for the transiction:
import com.greensock.*;
import com.greensock.easing.*;
//create some vars for define the grid
var nBlocks:Number=15;//totla n° of blocks
var blockSizeW:Number=stage.stageWidth/nBlocks;//the size of the side of the block
var blockSizeH:Number=stage.stageHeight;//the size of the side of the block
var counter:Number=nBlocks-1;//counter that signs how many blocks are inserted on a row
var counterOut:Number=counter;
var counterblockArray:Number;//counter that records how many elements are inserted on the "blockArray"
var blockArray:Array=new Array();//the array where push the elements that i go to create
var timerOut:Timer=new Timer(100,10);
var imagesName:Array=new Array();

// Create the first "for" cycle for create the blocks
for (var i:int=0; i	var mcContainerGeneral:MovieClip=new MovieClip();//MovieClip Container
addChild(mcContainerGeneral);
var phMc:mcPhoto4=new mcPhoto4  ;//MovieClip that contains the photo
mcContainerGeneral.addChild(phMc);
phMc.x=0;
phMc.y=0;
phMc.id=i;
var mcContainer:MovieClip=new MovieClip();//MovieClip that i uses for mask the photo
with (mcContainer) {
	graphics.beginFill(0x666666,1);
	graphics.lineStyle(1,0x999999,100);
	graphics.drawRoundRect(0,0,blockSizeW,blockSizeH,0);
	graphics.endFill();
}
// for define if we are at the end of a row or not
mcContainer.x=0+(blockSizeW*i);
mcContainer.id=i;
mcContainerGeneral.addChild(mcContainer);
phMc.mask=mcContainer;// mask the movie that contains the photo

//Creates the eventListener that responds at mouse events
phMc.addEventListener(MouseEvent.MOUSE_OVER, btnOver,false, 0, true);
phMc.addEventListener(MouseEvent.MOUSE_OUT, btnOut,false, 0, true);
phMc.addEventListener(MouseEvent.MOUSE_DOWN, btnDown,false, 0, true);
//put the alpha of the block =0
mcContainerGeneral.alpha=0;
// insert the block in the array
blockArray.push(mcContainerGeneral);
}
counterblockArray=blockArray.length;//a counter that counts the elements present in "blockArray"
trace(" n° Blocks " +counterblockArray);
timerStart();//Call the Timer that starts the transition

function btnDown(evt:Event):void {
var timerOut:Timer=new Timer(100,counterblockArray);//Makes a new timer for the "out" transition
timerOut.addEventListener(TimerEvent.TIMER, onTickOut);
timerOut.addEventListener(TimerEvent.TIMER_COMPLETE, onTickTimerOut);
timerOut.start();
trace("timerOut Start");

function onTickOut(event:TimerEvent):void {
	TweenLite.to(blockArray[counterOut], 1, {x:stage.stageWidth+100, alpha:0});
	counterOut--;//Updates the counterOut ( a counter that i use for "counts" how many blocks are go out)
}
function onTickTimerOut(event:TimerEvent):void {
	timerOut.stop();//stop the "timerOut"
	trace("timerOut Stopped");
	timerStart();//Call the Timer that starts the transition
	counterOut=nBlocks-1;//Update the counterOut
}
}

// makes the two functions that responds at the mouse Event
function btnOver(evt:Event):void {
var Clip:Object=evt.currentTarget;
TweenLite.to(Clip, 1.25, {dropShadowFilter:{color:0x000000, alpha:1, blurX:10, blurY:10, strength:1, angle:90, distance:5}});
TweenLite.to(Clip, 1, {bevelFilter:{distance:5, strength:5, blurX:10, blurY:10, angle:45}});
}
function btnOut(evt:Event):void {
var Clip:Object=evt.currentTarget;
TweenLite.to(Clip, 1.25, {dropShadowFilter:{color:0x000000, alpha:1, blurX:10, blurY:10, strength:0, angle:90, distance:0}});
TweenLite.to(Clip, 1, {bevelFilter:{distance:0, strength:0, blurX:0, blurY:0, angle:45}});

}
// make the Timer that starts the transition
function timerStart():void {
var timer:Timer=new Timer(100,counterblockArray);
timer.addEventListener(TimerEvent.TIMER, onTick2);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTickTimer);
timer.start();
trace("timer Start");

function onTick2(event:TimerEvent):void {
	//trace("timer in ciclo");
	blockArray[counter].x=-150;
	TweenLite.to(blockArray[counter],1.5, {x:(-1)*counter, alpha:1});
	counter--;
}
function onTickTimer(event:TimerEvent):void {
	timer.stop();
	trace("timer Stopped");
	counter=nBlocks-1;
}
}

[GreenSock 18,577 Likes (Superhero)]

I don't have time to parse through all the code and identify any issues, but I will say that you don't need to use a Timer. It will perform better and save you a lot of code to simply use TweenLite's "delay" special property and set up all your tweens at once in btnDown() and timerStart(). You might like TweenMax's allTo() static method too, especially with its "stagger" parameter.

 

If you're still having trouble, please post an FLA file that can easily be published to see the issue. That makes troubleshooting much easier/faster.

[Guest]

http://www.filedropper.com/webslide

 

If this isn't fine for hosting let me know.

Thank you for all your help this far.

[GreenSock 18,577 Likes (Superhero)]

Could you clarify your question? I published your file and the images aren't even close to filling the stage when I resize it. What specifically did you need help with? And is it directly related to tweening or some other GreenSock tool? (sorry - I'm just a little unsure about what you're asking and I'm short on time)

[Guest]

Sorry about that,I had the dimension scaling set to pixels instead of percent.

This is the correct file:

http://www.filedropper.com/webslide_1

 

 

But, yeah, the code is using greensock tweening for it's fade in, and it controls the number of blocks in the block array.

 

Looking at the html file now, you can see it appears to be one block short of a full horizontal scale.

Now no matter how I resize it or change the dimensions it is always that one block short.

 

I was wondering how I could get that full horizontal scale.