Getting Background Animation To Play Continuously

[system]

Hey again everyone,

I have another idea i want to do but im also not sure how to create it, as you already know im still new to flash.

What im trying to do is to have an animated background that continuously plays. Then i want know to know how do i get my links and text on top of that as the background images plays? (such as bubbles moving continuously across in the background) do you get me? I hope i explained it cear enough…

Any suggestions??

Thanks heaps guys,
Jakatta…

[system]

There are a couple of ways to do the first part of that.

As for text on top of an animated background, you simply place a new layer above the layers that contain the animation, and then put your text in that layer.

For a continuous animation I’d say that you should put all of the animated elements that you want to have loop into a movie clip. If the movie clip exists on the timeline, it will loop independently of whatever else is going on at the time.

A few questions just so I know exactly how new to Flash you are.
Do you know how to tween things?
Do you know how to make a movie clip?
Do you know how to create layers?

[system]

Yeah i know how to tween, create new layers and im PRETTY sure i know how to make a movie clip. Is it just simply converting it to a movie?

Lets say i wanted to do the bubbles going across the screen.
would this be the right idea:

1. draw the bubbles
2. drag to the other side of the screen and create a motion tween
3. then loop it? (to loop is it in the ‘instance’) ?

And also would i have to make a layer for each bubble?

Because what i also wanted to try and make was the graphic on the top left corner of the “FLASH 5 TUTORIAL” page. With the vertical and horizontal line following your mouse like a aimer. You know which one im talking about? If you know how to do that i would SOOOO appreciate it hey! I can tell your heaps good with Flash because i have seen you have nearly helped all the ppl in here with their problems… Clever bloke… hehe

So yeah do u think you could help me?

Thanks heaps…
Jakatta…

[system]

Yeah i know how to tween, create new layers and im PRETTY sure i know how to make a movie clip. Is it just simply converting it to a movie?

Lets say i wanted to do the bubbles going across the screen.
would this be the right idea:

1. draw the bubbles
2. drag to the other side of the screen and create a motion tween
3. then loop it? (to loop is it in the ‘instance’) ?

And also would i have to make a layer for each bubble?

Because what i also wanted to try and make was the graphic on the top left corner of the “FLASH 5 TUTORIAL” page. With the vertical and horizontal line following your mouse like a aimer. You know which one im talking about? If you know how to do that i would SOOOO appreciate it hey! I can tell your heaps good with Flash because i have seen you have nearly helped all the ppl in here with their problems… Clever bloke… hehe

So yeah do u think you could help me?

Thanks heaps…
Jakatta…

[system]

oh yeah… smooth my aging ego a little. If you’re really sharp you’ll notice that I not only have my share of problems, but often I am proved wrong on a point. Either way… I have time, and it helps to sharpen my skills. Most of the time I’m answering from work in my spare time. No Flash here, and tonight no books.

The cursor should be relatively easy actually. It does require action script, but it’s a great introduction for a newbie to the power of the programing language, and the ease of it’s use.

The bubbles are not tough, but you need to be creative with their motion. We’ll do those first because they require less action script than the cursor.

Create a single bubble. I would use a radial gradient fill with a transparent on one side of the gradient.

1. Open your “fill”, and “mixer” panels, using menu option “Window/Panel/fill”, repeat for mixer put these together but off to the side somewhere.

2. Select the circle tool, in the tool options below, turn off the “stroke”, or line in the stroke “swatch”. In the “fill” swatch choose a radial gradient swatch from the bottem of the swatch library.

3. In the fill panel you’ll see a color bar apear which discribes the gradient. Select one tab. (if you accidentaly create a new tab, simply grab it and pull it off of the color bar until it disapears, unclick the mouse.) The swatch to the right of the color bar should change to the color of the tab. Click on this swatch and choose a color that you like for your bubble. Select the other tab, and do the same.

I usually choose white, or a pale blue or green for the first color. The second depends; if I’m going to have this on light backgrounds, I pick white; If I’m going to have it on dark backgrounds, I pick black; If I’m unsure I try a grey color.

4. On the right hand side of the mixer panel there is a setting for “alpha level”. It might just be marked with and “a”, but it’s at the bottem of the list of attributes there. With one of your tabs selected, set the attribute of that color to 0% alpha.

