new section FLASHINIONS!!!

[Raydred]

Well Everybody! I was messing around one day and i asked kirupa what he could do to make his site more scarier. Well he told me, Hey why dont we make you an opinions section. So thats what he did! hehe Well i Just wanted to let everybody know that i'll be writting some articals that should be kinda funny and make some kind of nonsense , uhh i mean sense.

Check it out!
either click on the flashinions link at the top or,
go here..
http://www.kirupa.com/flashinions/index.htm

I hope you guys enjoy reading it as much as i did writting it. Im gonna write fairly regularly, and i hope to give the gift of humor .


I'd like to thanks Kirupa.com for making this possible, cause hes such a great guy, isnt he folks?

Enjoy =)

[Ryall]

go K-Dog!!! w00t!! ..going to check it out now...

Peace

[kirupa]

thanks r-dawgs =) I can't wait to see the section overflowing with stuff that floats around ray's mind!

Cheers!
Kirupa :rambo:

[Ryall]

I read it, and really like what youve put up there Raydred... well put! Kirupa... thanks for adding this section, I can really see some potential here - I think I am going to enjoy it (hopefully others too :P )!!

Peace

[Raydred]

woo hoo! =) thanks =)

Im hoping others will like it as well =)

Thanks alot for the support ;)

[reverendflash]

Ray:

lookin' good man....

still waiting for the Page 3 girls....

Revhttp://www.aulman.com/rev.gif

[Ryall]

no prob...

and this support is conditional - you had better keep writting :P ;)

j/k

Peace

[lostinbeta]

Awesome!!!!


But hey Kirupa... the top part of the index page is a link to the photo gallery tutorial. The opinions part that states what the section is.


And great points Raydred, I completely agree with them all :)

[kirupa]

Hey lost,
I tend to make that mistake all the time, don't I? =) I fixed it; it should work well now.

Cheers!
Kirupa :rambo:

[Guig0]

Lucky us K-man give it a go.:)

Really liked the article, can´t wait to see the next!


Go go go!

=)

[kirupa]

yeah, same here =) HURRY UP RAY j/k!

Cheers!
Kirupa :beard:

[lostinbeta]

Originally posted by kirupa
Hey lost,
I tend to make that mistake all the time, don't I? =) I fixed it; it should work well now.

Cheers!
Kirupa :rambo:


LOL... actually you do... :) :P :beam:


Maybe you should correct it on the main template you use to set that up :)


Oh yeah, and the snow effect on the main page of your site works great now, no lagging on my side. Did you rescript it?

It also might of been because my comp was riddled with 3 viruses that I had to manually remove... without knowing how...lol. Took me about 5 hours to do it, but my comp is virus free now and running so much better than it was before :)

[kirupa]

Hey lost,
That's good. I'm glad the main animation works. I couldn't find a better way to re-script. Considering "I" don't know much about AS, it's probably bad anyway hehe.

Cheers!
Kirupa <:}

[lostinbeta]

LOL, you crack me up Kirupa :)

"You" don't know much about AS...lol. If you say so :crazy:

[kirupa]

After my exams are over (this Thursday!!), I'll write a tutorial on how to create that effect. I guess duplicating the same movie clip with the same action over 50 times causes the animation to lag on comps.

Cheers!
Kirupa :q:

[lostinbeta]

I eagerly await that tutorial Kirupa.


How are you duplicating the movie clips? For loops or duplicateMovieClip???? Just curious :beam:

[kirupa]

Hey lost,
It's a do loop in the first frame of the movie with a duplicate movie clip action within it. The gist of the code is:

Frame 1:


k = 0;
do {
duplicateMovieClip(_root.snow, "snow"+k, k);
k++;
} while (k != 50);


In movie clip called snow:


onClipEvent (load) {
scale = 50 + Math.random() * 100;
alpha = 75 + Math.random() * 100;

this._xscale = scale;
this._yscale = scale;
this._alpha= alpha;

xpos = this._x;
this._x = -10+Math.random()*550;
i = 1+Math.random()*2;
this._y = -10+Math.random()*120;
k = -Math.PI+Math.random()*Math.PI;
}
onClipEvent (enterFrame) {
// horizontal movement
rad += (k/180)*Math.PI;
xmovement = _root._xmouse;
this._x -= Math.cos(rad);
// vertical movement
this._y += i;
if (this._y>=150) {
this._y = -5;
}
if ((this._x>=550) || (this._x<=0)) {
this._x = -10+Math.random()*550;
}
}


