Zoom Website via ActionScript 3
February 6, 2009 by: smonteIn this tutorial, I’ll show you how to create a one frame website using ActionScript 3. We will include a simple zoom effect between page changes.
Setting up the environment
1. Create a new document of size 300×300.
2. Draw three different colored rectangles. Make them 100×100.
3. Type some text on them, eg. “page 1″, “page 2″ and “page 3″.
4. Convert each rectangle into a movie clip. You can name them however you want, just set the registration points to the center!
5. Position the rectangles as in the image below.
6. Give the rectangles instance names, “page01″, “page02″ and “page03″.
Moving into ActionScript
First, don’t get scared of the amount of code! It’s really straight forward, if you bother to read the comments as well.
7. Create a new layer for ActionScript. Type the following in the first frame.
import fl.transitions.Tween; import fl.transitions.easing.*; import fl.transitions.TweenEvent; //Store the current page that is displayed var currentPage:MovieClip = null; //This array holds all the tweens so they won't get //carbage collected var tweens:Array = new Array(); //Make the buttons 50% transparent page01.alpha = 0.5; page02.alpha = 0.5; page03.alpha = 0.5; //Make the pages look like button (hand cursor) page01.buttonMode = true; page02.buttonMode = true; page03.buttonMode = true; //Add all the necessary event listeners addEventListeners(); //This function adds the necessary event listeners for the buttons function addEventListeners():void { //Add mouse over handlers for each button page01.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); page02.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); page03.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); //Add mouse out handlers for each button page01.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); page02.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); page03.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); //Add mouse click handlers for each button page01.addEventListener(MouseEvent.CLICK, mouseClickHandler); page02.addEventListener(MouseEvent.CLICK, mouseClickHandler); page03.addEventListener(MouseEvent.CLICK, mouseClickHandler); } //This function removes all the event listeners created //in the addEventListeners() function function removeEventListeners():void { //Remove mouse over handlers for each button page01.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); page02.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); page03.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); //Remove mouse out handlers for each button page01.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); page02.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); page03.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); //Remove mouse click handlers for each button page01.removeEventListener(MouseEvent.CLICK, mouseClickHandler); page02.removeEventListener(MouseEvent.CLICK, mouseClickHandler); page03.removeEventListener(MouseEvent.CLICK, mouseClickHandler); } //This is called when the mouse is over the button function mouseOverHandler(e:MouseEvent):void { //Get the button from the event var button:MovieClip = e.target as MovieClip; //Fully opaque button.alpha = 1; } //This is called when the mouse moves away from the button function mouseOutHandler(e:MouseEvent):void { //Get the button from the event var button:MovieClip = e.target as MovieClip; //50% transparent button.alpha = 0.5; } //This is called when the mouse is clicked on a button function mouseClickHandler(e:MouseEvent):void { //Remove the event listeners while we animate removeEventListeners(); //Get the button from the event var button:MovieClip = e.target as MovieClip; //Clicked button is now our current page currentPage = button; //Make the current page fully opaque currentPage.alpha = 1; //Add the current page to the top of the stage setChildIndex(currentPage, 2); //Animate the button to the center of the stage var tweenX:Tween = new Tween(currentPage, "x", Regular.easeOut, currentPage.x, 150, 0.5, true); //Push the tween to an array tweens.push(tweenX); //Listen when the tween is finished tweenX.addEventListener(TweenEvent.MOTION_FINISH, centerTweenFinished); } //This is called when the page is moved to the center of the stage function centerTweenFinished(e:TweenEvent):void { //Grow the page to almost full screen size var tweenX:Tween = new Tween(currentPage, "scaleX", Regular.easeOut, 1, 2.5, 1, true); var tweenY :Tween = new Tween(currentPage, "scaleY", Regular.easeOut, 1, 2.5, 1, true); //Add the tweens to the array tweens.push(tweenX); tweens.push(tweenY); //Add a click listener for closing the current page currentPage.addEventListener(MouseEvent.CLICK, currentPageClicked); } //This function is called when the current page is clicked function currentPageClicked(e:Event):void { //Scale the current page down var tweenX:Tween = new Tween(currentPage, "scaleX", Regular.easeOut, 2.5, 1, 1, true); var tweenY:Tween = new Tween(currentPage, "scaleY", Regular.easeOut, 2.5, 1, 1, true); //Push the tweens to an array tweens.push(tweenX); tweens.push(tweenY); //Listen when the scaling down is finished tweenX.addEventListener(TweenEvent.MOTION_FINISH, scaleDownFinished); //Remove the click listener for the current page currentPage.removeEventListener(MouseEvent.CLICK, currentPageClicked); } //This function is called when scaling the current page down //is finished function scaleDownFinished(e:Event):void { var tweenX:Tween; //Move the current page to the original position if (currentPage == page01) { tweenX = new Tween(currentPage, "x", Regular.easeOut, currentPage.x, 50, 0.5, true); } else if (currentPage == page02) { tweenX = new Tween(currentPage, "x", Regular.easeOut, currentPage.x, 150, 0.5, true); } else { tweenX = new Tween(currentPage, "x", Regular.easeOut, currentPage.x, 250, 0.5, true); } //Push the tween to an array tweens.push(tweenX); //Add all the event listeners back addEventListeners(); }
You are done, test your new Flash movie! If you have any questions, please visit the forum.
Related tutorials:
Comments
10 Responses to “Zoom Website via ActionScript 3”Leave a Reply
You must be logged in to post a comment.
I have created a thumbnail gallery of 23 images. I am trying to adapt this code to work for scaling the images up in size. I have set up a main document class and am using an external .as file. I have created all the images in the gallery and they are .jpg files imported into the library. Just to test this, I gave the first three images the instance names of page01, page02, page03. When I run it I get a 5006 error and I know it is related to having an external class, but not sure how to fix this. Also, I am not sure if this code can be adapted to this architecture. I am not that great at Actionscript so any help would be great.
I am having problems with this line. – tweens.push(tweenX);
I have chacked the Action Scripts many times and come aross many mistakes but I have put them right now, but the last batch of errors I have is this line. I cannot see where the problem is.
Can some one point me in the right direction.
Thanks
I found tutorials.flashmymind.com very informative. The article is professionally written and I feel like the author knows the subject very well. tutorials.flashmymind.com keep it that way.
Hii
I completly did this tutorial wich is pretty nice thanks,
but i always get errors, but the program works just fine
how come?
errors:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at KevinSite_fla::TopStuufok_1/mouseOverHandler()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at KevinSite_fla::TopStuufok_1/mouseOutHandler()
Grtz
Kevin
Hi!
Your tutorial has gotten me a really long way, and I think I understand most of the code, or at least what it’s for.
One thing however: is there a way to make it so that I can close the zoomed graphic by pressing a button on it (for example an X) instead of the whole thing?
I actually want to make a simple slideshow for each zoomed graphic when it opens, so cannot have back/forward buttons since I will end up closing the whole thing no matter what I click on!
I have created a ‘Close_btn’ button symbol on each….and have tried fiddling around with the code, but I might be missing the point, since its not working!
Eternally greatful, your tutorial and help is very much appreciated!
I’m fairly new to Actionscript and while I had no problem adapting this to work with a project I am working on but I would prefer to not have the images slide across the screen. What lines do I comment out to sjmply have them zoom out while going from transparent to opaque? Any help would be greatly appreciated!
I attached file FLA with problem about I am speaking.
http://www.sendspace.pl/file/V4iIysO2/
Please download and look.
Can you be a bit more specific when you say they are not “working good”. Naturally if you have bigger rectangles you may want to adjust the scale values to fir your stage.
I mean if i adjust scale to fit parameters, rectangles don’t scale from center to full scren size (parameters is changed for it) but it scales from center previous stage 300*300 and don’t cover screen. Why?
I have problem. Everything is ok with rectangle sizes 100×100. Scales X and Y works properly but If I change sizes for 200×200 then scales X and Y don’t working good…
Could someone solve this problem?!:)