Sliding Background

[coldmail590]

Hello, thank you for taking the time to read my question.
This is my first time using Flash to create a website. I am not familiar with Action Script, its functions classes etc., however I am familiar in programming in JAVA.
I will be using ActionScript 3 and Flash CS5. (I have Flash CS4 also if needed)


I am trying to create a website with a scrolling background that has 4 different scenes.

I have attached an image to illustrate my idea.


There will be a user interface, consisting of 4 buttons, which will be on stage at all times.

Each of the button will correspond to a different scene of the background. So if the user clicks on the third button, the background will slide itself until the third scene appears on the stage.

Questions in mind:

How would the coding be like? I am planning to apply it to the button. So the background should shift ___ amount of pixels to the left or right depending on which scene the user is currently in. So if background is currently at position 800,0 (so the user is currently in scene 2) and the user clicks on 4th button. The background should move -1600 so the 4th scene will appear on stage. I am guessing there is 16 different cases I have to address.


Assuming if that works, how would I also move the other objects on the scenes of background? Such as links to email address or my portfolio.

Thank you very much for your help!

[sstundzia]

Assuming that your first scene starts at (0, 0) coordinates and you know either how many pixels each screen occupies or where exactly that screen starts (in coordinates) you can simply do something like:

var screenWidth:Number = 800; // Seems like that's the number you want
private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = - (1 * screenWidth); // 0 for first screen, 1 for second screen,...
}
this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);

or

var positions:Array = [0, 800, 1600, 2400];
private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = - positions[1]; // 0 for first screen, 1 for second screen,...
}
this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);

Of course this will shift instantly and this is very basic way...
If you want animated way, check out Tween class

[coldmail590]

Thank you very much for your reply . Question: Regarding the tween class. I found

http://www.republicofcode.com/tutori...enclasseasing/

how would I implement that to the code above? I want the background to slide in and bounce a little before settling on the stage.

import mx.transitions.Tween;
import mx.transitions.easing.*;

var positions:Array = [0, 800, 1600, 2400];
var myHoriTween:Tween = new Tween (background,"_x",Bounce.easeOut,100,500,4,true);


private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = - positions[1]; // 0 for first screen, 1 for second screen,...
}

myHoriTween.onMotionFinished = function (){
this.background()
}

this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);

[coldmail590]

Also I would need a way to tell which scene the user is currently at in order to correctly determine whether to move left or right and how much. If the user is already in scene 2 and wants to move to scene 4, the background would only need to move -1600. If the user is in scene 1 and wants to move scene 4, the background would need to move 2400.

Would the following be correct? Please correct any typos in the coding. I am a bit rusty in my programming.

Clicking on the green button should take the user to scene 2
The following code is for the green button



var positions:Array = [0, 800, 1600, 2400];


if (this.background.x == positions[0]){ //User is in first scene

private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = positions[1]; //moves user to second scene from first scene
}
}

this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);
}

if (this.background.x == positions[1]){ //User is in second screen

private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = positions[0]; //moves user to second scene from second scene which is no movement since they are already in second scene
}
}

this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);

}
if (this.background.x == positions[2]){ //User is in third screen

private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = -positions[1]; //moves user to second scene from third scene

}
}

this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);


}
if (this.background.x == positions[3]){ //User is in fourth screen

private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = -positions[2]; //moves user to second scene from fourth scene

}
}

this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);
}




Thank you for your help!

[coldmail590]

Also regarding the tweening. I found

http://www.republicofcode.com/tutori...enclasseasing/

how would I implement that to the background object? I want the background to slide in and bounce a little before settling on the stage.

import mx.transitions.Tween;
import mx.transitions.easing.*;

var positions:Array = [0, 800, 1600, 2400];
var myHoriTween:Tween = new Tween (background,"_x",Bounce.easeOut,100,500,4,true);


private function onGreenButtonClick(e:MouseEvent):void
{
this.background.x = - positions[1]; // 0 for first screen, 1 for second screen,...
}

myHoriTween.onMotionFinished = function (){
this.background()
}

this.greenButton.addEventListener(MouseEvent.CLICK , this.onGreenButtonClick);

[sstundzia]

Forget about current screen.... you need to go to 4th screen - set the background.x coordinate to appropriate value... in this case this.background.x = -2400; that's it... nothing else... If background is currently at x:0 or x:-1600 it still will have to end up at x:-2400 to show that same 4th screen.

var positions:Dictionary = new Dictionary();
positions[this.blueButton] = 0;
positions[this.greenButton] = -800;
positions[this.orangeButton] = -1600;
positions[this.redButton] = -2400;

private function onButtonClick(e:MouseEvent):void
{
    this.background.x = positions[e.target];
}

