RiaCodes » Flash

Quick Tip : Launch prettyPhoto from Flash

admin — Mon, 30 May 2011 07:05:11 +0000

In this Quick Tip, see how to launch prettyPhoto from a Flash movie by using the ExternalInterface class and the prettyPhoto API. In this example, we demonstrate how to open from a Flash movie a single image, a youtube video and a vimeo video with the prettyPhoto lightbox.

1. First download prettyPhoto files at http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ inside the Download Section.
Open the zip file and open the index.html file.

2. Modify it like beneath in order to begin with a fresh functional file.



	
		Launch prettyPhoto from Flash

3. Create a new function that calls the open() function available in the prettyPhoto API.

function launchPrettyPhoto(urlContent, titleContent) {
	$.prettyPhoto.open(urlContent,titleContent);
}

4. Now create a Flash file (AS3). Create 3 movieclips with instance name of “image_mc”, “youtube_mc” and “vimeo_mc”.

5. Create an “actions” layer and open the actions panel.
For each movie clip, set buttonMode to true and add a click event listener.

image_mc.buttonMode = true;
youtube_mc.buttonMode = true;
vimeo_mc.buttonMode = true;

image_mc.addEventListener(MouseEvent.CLICK, onClickImage)
youtube_mc.addEventListener(MouseEvent.CLICK, onClickYoutube)
vimeo_mc.addEventListener(MouseEvent.CLICK, onClickVimeo)

6. To set a Flash-Javascript communication, we use the ExternalInterface class. It allows us to invoke the JavaScript function that we’ve created earlier inside actionscript.

function callPrettyPhoto(url:String,title:String):void{
	ExternalInterface.call("launchPrettyPhoto",url,title);
}

7. Finally create the following functions that handle the click event for each movie clip:

function onClickImage(e:MouseEvent):void {
	callPrettyPhoto("http://www.files.riacodes.com/flash_prettyphoto-from-flash/images/6.jpg","Image demo");
}

function onClickYoutube(e:MouseEvent):void {
	callPrettyPhoto("http://www.youtube.com/watch?v=YdaMGcOyfjM","Youtube Demo");
}

function onClickVimeo(e:MouseEvent):void {
	callPrettyPhoto("http://vimeo.com/24315423","Vimeo Demo");
}

8. We’ve finished the Flash part, here’s the final code. Publish your flash movie.

import flash.external.*;
import flash.events.MouseEvent;

image_mc.buttonMode = true;
youtube_mc.buttonMode = true;
vimeo_mc.buttonMode = true;

image_mc.addEventListener(MouseEvent.CLICK, onClickImage)
youtube_mc.addEventListener(MouseEvent.CLICK, onClickYoutube)
vimeo_mc.addEventListener(MouseEvent.CLICK, onClickVimeo)

function callPrettyPhoto(url:String,title:String):void{
	ExternalInterface.call("launchPrettyPhoto",url,title);
}

function onClickImage(e:MouseEvent):void {
	callPrettyPhoto("http://www.files.riacodes.com/flash_prettyphoto-from-flash/images/6.jpg","Image demo");
}

function onClickYoutube(e:MouseEvent):void {
	callPrettyPhoto("http://www.youtube.com/watch?v=YdaMGcOyfjM","Youtube Demo");
}

function onClickVimeo(e:MouseEvent):void {
	callPrettyPhoto("http://vimeo.com/24315423","Vimeo Demo");
}

9. Return to you index.html file to embed the swf file. Inside the “main” div, insert the following code: (set the wmode parameter to transparent so that flash doesn’t display on top of prettyPhoto.)

10. Here’s the final html file:



	
		 Launch prettyPhoto from Flash

11. That’s it, hope you find this tip useful.

Create a Before & After Image Viewer

admin — Sun, 03 Apr 2011 06:27:56 +0000

See how to create a Before & After Image Viewer that allows you to compare two images with a draggable slider. The viewer can hide and reveal each image. It is useful for highlighting a before/after makeover or untouched/photoshopped image.

1. Create a new flash file (Actionscript 3.0) and save it as before-after.fla.

2. First, resize your “before” and “after” images to the same dimensions so that they are stackable. Set the stage’s dimensions to the images’ dimensions.