5. With the shift key held down, describe a circle on the stage. The shift key makes it a perfect circle instead of an oval of some sort.

6. With the black arrow tool, hold down the CTRL key click on the circle and drag it far enough away from it’s possition that it does not overlap with that area of the stage at all. Unclick the mouse and you should see two circlular fills that look exactly the same. (we do this so that we don’t have to resize one of them later. We want them to be the same size. If they were overlaping, they would join with each other as a single fill. we dont’ want that either.)

7. Select one of your circlular fills with the black arrow tool. In the fill panel, select the tabs which you set to 0%. Set it’s alpha back to 100%.
   Select the other tab, and in the mixer panel set it’s color down to 0% alpha.

8. hit CTRL+g to group the circle. Select the other circle and do the same. Now that they are grouped into their own groups, they can be put one on top of the other. Select them both by decribing a square with the black arrow tool which encompasses both circles.

9b) open your align panel, Windows/Panel/Align. Select to stage, if it’s not already on. Click on the buttons that “Center” to the center of the stage.

Now is the tough part. You have to look at these and see what sort of bubble they describe. You can double click on either circle to edit it’s exact gradient, using the methods above, or you can play around with the “fill transform” tool on the toolbar. It’s just below the paintbucket, I think. Doing a mouse over should reveal which buttons are which.

I would use the fill transform to at least offset the center of one of the fills. But I think that it might require you going in and playing with the mixer and fill settings to get your bubble just right.

either way, you can drag the two fills apart, and center them again, and continue to edit until what they look like together looks like a bubble. Once that’s done, move on two part II. (I’ll write that in a minute… )

[system]

Took me longer than a minute, but now I’m home so it’ll be easier.

[system]

heya,

thanks heaps hey… ok i have done everything that you have told me. No what? Do i just tween them and loop it?

Do u think you could explain the aimer thing… how the vertical and horizontal lines are attached you your mouse?

Jakatta…

[system]

Sorry about that. I had some problems on my end getting online yesterday.

I’ll see what I can do this morning.

[system]

Well, I have some tricks for the bubble, so I’ll keep explaining them as well… but for the crosshair, do this

create a new movie clip with menu option “Insert/Create new symbol”

Make it a movie clip and give it the name, cursorCrossHair.

I think that you will be brought right to the timeline of that movieClip. If not, open the library and double click on cursorCrossHair.

Select the line tool. In you “Stroke” panel, choose “hairline” from the drop down menu of line style types. In the stroke swatch on the tool bar, choose a stroke color you like.

Drawn a line from left to right, horizontal. Select it, and in the “Transform” panel, enter a width of 1000.

Hit F8 to make it a movie clip. Call it “Line” and hit enter.

Holding down the CTRL key, click on the line and drag it a little bit down. Drop it, and you should now see TWO instances of the line movie clip.

Select one of them, and in the transform panel, choose “Rotation” and give it a value of 90 degrees.

One of your lines should now be vertical, and one should be horizontal.

Open your “Actions” panel with menu option, “Window/Actions”.

Select the horizontal line and center it using the Align panel. Do the same with the vertical line. Again, select the horizontal line.

Copy this code below, click on the Action panel in the white area to the right, and hit “Paste”.

onClipEvent(enterFrame){
this._y=_root._ymouse;
}

Select the Vertical line. Copy the following code, select the white area in the right of the action panel, and hit “paste”.

onClipEvent(enterFrame){
this._x=_root._xmouse;
}

---

“this” is a constant that directs the attention of the action script processor what ever object holds the script. In this case, it is a movieClip instance of the “line” movieClip.
_root. is a constant that directs the attention of the Flash program to the main timeline.
_xmouse is a constant that allows us to find the location of the mouse in relation to a point in space. In this case, the upper left corner of the stage, because we used _root in the first part of the statement.

---

Now, on the main timeline of whatever you want to use this on, you could just drop the movie clip and it should work. However, your lines will be across the field, and on top of anything that you might not want it on top of. My suggestion to you, at least to try, is this

On the main timeline, create a new layer. Double click on the layer symbol to the left of the name of the layer. In the box that opens, choose “Mask”.

Create a new layer below that layer, double click on it’s symbol and choose “Masked” for it’s layer type.

Paste the Movie clip you created in the masked layer.