this.blueButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.greenButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.orangeButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.redButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);

that should do the trick.. now it's up to you to change variable names for those four buttons + background...

[sstundzia]

as for tweening instead:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var positions:Dictionary = new Dictionary();
positions[this.blueButton] = 0;
positions[this.greenButton] = -800;
positions[this.orangeButton] = -1600;
positions[this.redButton] = -2400;

private function onButtonClick(e:MouseEvent):void
{
    //this.background.x = positions[e.target];
    new Tween(this.background, "x", Elastic.easeOut, this.background.x, positions[e.target], 2, true).start();
}

this.blueButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.greenButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.orangeButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.redButton.addEventListener(MouseEvent.CLICK, this.onButtonClick);

This should smoothly go to any other screen over 2 second period.

[sstundzia]

Assuming if that works, how would I also move the other objects on the scenes of background? Such as links to email address or my portfolio.

if you want to move your content along with the background, add your content to the background as children. you can actually have four Sprites to hold each screen separately and with ease of access for you...

import flash.display.Sprite;
private var background:Sprite = new Sprite(); // Can be movieclip if you really need it

// Scenes:
private var blueScene:Sprite = new Sprite();
private var greenScene:Sprite = new Sprite();
private var orangeScene:Sprite = new Sprite();
private var redScene:Sprite = new Sprite();

// Setup scenes:
this.blueScene.x = 0;
this.greenScene.x = 800;
this.orangeScene.x = 1600;
this.redScene.x = 2400;
this.blueScene.y = 0;
this.greenScene.y = 0;
this.orangeScene.y = 0;
this.redScene.y = 0;
this.blueScene.width = this.greenScene.width = this.orangeScene.width = this.redScene.width = 800;
this.blueScene.height = this.greenScene.height = this.orangeScene.height = this.redScene.height = 600;

this.background.addChild(this.blueScene);
this.background.addChild(this.greenScene);
this.background.addChild(this.orangeScene);
this.background.addChild(this.redScene);

Now you have four different containers for your content. Add your stuff to each scene sprite as if they were exactly 800x600 pages separately...

P.S. That previous scrolling need's not to be updated... :P you still scroll the background itself and everything within will go along for a ride...

[coldmail590]

THANK YOU so much for you kind help!



I've tried the code (with the tween implemented) above, but after compiling, I get the error

Scene 1, Layer 'BG', Frame 75, Line 12 1013: The private attribute may be used only on class property definitions.

[sstundzia]

I'm working with Flex builder, thus ALL of my code is withing a class... thus i'm always using "this" where applicable and always putting private/protected/public/internal...

Since you're putting your code directly into actions panel in frame, should lose at least private modifiers (that's what the error is about... )

[coldmail590]

import fl.transitions.Tween;
import fl.transitions.easing.*;

var positions:Dictionary = new Dictionary();
positions[this.home] = 0;
positions[this.about] = -800;
positions[this.portfolio] = -1600;
positions[this.contact] = -2400;

function onButtonClick(e:MouseEvent):void
{
    //this.background.x = positions[e.target];
    new Tween(this.background, "x", Elastic.easeOut, this.background.x, positions[e.target], 5, true).start();
}

[B][COLOR="Red"]this.home.addEventListener(MouseEvent.CLICK, this.onButtonClick);[/COLOR][/B]
this.about.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.portfolio.addEventListener(MouseEvent.CLICK, this.onButtonClick);
this.contact.addEventListener(MouseEvent.CLICK, this.onButtonClick); 

Humm after compiling, I get an output

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

So I ran the debugger and it stops at the red text above this.home.addEventListener...

I double checked all my buttons to see if they had the right corresponding names and they did. Then I tried to change them to movieclips but that did not work either.