3. Create a layer named “before”, import the “before” image and convert it to a Movie Clip.
Above the “before” layer create an “after “layer, import the “after” image and convert it to a Movie Clip with registration point at the top left. Give it an instance name of “after_mc”.

4. Create a new layer named “mask”. With the Rectangle tool, draw a rectangle the same dimensions of the images. Convert it to a Movie Clip with registration point at the top left and give it an instance name of “mask_mc”.

5. Create a new layer named “slider”. With the Line Tool, draw a vertical line the same height of the images with a stroke of 4px. Convert it to a Movie Clip and give it an instance name of “sliderbar_mc”. Position it to the left of the stage.

6. Finally create an “actions” layer and add the following code:

import com.greensock.*;
import com.greensock.easing.*;

function init() : void  {
	sliderbar_mc.buttonMode = true;
	sliderbar_mc.addEventListener(MouseEvent.MOUSE_DOWN,moveSliderbar);
	stage.addEventListener(MouseEvent.MOUSE_UP,stopSliderbar);
	mask_mc.alpha = 0;
	after_mc.mask = mask_mc;
	TweenLite.to(sliderbar_mc,4,{x:stage.stageWidth/2,ease:Elastic.easeOut});
	TweenLite.to(mask_mc,4,{x:stage.stageWidth/2,ease:Elastic.easeOut});
}  

function moveSliderbar(event:MouseEvent):void {
	stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}  

function stopSliderbar(event:MouseEvent):void{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}

function mouseMoveHandler(event:MouseEvent):void{
	sliderbar_mc.x = mouseX;
	if (sliderbar_mc.x > stage.stageWidth){
		sliderbar_mc.x = stage.stageWidth;
	}
	else if(sliderbar_mc.x < 0){
		sliderbar_mc.x = 0;
	}
	mask_mc.x = sliderbar_mc.x;
}

init();

7. That’s it, test your movie to see it in action.

Win a “SlideCake, Powerful Flash Slider” component – Winners Announced

admin — Tue, 15 Feb 2011 17:38:44 +0000

Giveaway Contest : Win a “SlideCake” component, a Powerful Flash Slider.

Congrats
Congratulations to FOXRIVER, MO7AMEDELALFY and PAWEL who are the 3 lucky winners of a Slidecake component.

SlideCake
Flepstudio.org has just launched SlideCake, a Powerful Flash Slider component made for Flash designers and webmasters. With SlideCake, you can organize any type of web content into a beautiful and user-friendly slider.
Click on the following link to see examples of usage of this really great component : www.slidecake.com/examples.php

Giveaway Contest
~~This week, we’re giving away to three lucky Riacodes readers a Slidecake’s free licence.~~

What Do I Have To Do to Win?
Just leave us a comment. Too easy… but hurry as we just let you until this sunday to leave one.
The three winners will be announced on Monday 21st February.
Good luck!

Create a 3D Flipping Youtube Player

admin — Thu, 10 Feb 2011 14:56:46 +0000

In this new AS3 tutorial, learn how to create a 3D flipping Youtube Player consisting of a youtube player that you can flip 180 degrees to show a description of the video.

1. Create a new flash file (Actionscript 3.0) and save it as youtube.fla.

2. First we are going to create the back side that contains the video’s description.
To do so draw a rectangle 560×340 (dimensions of your youtube player) with the color of your choice. With the Text tool write your description on it. Select both text and rectangle and convert it to a movie clip with an instance name of back.
Once this movie clip is created, reselect it and convert it to a movie clip, set its registration point to the center and give it an instance name of container.
At this point you shoud have on the stage the “container” movie clip that contains the “back” movie clip.

3. Now create the button that will use to flip the container, convert it to a movie clip and give it an instance name of “flipBtn”.

4. All is set on the stage, now let’s add some actionscript code. Open the actions panel.
We’ll use the Tweenlite Engine and the Youtube AS3 API. If you are new to this, please visit our previous tutorial on the Youtube API.
First write the following statements in order to use the Tweenlite engine and communicate with www.youtube.com.

import flash.system.Security;
import com.greensock.*;

Security.allowInsecureDomain("*");
Security.allowDomain("*");

5. Then declare the following variables. Set the videoUrl variable to the id of your youtube video.

var videoUrl:String = "owGykVbfgUE";
var player:Object;
var loader:Loader = new Loader();
var flipped:Boolean = false;