Now, my job is to expand this into a long drawn-out tutorial that explains why I did the crazy things that I did =)

Cheers!
Kirupa :goatee:

[lostinbeta]

SWEET!!!

Thanks for the code Kirupa, I will mess with it in a few :)

[lostinbeta]

Ok, first thing I notice is this...


k = 0;
do {
duplicateMovieClip(_root.snow, "snow"+k, k);
k++;
} while (k != 50);

Can be changed to this.....


for (k=0; k<50; k++) {
duplicateMovieClip(_root.snow, "snow"+k, k);
}

[lostinbeta]

These minor changes too...


onClipEvent (load) {
<B>movieHeight = 200;
movieWidth = 300;</B>
scale = 50+Math.random()*100;
alpha = 75+Math.random()*100;
xpos = this._x;
i = 1+Math.random()*2;
k = -Math.PI+Math.random()*Math.PI;
<B>this._xscale = this._yscale=scale;</B>
this._alpha = alpha;
this._x = -10+Math.random()*<B>movieWidth</B>;
this._y = -10+Math.random()*<B>movieHeight</B>;
}
onClipEvent (enterFrame) {
// horizontal movement
rad += (k/180)*Math.PI;
xmovement = _root._xmouse;
this._x -= Math.cos(rad);
// vertical movement
this._y += i;
if (this._y>=<B>movieHeight</B>) {
this._y = -5;
}
if ((this._x>=<B>movieWidth</B>) || (this._x<=0)) {
this._x = -10+Math.random()*<B>movieWidth</B>;
}
}

I added the movieWidth and movieHeight variables so the code will be easier to edit depending on the size of the stage.

I also combined the _xscale = scale and _yscale = scale into one line... well, because you can....lol.


I don't see anything else yet, but this is fun... great script Kirupa :)

[lostinbeta]

Oh yeah, and you can remove this line... I just noticed it is used nowhere else in the script...


xmovement = _root._xmouse;

[kirupa]

thanks =) I'll use your code and give you credit for helping me in the tutorial.

Cheers!
Kirupa :sigh:

[lostinbeta]

You don't have to give me credit Kirupa.

[Raydred]

*bump* =)

[lostinbeta]

Well I did some more to the code....


onClipEvent (load) {
movieHeight = 200;
movieWidth = 300;
i = 1+Math.random()*2;
k = -Math.PI+Math.random()*Math.PI;
this._xscale = this._yscale=50+Math.random()*100;
this._alpha = 75+Math.random()*100;
this._x = -10+Math.random()*movieWidth;
this._y = -10+Math.random()*movieHeight;
}
onClipEvent (enterFrame) {
rad += (k/180)*Math.PI;
this._x -= Math.cos(rad);
this._y += i;
if (this._y>=movieHeight) {
this._y = -5;
}
if ((this._x>=movieWidth) || (this._x<=0)) {
this._x = -10+Math.random()*movieWidth;
}
}


What once took up 25 lines of code according to the Actions Panel now takes up 22 lines of code. Not much, but a start I guess.

[Guig0]

lost and K-man: Can you make the snow acumulate in to piles?

phil: I would love to read one of you columns
ps: if kirupa won´t let you do it, start a thread on random section called: phil´s unsphonsored phun column:bad:

=)

[kirupa]

Hey Phil,
There is no reason why you can't ask ray nicely to allow you to post along with you. It's up to his discretion though :)

Cheers!
Kirupa :bad:

[lostinbeta]

Accumulate into piles eh? Ummmm..... I don't have that kind of knowledge man....lol.

[Guig0]

me thinks you´re holding it back from us:bad:

:P

[lostinbeta]

Well I do know you can't do it with the above script.


THe above script creates 50 snowflakes, and when they get out of the borders of your movie they go back to _y=-5, so if they were to accumulate all 50 snowflakes will just hit the ground and stay there and it will stop snowing.


So something like that requires a different script.

[Guig0]

I´ve noticed that.

