Cool Looking computer screen

[Virulent]

Hey people . I made this tutorial with flash 8 so there might be some things different in this tutorial even those its mostly similar to version after MX 2004. this is my first tutorial so bare with me .
All right so here is what we are going to do in this tutorial:

http://img115.imageshack.us/my.php?i...utflash4rf.swf

Let’s start with a new flash document. Choose the default size. Make the background color black.

So let’s start with the screen shall we?

1) Make a white fairly thin rectangle across the screen. Make sure you have no border when you make the rectangle. if you don’t know how to make a rectangle with no border here is a screen shot:



2) After making the rectangle, add a keyframe at frame 5. After doing that, deform the rectangle a little bit, if you want you can add some alpha to the first instance. to do that select the rectangle then open the color mixer under "Color" on the right side of your screen if you are using versions after MX, if you are using version below MX go to window > color mixer, this also works for versions above MX if for some reason you don’t have "Color" there. Then do you see the dropdown menu labeled "Alpha"? Make 100% to like 35% or anything according to your needs. The color mixer:



3) after that select the key frames between 1 and 5 and go to the property bar down at the bottom then tween > Shape (only in versions after MX. for version bellow MX go to insert > Shape tween... I think I am right if not please correct me :P). When you do that the key frames should turn into a green-yellowish color with an arrow going across it. If you see a dotted line you probably grouped the instances. Now your screen should look something like this... hopefully:



Ok now lets add some color to the screen shall we?

1) Add a new keyframe at 10. If you think that it’s going too slow then use less frames, but this will also give it a bumpy effect. To make it smoother you can keep the frame numbers the way it is and increase the movie's fps (frames per seconds).

2) To do this you can either click on the gray area around your document which will bring up all the features of your document like background color, its size, fps and other stuff. Increase the fps from there or another way is Modify > Document. Don’t increase the fps too much or it will be really fast. Increase it by about 3-4 frames. So if its 12 make it maybe 15 or 16.

3) You will see a arrow going across last few frames too indicating that there is still animation in these frames but its all right. Now on keyframe 10 select and delete the deformed rectangle you had made and make a new larger rectangle, with a fill of whatever color you want, covering up the whole black screen behind. That’s right this will be your screen where you will see all the funky stuff .

4) Ok so when you play it (hit enter to play) you should see a piece of rectangle deform and then transform into a rectangle screen. Now add a keyframe at like frame 100. You will see a big arrow going across the frames and if it bothers you and you want to remove it select all the frames between 10 and 100 and right click it and click "Remove Tween". Here is a screenshot if you don’t understand:



When you click it the arrow should go away and the frames should be gray.

5) Ok... So lets import the pattern that you made in Photoshop to the library so go to File > Import > Import to library. When you do it should add a bitmap symbol in the library. If you don’t know where the library is then it’s probably on the right hand side of you window the same place where you found Color pallet (as I said before only in versions after MX). If its not there for some reason go to Window > Library.

6) All right so lets add the patter to the screen. You can just add it flat or you can add a fade in effect. I will add a fade effect just for the heck of it :P. so add new layer. To add a new layer, click this button:



this should add a new layer named layer 2 so lets name the layers that we already have right now s its easy to recognize what layer we are working with because when we have lot of layers we get confused. So name the first one "background" and the second one "pattern". Now add a new keyframe at 10. Remember this keyframe will look different than the one we added in layer one because in this layer we don’t have anything in it so the color of the frames will be white.

7) Now while selecting that keyframe adds the pattern on the screen. Now we want a fade effect so to do this right click the pattern and click "convert to symbol..." when you click this a window should pop up. Do the following as shown in the pic bellow:



8) All right now select the pattern on the screen and you should see a bunch of stuff in the property bar like "instance or:" and the high and width of the graphic and one drop down menu tagged "color:” That’s the one we need.

{img]http://img82.imageshack.us/img82/4633/24sv.jpg[/img]

9) From that menu choose alpha. An new thing as added to the property bar which has percent written in it. Make it 0%.

10) Now add a new keyframe at 15. Select the graphic again, you can't see the object there but when you click somewhere on the screen it should select it and this is what you should see in your property bar. Change the 0% to 100%.

11) After doing that select all the frames from 10- 15 and add motion tween to it the way we added shape tween previously but this time choose "Motion".

12) After doing that you should see an arrow going across frames 10-15 but after 15 the arrow becomes a dotted line. this shows that there is an incomplete animation in those frames so if you are annoyed by it just select frames 15-whatever and remove it by right click > remove tween.

13) Ok... now you are successfully done with the background of the place on which you are going to put those funky animations. From here starts a little bit hard part. We are going to make numerous small movie clips. It’s not that hard really lol it’s just a pain in the butt: P.

Ok... let’s start with the one with the wave thingy which looks like a sound vibration. it might look real hard but its not only if you make good use of your brain.

1) Ok so add a new movie clip by going into insert > new symbol and that window will pop up ... the one that popped up when you turned that pattern into a symbol. So choose movie clip instead of graphic from in window and name it "wave".

2) This might look difficult but its not. All you do is make 2 instances and let flash do the rest .

3) Ok now make a straight horizontal line. Make the color of the line white. add a keyframe at 5.while on frame 5, make small lines in an angle starting from left and moving towards right gradually making the waves a little bit bigger and bigger or you can also make random waves. Here is a screen shot of what you should expect when you make it:



I made is a little bit more detailed but if you are feeling lazy today and don’t want a lot of details you can just make a couple of lines if you wish.

4) ok now select frames 1-5, go to property bar and choose shape tween. if you see dotted line try to select all the lines and hit ctrl+B or go to modify > break apart.

5) Again select frames 1-5 and right click the selected frames and choose copy frames from the menu that pops up. Now select frame 6, even though you haven't added a key frame there, you can still select it, right click and click paste frames from the same menu that pops up. Now select frames 6-10 and right click and choose reverse frames from the menu. If you hit enter you will see that the lines turns into a wave and turns back into a straight line. Pretty cool, huh?

6) Now let’s make it a little bit more detailed. I am going to show you one example and you can do the rest the same way. Here is how it goes. Select all frames, 1-10, copy them and add a new layer and paste them on that layer.

7) Remove the extra frames with the dotted line that you see at the end by selecting the frames, right clicking, and selecting remove frames from the menu. Now select the middle frame 5 then go to modify > transform > flip horizontal.

8) Do the same with frame 6 (don’t forget to do this one or it will look messed up). Continue these steps that I just taught you in this paragraph with different transformation like flip it vertical or flip it horizontal + vertical and so on. Once done with it click "Scene 1" tab on the top right above the timeline. Add the movie clip to the screen and set it where ever you want.

Mess around with this trick and you can come up with cool stuff.

Let’s move on. Next what we are going to make is that thing that looks like a loader.

1) Add another movie clip and name it "loader". Make a small vertical rectangle with white fill and no border.

2) Add a key frame at 10 once you are done with the rectangle. Now select the rectangle while still on keyframe 10. Go to the color mixer and change the alpha to 0%. Make sure that the rectangle is 100% on frame 1 and 0% on frame 10.

3) Select all the frames from 1-10, go to properties and select shape from the tween menu. Add a new layer and add a keyframe on frame 2. go to layer one, frame 1 and copy the rectangle. Go back to layer 2 and paste the rectangle.

4) Move the rectangle little bit near to the other rectangle horizontally so that there is a little gap between 2 rectangles. Add a keyframe at frame 16.

5) Select all the frames from 2-16 on layers 2, go to properties and add shape tween. add a new layer, add a keyframe at frame 3, paste the rectangle you copied previously, move it horizontally so that its near the rectangle on layer 2 and has a little gap between them, add a keyframe at frame 17, select all the frames from 3-17 and add shape tween to them.

6) Keep on doing these steps and keep on shifting the frames by 1 frame each time you add a new layer until you think its enough of rectangles. Press enter and see what you just created . Add the movie clip to the screen after exiting to the first scene. This is what your timeline should look like after adding a bunch of layers and doing the steps given above:



Now we will make a movie clip that looks like the text you saw in the movie I showed you up there.

1) Add a new movie clip and name it "cursor".

2) Insert a text box and put "_" in it.

