all groups > flash (macromedia) > december 2005 >
You're in the

flash (macromedia)

group:

Neverending Field of Grass + Shape Tween Distortion



Neverending Field of Grass + Shape Tween Distortion NickCherryJiggz
12/18/2005 10:22:54 PM
flash (macromedia): Part of an animation I'm working on consists of a 2D row of grass at the bottom
of the screen. The effect I'm looking for is not complicated to fathom, just
very difficult to explain...

I want the grass to translate to the right for a long period of time. Another
way to describe it, I want the camera to pan to the right and make the grass
look like it is changing due to the movement of the camera. An effect often
used (or at least a similar one) in NES and Super NES games.

I'm not sure how to go about doing this. All the grass is practically random -
I started w/ a base, then copied and pasted several times, transforming each
one slightly. I created enough blades of grass to stretch about 2x the width of
the screen, but if I go through with my idea, I would need this amount times
100. I considered making the ends of the grass row in such a manner than they
could be placed side by side and be visually seemless. Then, perhaps I could
accomplish my goal by means of motion tweens and gotoAndPlay commands. This
method seems very complicated and troublesome, though, and probably above my
capabilities. Is there an easier way to go about doing this or should I just
scrap the idea?

Another quick question: If I try to do a shape tween between two pen drawings
that have been transformed (distorted, rotated, skewed, etc), the lines go
crazy during the tween frames. It's almost as if all the pen points rotated 360
degrees during the transormation just to get to a state that is very similar to
the one they were in initially. I could see how the software would have trouble
predicting where to move w/ irregular shapes, but is there any solution to this
problem?

Thanks in advance.
Re: Neverending Field of Grass + Shape Tween Distortion NickCherryJiggz
12/18/2005 10:26:51 PM
Sorry for being vague in a description above. When referring to NES and Super
NES games, I meant the backgrounds. Often while venturing through levels, the
ground/ceiling/background graphics are very repetative and appear to be one
image displayed several times w/ slight variations (maybe an added door or
window) in each one.
Re: Neverending Field of Grass + Shape Tween Distortion David Stiller
12/19/2005 1:03:33 AM
Nick,

[quoted text, click to view]

For this, you'll have to use ActionScript more extensively than merely
gotoAndPlay().

Check out the "MovieClip class" entry of the ActionScript Language
Reference. In that section, you'll see everything a movie clip can do (its
methods), all the characteristics it has (its properties), and all the
things it can react to (its events). For something like what you describe,
you'll need to update the grass clip's _x property over time. Here's a
teensy crash course. This will only grease your wheels, but at least that's
something, eh? It'll get you rolling.

Create a new movie clip and give it an instance name (see the Properties
panel). Once you have a movie clip on the Stage with an instance name, you
have an object you can individually "call by name" and tell what to do. You
can, of course, use any movie clip as often as you like in a movie, but to
reference it via ActionScript, it will need a unique name, and that's what
instance names are.

Create a new layer and name it scripts. This is where all your
ActionScript will go. Type the following:

movieClipInstanceName.onEnterFrame = function() {
}

.... and replace movieClipInstanceName with the actual instance name you gave
the clip. In your game example, it might be mcGrass ("mc" for movie clip --
just a naming convention -- and "Grass" for obvious reasons).

You'll see the onEnterFrame event listed as one of the events in the
MovieClip class. Rather than typing MovieClip.onEnterFrame, you use the
instance name of a particular clip. Makes sense, right? In the above
sample, you're assigning a function to the onEnterFrame event -- so whatever
instructions you type inside the function will be carried out by that clip
every time it enters a frame. This occurs even of the main timeline is
stopped via this.stop(); ... thing of the onEnterFrame event has an idling
engine. Its RPMs match the movie's FPS (frames per second).

mcGrass.onEnterFrame = function() {
this._x += 5;
}

Okay, so by adding a single instruction, you'll see that your movie clip
moves to the right when you test your SWF. The += operator means the same
as ...

this._x = this._x + 5;

.... just shorthand. The word "this" is pretty intuitive. It points to
mcGrass, in this case, since "this" falls within the function, and the
function is scoped by mcGrass by virtue of mcGrass's onEnterFrame event.
Basically, mcGrass is being told to add 5 to whatever the current value of
its _x property is -- and you'll see that defined in the MovieClip class,
too.

Start noodling around. You'll see a MovieClip._width property. Once
mcGrass moves as far right as its own width, you can have its _x property
start back at zero, for example.

mcGrass.onEnterFrame = function() {
this._x += 5;
if (this._x > this._width) {
this._x = 0;
}
};


David
stiller (at) quip (dot) net
"Luck is the residue of good design."

AddThis Social Bookmark Button