dcsimg
A Flash Developer Resource Site

Results 1 to 13 of 13

Thread: How do I create a moving background as the mouse moves across it?

  1. #1
    Junior Member
    Join Date
    Mar 2008
    Posts
    10

    How do I create a moving background as the mouse moves across it?

    I have a large background that is bigger than the Flash document area. When the mouse moves left, I want the background to move left with it, uncovering more of the background. The further the mouse is moved over to the left of the screen, the faster the background will move too.

    How would I do this?

    I'm a complete amateur when it comes to Flash and especially scripting so I'd really appreciate some simple explanations. Thanks.

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    Here's some code. Its an easy effect but theres a raft of geometry to make it happen.

    PHP Code:
    addEventListener(MouseEvent.MOUSE_MOVEonMove);

    function 
    onMove(e:MouseEvent):void{

        
    //  capture the size of the stage and background
        
    const BG_SIZE:Number myBackground.width;
        const 
    STAGE_SIZE:int stage.stageWidth;

        
    //  calculate the difference between stage & bg
        //  this is the max amount we can move the bg
        
    const RANGE:Number STAGE_SIZE BG_SIZE;
            
        
    //  capture the mouse position as a % of the stage
        //  so left edge is 0, right edge is 1
        
    const MOUSE_PERCENT:Number e.stageX STAGE_SIZE;
        
        
    //  calculate the % of the RANGE to actually shift
        
    const AMOUNT_TO_MOVE:Number RANGE MOUSE_PERCENT;

        
    //  move the background (backwards)
        
    myBackground.AMOUNT_TO_MOVE;



  3. #3
    Junior Member
    Join Date
    Mar 2008
    Posts
    10
    Thanks for your help, neznein9. I think that's probably exactly what I want. However, as I said, I'm a complete amateur so could you give me an idea of what I'm supposed to put in "BG_SIZE:Number" for example? Am I supposed to put "1024:Number" if the background is 1024px wide? I'm not sure what I have to replace in your code to customise it.

    Also, will this code work for up and down along with left and right? I need the mouse to be able to freely roam around the background.

    Additionally, when the user moves to another part of the image, there will be things for them to interact with. I've just realised of course that these elements are going to have to move with the background as it moves around the stage. Is there an easy way to do this?

    Thanks for your help.

  4. #4
    The Flash AS Newb
    Join Date
    May 2006
    Location
    Australia
    Posts
    179
    Quote Originally Posted by neznein9
    Here's some code. Its an easy effect but theres a raft of geometry to make it happen.

    PHP Code:
    addEventListener(MouseEvent.MOUSE_MOVEonMove);

    function 
    onMove(e:MouseEvent):void{

        
    //  capture the size of the stage and background
        
    const BG_SIZE:Number myBackground.width;
        const 
    STAGE_SIZE:int stage.stageWidth;

        
    //  calculate the difference between stage & bg
        //  this is the max amount we can move the bg
        
    const RANGE:Number STAGE_SIZE BG_SIZE;
            
        
    //  capture the mouse position as a % of the stage
        //  so left edge is 0, right edge is 1
        
    const MOUSE_PERCENT:Number e.stageX STAGE_SIZE;
        
        
    //  calculate the % of the RANGE to actually shift
        
    const AMOUNT_TO_MOVE:Number RANGE MOUSE_PERCENT;

        
    //  move the background (backwards)
        
    myBackground.AMOUNT_TO_MOVE;



    Customizing it isn't too hard most variables are already predefined in the movie the ONLY thing you have to do to get this code to work is give your background an instance name of myBackground and the code should work fine.

  5. #5
    Junior Member
    Join Date
    Mar 2008
    Posts
    10
    the ONLY thing you have to do to get this code to work is give your background an instance name of myBackground
    So I don't have to edit anything at all in that code?

  6. #6
    The Flash AS Newb
    Join Date
    May 2006
    Location
    Australia
    Posts
    179
    Quote Originally Posted by anagoge
    Also, will this code work for up and down along with left and right? I need the mouse to be able to freely roam around the background.

    Additionally, when the user moves to another part of the image, there will be things for them to interact with. I've just realised of course that these elements are going to have to move with the background as it moves around the stage. Is there an easy way to do this?

    Thanks for your help.
    This is the code for moving horizontal AND vertical
    PHP Code:
    addEventListener(MouseEvent.MOUSE_MOVEonMove);

    function 
    onMove(e:MouseEvent):void{

        
    //  capture the size of the stage and background
        
    const BG_SIZE:Number myBackground.width;
        const 
    BG_SIZEY:Number myBackground.height;
        const 
    STAGE_SIZE:int stage.stageWidth;
        const 
    STAGE_SIZEY:int stage.stageHeight

        
    //  calculate the difference between stage & bg
        //  this is the max amount we can move the bg
        
    const RANGE:Number STAGE_SIZE BG_SIZE;
        const 
    RANGEY:Number STAGE_SIZEY BG_SIZEY;
            
        
    //  capture the mouse position as a % of the stage
        //  so left edge is 0, right edge is 1
        
    const MOUSE_PERCENT:Number e.stageX STAGE_SIZE;
        const 
    MOUSE_PERCENTY:Number e.stageY STAGE_SIZEY;
        
        
    //  calculate the % of the RANGE to actually shift
        
    const AMOUNT_TO_MOVE:Number RANGE MOUSE_PERCENT;
        const 
    AMOUNT_TO_MOVEY:Number RANGEY MOUSE_PERCENTY;

        
    //  move the background (backwards)
        
    myBackground.AMOUNT_TO_MOVE;
        
    myBackground.AMOUNT_TO_MOVEY;


    As for the interactive parts.. I am not entirely sure on this one sorry.

  7. #7
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    My original code was just horizontal, but it's a linear equation so you can just copy everything and change width->height, x->y, etc. (as Kriogenic did).

    To move other clips along with this you could work out additional math (for instance if you wanted stuff to move at a different rate so you get a depth-of-focus feeling) however, for the easiest execution, you can just wrap all your elements into one big clip and target that instead of myBackground.

    You'll need to reference your objects inside that layer (so instead of myButton, you'd call myWrapper.myButton) but you shouldnt have any other problems with interactivity.

  8. #8
    Junior Member
    Join Date
    Mar 2008
    Posts
    10
    Thanks for the help. I'll experiment with this later on today.

  9. #9
    Junior Member
    Join Date
    Mar 2008
    Posts
    10
    I've just tried to use the code that was supplied, but I get 5 errors:



    Suggestions?

  10. #10
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    You're in AS2 mode.

  11. #11
    Junior Member
    Join Date
    Mar 2008
    Posts
    10
    Quote Originally Posted by neznein9
    You're in AS2 mode.
    Changed to AS3 mode, but now I get new errors:


  12. #12
    The Flash AS Newb
    Join Date
    May 2006
    Location
    Australia
    Posts
    179
    Now you are getting that because you have not givin your background image (movie clip with image and buttons in it) an instance name of myBackground

  13. #13
    Junior Member
    Join Date
    Nov 2018
    Posts
    1
    This code works great when you put it in the maintimeline, how do you modify it to affect a movie clip inside of that main timeline?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center