Sunday, December 29, 2013

How to create horizontal gallery using Action Script 3.0 and Arrays?

Did you ever came across the gallery which it should repeat horizontaly whenever you would get to the last
element of the gallery, but the animation of that gallery had cut-offs that made watching that gallery quite
irritating even painfull and it wasn't happening continuously? The goal of the gallery I'm about to show you
should solve that problem.

Whenever I'd come across anything simliar and searched over internet, all the soultions I came upon were
strictly using Timeline which can bring several problems.Firstly, as everything that is being done with Timeline is controlling frames so the animation it self can have limitations. In this case, as animation is horizontal, whenever you click on the arrow "left" or "right" animation will in that moment stop everything that was doing and start from the frame that was given command to continue the animation from. And this is the reason why most of the horizontal galleries have those cut-offs which makes the animation somehow un-natural and at the same time not so "comfortable" to watch.

As it is example with this one:
Gallery Using TimeLine

It is not my goal to put bad voice on the creator of this gallery, my goal is to demonstrate the diffrence
between animation controlled by Timeline and the animation controlled by ActionScript classes and Arrays. If for some reason, user would want to watch 15th picture of gallery and to get to it faster, clicking on the button also faster would look very ugly. Would you have nervs to watch trough that if there was 50 of pictures?

Here it is how the gallery looks like when its being done using ActionScript classes and arrays.
Gallery Using ActionScript classes and Arrays


As you can see, if we are to click first and second picture in the bottom panel with pictures on the Main Stage several times in a row, we can notice that animation stops and continues at the point where user ordered to do so. If we are to click on the arrows "left" and "right" animation will happen continuously and every picture can be seen while the animation is "flying" from one picture to another.

I should mention that the classes for animations are taken on the page - http://www.greensock.com/ - where they eased the process of animating the objects a lot, rather then we would use the original Action Script 3.0
classes. Also the web-page supports classes for JavaScript so the principle of creating this gallery can also be applied for JavaScript.

To make this post shorter and you not bored to death of reading, I will write only few key points for gallery
for one button. The whole code and the gallery you can take here:
Flash file with end results 

Firstly we created an array as this:

var myArray:Array = new Array();

Then that Array we have filled with elements that are being placed on the MainStage and their type is MovieClip,

their InstanceNames are mc1, mc2, mc3. Which means one picture is mc1 second one mc2 and so on.

myArray[0] = mc1;
myArray[1] = mc2;
myArray[2] = mc3;

We also have added one variable in order to control the position of element in the array:

var i:Number = 0;

So for now we have an array that has three elements. Now we will add an Event for the button so that the

pictures can move when the user clicks on that button. And we have done so as this:

btn.addEventListener(MouseEvent.CLICK, go);

Now our button has an Event that will be engaged on the Click of the Mouse and execute the function called "go".

Function "go" does next:


function go (evt:MouseEvent):void
{
 
   TweenMax.to(myArray[i], speed, {x:-1280});
   TweenMax.to(myArray[i], speed, {blurFilter:{blurX:70, blurY:0, quality:2}, ease:Cubic.easeOut});

if(i == 0)
{
thmb3.alpha = .4;
thmb2.alpha = .4;
thmb1.alpha = 1;

}
else if( i == 1)
{
thmb3.alpha = 1;
thmb2.alpha = .4;
thmb1.alpha = .4;
}
else
{
thmb3.alpha = .4;
thmb2.alpha = 1;
thmb1.alpha = .4;
}

i++;


if(i == myArray.length)
{
i = 0;

//Tweening current object in array to the center of screen starting from the 1280px and blur
TweenMax.to(myArray[i],0,{blurFilter:{blurX:70,blurY:0, quality:2}});
TweenMax.to(myArray[i], speed, {x:0,startAt:{x:1280}, ease:Cubic.easeOut});
TweenMax.to(myArray[i], speed, {blurFilter:{blurX:0,blurY:0, quality:1}});
}
else
{
//Tweening any other element of the Array while i is being incremented
TweenMax.to(myArray[i],0, {blurFilter:{blurX:70,blurY:0, quality:2}});
TweenMax.to(myArray[i], speed, {x:0,startAt:{x:1280},ease:Cubic.easeOut});
TweenMax.to(myArray[i], speed, {blurFilter:{blurX:0,blurY:0, quality:2}});
}
}



So we have several things. As we can see TweenMax is one of the classes that are made from GreenSock and I would strongly suggest you to check out on their web-page how the animation is being executed. In short, because every line of code which contains "TweenMax" and inside of it "myArray[i]" written, it means that animation will be executed with the element which variable i states it is currently on. Variable i is at the same time incrementing by one which is written in button code as "i++;" and the if/else statements check two things. In first if/else statment it cheks the value of variable i, and based on that, it sets the alpha for the pictures in the bottom panel with the pictures that are being named as thumb1, thumb2 and thumb3. In second if/else statement it cheks if the value of variable i is larger then the posible ammount of elements in array, and if it is so the value of variable will be set to zero which means the begining of an array, and if it is not it will continue incrementing of the variable i.

Now we have a button which, whenever user clicks, it checks certain conditions and executes animation using TweenMax classes.

That would be at the same time the main principle of the whole gallery! Everything else has been done by the
same principle. For every picture, events has been added which use same classes and elements. Diffrence is that button "left" and "right" have diffrent X cordinates for animation (from left to right and vica-versa) and the pictures in the bottom panel on the main screen engage animation based on which picture have been choosen.

I hope this will be of use to readers of this post if for nothing else then for discovering new things such are TweenMax classes and if not for Flash and ActionScript then for JavaScript.