6. Also set the back side’s rotationY property to -180 degrees and its visibility to false.

container.back.rotationY = -180;
container.back.visible = false;

flipBtn.buttonMode = true;

7. Next load the youtube video. Once the player is ready to play, we set the visibility of the back side to true and add a click event listener to the button.

loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));

function onLoaderInit(event:Event):void {
	container.addChild(loader);
	loader.x = -container.width /2;
	loader.y = -container.height /2;
	loader.content.addEventListener("onReady", onPlayerReady);
}

function onPlayerReady(event:Event):void {
  	player = loader.content;
   	player.loadVideoById(videoUrl);
   	player.setSize(560,340);
   	container.back.visible =true;
   	flipBtn.addEventListener(MouseEvent.CLICK,turn);
}

8. Inside the turn() function we checked the value of the flipped boolean variable. If it’s false, we use Tweenlite to rotate the container 180° vertically so that we can see the back side with the description and pause the video.
If it’s true, we use Tweenlite to rotate the container back to 0° so that we can see the youtube video and play it.
We also add to the Tweenlite.to method an onUpdate event listener that calls the setVisibility() function in which we set which side of the container is on top.

function turn(e:MouseEvent):void{
	if(!flipped){
		TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});
		flipped =  true;
		player.pauseVideo();
	}
	else {
		TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});
		flipped =  false;
		player.playVideo();
	}
}

function setVisibility():void{
	if(container.rotationY >= 90){
		container.addChild(container.back);
	}else if(container.rotationY < 90){
		container.addChild(loader);
	}
}

9. Here’s the final code :

import flash.system.Security;
import com.greensock.*;

Security.allowInsecureDomain("*");
Security.allowDomain("*");

var videoUrl:String = "owGykVbfgUE";
var player:Object;
var loader:Loader = new Loader();
var flipped:Boolean = false;

container.back.rotationY = -180;
container.back.visible = false;
flipBtn.buttonMode = true;

loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));

function onLoaderInit(event:Event):void {
	container.addChild(loader);
	loader.x = -container.width /2;
	loader.y = -container.height /2;
	loader.content.addEventListener("onReady", onPlayerReady);
}

function onPlayerReady(event:Event):void {
  	player = loader.content;
   	player.loadVideoById(videoUrl);
   	player.setSize(560,340);
   	container.back.visible =true;
   	flipBtn.addEventListener(MouseEvent.CLICK,turn);
}

function turn(e:MouseEvent):void{
	if(!flipped){
		TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});
		flipped =  true;
		player.pauseVideo();
	}
	else {
		TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});
		flipped =  false;
		player.playVideo();
	}
}

function setVisibility():void{
	if(container.rotationY >= 90){
		container.addChild(container.back);
	}else if(container.rotationY < 90){
		container.addChild(loader);
	}
}

XML Horizontal Accordion Photos Gallery

admin — Tue, 25 Jan 2011 18:31:18 +0000

In this AS3 tutorial, learn how to create an XML driven Horizontal Accordion that displays a list of Photos.
If you have the right webhosting for your website that supports XML, this tutorial would work perfectly once you’ve decided to display the integration of these codes on your site.

1. Create a new flash file (Actionscript 3.0) and save it as accordion.fla.

2. Create an XML file to store the photos’ datas and save it as datas.xml.


	1.jpg
	2.jpg
	3.jpg
	4.jpg
	5.jpg

(Photos credits :Sunset, Seabirds In Flight, Apple Tree, Daffodils, White Cloud And Blue Sky)

3. Create an “actions” layer. Open the actions panel. We’ll use the Tweenlite engine so first write the following statements in order to use it and its easing properties.

import com.greensock.TweenLite;
import com.greensock.easing.*;

4. Next declare the following variables.

var xml:XML;
var folder ="photos/";
var totalPhotos:Number;
var photos:Array = new Array();
var photosLoaded:int = 0;
var current:Number = -1;
var accordion:Sprite
var photoWidth:uint;
var barWidth:Number;

5. Load the XML file :

function loadXML( file:String ):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE,parseXML);
}

6. Then parse the XML :

function parseXML(e:Event):void {
	xml = new XML( e.target.data );
	totalPhotos =xml.photo.length();
	loadPhotos();
}

