Getting Background Animation To Play Continuously

Hey again everyone,
:slight_smile:

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. :slight_smile:

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ā€¦ :slight_smile:

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. :slight_smile:
Do you know how to tween things?
Do you know how to make a movie clip?
Do you know how to create layers?

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ā€¦ :slight_smile: Clever blokeā€¦ hehe

So yeah do u think you could help me?

Thanks heapsā€¦
Jakattaā€¦

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ā€¦ :slight_smile: Clever blokeā€¦ hehe

So yeah do u think you could help me?

Thanks heapsā€¦
Jakattaā€¦

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 :slight_smile: 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.

  1. 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.

  2. 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.

  3. 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.)

  4. 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.

  5. 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. :wink: 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ā€¦ )

Took me longer than a minute, but now Iā€™m home so itā€™ll be easier. :slight_smile:

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ā€¦

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

Iā€™ll see what I can do this morning.

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 :slight_smile:

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?

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ā€¦
:slight_smile:

To be honest,

I understand your intructions better then the Kirupa tutorialā€¦

heheheā€¦ :slight_smile:

Should make your own Kirupaā€¦ hahahaha

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. :slight_smile:

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.

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ā€¦

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]

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! :slight_smile:

Thanks heapsā€¦ :slight_smile:

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
:slight_smile:

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. :slight_smile:

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. :slight_smile:

Glad I could help.

Itā€™s only a silly comment, I always thought you were British Upu. Donā€™t know why though :slight_smile: