A Flash Developer Resource Site

Page 1 of 5 12345 LastLast
Results 1 to 20 of 85

Thread: Is there a better way to parallax?

  1. #1
    Member
    Join Date
    Sep 2005
    Posts
    56

    Is there a better way to parallax?

    I'm using this parallax script to create my sites navigation.
    -> http://www.flashkit.com/movies/Effec...6442/index.php

    For the most part, it's ideal for what i need. One problem however is that the code is very CPU intensive with all the "onClipEvent" handlers.

    It's giving me slow playback and also believe causing a few bugs with my other code.

    Does anyone have a more efficient way of achieving this?

    Thanks much!

  2. #2
    Member
    Join Date
    Sep 2005
    Posts
    56

  3. #3
    Member
    Join Date
    Sep 2005
    Posts
    56
    Anyone?

    last *bump* i promise!

    Really stuck here...
    pleeeeease help!


  4. #4
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153

    Working with Paralax

    Hey there!

    Wow, I feel your pain brother ;-) No one could answer my virtual reality movement question either...

    I was working on a parallax code and finally dropped it in favor of a simple on layer "look around" that would include X and Y movement.

    here is the source for the single layer if it might help:
    code:
     //declare once
    //more time = slow , minimum is 1
    var time = 10;
    //locked true/false , toggle movement
    var locked = false;
    var destX;
    var destY;
    var frame_w = frame_mc._width;
    var frame_h = frame_mc._height;
    var image_w = image_mc._width;
    var image_h = image_mc._height;
    //set event recalculate every mouse move
    image_mc.onMouseMove = function() {
    //if mouse is inside frame area
    if (frame_mc.hitTest(_xmouse, _ymouse, false) && !locked) {
    destX = -((image_w-frame_w)*_xmouse/frame_w);
    destY = -((image_h-frame_h)*_ymouse/frame_h);
    }
    updateAfterEvent();
    };
    //set event keep moving
    image_mc.onEnterFrame = function() {
    this._x += (destX-this._x)/time;
    this._y += (destY-this._y)/time;
    };
    //example use of toggle
    //set event for button , you can take it out if you don't need
    lock_btn.onRelease = function() {
    locked = true;
    };
    unlock_btn.onRelease = function() {
    locked = false;
    };



    Here are websites that I found with a bit of parallax help:


    http://www.ndesign-studio.com/demo/parallax-gallery/

    http://www.friendsofed.com/samples/1590592212.pdf

    http://www.actionscript.org/forums/s...d.php3?t=83846

    http://www.actionscript.org/movies-categories.php

    ------------------------------------------------------
    The issue with EVERY parallax movie that is posted on FLASHKIT that does not loop (ie a panorama that just goes round and round) is that if you mouse out and click out of the stage the movie looses its bearings and shows the edges of the parallax with all the ugly layers. Some are better than others, but all will fall apart if you open another browser window...

    I know the code is possible as http://narnia.com just stops at the edges of the non looping parallax movies (see Aslan's camp for a good example)

    Maybe someone from Disney will post the secret to keeping fly aways in check ;-)

    I posted my own thread "Scrolling Navigation Flies Away" to try and deal with this, but it just has the above code.

    If you find anything else, Please post it here! I will check back with anything else I find.

    Good LUCK!!!!!!
    :-D
    -Jes
    Last edited by jessicacrandall; 11-25-2007 at 06:25 PM.

  5. #5
    Member
    Join Date
    Sep 2005
    Posts
    56
    Hey Jess!

    Thanks for the goods sista!!!

    I'll have a look at that code you posted but, i'm pretty determined to get this parallax thing working! I found this good tutorial on Kirupa --> http://www.kirupa.com/developer/flas..._image_pan.htm and currently trying to manipulate it to work as a parallax scroll. Getting closer...

    Familiar with allot of the sites you posted... (last two links broken however). That tutorial on parallax featured in the UK mag "Web Designer" is ideal if it wasn't for the fact it's impossible to get.. back issues out of print. I wrote the mag... no response. Even wrote the author but he couldn't help seeing they owned the rights... this is frustrating!

    Anyway...
    i know someone out there has the answer!
    Please... Share the wealth!

    p.s. Jess... only have MX04. Can you save down your FLA for me so i can see?

    thanks darlin, your the best!

    > j
    Last edited by Jason Inch; 02-07-2007 at 12:49 PM.

  6. #6
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153
    Whoops! Sorry about that... did not mean to be a version snob ;-p

    Here is that .fla in MX:

    Looks like http://www.actionscript.org/ has a server down, hope those 2 dead links will be back soon.

    Keep us posted on your parallax progress.

    Godspeed young knight! Godspeed!

  7. #7
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153
    Hey there!

    There is also this site that seems to be sort of a parallax "cheat" with just different rates of scrolling controlled by buttons. Check 'er out:

    http://www.stylewars.com/index3.html

  8. #8
    Member
    Join Date
    Sep 2005
    Posts
    56
    Nice Jess!

    Thats the kind of thing i'm shooting for!

    Here's my inspiration: http://www.pspartgallery.com/

    Oh, yeah... about that MX04 thang?

    talk about it!

    > j
    Last edited by Jason Inch; 02-07-2007 at 01:50 PM.

  9. #9
    Senior Member calmchess's Avatar
    Join Date
    Sep 2006
    Location
    Earth
    Posts
    2,588
    well you all have hooked another flasher on parallax......I don't have much to contribute to this conversation right now but I'll be keeping my eye on it....hope to collaberate soon

  10. #10
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    parallax is an effect that fakes depths, in the sense that the objects further seem to move slower that the object in front. when i say slower, i'm talking about half the speed of anything in 'front' of it.

    for example, if you take the kirupa example posted by Jason. You can look at this modified code:
    Code:
    Stage.scaleMode = "noScale";
    sw=400; //width of Stage
    this.onMouseMove = function() {
    	constrainedMove(bg_mc, 4, 1);
    	constrainedMove(houses,8,1);
    	constrainedMove(people,16,1);
    };
    function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
    	var mousePercent:Number = _xmouse/sw;
    	var mSpeed:Number;
    	if (dir == 1) {
    		mSpeed = mousePercent;
    	} else {
    		mSpeed = 1-mousePercent;
    	}
    	target.destX = Math.round(-((target._width-sw)*mSpeed));
    	target.onEnterFrame = function() {
    		if (target._x == target.destX) {
    			delete target.onEnterFrame;
    	} else {
    			target._x += Math.ceil((target.destX-target._x)*(speed/100));
    		}
    	};
    }
    where the background is set to move at a speed of 4, houses in front at a speed of 8 (doubled), and people in front of houses at a speed of 16 (doubled again).

    gparis

  11. #11
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153

    MX .fla

    Humm, my attachment did not stick...

    Here is another try at the "look around" in MX

    Thanks for the above code, gparis!

    Can't wait to try it out!

    -Jes
    Last edited by jessicacrandall; 11-25-2007 at 06:25 PM.

  12. #12
    Member
    Join Date
    Sep 2005
    Posts
    56
    Looks like we started ourself a little parallax community here!

    gparis!
    Thanks for that!

    I've been playing around with manipulating this code as well. Added some stop action triggered by buttons. Close, but as you can see... few bugs yet to work out (ie. funky shaking, inconsistent movement?). Not sure what's going on but, doing a search on Kirupa for "image panning" has yielded some pretty good info.

    Let me know how you guys are making out with this.

    Jess,
    Thank you too, good script you have there!
    I'm sure this could also be manipulated a bit to get a similar effect.
    Well done.

    a little closer...

    > j
    Attached Files Attached Files
    Last edited by Jason Inch; 02-07-2007 at 02:46 PM.

  13. #13
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153
    j-

    Ya, I have yet to see anyone use Y axis in their parallax.

    Everything out there just scrolling horizontal has the effect of looking across a landscape--whilst wearing a neck brace ;-)

    adding Y is going to give you the true and pure "look around" --Yeah baby!

    GO FOR IT!! And don't forget about us back here at Boarlandia...

  14. #14
    Senior Member calmchess's Avatar
    Join Date
    Sep 2006
    Location
    Earth
    Posts
    2,588
    here is a link you might find intresting http://www.actionscript.com/Article/...h/Default.aspx

  15. #15
    Member
    Join Date
    Sep 2005
    Posts
    56
    Thanks for the article calmchess...
    i'll give a read when i can!

    jess, you mean something like this?
    --> http://www.billyharveymusic.com/

    way cool, but how?

    I'll move onto the y axis once i learn to takle the x...
    anyone... anyone?
    Last edited by Jason Inch; 02-07-2007 at 03:14 PM.

  16. #16
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153
    Hey J-

    Very clever Mr Bill, but not quite what I was looking for with the X and Y, cuz I want to have the effect of moving your field of vision.

    That is an awesome use of imbedding a mc though :-)

    Here is my X and Y with out parallax thus far. The room is so small that I might just leave it without... I think that parallax works best with far distance and this set is just a room. (btw this is a cooking Kids TV show, I am the production and set designer so I am getting to show off all my work

    http://taprootstudios.com/good-set.html

    -J

  17. #17
    Member
    Join Date
    Sep 2005
    Posts
    56
    Fun stuff -j

    i like the interactivity too!
    egg on my face...

    yeah, that billy site is something else, music aint bad either!
    has some depth of field but not much - note the lil background image...
    designed by these guys - http://www.sofake.com/ - creative bastads!

    One day i hope to be half as good.

    I ended up emailing the www.pspartgallery.com site i admire so to find out there secrects. Holding my breath till i hear back.

    i'm feeling a bit dizzy??/.. aiiol a
    Last edited by Jason Inch; 02-07-2007 at 06:38 PM.

  18. #18
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    well jessica, take your code. Add another movie that is supposed to be in front, say, image2_mc as instance name, then add this to your existing code:

    Code:
    image2_mc.onEnterFrame = function() {
    	this._x += (destX-this._x)/(time/4);
    	this._y += (destY-this._y)/(time/4);
    };
    by reducing the 'time' var, you'll have faster movement.

    gparis

  19. #19
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153
    GROOVY!

    I get it :-)

    Can't wait to play around with this! YOU ROCK GPARIS!!

  20. #20
    Senior Member jessicacrandall's Avatar
    Join Date
    Nov 2001
    Location
    Ozark Mountains!
    Posts
    153
    Hey gparis!

    I ended up with a much wider original mc (850px wide instead of the original 400px.) I adapted your code to work with my original image_mc to control the now overly speedy ratio that would have otherwise occurred.
    code:
     
    ORIGINAL CODE:
    image_mc.onEnterFrame = function() {
    this._x += (destX-this._x)/(time);
    this._y += (destY-this._y)/(time);

    IMPROVED RATIO FOR WIDE IMAGE:

    image_mc.onEnterFrame = function() {
    this._x += (destX-this._x)/(time/5);
    this._y += (destY-this._y)/(time/5);
    };



    Works beeeeeeautifully!! Thanks for helping me find a solution to a problem you didn't know existed ;-)

    -Jes

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