RiaCodes

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 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.

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

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.
Get more unique christmas card ideas from PsPrint blog.

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

Displaying Pictures According to the Cursor Position

admin — Tue, 17 Aug 2010 13:06:48 +0000

In this easy tut, learn how to browse pictures contained in a movie clip according to the cursor position. The user will watch the human evolution by simply moving his mouse cursor horizontally.

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

2. Create a movie clip and put each one of your picture in a new frame. Set its registration point to the top left and give it an instance name of “pic_mc”.

3. Create an “actions” layer and with its first frame selected open the actions panel.
First add a stop() to the “pic_mc” movie clip to prevent if from looping through its frames and add ROLL_OVER and ROLL_OUT event listeners.

pic_mc.stop();
pic_mc.addEventListener(MouseEvent.ROLL_OVER, overHandler);
pic_mc.addEventListener(MouseEvent.ROLL_OUT, outHandler);

4. In the overHandler() function, we add a MOUSE_MOVE event listener that will call the changeFrame() function when the event will be triggered. In the changeFrame() function, we set the current frame of “pic_mc” according to the mouse position on the movie clip.

function overHandler(e:Event):void {
	pic_mc.addEventListener(MouseEvent.MOUSE_MOVE,changeFrame);
}

function changeFrame(e:Event):void {
	var frame : uint = Math.ceil(pic_mc.totalFrames * pic_mc.mouseX / pic_mc.width);
	pic_mc.gotoAndStop(frame);
}

5. In the outHandler() function, we simply remove the MOUSE_MOVE listener.

function outHandler(e:Event):void {
	pic_mc.removeEventListener(MouseEvent.MOUSE_MOVE, changeFrame);
}

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

pic_mc.stop();
pic_mc.addEventListener(MouseEvent.ROLL_OVER, overHandler);
pic_mc.addEventListener(MouseEvent.ROLL_OUT, outHandler);

function overHandler(e:Event):void {
	pic_mc.addEventListener(MouseEvent.MOUSE_MOVE,changeFrame);
}

function changeFrame(e:Event):void {
	var frame : uint = Math.ceil(pic_mc.totalFrames * pic_mc.mouseX / pic_mc.width);
	pic_mc.gotoAndStop(frame);
}

function outHandler(e:Event):void {
	pic_mc.removeEventListener(MouseEvent.MOUSE_MOVE, changeFrame);
}

Revealing an Image with a Grid Effect Animation

admin — Thu, 05 Aug 2010 10:26:51 +0000

In this tutorial, we’ll see how to reveal an image piece by piece using AS3.

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

2. All will happen in the code so open the actions panel. As often, we’ll use the Tweenlite engine.
First import the Tweenlite engine.

import com.greensock.*;

3. Declare 2 constants to store the number of columns and rows that you like the image to be sliced into, and an Array variable to stores later all the sliced images.

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

var gridImages : Array = new Array();

4. Next load the image. When the image is loaded, it will call the onImageLoaded function.

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

5. In the onImageLoaded function, we want to slice the images into COLUMNS*ROWS pieces.
First we retrieve the bitmap data of the loaded image. Store the width and the height of a piece.

Then we loop through the columns and through the rows. Inside this double loop, we create for each iteration a movie clip (imageHolder) that will contain a piece of the original image. The small piece is created by using the copyPixels() method that copies a rectangular area from the original image into the small piece. We set the imageHolder’s x and y properties and set its alpha property to 0 to make it invisible.
We add the imageHolder to the gridImages array and add it to the display list.

Finally when all our sliced images have been created we call the revealImage() function that we’re going to create right now.

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(1,1));
 
			imageHolder.addChild(image);
 
			imageHolder.x=i*imageWidth;
			imageHolder.y=j*imageHeight;
			imageHolder.alpha=0;
  
			imagesGrid.push(imageHolder);
			addChild(imageHolder);
		}
	}
	
	revealImage();
}

6. The revealImage() function loop through the imagesGrid array and for each image uses the Tweenlite engine to animate its alpha property. We specify the delay parameter to make the pieces of the original image appear one after another.

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

7. 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("myImage.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(1,1));
 
			imageHolder.addChild(image);
 
			imageHolder.x=i*imageWidth;
			imageHolder.y=j*imageHeight;
			imageHolder.alpha=0;
  
			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, .3, { alpha: 1,delay:i*.15});
	}
}