Noob: basic graphic symbol interactivity

Sorry to ask such a basic question, I just can’t seem to find beginner tutorials that arn’t really old.

All I want to do is add some subtle interactive animation to blades of grass in my swf. I want them to move if you roll over them with the mouse. Is there a way to do this without all the bother of creating actual buttons??? (I certainly don’t want the mouse cursor to change to a pointer and don’t really need down, up etc).

I was hoping on eachblade of grass symbol the first frame would have a stop(); but if you mouse over this graphic goes frame + 1 (then animates on it’s own timeline). But I’m having trouble making the blade of grass in frame 1 a “hotspot” that will accept some kind of mouse handler. I want the animation to continue even if the mouse has moved away.

I used to use Director, and in this application you could write a global script that could be attached to multiple sprites so you didn’t need to replicate it over and over. I can’t figure this out in Flash but I know it will always do the same thing - go the frame + 1.

I’m sure there must be a simple, efficient way, please help! I’m not even sure if I should be using movie or graphic symbols…

Wavy grass with bonus clouds: http://www.bezzmedia.com/swfspot/samples/flash8/Moving_Clouds_and_Waving_Grass
Mouse waving grass: http://www.kirupa.com/developer/mx/grass.htm
More grass: http://www.krazydad.com/bestiary/bestiary_grass.html
Still more grass: http://www.donhavey.com/blog/tutorials/ik-springy-grass/

Pretty sure you can achieve what you want with the help of those downloads :slight_smile:

The thing is, I will need to use this for other elements in the swf too, not just on grass. Really, I just want to know the simple syntax for adding actionscript to a graphic in the symbol timeline.

Thanks for the links though, will check em out.

Checked out the grass links, some nice effects but it’s far too specific and detailed for what I’m after. I found a few more tutorials that use buttons, but I’m not convinced a button is what I want.

I really just want to rollover an invisible hotspot that will trigger an animation. Frustrating because it seems so simple… The reason I wanted to do it in a self contained symbol with it’s own timeline was so the hotspot would dissapear until the animation had played then gone back to frame 1 again. This would ensure users couldn’t keep triggering it half way through.

You need grass movieclips with an action:
on(mouseMove){
if (this.hitTest(_xmouse,_ymouse){
// do something
}
}

Or use the rollOver, rollOut handlers to trigger animated effects:
grass.onRollOver = function() {
play():
}
grass.onRollOut = function() {
stop():
}

Don’t spose you’d mind taking a quick look?
It’s throwing an error, I’m missing something…
http://www.elfshot.com/test/interactive-test.fla

That’s because there are a few errors:

  1. The code is in the wrong place. Delete it from frame 1, layer 2 of myMovie movieclip. Highlight the copy of the myMovie movieclip on the stage and then paste the code in there.
  2. The code needs some changes:
    a) you can’t use on(mouseMove) - use onClipEvent(mouseMove) instead
    b) change xmouse, ymouse to _root.xmouse, _root.ymouse
    c) add , false to set the shapeFlag to the bounding box of myMovie
    d) change nextFrame() to this.nextFrame()
    e) then add the following so that your movieclip shrinks down again
    } else {
    this.prevFrame();
    The full code, attached to the copy of myMovie movieclip, is:
onClipEvent(mouseMove) {
	if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
		this.nextFrame();
	} else {
		this.prevFrame();
	}
}

f) give the copy of myMovie movieclip an instance name, e.g. grass
g) you can now use the duplicateMovieClip function to create more instances and place them on the stage as you deem appropriate.

Great, that seems to do what I need. I hadn’t thought of making it animate back down again (else clause) so this gives me a little more flexibility to play around until I get the effect I’m after. Thanks for your help. :beer2: