Three steps to own a website

So you want to have and own a website but do not know what to start with? In this webmaster article about “3 steps to have an online website” , I’m going to explain the three steps to get your website up and running.

Okay, let’s get going, shall we!

Getting a Domain Name

You need people to know your presence on the web. This is why you need a domain name.

Just like a home address, domain name will act as an online address where people or your visitors find you online. Hence, you should get a domain name that is easy to remember. Instead of “www.this-is-my-home-page.com” you should get something shorter such as “www.sokhodom.com”. If you have extra cash to invest, I suggest you to get both domain names for helping you to score better in search engine search result page. You may read my introduction to webpage optimization here or you may discuss at Cambodiaxp webmaster exchange forum.
In order to have or own a domain name, you have to buy it from domain resellers. Depending on the services the domain resellers provide, the price of domain name varies and ranges from as cheap as 2US$ (.info name) to as high as 35US$ or more. You may try http://www.name.com for a good deal.

Get a Hosting Company

To have your website viewed by visitors, you need a hosting company to host all your relevant website files such as your .html files, images, songs, mp3 flash swf files etc.

I would go against the free web hosting site “if” you design your site for business purpose. The reason being that with free web hosting, your site may look very unprofessional due to the amount of popups, links and banner links they placed on your site. However, of course, you may sometimes need a free web hosting for your site. For me, I do use free web hosting from time to time for testing purposes. When the site or the script works fine I would then transfer it to the main web hosting. This way, I would save the bandwidth usage a bunch.
You may find a cheap hosting at http://www.getwebhosting.org/hosting.php

Design Your Site

Design your site. Yes, design your website. In this process, you can either

Whatever methods you use to build and design your website, you will end up with lots of HTML, images files, PHP, javascript and other necessary files needed for your website. These files needed to be upload into your web hosting.

Voila!!! 3 steps creating first website.

——————————————–

My personal experience: When it comes to get my website up and running, first I would design the website on my local computer. Next I would choose a hosting company that meets my needs. Finally, I choose a domain name and link it up with the hosting company.

In this way, I could save the cost of paying the hosting company and domain name company for a duration of development’s time of my website.

Optimize Your Page with Search Engine in Mind

Accessibility Counts

It goes without saying that an optimized webpage is good SEO. You must first ensure that your page is accessible. Valid HTML and CSS help the engines properly rate your page, while broken links can negatively affect your score. Forms and scripts must be functional. It’s very common nowadays that webmaster has chosen to develop site based on CSS (Cascadding Style Sheet) for accessibilty. One good starting point for CSS design is at http://www.csszengarden.com/.

Search Enging Friendly URL

The URL path to your page should be as descriptive and brief as possible. Http://www.yourdomain.com/product/example.html is far superior to http://yourdomain.com/xj1256?=example.html. Most search engines do not like a URL to have signs like ? and & for technical reasons. Hence, when you develop a site structure, remember to properly use the URL.

Title Tag

Title tags are essential these days. Their importance in terms of keyword density and relevance to your page cannot be underestimated. Title tags also determine not only your ranking in search engines but whether or not a searcher is going to click through to your page! They must be interesting and relevant.

Description Meta Tag

Meta tags are no longer so important to SEO. They were once the be all and end all of optimization. However they still carry a certain weight, especially the description meta tag. Again, searchers will see what you use in your meta tags as some search engines still choose to show this data in their results, even if they do not use them to calculate rank anymore.

Quality and Quantity

Write for your visitors with search engines in mind. Quality of your content plays a very important role to attract and retain your visitors and hence always write a unique current and relevant content.

While quality is an important ingredient to retain visitors, having a good large number of content helps search engines such as Google bots to crawl your site frequently. In returns, many key words that prospective visitors type in the search engines, could lead to your site.

To have an optimized quality content, be sure to employ use of your key search phrase in the content. However do not be tempted to repeat this phrase more often that makes the content easily unreadable. Your primary concern should be toward a good piece of information for your visitors and not search engines.

This conclude our discussion on an introduction to optimize your page for your visitors with search engines in mind.

Macromedia Flash Sound Button | Requires No Actionscript

Macromedia Flash button with sound

You may have seen flash websites that have flash buttons with built in sound. Some of you may ask “How could they do that?”. Well, if you were one, you come to the right place. This flash tutorial guide shows you how simple a flash sound button can be.

Here is a final product that we will create at the end of the day.


1- Create a new flash movie and change the size to 200 x 50

2- Now, we need to import the sound file to our library. We do this by
File > Import to Library > browse to select sound file.
If you do not have any sound files to test, you may download them here.

3- Select a rectangle tool Flash Rectangular Tool by pressing R on your keyboard.