Here is what I did to make my buttons. I imported a psd image and changed that into a button type. I also applied frames in the UP OVER and DOWN to animate the button. (I used this http://www.smartwebby.com/Flash/button_symbols.asp) Would that cause a conflict with the addEventListener(MouseEvent.CLICK, this.onButtonClick ?

[sstundzia]

If google suggests correctly, then you don't need "this." before "onButtonClick" in marked and three subsequent lines

[coldmail590]

I have tried your suggestion but it still gives me the same

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

[sstundzia]

Let's see... are your buttons on the stage? or are they inside some other clip?
if on stage and have instance names this should work (without "this." before onButtonClick)... If inside some other movieclip, then you need to specify a path to that button.

For the sake of example say that your buttons are within background movieclip.
then you would access those buttons from stage using

this.background.home.addEventListener(MouseEvent.CLICK, onButtonClick);

also use this same access to fill that positions dictionary...

[coldmail590]

Actually I just discovered that I didn't give the buttons on the stage instance names!

After I fixed that, I compiled the following:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var positions:Dictionary = new Dictionary();
positions[this.home_button] = 0;
positions[this.about_button] = -800;
positions[this.portfolio_button] = -1600;
positions[this.contact_button] = -2400;

function onButtonClick(e:MouseEvent):void
{
    new Tween(this.bg_mc, "x", Elastic.easeOut, this.bg_mc.x, positions[e.target], 10, true).start();
}

this.home_button.addEventListener(MouseEvent.CLICK, onButtonClick);
this.about_button.addEventListener(MouseEvent.CLICK, onButtonClick);
this.portfolio_button.addEventListener(MouseEvent.CLICK, onButtonClick);
this.contact_button.addEventListener(MouseEvent.CLICK, onButtonClick); 

Yay no errors or outputs! BUT the buttons do not work
When click on any of them (the first time) it will bring me to scene 3 (I did not notice any tween or easing). When I try to click on another button, nothing happens.

[sstundzia]

I have attached my own test version. seems to be working for me... Try to compare...

[coldmail590]

Thank you very much for your test version. I found out that my symbol properties in the library were different than yours. They had a Linkage with Export for ActionScript and Export in frame 1 both checked. After unchecking those, the buttons worked. However the coordinates were off. My background image is positioned like yours on the stage but when I compile it to test, the background positions were off by 800.

I ended up using

positions[this.home_button] = 1600;
positions[this.about_button] = 800;
positions[this.portfolio_button] = 0;
positions[this.contact_button] = -800; 

But anyways, everything seems to be working fine now! Thank you very much for your help! I will now attempt to add contents to the background and have them also move along with it.

[sstundzia]

If you add something to background and/or it's children, don't touch that scrolling algorithm. Those items will move along like a pencil put on the paper moves along when you pull paper. Anyway... Glad to be of help... good luck

[coldmail590]

Hello again! I am back with more questions I am confused with the sprites. Here is the code I am using:

import flash.display.Sprite;
var bg_mc:Sprite = new Sprite(); // Can be movieclip if you really need it

// Scenes:
var blueScene:Sprite = new Sprite();
var greenScene:Sprite = new Sprite();
var orangeScene:Sprite = new Sprite();
var redScene:Sprite = new Sprite();

//My button to link to flickr.com
var flickr_button:Sprite = new Sprite();

// Setup scenes:
this.blueScene.x = 0;
this.greenScene.x = 800;
this.orangeScene.x = 1600;
this.redScene.x = 2400;
this.blueScene.y = 0;
this.greenScene.y = 0;
this.orangeScene.y = 0;
this.redScene.y = 0;
this.blueScene.width = this.greenScene.width = this.orangeScene.width = this.redScene.width = 800;
this.blueScene.height = this.greenScene.height = this.orangeScene.height = this.redScene.height = 600;

this.bg_mc.addChild(this.blueScene);
this.bg_mc.addChild(this.greenScene);
this.bg_mc.addChild(this.orangeScene);
this.bg_mc.addChild(this.redScene);


//The position I want my flickr_button to be located on stage in greenScene (second scene)

this.flickr_buton.x =  884.50;
this.flickr_button.y = 538.50;

this.bg_mc.addChild(this.flickr_button); 

Do I attach my children to the blueScene, redScene... etc. or can I attach them to the background (bg_mc)?

After compiling that code, I get the output

TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::SimpleButton@3d5ccd01 to flash.display.Sprite.

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

flickr_button is a button symbol

[sstundzia]

Hi... I'm almost always here to help if only i can..

First about blueScene, redScene object... I suggested those to sort of have pages.. You should have your color background in a blueScene, redScene, etc. object and all the content for that scene as well... background is only for scrolling scenes and aranging them... if you do so, 1) you don't have to wory about scene offset in the background (x:800, x:1600, etc) and 2) it would be quite easy to switch scene places cause you wouldn't have to rewrite all your content coordinates...

if you don't want to put content into those blueScene, redScene, etc. objects, then you should just remove them for cleaner code and no useless objects.

Second: Sprite... Sprite doesn't initially have any content inside, thus it's size is widht:0 and height:0... you might reconsider creating button programmatically using new Sprite(), because then you have to either draw something inside and/or draw something inside... for ease of use, you should probably put a button on stage using tools in Flash... would save a lot of nerves i guess... trust me... i'm dealing with such things all the time, cause i'm not using Flash application... i'm just writing AS3 code and all drawing is done with code in my little project..

Third: that error i think is unrelated to the piece of code you posted... i don't see a single SimpleButton (or it's derivative) instances... all i see are Sprites... so i don't see a way this code could produce this error... try to debug and find out where this error pops up... also there's something in frame 75...