I´ve tried some hit test thing, but with no sucess. :(

[lostinbeta]

Well you can probably just be like...


if(this._y>= movieHeight){
this._y = movieHeight;
}

But this only allows for it to build up on one _y coordinate so it won't actually pile up.

[lostinbeta]

Ok, here is what I came up with with the code.

Probably not finished yet, I want to add a tree, or a snowman or something....lol.


WINTER IN BETA (http://8ballcreations.com/lostinbeta/kirupa/snow.html)

[Guig0]

:q:

[lostinbeta]

No, that is just what the script looks like with the code I used.

I already said I don't know how to pile it up :(

[Jubba]

If you wanted to make it pile, why don't you just, manually, make a small pile of snow in a movieClip, and then as time goes on, increase the demensions of it. That way it would look like it was accumulating.

[lostinbeta]

Smart hack... but not as cool as actual piling snow :)...lol.

[Guig0]

Originally posted by lostinbeta
Smart hack... but not as cool as actual piling snow :)...lol.

LOL:P

[pom]

Enjoy (http://www.quasimondo.com/archives/000158.php)

pom :cowboy:

[lostinbeta]

Wow... nice :)

[Guig0]

:)

[kirupa]

ooh, there's david's old tutorial. I'll have to revamp that and put that back on the site (as you can tell the design on it is quite old).

Cheers!
Kirupa :asian:

[lostinbeta]

Yeah, definitely...lol.

[Scootman]

well im no flash guru but i have created a random effect of snow, and bubbles (simlar but going up)... but anyway lemme give it a shot...

im not really into the whole frame loop thing like ive seen many great flash effects done... (although i should try to do those more) im more into using onClipEvent(load){} style code and having everything happen in 1 frame... so i usually make a movie clip off the stage to hold some code...

so:

(before you start there will be little chunks of code here and there... i will show put together parts towards the end and where it goes... i just explain the little bits as you go)

(also i have complete code at the bottom and attached the FLA)



setting up
1.) Create a movie clip of a snowflake (a small white circle will work) and give it the instance name of "snow"

2.) Create a movie clip off the stage (nobody will see it) and you dont need to give it an instance name. This movie clip will just be the clip to hold the code that generates flakes so they will be continuously random.

3.) Generating snow...To generate your flakes, you want to use a duplicate movie clip command (there is a tutorial), but just basic... you will want to make sure it has a specified range because each new clip goes in its own depth, and if you use the same depth for 2 things on the stage at the same time, the older of the two will disappear. So, lets say we get a range of 100 (there wont necessarily be 100 flakes on the screen at once, but this just ensures there will be enough) so in your movie clip that is off the screen put the code:



onClipEvent(load)
{
var i = 1;//declare variable and initialize
}
onClipEvent(enterFrame)
{
_root.snow.duplicateMovieClip("snow"+i,i);//duplicate the movie clip
i++;//increase i which is the depth
if(i>100)//this defines the range. if there are 100 movie clips created, it will start writing over ones already created (if they are still on the screen)
{
i=1;
}
}

this duplicates your movie and makes it so your range of duplications is 100.

4.) Randomization... i found it is easier to put code within movie clips being duplicated rather than using functions (to start out with at least) so now in your snow flake you want to give it a random size, and i like to make the speed dependent on the size for a more realistic effect. The larger the snowflake, the faster it will move.

First, the placement of the movie clip...

you want to make the flake start a little above the stage so set the y to -10... and set the x to a value that is random between 0 and the width of the stage (the width in my movie is 600)

so the code would be :

this._x = Math.random()*600;
this._y = -10;

that part is simple enough...

Second, the randomization of the size and speed dependency...

this._xscale = this._yscale = 10 + Math.random()*50;

this sets the x and the y equal to eachother, and assigns it (10 + [random number between 10 and 50] so altogether you can have a size between 10 and 60)

now, basic math... if you multiply by a decimal the number gets smaller correct? so if we multiply the speed by a decimal it will get smaller to make the snow fall slower... and this is how we make the speed dependent on the size.... take the size of the movie clip and divide by the total possible size... this way say the size came out to be 60... when you divide 60 by 60, it will be one and you can multiply that by your speed and it will go as fast as you set it, but if it is say 30, and you divide you will get 0.5, which when multiplied by your speed will make it go half as hast (i hope that was clear)

so anyway i actually used 20 and random of 70 for my size to make it big enough so the next part of the code is

this._xscale = this._yscale = 20+Math.random()*70;

var speed = 20 * (this._xscale / 90);

this gives it a random size, and makes the speed dependent on the size (gives it a little sensation of depth)