4- Click and drag on the canvas to create a rectangle shape. This will be our button with sound embedded.

5- Double click on the rectangle shape to select it.

6- Convert it to button by using mouse right clicked and choose ‘Convert to Symbol…’

7- Name it ’sound_button’ and choose ‘Button’ under the behavior radio button list. Click ok to continue.

8- Double click on the rectangle button you just created to edit it.

9- There are 4 states available for button instance. They are Up, Over, Down and Hit.

Flash Button Layer

Up state is normal state for button.

Over state is a state when the mouse is over the button.

Down state is when the button is clicked.

Hit state define the active area of the button.

10- To have sound play when a mouse is over a button, click on ‘Over’ in the timeline and using mouse right clicked and chooser ‘Insert Keyframe’.

11- Open up property inspector by pressing Ctrl+F3.

12- Click on sound dropdown list and select the sound file name.

Flash Sound Property

13- Now, you are ready to test your movie. Press Ctrl+Enter

Voila, you have a button with sound on over state now. To create a sound when a mouse is clicked, just insert another keyframe on Down state of the button instance and repeat steps 10 and 11.

You may download the source code here.

Macromedia Flash Photo Transition | Making Smooth Transition

Macromedia Flash Photo Transition Effect

Creating a simple photo transition effect has not been any better. This tutorial shows you the simplest way to create a cool photo transition effect. This tutorial will make use of, importing photo files to library, tweening and changing alpha value. If you are not sure what is tweening or want to learn more about tweening, please check tweening tutorial first.

Today you are going to make this great effect. Take a look at item below

1- Open a new flash file. In my case, I set size to 280 x 210 to fit my photos.

2- Click ‘File’ and choose ‘Import to Library’.

3- Browse to find photos and choose many photos as you wish for the effect. I choose 3 for this tutorial.

4- Click ‘Window’ and choose ‘Library’ or press F11. You will see this panel popup. It should contain the photos’ file names you’ve just imported.

Flash Library Box

5- Now for each photo, create a new layer. In this tutorial I have 3 photos so I’ll make three layers.

Flash Layer

6- Place separate photos to separate layers by drag the file name from the library panel and drop it into the first frame of that layer.

7- Convert each image on each layer to a movie instance by

8- Now, you have all your photos as movie clips and hence you can apply alpha property to them. By the way, alpha has a value of 0 to 100. While 0 will make the movie clip invisible, 100 will make it completely visible.

9- Click on first frame of top layer, layer 3 in this case, click on the movie clip instance and press Ctrl+ F3 to open up property inspector and change the alpha value to 0.

Flash Alpha Slider

10- Click on frame 20 on top layer, layer 3 in this case, click on the movie clip instance and change the alpha to 99. You don’t make alpha to 100 because there’s problem with bitmap being jittering if alpha is 100.

11- Click on frame 40 on top layer, layer 3 in this case, click on the movie clip instance and change the alpha back to 0.

12- Make tweening between frame 0 and 40. If you need help on tweening, click here.

13- Repeat steps 9 to 12 for other photos. However, to have the transition effect, you will make other movie clip come to visible while the photo on top of it fades away. This can be done by insert a key frame 20 frames after the layer on top of current layer and repeat steps 9 to 12.

Flash Layer

14- you do not want to display the photos on layers 1 and layers 2 when photo on layer 3 fades in. Therefore you need to delete some frames on layer 1 and 2.
Do the following:

If you have done this correctly, you will get something like this:

Flash Layer

15- Now you are ready to test your movie. Press ‘Ctrl+Enter’.

Finally, if you can’t manage to get it working, see the flash mx source code and you will understand it better in no time.

Creating Flash Fading Effect

Macromedia Flash Fading – Making Movie Fading Effect

Fading is an indispensable technique for flash designers. If you are a movie fan, you would have seen this technique a lot during the intro to the main movies. And sometimes designers use multiple fading effects to give a nice touch and professional look to their designs.

Today we are going to make this great effect. Take a look at item below

1- Create a new flash movie and change the size to 150 x 50.
2- Choose a text tool Flash Text Tool or press T on your keyboard.
3- Open the Property Inspector (Ctrl+F3).
4- Change font to Impact. We choose Impact because the effect of fading can be clearly seen.

5- Change the font size to around 24 and color to anything you wish.
Flash Property Set

6- With the text tool still selected, click on the left side of the stage and type any words you wish and limit the length so that there’s no overflow on the right hand side.

7- Choose an arrow tool Flash Arrow Tool or press V on your keyboard.

8- Select the word you just typed by clicking on it once.

9- Click ‘insert’, choose ‘Convert to Symbol’ and select ‘Graphic’ as behavior.