7. Inside the loadPhotos() function, we loop through the xml datas to create a Loader for each photo. The onComplete() function checks whether all photos are loaded. If so, it calls the createPanels() function.

function loadPhotos():void{
	for(var i:int = 0; i
8. Inside the createPanels() function, loop through the photos array in order to create the accordion’s panels that contain the photos. Position each panel according to the stage’s width divided by the total number of photos.
function createPanels():void{
	accordion = new Sprite();
	addChild(accordion);

	for(var i:int = 0; i < photos.length; i++){

		var panel:Sprite = new Sprite();
		barWidth = Math.ceil( stage.stageWidth / totalPhotos );
		panel.x = i  * barWidth;

		var bm:Bitmap = new Bitmap();
		bm = Bitmap(photos[i].content);
		bm.smoothing = true;
		panel.addChild(bm);
		accordion.addChild(panel);

		if (i==0) photoWidth=panel.width;

		if (i==photos.length-1)
			addListeners();
	}
}

9. Once all the panels are created, we add our event listeners:
function addListeners():void{
	for( var i:int = 0; i < accordion.numChildren; i++ ){
		var sp:Sprite = accordion.getChildAt(i) as Sprite;
		sp.addEventListener(MouseEvent.ROLL_OVER, onPanelOver);
	}
	accordion.addEventListener(MouseEvent.ROLL_OUT,closePanels);
}

10. Inside the onPanelOver() function we set each panel x coordinate so that the current one is entirely visible.
function onPanelOver(e:MouseEvent):void{
	var panel:Sprite = Sprite(e.target);
	current = accordion.getChildIndex(panel);

	barWidth = Math.ceil((stage.stageWidth-photoWidth) / (totalPhotos-1));

	for( var i :int = 0; i 
11. Inside the closePanels() function, we reposition each panel so that their visible part are of the same size.
function closePanels(e:MouseEvent):void{
	var sp:Sprite;
	barWidth = Math.ceil(stage.stageWidth/totalPhotos);
	for( var i:int = 0; i < accordion.numChildren; i++ ){
		sp = Sprite(accordion.getChildAt(i) );
		TweenLite.to( sp, .5, { x: i * barWidth } );
	}
}

12. Finally don’t forget to call the loadXML() function to make it work.

Here’s the final code.
import com.greensock.TweenLite;
import com.greensock.easing.*;

var xml:XML;
var folder ="photos/";
var totalPhotos:Number;
var photos:Array = new Array();
var photosLoaded:int = 0;
var current:Number = -1;
var accordion:Sprite
var photoWidth:uint;
var barWidth:Number;

loadXML( "datas.xml" );

function loadXML( file:String ):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE,parseXML);
}

function parseXML(e:Event):void {
	xml = new XML( e.target.data );
	totalPhotos =xml.photo.length();
	loadPhotos();
}

function loadPhotos():void{
	for(var i:int = 0; i

Horizontal Photo Gallery with Hover Zoom Effect

admin — Tue, 18 Jan 2011 17:47:07 +0000

In this tutorial, we’ll see how to build an XML driven Horizontal Photo Gallery with a nice Hover Zoom Effect.

1. Create a new flash file (Actionscript 3.0) and save it as src.fla.

2. Draw a rectangle the same size as your photos. Convert it to a movie clip with registration point at the top left and give it an instance name of “photo”. Draw an other rectangle a bit larger that will be used as the photo’s frame. Convert it to a movie clip with intance name of “bg”. Place “bg” behind “photo” and with both selected, convert the selection to a movie clip with registration point at the center. Export it for actionscript with a Class name of “Thumb”. Check the src.fla library to see the result.
With the Text tool draw a dynamic Text box and give it an instance name of “currentPhoto”. This text will display the title of the hovered photo.

3. Create an XML file to store the photos’ datas and save it as gallery.xml.

4. Create an “actions” layer. Open the actions panel. We’ll use the Tweenlite engine so first write the following statements in order to use it and the TintPlugin.

import com.greensock.TweenLite;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

5. Next declare the following variables.

var xml:XML;
var photos:Array;
var totalPhotos:Number;
var folder:String = "photos/";
var gallery:Sprite;
var photosLoaded:int=0;

6. Load the XML file by creating a loadXML() function. When the load is complete, it will call the parseXML() function.

function loadXML(file:String):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE, parseXML);
}

7. Then we need to parse the XML. We set our xml variable to the xml data, get the total amount of photos and call the l loadGallery() function.

function parseXML(e:Event):void{
	xml = new XML(e.target.data);
	totalPhotos = xml.children().length();
	loadGallery();
}

8. Inside the loadGallery() function, we create a “for” statement to loop through the xml datas to create a Loader for each photo. We store the Loader inside our photos Array variable, and add the Event.COMPLETE listener.

function loadGallery():void{
	photos = new Array();
	for(var i:int = 0; i
9. The onComplete() function checks whether all photos are loaded. If so, it calls the createThumbs() function.
function onComplete(e:Event):void{
	photosLoaded++;
	if(photosLoaded == totalPhotos){
		createThumbs();
	}
}

10. Inside the createThumbs() function, create a “for” statement to loop through the photos array in order to create the gallery thumbs. For each thumb, scale it down to half size, set its title property, create its bitmap photo and add it to the gallery.

We use Tweenlite to make them appear one after another.

Position the gallery at the center of the stage.
function createThumbs():void{
	gallery = new Sprite();
	addChild(gallery);

	for(var i:int = 0; i < photos.length; i++){

		var thumb:Thumb = new Thumb();
		thumb.scaleX = thumb.scaleY = .5;

		thumb.x = (thumb.width + 5) * i;
		thumb.title =  xml.photo[i].@title;

		var bm:Bitmap = new Bitmap();
		bm = Bitmap(photos[i].content);
		bm.smoothing = true;
		thumb.photo.addChild(bm);

		gallery.addChild(thumb);
		TweenLite.from(thumb, .5, {scaleX:0,scaleY:0,alpha:0, delay: i*0.2, onComplete:addThumbListeners,onCompleteParams:[thumb]});

	}
	gallery.x = stage.stageWidth/2 - gallery.width/2;
	gallery.y = stage.stageHeight/2 - gallery.height/2;

}

11. Once the thumbs are fully created, we add to them “MouseEvent.ROLL_OVER” and “MouseEvent.ROLL_OUT” listeners.
function addThumbListeners(thumb:MovieClip):void{
	thumb.addEventListener(MouseEvent.ROLL_OVER, onThumbOver);
	thumb.addEventListener(MouseEvent.ROLL_OUT, onThumbOut);
}

12. The onThumbOver() function scales up the hovered thumb. We add an onUpdate listener that calls the arrangeThumb() function when this event is triggered. It also tints the photo’s frame to black.

Inside the arrangeThumb() function we place the hovered photo above the other when its scale is superior to .6

When its scale is equal to 1, we set the currentPhoto text to the hovered photo title.
function onThumbOver(evt:MouseEvent):void {
	var thumb:MovieClip = MovieClip(evt.target);
	TweenLite.to(thumb,.5,{scaleX:1,scaleY:1,onUpdate:arrangeThumb, onUpdateParams:[thumb]});
	TweenLite.to (thumb.bg, .5, {tint: 0x000000});
}

function arrangeThumb(thumb:MovieClip):void{
	if (thumb.scaleX>.6)
		gallery.addChild(thumb);
	if(thumb.scaleX==1)
		currentPhoto.text = thumb.title;
}

13. The onThumbOut() function scales down the thumb, tints it back to its grey color and set the currentPhoto text to blank.
function onThumbOut(evt:MouseEvent):void {
	var thumb:MovieClip = MovieClip(evt.target);
	TweenLite.to(thumb,.5,{scaleX:.5, scaleY:.5});
	TweenLite.to (thumb.bg, .5, {tint: 0x999999});
	currentPhoto.text = "";
}

Finally don’t forget to call the loadXML() function to make it work.
loadXML("gallery.xml");

Here’s the final code.
import com.greensock.TweenLite;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

var xml:XML;
var photos:Array;
var totalPhotos:Number;
var folder:String = "photos/";
var gallery:Sprite;
var photosLoaded:int=0;

function loadXML(file:String):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE, parseXML);
}

function parseXML(e:Event):void{
	xml = new XML(e.target.data);
	totalPhotos = xml.children().length();
	loadGallery();
}

function loadGallery():void{
	photos = new Array();
	for(var i:int = 0; i.6)
		gallery.addChild(thumb);
	if(thumb.scaleX==1)
		currentPhoto.text = thumb.title;
}

function onThumbOut(evt:MouseEvent):void {
	var thumb:MovieClip = MovieClip(evt.target);
	TweenLite.to(thumb,.5,{scaleX:.5, scaleY:.5});
	TweenLite.to (thumb.bg, .5, {tint: 0x999999});
	currentPhoto.text = "";
}

loadXML("gallery.xml");

I hope you liked this tutorial and use this on your website. This codes would work best if you were able to choose the best and the cheapest webhosting service that supports XML coding.

Flash Christmas Card

admin — Wed, 22 Dec 2010 11:19:26 +0000

Create very easily a flash Christmas Card that you can open or close like a real one.

1. Create a new flash file (Actionscript 3.0) and save it as card.fla.

2. Our card will consist of 2 pages, the first will be the cover of the card and the 2nd the inner card where you write your wishes.
To create the first page, import the image of your choice on the stage and convert it to a movie clip with registration point at the top left. Give it an instance name of “page1_mc”. Inside this movie clip, add a second frame and create a blank rectangle the same size of your image.

3. For the inner page, create a blank rectangle the same dimensions of your first page and with the Text tool write your wishes over it.
Convert it to a movie clip.

4. Place the first page and the inner page at the same x and y coordinates so that the first page covers the inner page. Select both first page and inner page Movie Clips and convert the selection to a movie clip with an instance name of “card_mc”.

5. At this point you shoud have on “Scene 1″ a movie clip with an instance name of “card_mc” that contains the whole card.
Create a new “actions” layer and open the actions panel.
We’ll use Tweenlite so first import it.

import com.greensock.*;
import com.greensock.easing.*;

6. Declare a boolean variable to store whether the card is opened, call the stop() method for “page1_mc ” and add a Click event listener.

var opened :Boolean = false;
card_mc.page1_mc.stop();
card_mc.page1_mc.addEventListener(MouseEvent.CLICK,turnPage);

7. In the turnPage() function, we check the value of our “opened” boolean variable.
If it’s false we want to open the card. To do so, we animate “page1_mc” rotationY property to a value of 180. We add an ENTER_FRAME event listener, event that will be handled by the openCard() function. In the openCard() function, we check the value of the “page1_mc” rotationY property. If it’s superior to 90° which means the card is half opened, we stop “page1_mc” to frame 2.

To close the card we apply the same principles to reverse.

function turnPage(e:MouseEvent):void{
	if(!opened){
		opened = true;
		addEventListener(Event.ENTER_FRAME, openCard);
		TweenLite.to(card_mc.page1_mc,2,{rotationY:180, ease:Strong.easeOut});
	}
	else{
		opened = false;
		addEventListener(Event.ENTER_FRAME, closeCard);
		TweenLite.to(card_mc.page1_mc,2,{rotationY:0, ease:Strong.easeOut});
	}
}

function openCard(e:Event):void{
	if(card_mc.page1_mc.rotationY > 90){
		card_mc.page1_mc.gotoAndStop(2);
	}
}

function closeCard(e:Event):void{
	if(card_mc.page1_mc.rotationY < 90){
		card_mc.page1_mc.gotoAndStop(1);
	}
}

8. Finally to animate the card at the beginning, we add the following line.

TweenLite.to(card_mc,4,{x:400, rotationZ:-5,  ease:Strong.easeInOut});

Here’s the final code, test your movie to see it in action.

import com.greensock.*;
import com.greensock.easing.*;

var opened :Boolean = false;
card_mc.page1_mc.stop();
card_mc.page1_mc.addEventListener(MouseEvent.CLICK,turnPage);

TweenLite.to(card_mc,4,{x:400, rotationZ:-5,  ease:Strong.easeInOut});

function turnPage(e:MouseEvent):void{
	if(!opened){
		opened = true;
		addEventListener(Event.ENTER_FRAME, openCard);
		TweenLite.to(card_mc.page1_mc,2,{rotationY:180, ease:Strong.easeOut});
	}
	else{
		opened = false;
		addEventListener(Event.ENTER_FRAME, closeCard);
		TweenLite.to(card_mc.page1_mc,2,{rotationY:0, ease:Strong.easeOut});
	}
}

function openCard(e:Event):void{
	if(card_mc.page1_mc.rotationY > 90){
		card_mc.page1_mc.gotoAndStop(2);
	}
}

function closeCard(e:Event):void{
	if(card_mc.page1_mc.rotationY < 90){
		card_mc.page1_mc.gotoAndStop(1);
	}
}

Image Appearance Effect : Fall Down

admin — Sun, 19 Sep 2010 15:14:46 +0000

In this Image Appearance Effect tutorial, see how to reveal an image piece by piece with a fall down effect.

1. Here’s the code to achieve the Fall Down effect.
The code is the same as previous tutorials except for the highlighted lines.
To make the image’s pieces appear horizontally, we loop through the rows and through the columns (instead of columns and rows).
In the revealImage() function, we use the Tweenlite.from (instead of Tweenlite.to) method to animate the y property of each image’s piece.

import com.greensock.*;
import com.greensock.easing.*;

const COLUMNS:uint=5;
const ROWS:uint=5;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("image.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

function onImageLoaded(e:Event):void {

	var originalBitmapData:BitmapData = e.target.content.bitmapData;

	var imageWidth : Number  = originalBitmapData.width / COLUMNS;
    var imageHeight : Number = originalBitmapData.height / ROWS;

	for (var i = 0; i < ROWS; i++) {

		for (var j = 0; j < COLUMNS; j++) {

			var imageHolder:MovieClip = new MovieClip();

			var image:Bitmap = new Bitmap();
			image.bitmapData=new BitmapData(imageWidth,imageHeight);
 			image.bitmapData.copyPixels(
								originalBitmapData,
			  					new Rectangle(j * imageWidth, i * imageHeight,imageWidth, imageHeight),
			  					new Point(0,0));

			imageHolder.addChild(image);

			imageHolder.x= j*imageWidth ;
			imageHolder.y= i*imageHeight ;

			imageHolder.alpha=0;

  			imagesGrid.push(imageHolder);
			addChild(imageHolder);

		}
	}
	revealImage();
}

function revealImage():void {
	for (var i:int = 0; i 
2. That’s it, test your movie to see it in action.

Image Appearance Effect : Random Vertical Rotation

admin — Tue, 14 Sep 2010 14:09:41 +0000

The following code is one of a serie of codes that we will publish on Image Appearance Effect. This one proposes to reveal an image piece by piece randomly, each piece appears by rotating vertically.

1. To get started, go check our previous tutorial entitled “Move the Mouse to Reveal the Poster”.

2. With Flash CS4 or Flash CS5, create a new flash file (Actionscript 3.0).
Open the actions panel.

3. Paste the following code. It’s almost the same as the previous tutorial except for the highlighted lines.
To make each piece of the image to appear randomly, we create a delayTime property and set it to a random value.
In the revealImage() function, we loop through the imagesGrid array and for each piece use the Tweenlite engine to animate its alpha and rotationY property. We specify the delay parameter to the delayTime property that we’ve set before.

import com.greensock.*;

const COLUMNS:uint=8;
const ROWS:uint=4;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("img.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

function onImageLoaded(e:Event):void {

	var originalBitmapData:BitmapData = e.target.content.bitmapData;

	var imageWidth : Number  = originalBitmapData.width / COLUMNS;
    var imageHeight : Number = originalBitmapData.height / ROWS;

	for (var i = 0; i < COLUMNS; i++) {

		for (var j = 0; j < ROWS; j++) {

			var imageHolder:MovieClip = new MovieClip();

			var image:Bitmap = new Bitmap();
			image.bitmapData=new BitmapData(imageWidth,imageHeight);
 			image.bitmapData.copyPixels(
								originalBitmapData,
			  					new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
			  					new Point(0,0));

			image.smoothing = true;

			imageHolder.addChild(image);

			image.x = -imageWidth / 2;
			image.y = -imageHeight / 2;

			imageHolder.x= i*imageWidth + imageWidth/2;
			imageHolder.y= j*imageHeight + imageHeight/2;

			imageHolder.alpha=0;
			imageHolder.delaytime = Math.random();

  			imagesGrid.push(imageHolder);
			addChild(imageHolder);

		}
	}
	revealImage();
}

function revealImage():void {
	for (var i:int = 0; i < imagesGrid.length; i++){
		var imageGrid:MovieClip = imagesGrid[i] as MovieClip;
		TweenLite.to(imageGrid,.5,{rotationY: -360,alpha:1,delay:imageGrid.delaytime});
	}
}

4. That’s it, test your movie to see it in action.

Move the Mouse to Reveal the Poster

admin — Mon, 06 Sep 2010 14:21:03 +0000

In this tutorial, learn how to reveal a poster piece by piece when the user hovers it.

1. This tutorial is a variation of our previous tutorial entitled “Revealing an Image with a Grid Effect Animation”, so first go check it to get the main explanations as we’ll go quickly here.

2. Create a new flash file (Actionscript 3.0) and set its dimensions to the dimensions of your poster.
Open the actions panel.

3. Paste the following code. It’s the same as the previous tutorial except for the highlighted lines. The difference here is the way we position the elements so that the tween scale animation on each piece will start from the center of the piece.
Also we add a MOUSE_OVER event listener to each piece of the poster.

import com.greensock.*;

const COLUMNS:uint=10;
const ROWS:uint=10;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("theamerican.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

function onImageLoaded(e:Event):void {

	var originalBitmapData:BitmapData = e.target.content.bitmapData;

	var imageWidth : Number  = originalBitmapData.width / COLUMNS;
    var imageHeight : Number = originalBitmapData.height / ROWS;

	for (var i = 0; i < COLUMNS; i++) {

		for (var j = 0; j < ROWS; j++) {

			var imageHolder:MovieClip = new MovieClip();

			var image:Bitmap = new Bitmap();
			image.bitmapData=new BitmapData(imageWidth,imageHeight);
 			image.bitmapData.copyPixels(
								originalBitmapData,
			  					new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
			  					new Point(0,0));

			imageHolder.addChild(image);

			image.x = -imageWidth / 2;
			image.y = -imageHeight / 2;

			imageHolder.x= i*imageWidth + imageWidth/2;
			imageHolder.y= j*imageHeight + imageHeight/2;

			imageHolder.alpha=0;
			imageHolder.addEventListener(MouseEvent.MOUSE_OVER, overHandler);

  			imagesGrid.push(imageHolder);
			addChild(imageHolder);
		}
	}
}

4. The overHandler() function gets the piece of the poster which has triggered the event and uses the Tweenlite engine to animate its alpha and scales properties. Then we prevent the piece that has been revealed from receiving mouse messages and remove its event listener.

function overHandler(e:MouseEvent):void {
	var imageGrid = e.target as MovieClip;
 	imageGrid.scaleX = imageGrid.scaleY = 0;
 	TweenLite.to(imageGrid, .5, {alpha: 1,scaleX:1,scaleY:1});
 	imageGrid.mouseEnabled = false;
 	imageGrid.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);
}

5. Here’s the final code. Test your movie to see it in action.

import com.greensock.*;

const COLUMNS:uint=10;
const ROWS:uint=10;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("theamerican.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

function onImageLoaded(e:Event):void {

	var originalBitmapData:BitmapData = e.target.content.bitmapData;

	var imageWidth : Number  = originalBitmapData.width / COLUMNS;
    var imageHeight : Number = originalBitmapData.height / ROWS;

	for (var i = 0; i < COLUMNS; i++) {

		for (var j = 0; j < ROWS; j++) {

			var imageHolder:MovieClip = new MovieClip();

			var image:Bitmap = new Bitmap();
			image.bitmapData=new BitmapData(imageWidth,imageHeight);
 			image.bitmapData.copyPixels(
								originalBitmapData,
			  					new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
			  					new Point(0,0));

			imageHolder.addChild(image);

			image.x = -imageWidth / 2;
			image.y = -imageHeight / 2;

			imageHolder.x= i*imageWidth + imageWidth/2;
			imageHolder.y= j*imageHeight + imageHeight/2;

			imageHolder.alpha=0;
			imageHolder.addEventListener(MouseEvent.MOUSE_OVER, overHandler);

  			imagesGrid.push(imageHolder);
			addChild(imageHolder);
		}
	}
}

function overHandler(e:MouseEvent):void {
	var imageGrid = e.target as MovieClip;
 	imageGrid.scaleX = imageGrid.scaleY = 0;
 	TweenLite.to(imageGrid, .5, {alpha: 1,scaleX:1,scaleY:1});
 	imageGrid.mouseEnabled = false;
 	imageGrid.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);
}