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.

View DemoDownload Source

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.

Screenshot

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

Screenshot

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

11 thoughts on “Flash Christmas Card

  1. hendry

    it’s not working, error with this comment

    TypeError: Error #1010: A term is undefined and has no properties.
    at book_fla::MainTimeline/frame1()

    what is that?

    please help me

  2. Miriam Freer

    Hi,

    I have downloaded both files and receive the error flash cannot open file. I am running Flash 8 on a Mac.

    HELP? I would also like to have the typewriter text effect on the inside of the card.

    I love this web site and am willing to link back to you as well as share any future scripts I develop for sites.

    Thank you in advance,
    Miriam Freer

  3. Gut6

    Hi,
    I’m waiting for more tutorials for Flex! πŸ™‚ I didn’t found many good sites about flex in the Internet. πŸ™ riacodes looks even very good but has so small number of tuts. πŸ™

  4. admin Post author

    @MIRIAM FREER :
    Hi,
    The file can only be opened with Flash CS4 or Flash CS5 because this tutorial uses the Flash Player 10’s 3D features.

  5. Pingback: ι—ͺε­¦ flash圣诞贺卑

  6. Pingback: Flash Tutorial : Christmas Card : All CG Tutorials

  7. Michellea

    TypeError: Error #1010: A term is undefined and has no properties.
    at Untitled_fla::MainTimeline/frame1()
    Same error as Hendry. =( Help would be appreciated. But thank you for the tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *