The tutorial I chose can be found at here or at https://www.youtube.com/watch?v=Pua4ec2iLNU. In the tutorial you create graphics and movie clips. Accompanied by code, you can make the appearance of rain and then it hitting a puddle by making a ripple where the raindrop falls.
1.1. Click the Circle tool and create a small circle making sure the stroke is transparent
1.2. With the selection tool, drag the left side of the circle outwards in order to make a raindrop shape.
1.3. Click the shape and change the colour option from 'solid colour' to 'linear gradient' so the raindrop can fade from one colour into another.
1.4. On the left side of the colour spectrum, change the colour to a blue shade and change the 'A:' setting to 0% to make it transparent.
1.5. On the right side of the colour spectrum, change the colour to the same shade but change the 'A:' setting to 50% in order to make it translucent.
2. Create the Ripple
2.1. Create a circle using the Circle tool.
2.2. Click the circle and change the colour option from 'linear gradient' to 'radial gradient'.
2.3. Drag the left side of the spectrum to the right until it is about one third of the way from the right side of the spectrum.
2.4. Drag the right side of the spectrum inwards slightly so it is closer to the left tab.
2.5. Click in between the two colours so it creates a third tab and drag it to the far right of the spectrum.
3. Convert the Raindrop to a symbol
3.1. Click the raindrop so it is highlighted.
3.2. Click Modify > Convert to Symbol.
3.3. Change the 'Type' to a Movie Clip.
3.4. Change the 'Registration' to the option on the second row, third column.
3.5. Open the Advanced settings.
3.6. Click the box beside 'Export for ActionScript' and 'Export in frame 1'.
3.7. Change the Name to 'drop'.
3.8. Change the Class to 'drop'.
3.9. Click OK.
4. Convert the Ripple to a symbol
4.1. Click the ripple so it is highlighted.
4.2. Click Modify > Convert to Symbol.
4.3. Change the 'Type' to a Graphic.
4.4. Change the 'Registration' to the middle option.
4.5. Change the Name to 'ring anim'.
4.6. Click OK.
5. Edit the Graphic
5.1. Double click the ripple graphic so it opens into the edit section.
5.2. Right click frame 1 in Layer 1 and click 'Create Classic Tween'.
5.3. Insert a keyframe into frame 10.
5.4. Click frame 1 and modify the shape so it is very small.
5.5. Click frame 10.
5.6. In 'Properties', under the 'Colour Effect' tab, change the Style to Alpha and drag it down to 0%.
6. Use the Graphic in a Movie Clip.
6.1. Click the ripple to highlight it.
6.2. Click Modify > Convert to Symbol.
6.3. Change the Name: to 'ripple'.
6.4. Change the Type: to 'Movie Clip'.
6.5. In the Advanced settings, tick the box beside 'Export for ActionScript' and 'Export in frame 1'.
6.6. Click Ok.
7. Edit the Movie Clip.
7.1. Double click the ripple.
7.2. Insert an empty frame into frame 10.
7.3. When you click frame 1 the ripple should be small and when you click frame 10 the ripple should be bigger.
7.4. Highlight frames 1 to 10 and copy them.
7.5. Create a new layer.
7.6. Paste the frames into Layer 2.
7.7. In Layer 2, move the frames over so that the first frame starts at frame 5.
8. Type in the code.
8.1. Click Window > Actions.
8.2. Type in the following code..
import flash.events.Event;
//every frame, do loop
addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event)
{
//make a rain drop
var d = new drop();
d.x=Math.random()*550;
d.y=-10;
d.rotation=70+Math.random()*20;
d.scaleX=d.scaleY=0.5+Math.random();
d.ground=250+100*d.scaleX;
addChild(d);
d.addEventListener(Event.ENTER_FRAME, fall);
}
function fall(e:Event)
{
//update the rain drop
var d = e.currentTarget;
d.x+=(40*d.scaleX)*Math.cos(d.rotation/180*Math.PI);
d.y+=(40*d.scaleX)*Math.sin(d.rotation/180*Math.PI);
if (d.y>d.ground)
{ //if the drop has landed
d.y=d.ground;
var r = new ripple();
r.x=d.x;
r.y=d.y;
r.scaleX=d.scaleX;
r.scaleY=d.scaleY/3; //flatten it for perspective
addChild(r);
r.addEventListener(Event.ENTER_FRAME, fade);
d.removeEventListener(Event.ENTER_FRAME, fall);
removeChild(d)
}
function fade(e:Event){
//delete the ripple when it has played through
var r =e.currentTarget;
if (r.currentFrame==r.totalFrames)
{
r.removeEventListener(Event.ENTER_FRAME, fade);
removeChild(r);
}
}
}
How I altered the tutorial
I wanted to change the tutorial so that the rain went in a different direction and to make the raindrops be further back. In order to do this I altered the code on lines 12 and 13. I wanted to be able to create a greater depth of field and make the rain go in another direction as if the wind was blowing it that way. This is the code I used..
import flash.events.Event;
//every frame, do loop
addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event)
{
//make a rain drop
var d = new drop();
d.x=Math.random()*550;
d.y=-10;
d.rotation=120+Math.random()*20;
d.scaleX=d.scaleY=0.008+Math.random();
d.ground=250+100*d.scaleX;
addChild(d);
d.addEventListener(Event.ENTER_FRAME, fall);
}
function fall(e:Event)
{
//update the rain drop
var d = e.currentTarget;
d.x+=(40*d.scaleX)*Math.cos(d.rotation/180*Math.PI);
d.y+=(40*d.scaleX)*Math.sin(d.rotation/180*Math.PI);
if (d.y>d.ground)
{ //if the drop has landed
d.y=d.ground;
var r = new ripple();
r.x=d.x;
r.y=d.y;
r.scaleX=d.scaleX;
r.scaleY=d.scaleY/3; //flatten it for perspective
addChild(r);
r.addEventListener(Event.ENTER_FRAME, fade);
d.removeEventListener(Event.ENTER_FRAME, fall);
removeChild(d)
}
function fade(e:Event){
//delete the ripple when it has played through
var r =e.currentTarget;
if (r.currentFrame==r.totalFrames)
{
r.removeEventListener(Event.ENTER_FRAME, fade);
removeChild(r);
}
}
}
REVIEW
I found this tutorial to be easy to follow and easy to complete. I feel that if there was written/ talking instructions accompanied with the video then it would be easier to complete as sometimes it was difficult to see what he was doing, especially as I was using another version of Flash. If he included a voiceover to the video he could have explained better what he was doing.
I learned how to create graphics and incorporate them into the code. By learning to make the ripple when the raindrop hits a certain point, I learned a technique of making the graphics and movie clips interact with each other. I understood the code and what areas I needed to change in order to achieve what I wanted.
No comments:
Post a Comment