» Audio Spectrum Effect [FlashMX]

I'm not sure if this is the real name of what I'm going to talk about - sound bars, or audio bars - if you know it please leave a comment so I can change it.



Since everyone listens to music I suppose everyone has already seen this bars. I made it a year ago when I was finishing school and I was doing a web-site for a band and I needed something like this, but i didn't use it. Why? Because this isn't "real", it's just a "fake" animation.

I also found a component for Flash MX that was supposed to do this real animation, but guess what, it didn't worked...

So, if you're searching for an easy way to do this animation you'll find it below!

1 » You need to add 2 layers and call it "action" and "bars".

2 » Draw a vertical bar on your bars layer. Then select the 2nd frame of that layer and press F5. Now select your bar and press F8, choose "movie clip" and click OK. Your bar is now a movie clip! Then change the instance name to bar1.
(if you don't know where is that "instance name" box check this image from my latest tutorial)

3 » Go to your action layer and select the 1st frame, then press F9 and type the code below:
num1=random(120);
setProperty(_root.bar1, _yscale, num1);

The first line will generate a random number between 0 and 120 and host it on var num1.
(is also recommended to use the function Math.random(); instead of random(); but that didn't work as well on Flash MX, try it yourself!)
The second line will change the height of the object bar1 with the value hosted on var num1.

4 » Now select the 2nd frame of your action layer and press F6, then press F9 and type gotoAndPlay(1); to make a cycle between the 1st and 2nd frames.

(your timeline should look like this)

5 » You have finished your work in one bar, now you just have to copy your movie clip bar1 and create as many others as you wish, BUT, after that you must change their names because there can't be 2 bars with the same name (actually it can, but we don't want it). Select each bar separately and change its instance name to bar2, then bar3, bar4, bar5 and so on...

Then you have to create the function for each bar, select the 1st frame of action layer and copy/paste that 2 lines and replace the names bar1 with bar2 (or other number) and num1 to num2 (depending on which bar you're working).


And that's it, now you just have to save it and enjoy your "sound bars" effect!

Download link: http://www.sendspace.com/file/x1ezjn
(password: www.weknowyousuck.blogspot.com)

» List Menu Roll Over Effect [FlashMX]

Here is a simple flash effect for list menus, i didn't do this for help anyone in specific so if you want to use this just download it, or make it yourself!



1 » First of all you must create 3 new layers for hosting each object you're going to do and give some names.


2 » Then select the layer on the bottom - btn - and draw a rectangle. This is your button! Use the align window (CTRL+K) and align your rectangle on the left edge.


3 » You can now convert your rectangle into a button, select your rectangle by double-clicking it and press F8. Then choose the Button option and click OK.


4 » Now you're going to create the animation movie clip, copy your button (CTRL+C), select the layer above - movie - and paste in the same place (CTRL+SHIFT+V), now lock the other layers so you don't make mistakes (right-click on that layer > lock others).


5 » After that, select your object on the middle layer and break apart (CTRL+B) so it goes again into shape. Press F8, select "movie clip" and then OK.

6 » Double-click your movie clip to enter inside it.
Now delete its stroke and change its fill's color to blue for example. To delete only the stroke just roll your mouse over it and mind the symbol on the right of mouse's arrow, then double-click it and delete. Then select the shape and change the color.

7 » Let's do the animation! Click on the 5th frame on the timeline and press F5, then right-click it and choose "create motion tween" then press F6. Now select the first frame and use the transform tool (Q) to make your rectangle smaller (just change the height) by dragging the black point on the middle-bottom to the top (while pressing ALT). Then go to Properties (if you're not seeing it right-click and select "properties") and on the right side of that window you'll see "color: none", click it and choose Alpha and use 1% as its value. Then select the 25th frame and press F6 and do the same instructions (scale and alpha) but instead of pressing ALT while scaling, don't press any key, so it will reduce the height to the middle of the object.


8 » Now select the 1st frame and press F9 and type stop(); on that actions window. Then do the same thing for the 5th frame (mind the little "a" on both frames).


9 » Let's exit the movie clip by double-clicking any white space on the drawing area and while it's still selected type "j1" on that "instance name" area and press enter.


10 » Now lock the movie layer and unlock the btn layer by pressing the lock or the point.
Select your button and press F9 and type this:
on (rollOver) {
_root.j1.gotoAndPlay(2);
}
on (rollOut, releaseOutside) {
_root.j1.gotoAndPlay(6);
}




11 » Then you might want to add some text to your menu item, you can do that on the first layer. Using the text tool (T).

12 » If you want to do more items you can duplicate the button and movie clip, BUT you must also change the action script and instance names, so they match each other.
For example: you have the movie j1 and you duplicate it, you must rename it j2. Then duplicate the button and on its action script you just need replace "j1" with "j2".



I didn't want this to be so long... anyway, i hope you understand and at least try to do it before you download it.

Download link: http://www.sendspace.com/file/uvv8gt
(password: www.weknowyousuck.blogspot.com)

» Typetester - Compare fonts for the screen

Found this site a month ago and i just loved it!
When you are developing some website or editing a blog's template don't think twice before visit this site, you can compare blocks with the same text and different styles side by side on the same page. Everything can be done, change color, change font, space between letters, line height, background color...

Another great feature is that you can select a font of the "safe list" or select on of your own since it's installed on your computer.

Imagine now you didn't finished your work and for some reason your browser closed itself... no worries, just re-open it and enter the site again and you'll see your font styles just like they were on the last time you saw them - the site has memory for each user.

You're finished now, if you're a n00b there's a "get css" link you can use and download the CSS file.

URL: http://typetester.maratz.com/

» FavIcon - the icon in the address bar

You may probably know what this site is about, for those who don't, I suggest you to check wikipedia. After that I hope you find this site was hopeful.

One more site for those guys that don't like dealing with photoshop or any other application of that kind, this site lets you design your own icon pixel by pixel in a square with 16*16 pixels.

When your icon is complete may want to download it, just press the button right under the preview feature, the file is a *.ico and you can use it on your website placing this code between your <head> and </head>:

<link rel="icon" href="http://example.com/favicon.ico"/>

If don't want to do a pixel-by-pixel image you can use this site that converts an uploaded image into an icon 16*16 or 32*32.

URL: www.favicon.cc

» Skate videos moved

So, i decided to create a new blog fully dedicated to skate. All the posts about skate that were in this blog are now available on skate-vids.blogspot.com and all skate links are being moved too.

» TartanMaker.com & StripeGenerator.com

Here are two sites you may want to visit and maybe create something cool to use on your own blog or website, wallpaper or anything else...

The first one, TartanMaker.com you can use to do your own tartan samples and share it with your friends or just keep it to yourself and do some designs with it.

Here is a screen shot of the site, as you can see you can change everything before save it.

The file is a *.PNG for both sites.


The next one is StripeGenerator.com and is very similar with the first one but like the name suggests here you can make stripe patterns.

You can change its colors, change the size of each stripe, you can even change the alignment. It's a great site for guys that don't want to spent much time dealing with photoshop or just don't know what to do with it (AKA n00bs).

There is also the option of viewing how would your stripe work on fullscreen, maybe if you use it as wallpaper or background for websites, it's a great feature.

» Windows Explorer as FTP client [step-by-step]

For those who didn't know, you can use windows explorer as an FTP client (kind of).
Here is a step-by-step how you can do this. Might be useful if you are working on a PC and you don't have an FTP application installed, this is very easy and takes no time at all.

I can't tell you if this works with any server, at least the ones I tried it worked.
(Never mind all the Portuguese stuff, if you are interested you can always use a translator.)

1 » Open the windows explorer (press WIN+E) and then type the FTP name server which you are going to connect to in the address bar and press enter, don't forget to use "ftp://".
In this case I used ftp://pwp.netcabo.pt/


2 » A small pop-up window should open up and you should fill blank spaces with your user information. In this case I used my own user name to connect to this server "oldman" and my password (no, I'm not gonna tell you) and then press enter.

Note: this step is not needed if you are trying to connect a public server.


3 » Here it is, my own folder on pwp.netcabo.pt, yours should look like this too, it's a simple window you might be accustomed if you use Windows OS like me [not for a long time].

This ain't no special folder, it's a folder like every others but its content isn't hosted on your computer but in a server.


4 » You are now ready to upload your file(s) to server. Just open a new window, select your file(s) and drag them into the server window.
As you probably know it may take a few minutes depending on file(s)'s size.


5 » After that, this small window will pop up and you'll just have to wait until the process is over. It's just like when you copy some file into your portable drive or even into a new folder from your computer.



6 » Here it is, the process is over, the upload is complete and my file is now on the server.
I could access it from any computer by opening FireFox (or any other browser) and typing "http://pwp.netcabo.pt/oldman/mp3.txt" in the address bar.
Where "pwp.netcabo.pt" is the server name, "oldman" is my user name and "mp3.txt" is the name of my file.

PS. don't try to find this file, is already deleted.



Hint: Just in case you didn't know when you want to take a print screen of a specific window you can press ALT+PrtScr instead of just pressing PrtScr and then cut the windows bar on photoshop or something.