In the “Mask” layer, make a square the size of the area you want to have showing the cursorCrossHair. (note: to see if a mask is working correctly, you can “lock” both the mask and masked layers and you will see what it will look like after production.)

---

Back to bubbles in the morning

[system]

How did that work for you? Any luck?

Bubbles…

for this I would make a new symbol. A movie clip, called “bubble”. In it, drop the bubble you created above.

Do a tween on the bubble from bottom to top. I would suggest having a lot of keyframe adjustments where you scale either the height or the width of the bubble as it tweens vertically. Bubbles, slow ones anyway, change shape slightly from tensions in the liquid that they are in. Water bubbles have less of this effect and are typically smaller. Likewise smaller bubbles move faster vertically than larger bubbles.

Now that you have a single movie clip with a tweened bubble inside it. I would use action script to duplicate it. You think you’re ready for that?

[system]

YAY i did the cursor!!! hehehehe thanks heaps!!! Im sooo proud of myself!! hehe. But i have a problem. It all works perfectly except, where to 2 lines cross, it’s not crossing where my mouse is… it’s crossing about 4cm where my mouse is. How can i get it to stay with the mouse…??

And im going to try to attempt the BUBBLES… hehee I dont think im that bad a flash, i thought it would be harder to understand. hehehe Enjoying it HEAPS though. But i’d have to give all the credit to you though… hehehe

Congrates, you have been hired as my tutor… hehehe

Jakatta…

[system]

To be honest,

I understand your intructions better then the Kirupa tutorial…

hehehe…

Should make your own Kirupa… hahahaha

[system]

I’ll see what I can do about the cursor, it may be that the code should look more like this.

onClipEvent(enterFrame){
this._y=_ymouse;
}

Select the Vertical line. Copy the following code, select the white area in the right of the action panel, and hit “paste”.

onClipEvent(enterFrame){
this._x=_xmouse;
}

but I’ll see what is wrong there and get back to you.

As for making my own Kirupa, I’m happy letting the main man Kirupa make all those asp pages. He’s a much better programer than I am.

[system]

Well… I got it to work using the method I gave you the first time. Mine was right on. The other thing I forgot is this. The lines if they are centered, only have to be as long as the longest side of the stage. If you’re movie is 600/600, then make the line 600 long.
The reason for this is that the line never moves parallel to itself. It only moves along perpendicular paths back and forth. (or in the case of the horizontal line up and down.)

I would try recreating it. Before you make the line a movie clip with the F8, be sure to center the line with the center panel. It’s important that it rests in the center of the stage for creation purposes. After that point they can really be put anywhere to begin the movie… they will starting working as soon as they load, which with two instances of the same line, is pretty quick.

[system]

Ok if the movie is 600/600 how do i make the lines 600?

where do i go to change that?

for both of them that is, because i think that is what the problem is hey…

Im so sorry to cause you all this trouble hey… I just really enjoy learning flash. Where abouts are you from anyways? Im from Australia, Surfers Paradise…

[system]

hey… no problems. I’m really quite used to helping newbies… all of this is training for me to teach flash anyway… so no time is waisted in any of these mini tutorials

To fix the line, double click on the horizontal one. It should open up so that you can edit it in place. Look at the “transform” panel, and set width to 600. Then in the align panel, select the little icon to the right that says “to stage”, and then click on the two top icons that represent the center of the horizontal and the vertical. This should align it. If it doesn’t do the job, or if you;re still confused, just send it over to me and I’ll fix it up.

[email protected]

[system]

ARRRGGGGG!!!
This is so frustrating…

Ok i put the 600 in the width… But as soon as i click away it just goes back to 100% Same with the vertical…

sigh

I’ll send you what it looks like… Maybe that would give you a better understand!

Thanks heaps…

[system]

YAY!!!

Thanks MAN i got it… it’s working PERFECTLY hey…
smiles once again i have a huge grin on my face hey. hehehe

You’re a champion…
So whats your name? Where abouts you from?
How do u know so much about Flash?

Jakatta

p.s Thanks heaps for all your help, hmm… Now what else can u help me on??? thinks … hahaha… Nah im sure i have caused ya enough stress for now hey.

[system]

my name is David… I’m from the American North East (NY) and everything I know about flash is from about 2 years of working with the program and visiting sites like this one.

Glad I could help.

[system]

It’s only a silly comment, I always thought you were British Upu. Don’t know why though