10- Type ‘fading’ in the name field then click ok

11- On the timeline use your arrow tool to click on frame 25. Do this by clicking the gray rectangle below number 25.

12- Click ‘insert’ and choose ‘Keyframe’. You get something like this

flash keyframe

13- Open up your property inspector by pressing Ctrl+F3

14- Without do anything to the timeframe, use your arrow tool to click on the word you type earlier to select it

15- In property inspector, change the drop down list of color to Alpha.
Flash Color Property

16- Use slider to slide the number to Zero.
Flash Color Slider

Now, you have created two objects. One is at the first frame with no Alpha value or Alpha value is 100 and the other one is on the 25th frame with Alpha value set to zero.

Alpha value is very useful property to create transparent images. Alpha value of 100 means the image is completely visible whereas alpha value of zero means the image is completely transparent.

17- Now, choose the arrow tool (V) and click any where in between the frame number 1 and frame 25.

18- Click ‘insert’ and choose ‘Create Motion Tween’.

19- Test your movie by pressing Ctrl+Enter

Now you have completed this essential technique. Combine with the tweening tutorial; you will have the power to create something more pleasant. Here is an example:

Finally, use your creativity to create any effects you like using this flash fading technique and I assure you that you will love it too.

Click here to get source code

original tutorial is created on 1st December, 2004

Adobe Flash Tweening

Macromedia flash tweening – Making Animation Works

I would say the simplest and easy way to learn flash is start with the basic.
Today I’m going to walk you through the process of making a simple animation known as TWEENING in Flash.

Tweening is a key process in flash animation. Flash animation is created by making changes to position or shape of the object frame by frame. The process is done in the way that it gives the appearance that the first object evolves smoothly into the final object.

Without further ado, let’s begin our lesson. Below is the final product of this tutorial.

1- Create a new flash movie and change the size to 350 x 100
2- Choose a rectangular tool by clicking onadobe rectangular tool or press R on your keyboard
3- Create a small rectangle to the left of the stage
4- Choose an arrow tool by click on arrow tool or press V on your keyboard
5- Select the rectangle by double click on it

6- Click ‘insert’, choose ‘Convert to Symbol’ and select ‘Graphic’ as behavior

7- Type ‘rectangle’ in the name field then click ok

8- On the timeline use your arrow tool to click on frame 25. Do this by clicking the gray rectangle below number 25.

9- Click ‘insert’ and choose ‘Keyframe’. You get something like this

adobe flash keyframe10- With your arrow tool (V) still selected, click on frame 25 of the timeline. Make sure you have something like figure above.

11- Use your arrow tool (V) to move your rectangle towards the right side of the stage. You do this by click on the rectangle and drag it to the right hand side.

12- Now, click ANYWHERE between frame number 1 to 25.

13- Click ‘insert’ and choose ‘Create Motion Tween’

14- Press ‘Ctrl + Enter’ or click ‘Control’ and choose ‘Test Movie’.

Congratulation, you have just create your first animation :) . You may have notice that my flash movie actually stops playing after it has reached the right hand side of the stage.
This is because I’ve tell Flash player to do so. And don’t panic, I’m here to help you. Here we go:

15- Choose an arrow tool (V) and click on frame 25. By now you would be able to know where frame 25 is.
If not, refer back to point 8 earlier.

16- Click ‘Window’ and choose ‘Actions’ or press F9 on your keyboard.

17- Click on the blue arrow on top right corner of Actions Panel and select Expert Mode

18- And now type in the Action Panel with this line:

stop();

19- Now Test your movie again by ‘Ctrl+Enter’.

In case you can’t seem to get it to work. here is the flash mx source code.

Finally, this technique is great but if you need cool effect to use with this technique, you may find flash tutorial on fading useful. Click here to go to flash fading tutorial.

original tutorial is created on 1st December, 2004

What is Adobe Flash?

What is flash?

Macromedia Flash or Flash is a multimedia graphic program invented specifically for the web. Flash allows us to create interactive animated vector graphics for the webs as well as for desktop presentations.

Flash has rapidly become significant animated graphic software for the web. The reason behind its success is due to its ease of use, bandwidth friendly and browser independent vector graphic technology.

To be able to display flash movie in the browsers, you need a special piece of software call
“plug-in” or “Flash Player”. This “Flash Player” can be downloaded from macromedia site at no cost.

What are flash applications?

The power of flash is unquestionable. Its application ranges from simple cartoon animation to whole e-commerce site. Below are some common flash applications:

In summary, flash’s ability for interactive web and desktop content is limitless. Although, flash can do almost everything, some applications require knowledge of programming in
JSP, ASP, PHP and ColdFusion etc.

Original post is on 1st December, 2004