5.) Swaying...
well im sure kirupa has a better way of doing it... but an easy way (and i think it looks pretty cool) is to use a basic sine wave... (i havent taken trig yet and i figured it out while playin with my graphing calculator when i was bored in math so its not very hard)

basically the format is :

x = Math.sin(y / arc) * frequency;

if arc is bigger it will make a longer arc, and if frequency is bigger, it will become less frequent (just does... maybe someone who has taken trig can explain better) but anyway i have that for this effect if the arc = 90 and the frequency = 20 it looks pretty good... and the reason we use y inside the () is because we are moving along the y axis, and we want the x to move back and forth accordingly (sine wave)... but... you cant just do that... because (im not really sure why) but the original random x we created earlier wont apply... so we will change that line to be a variable declaration instead...

this._x = Math.random()*600;

will become:

var offset = Math.random()*600;

and then we can add this offset to the x to make it not align at the left. so your sine wave code will be:

this._x = offset + Math.sin(this._y / 90) * 20;

this will give it a random curve back and forth going down, and since we have the speed dependent on size it comes out with a nice effect...

oh yeah, i almost forgot though... your movie will really lag if you dont take out those snowflakes... so in there add an if statement checking the boundaries


if(this._y > 400)
{
this.removeMovieClip();
}


this will just remove the movie clip if it goes off the bottom of the stage... reducing lag... soooooooooo im sure this code is a little sketchy with how i gave it in little chunks...

Over all Code (for within snowflake)


onClipEvent(load)
{
offset = Math.random()*600;//random X starting position
this._y = -10;//starts above the top of the stage

this._xscale = this._yscale = 20+Math.random()*70;//random size

var speed = 20 * (this._xscale / 90);//speed dependent on size

}
onClipEvent(enterFrame)
{
this._y += speed;//move by the random speed

this._x = offset + Math.sin(this._y / 90)*20;//move along a sine wave

if(this._y > 400)//remove if it gets off the stage
{
this.removeMovieClip();
}
}


Code for within movie clip generating snow


onClipEvent(load)
{
var i = 1;//declare variable and initialize
}
onClipEvent(enterFrame)
{
_root.snow.duplicateMovieClip("snow"+i,i);//duplicate the movie clip
i++;//increase i which is the depth
if(i>100)//this defines the range. if there are 100 movie clips created, it will start writing over ones already created (if they are still on the screen)
{
i=1;
}
}

i hope i explained the code well enough as i went...
if there are any questions i will be happy to answer (if i can) and i'm sure many others here (like all the people smarter than me) can answer them too... but it really doesnt take very much code as you can see...

i have attached the FLA in case anybody needs it

[lostinbeta]

Kirupa was going to write his tutorial on his effect hopefully tomorrow morning BTW :-\

[Scootman]

lol thats ok i dont mind if he doesnt use anything i put... i was bored... and i knew how to do the effect pretty much... so i figured i would try to help people... no biggie if it doesnt get used for anything... im sure kirupa can explain better than i did anyway

[lostinbeta]

Ok. I was just posting that for people who were wondering as well. In another thread, Kirupa stated he was going to work on it tomorrow morning, but since this one is so popular with the effect, I figured I would post it in here, I went to... and you had already posted this whole thing on how you did it...lol.


Ironic I guess.

[lostinbeta]

Um... no, I would never drink heavy metal.

[kirupa]

The tutorial is almost done: http://www.kirupa.com/developer/mx/snow.asp . Just need some time to proofread and fix all the links/titles,etc.

Cheers!
Kirupa:bad:

[lostinbeta]

Hey big K, if this is an MX tutorial, you can change this...


movieWidth = 300;
movieHeight = 200;

To this...


movieWidth = Stage.width;
movieHeight = Stage.height;


Saves user editing.


I just got done reading the first page. I will continue.

[lostinbeta]

Bravo on the tutorial. I think everything is well said. I don't know how you are so good at explaining things.


I take like an hour to come up with my explanations...lol.


Well anywho, I saw you added my name at the end of the tutorial. Thanks :) (although I said you didn't have to :P)

[h88]

Add this line as well if you want it to output the exact height and wide:

Stage.scaleMode = true;

[kirupa]

I'll keep it like that for now; it's ok if Flash 5 users get to dip into the Flash MX section =) I didn't know we could use that to get the stage width/height. I'll definitely use that from now on ;)

Cheers!
Kirupa <:}

[lostinbeta]

Hey h88, what is scaleMode = true????