dcsimg
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 22

Thread: how to do this? (another in a series of bad titles)

  1. #1
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356

    how to do this? (another in a series of bad titles)

    Hey,
    check out this, its a site template from Swish..
    http://www.swishzone.com/products/si...e05/index.html

    how would one script the motions they use when you press a button? They use a large image for the background, larger than the dimensions of the stage. WHen you press a button, the image scrolls from the current location to the part of the image they want you to see for that section.

    thanks in advance,
    -myk

  2. #2
    Huygens to Titan PCRIDE's Avatar
    Join Date
    May 2002
    Location
    PLUTO
    Posts
    1,335
    you tween the biig image with a motion tween and use easing and framelables to goto when a button is pressed
    I think that would be really easy
    I will try it
    All out of Honey Buffers, so i grabed a few Goose Heads

  3. #3
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356
    i think there's probably more to it than that. Yeah, it could be done that way, but real messy. You would have to make a motion tween for every possible combination. I know it can be scripted and have even seen it before, but motion scripting is not my forte..

    any other takers?

  4. #4
    Huygens to Titan PCRIDE's Avatar
    Join Date
    May 2002
    Location
    PLUTO
    Posts
    1,335
    try that very simple to do
    Last edited by PCRIDE; 06-12-2003 at 11:34 AM.
    All out of Honey Buffers, so i grabed a few Goose Heads

  5. #5
    Huygens to Titan PCRIDE's Avatar
    Join Date
    May 2002
    Location
    PLUTO
    Posts
    1,335
    i think there's probably more to it than that. Yeah, it could be done that way, but real messy. You would have to make a motion tween for every possible combination. I know it can be scripted and have even seen it before, but motion scripting is not my forte..

    its not that messy, with a little tweak to it you can make it pefect, like you were saying motion scripting would be more messy and a headach if you ask me, I have never tried to motionscript before, i guess you could do it with x and y corrdnates, but then again how would you make it tween??
    All out of Honey Buffers, so i grabed a few Goose Heads

  6. #6
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356
    hey,
    what you did is good, but here's why i'd prefer a scripting method.
    The way you did it, and it may just be because you put something together real quick to show me, when you click a button, the image immediately jumps to a certain portion of the image, then begins to scroll. In the Swishzone example, no matter which button is click, the motion starts from where the picture is at that point.
    Like i was saying, i guess to do it the way you are suggesting, you would have to make a motion tween from every possible place the user could be, then make a whole lot of if-then statements, so if a user is at this part of the picture and clicks this button, then execute this animation starting from that point where the image is...
    it'd be a heck of a lot of motion tweens to have to make.
    Sorry if i'm overcomplicating this, but its a learning thing....

    thanks,
    -myk

  7. #7
    Huygens to Titan PCRIDE's Avatar
    Join Date
    May 2002
    Location
    PLUTO
    Posts
    1,335
    ya It only works when you click the buttons in order 1,2,3

    it would be time consuming and messy to do every combo of movement, I am sure there is a easy way iwth script, I am going to work on a new site using theis method I will let you know later
    All out of Honey Buffers, so i grabed a few Goose Heads

  8. #8
    Senior Member Jaffasoft's Avatar
    Join Date
    Apr 2001
    Location
    On Travel
    Posts
    1,587
    You could start off with something as simple as this. Just drop the code in the frame and make a big background movie clip named sceeneryBgMc. And make the four buttons and change the xmove ymove as needed.

    code:

    sceeneryBgMc.onLoad = function(){//so it loads stil otherwise it goes to 0,0 x y cordinates.
    xmove=this._x;
    ymove=this._y;
    }
    sceeneryBgMc.onEnterFrame = function () {
    this._x += (xmove-this._x)/15;
    this._y += (ymove-this._y)/15;
    }

    btn1.onRelease=function() {
    xmove=120;
    ymove=90;
    }
    btn2.onRelease=function() {
    xmove=520;
    ymove=290;
    }
    btn3.onRelease=function() {
    xmove=320;
    ymove=40;
    }
    btn4.onRelease=function() {
    xmove=220;
    ymove=190;
    }


  9. #9
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356
    that is awesome!
    can you do a little explantion of the code?
    i understand the scripting that you used, but i dont understand why your coordinates are divided by 15....
    also, what determines the speed of the movement? is that what the dividing number is for?

    thanks,
    -myk

  10. #10
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356
    well, i figured that the lower your dividing number, the faster the motion goes.. But i'd still like to know why.. Dont like just copying code without understanding it...
    i almost feel like a fool for asking this, but can you explain the math behind this?

    Code:
    sceeneryBgMc.onEnterFrame = function () {
            this._x += (xmove-this._x)/15;
            this._y += (ymove-this._y)/15;
    }
    i think what i'm looking for is, if the value of xmove is lower that this._x, how does it still work with a negative?
    Not too good with math, so bear with me..

    thanks again,
    -myk

  11. #11
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356
    bump...
    little math help?

  12. #12
    Huygens to Titan PCRIDE's Avatar
    Join Date
    May 2002
    Location
    PLUTO
    Posts
    1,335
    wow!!! that is so sweet, I totally understand that code, very easy , I wish I was better at actionscript

    Thanks
    All out of Honey Buffers, so i grabed a few Goose Heads

  13. #13
    Senior Member Jaffasoft's Avatar
    Join Date
    Apr 2001
    Location
    On Travel
    Posts
    1,587
    PCRIDE i was in your boots not so long ago. I don't know how to explain it like the program heads.

    sceeneryBgMc.onEnterFrame = function () {
    this._x += (xmove-this._x)/15;
    this._y += (ymove-this._y)/15;
    }


    As youknow flash mx has a function that it can call every frame, that function is onEnterFrame. This in a lot of places has replaced my old favourite onClipEvent(enterFrame){//whats it gunna do} and this would be placed on the mc.

    The onEnterFrame above firstly you needed to make the mc of the big background you wanted to move. So thats the.

    sceeneryBgMc//named the mc the moves in the Bg.

    onEnterFrame = function()// tells flash to calculate what's in the {brackets} .

    What ever is in the brackets flash calculates that and passes a new measurement to the mc we're telling it to do it to (sceeneryBgMc).

    this._y += (ymove-this._y)/15;
    Each time the frame enters frame it works out how close it is to the ymove location that you have set it!, that you want screeneryBgMc to go to! So have a look at it it is a calculation.
    I like to look at it this way because i think i'm a bit of a cowboy. I sit down on earth and think that thiers a post ten meters away and how can i calculate how to get to that post if i had to measurement each movement at a time. So i bring out my Lasso and lasso the post. Then i say right im at this._y position then i have to + whatever is on the other side of the = sign. The ymove is where we want to go (the post). The post is at 0 _y Millimeters or pixels away. So flash goes 0-1000/15 . Get your calculator out mine says its about 66.66 a pretty develish number i don't know if damian eval is involved in this. Anyway then flash would say the next movement is about 6 meters or 600 milimeters or in screen term 600 pixels. So we would be 6 meters closer to the post now. So as you can imagine the /15 determines in the calculation how far the sceeneryBgMc is going to move.

    So this._y += (ymove-this._y)/15;
    is really like 1000 += (0-1000)/15;//600
    the next onEnterFrame 600+(0-600)/15;//400
    as you can see the first movement we made was from 1000_y position to 600 so we've moved 400 and next frame we calculated it and we have moved a further 200 so we have slowed down and thats what give you the easing. Which it really looks like its moving because flash is quicker then the eye.
    The third movement would be 400+(0-400)/15;

    Here another one for you PCPRIDE i wanted to get up to date with the new onEnterFrame for the easing so i did this it calls the function then when the easing is close to no longer being needed it deletes the on enter frame. I won't go into explaining it unless you ask because i think i waffle on for to long. And my spelling mistakes are just to tramendous .

  14. #14
    Senior Member Jaffasoft's Avatar
    Join Date
    Apr 2001
    Location
    On Travel
    Posts
    1,587
    No need to change anything just replave the code with this.

    code:

    ease=15
    move = function (mc, xmove, ymove) {
    trace("Called OEF function for "+mc);
    mc.onEnterFrame = function() {
    this._x += (xmove-this._x)/ease;
    this._y += (ymove-this._y)/ease;
    if ((Math.abs(xmove-this._x)<=5) && (Math.abs(ymove-this._y)<=5)) {
    delete mc.onEnterFrame;
    trace("Deleted OEF function for " +mc);
    }
    };
    };
    btn1.onRelease = function() {
    move(sceeneryBgMc, 120, 90);
    move(Mc2, 320, 190);
    };
    btn2.onRelease = function() {
    move(sceeneryBgMc, 120, 290);
    move(Mc2, 320, 0);
    };
    btn3.onRelease = function() {
    move(sceeneryBgMc, 320, 90);
    move(Mc2, 220, 90);
    };
    btn4.onRelease = function() {
    move(sceeneryBgMc, 220, 190);
    };



    I fooled around with another mc2 to see how i could do it with two.

  15. #15
    Huygens to Titan PCRIDE's Avatar
    Join Date
    May 2002
    Location
    PLUTO
    Posts
    1,335
    wow again!! the code is so simple yet so powerful, seeing how easy this code is just makes me want to just dig into advanced scripting, I just don't see how you can just start typin the code and tell it to do this wihout allready knowing it. Like PHP I can see it and know what its doing but how can you just type it out.

    what do you mean by::

    Here another one for you PCPRIDE i wanted to get up to date with the new onEnterFrame for the easing so i did this it calls the function then when the easing is close to no longer being needed it deletes the on enter frame. I won't go into explaining it unless you ask because i think i waffle on for to long. And my spelling mistakes are just to tramendous .


    I don't really understand onEnterframe, menaing when the object or thingy enters the stage (pops up, shows up??)

    thanks
    All out of Honey Buffers, so i grabed a few Goose Heads

  16. #16
    Huygens to Titan PCRIDE's Avatar
    Join Date
    May 2002
    Location
    PLUTO
    Posts
    1,335
    what would that new code do, just change the easing?

    I posted mine before your other one came up
    All out of Honey Buffers, so i grabed a few Goose Heads

  17. #17
    Senior Member Jaffasoft's Avatar
    Join Date
    Apr 2001
    Location
    On Travel
    Posts
    1,587
    Originally posted by PCRIDE
    I don't really understand onEnterframe, meaning when the object or thingy enters the stage (pops up, shows up??)

    thanks
    Well in the olden days film was first used like slide projectors the the film was passed in front of the light to project what was in each slide if you had a picture of a quare box it and in each slide the square box was drawn a little bit further away or in a differant place in the slide deppending on how fast the slides moved the quare would look to be fast moving. onEnterFrame it the same but each time flash enters a new frame it calculates where to put screeneryBGMc on stage. The onEnterFrame speed is what you set when you make a new flash movie the default is 12 frames a second to play. If you set this to 31 frames a second it would calculate the easing formula that we just beeen taking about each frame mutch faster.
    //here i want to tell you to run as fast as you can in the x direction
    //and its indefenatly because we have ade no triggers to tell
    //it to stop.

    PCRIDE.onEnterFrame=function(){
    PCRIDE._x+=20;//run twenty step in x direction indefenanlty
    }

    //if we wanted yo to stop we would then use an if statement.

    PCRIDE.onEnterFrame=function(){
    this._x+=20;//run twenty step in x direction indefenanlty
    if(this._x>=400){
    delete this.onEnterFrame;
    //flash wouldnt be able to calculate anymore so you would stop at 400
    }
    }
    Last edited by Jaffasoft; 06-12-2003 at 10:46 PM.

  18. #18
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356
    makes sense now.. I think what threw me before was figuring the coordinates, the negative number thing.. But if your reference point is the top left corner, no matter where you move it, your x and y are gonna be negative...

    thanks again, guys


    -myk

  19. #19
    -Iron Myk- mykrob's Avatar
    Join Date
    Dec 2001
    Location
    Jackson, TN
    Posts
    1,356
    okay, one thing is still not quite clicking...
    i put a trace action on the moving clip to track the resting coordinates, and they are a little bit off....
    check my example

    www.psiconmedia.com/movementTest.fla

    NOTE: the cute little baby in the picture is my newborn.

    Also, i think maybe i still dont get the 15.. how did you derive the magic number 15? If i change it, it affects the speed of the tween, but butchers the coordinates even more.

    Also, how would you suggest starting a new event once the coordinates are reached? I pondered the thought of using an if-then statement to say that if _xpos = number and _ypos = number, then do this, but that event may be triggered by the image simply moving BY those coordinates. I would like something to be trigger when the image rests at those coordinates.

    I appologize for being so pesky, but like i said before, i like to completely understand what i'm doing, and not just copy your work.

    thanks again,
    -myk

  20. #20
    Senior Member Jaffasoft's Avatar
    Join Date
    Apr 2001
    Location
    On Travel
    Posts
    1,587
    Well look at that a little baby he looks pretty happy.

    The best way to trigger something (some other event)once the mc has come to it's resting position would be to do it with the math.asb. Like the code above in the last post.

    move = function (mc, xmove, ymove) {
    trace("Called OEF function for "+mc);
    mc.onEnterFrame = function() {
    this._x += (xmove-this._x)/ease;
    this._y += (ymove-this._y)/ease;
    if ((Math.abs(xmove-this._x)<=5) && (Math.abs(ymove-this._y)<=5)) {
    //this will only happen when the calc's are very low or movements r nearly stopped completely.
    niceWarnHeaterMc.play();
    babyClipMcLight._alpha=50;
    giveBabyADumyMc.play();
    }
    };
    };

    The fifteen bit it didnt really have to be 15 it could have been 10 generaly it is 1 for instant bang movement or higher for slower movements. 4 is a bit quicker. I think you have got the general idea you just need to play around a bit and it will sink in. But those codes above i've given you, is about all you need in as far as movements go in most general y xmovements anyway. You can also be versatile with that. And you can use almost any of all the property actionscripts in them so go into actionscript pnel and look in the properties of mc's.

    //this could be..

    this._x += (xmove-this._x)/ease;
    this._alpha += (xmove-this._alpha)/ease;
    this._xscale += (xscale-this._xscale)/ease;
    this._yscale += (yscale-this._scale)/ease;
    this._rotation += (rmove-this._rotation)/ease;
    this._width += (xmove-this._width)/ease;

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