3) Insert 3 keyframes, one on frame 2, one on frame 3 and one on frame 4. Click on frame 2 and delete the text box. Do same with keyframe 3 but not with 4.

4) Exit to the scene.

Now let’s make the text.

1) Add a new movie clip and name it "text 1".

2) Select the text tool and add a text box. In this we are going to write something related to computers and stuff. I am going to write this:

"SYSTEM ACCESS GRANTED
PRESS ENTER TO CONTINUE"

But don’t write that right away, just follow me.

3) Ok so while in the text box, add the letter "S". After that, add a new keyframe at frame 2. Put the cursor in the text box we made before but this time on frame 2 and insert "Y". Add a keyframe at frame 3, add the cursor to the text box and add the letter "S". Ok so we did "SYS" together. Now add the rest of the letter the same way.

4) After adding all the letters, insert a frame at 44 or 45 by right click> insert frame.

5) After that insert a new layer. Add the movie clip "cursor" in this layer at frame 1 and move it right under the first "S".

6) Insert a key frame at frame 18 and move the cursor from "S" to "D" or whatever the last letter you put in the first line. Select the frame 1-18 on this layer only and add motion tween to it. Remove the extra frames, 18-44 or 45.

7) Add a new layer and insert a keyframe at 19. Drag the movie clip cursor and put it right under "P".
8) Insert a keyframe at frame 38. Move the cursor next to "E" but not under it. Sort of like this:



9) Select all the frames from 19-38 and add motion tween to it. if you want you can make more of these type of movie clips. Let’s make a cube fade in and out in different positions. If you do not
Have this tool you can download it off of here:
http://www.macromedia.com/cfusion/exchange....cfm?view=sn110
Download "jk Drawing Tools".

1) Insert a new movie clip and name is "cube".

2) Draw a cube in whatever position you want it to be. Change the alpha of the border to 0% in color mixer.

3) Add a keyframe at frame 5. Select the cube and change its border alpha to 100% in color mixer.

4) Select frames 1-5 and add shape tween to it.

5) Add a key frame at 9.

6) Insert a new layer and insert a keyframe at 10. Make a new cube but this time change its position to something else.

7) Select the rectangle and change its alpha to 0%.

8) Add a keyframe at 15. Select frames from 10-15 and add shape tween to them.

9) Add a keyframe at frame 19.

10) Repeat these steps with choosing different positions of the cubes.

Ok, so this is the basic steps I went through to make this video. now I know I made it a little more details, but you can do that now right? I will give you a link to my flash file so you can check it out and see what I made in it.

Download Mirror1: http://rapidshare.de/files/17461312/tut_flash.fla.html
Download Mirror2: http://files.filefront.com/tut_flashfla/;4...;/fileinfo.html

[Xtremerunnerars]

WOW man! This must have taken you forever....nice images and it looks great!

[Virulent]

well... to write and make the file it took me 2 days but each day about 2-3 hours lol.

[Sp0rk-eh]

wow. thats great. great work. honestly. nice.

[sh4d0w]

Dude that's great. I can already think of many things that i can do with that....That would look good as a splash for a flash site

[Virulent]

thnx for your comments Xtremerunnerars, Sp0rk-eh, and sh4d0w.



c'mon ppl... you gata be kiddin me... only 3 ppl read tut? i hate yall... i wasted my time makin this tut for 3 ppl?...... lol j/k i dont hate yall but i m sad .... only 3 ppl read it.

[sceptileex]

wow alot of stuff going on in there O . o alot of movie tweens and the likes. If it wasnt that complicated, it'd make a good preloader.... only that itll take longer to preload itself than to preload the mainsite XD nice stuff.

[1337elite]

There's not a lot of people that has flash 8, even less using it.

[Virulent]

<div class='quotetop'>QUOTE(1337elite &#064; May 8 2006, 12&#58;07 PM) [snapback]167845[/snapback]</div>

There&#39;s not a lot of people that has flash 8, even less using it.
[/b]

works for flash MX. actually it works for all because it doesnt have scripting involved in it. u just gata know what to do.

[kraymer]

I know I'm alittle late, but I had to give you props for that, it's awesome!!

~kraymer