Flash Christmas Card

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.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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