Flash Custom Website Preloader: Rotating in Mask

Hey!

Recently I've been working on one project, related to flash and I found some stuff you might find interesting.
This time we will concentrate on the custom website preloaders. What is a PRELOADER ?
A preloader is a small program ( or even a function ) whick is executed while the page is loading ( if your page is loading slowly then you should definetly use a preloader), for example: "the page is loading.... please wait". If you work with flash, then I'm pretty sure you are going to use some looping animation insted of text for your preloader.
So this time I will show you some simple and interesting way how to create a website preloader in Flash.
Ok, let's assume we have a website with black background and before the page loads up, we want to show some simple animation. Lets start with opening Flash program. Follow the next steps:

1. Go Modify>Document. Choose black as your background;
2. Go Modify>Document. Choose width and height. In this tutorial I use 300x300.
3. Now let's create a simple square with a square drawing tool;
   
4. Press F8 and click "OK". The F8 button is a shortcut to converting a simple drawing to a symbol. We need that because we will need to write reffer to this drawing in our actionscript.
5. Click on the new square symbol and open the properties menu ( the bottom of your screen);
6. Click "Instance name" and name it "turner".
7. Now open the filter menu. Press "+" and then press "blur". You can choose the amount of blur effect yourself.

Ok so now we are done with the animation. The only thing left to do is changin the center of our symbol. To do so:

1. Double click this symbol. When you are inside the symbol, choose a simple pointer tool and drag your square a bit right untill you see the cross, pointing the center of a symbol beeing outside the symbol.
   
   
2. Duoble click anywhere to go to the main Scene.

Ok, now see the layers panel. Add one layer more above the current one. Right Click it and choose "Mask". Now here's the trick: only objects drawn in this "mask" layer will be seen to a visitor, so you can get creative and draw any kind of object. I chose a half-circle.
When you are done, Add one more level above the Mask level. Then Click the first frame and open the Actions Panel (window>Actions or F9).

Now add the following code to this frame in the Actions panel:

turner.onEnterFrame = turn;
//this line tells flash what to do when the turner object is loaded: assigns a function "turn".


function turn(){
turner._rotation +=10;
}
//this is the function which tells "turner" to turn around by 10 degrees each //time the function is evaluated.

OK, now you can add one more layer above and put some text in your object. I chose "We are loading...."

Now press "CTRL + ENTER" and you should see something like this:







So this is it, you have just created you first preloader.In the next post I will disccuss how to make your preloader show up before the page loads and how to play it till the page is loaded.
I hope you enjoyed reading this, feel free to ask if you need some help. Good luck in creating preloaders.

Using CSS properly (tutorial)

This first post is due to the events that happened last week. Last week I took part in my university bloggers' event, called "Tnklas". You can find more information about this event in it's official website.
What we will be talking about is how to use CSS properly. This post should be read by people who have a basic understanding of CSS already. If you don't know what is CSS, please, feel free to learn it at W3schools.
We all well know that CSS technology is for creating the style of an internet application. It is important to know the influence of good and bad CSS in your website because the bad usage of CSS may create a design of your website very beautiful, but very slow and irritating. So in this post I am talking about the best practices how to use CSS in order to make your website beautiful and well-working.
So, to start with, what is the proper usage of CSS?
CSS, broadly speaking, is that kind of information, which is recieved by the visitors browser only once - the first time visitor visit your page. So the proper usage of CSS is the one which would be loaded fast and only once. So how can we do it?
Basically there are 3 ways of how you can use CSS:

1. Giving a css "style" property for every element of your page;
2. Putting a css "style" property in ever page of your website in a „head“ section;
3. Loading an external style sheet.

The proper usage of CSS is the third option. Even though we all sometimes use the mixed type of CSS, the basement of CSS should be the third option. Lets take an example of how a browser acts if your website uses the first CSS option: A browser while loading your page, sees multiple "style" properties in each section or even an atribute. It means, that every paragraph, every line or „ h1“ tag has its own style. Not only it takes time to create that kind of page but it also takes lots of time to load it. If your website is built in the second way, it is much better, because the head section holds all of the style elements in one place. It gives a browser ability to load a page faster and since the „head“ section is in above of the page it ensures the CSS is loaded before the page shows up to a viewer. However, the problem is that, this CSS in „head“ section is downloaded each time by the browser when a user clicks different page on the same website. It takes time and it is useless. So, how to work like a professional?

1. Build your website. Try to create a unique style of your website but not of every page;
2. Create an external CSS document .css ( you can create it with MS Notepad);

3. Put your website and a .css document in the server in one folder.
4. Relate your websites .html pages with .css document (wondering how to do it? Go to www.w3schools.com and see the CSS tutorials ).

So here's what we got now:


We have multiple pages with the same style of a website. Now, if we want to change the color of body, we don't need to go to every page of a website and declare new changes. All we have to do is simply change the external .css file, to change one line of it! The browser is simply downloading your CSS style document only once and if a viewer wants to see the next page, it loads much faster, better and is loaded before the page shows up.