There’s nothing misterious here. In fact maybe this is something you’ve already seen before but couldn’t tell how it was done. Well, here it is.

Initial Vars:
var left:Number = 200;//SCROLLER X INI POS
var right:Number = 345;//SCROLLER X END POS
var scrollerDistance:Number = 145;//DIFF BETWEEN LEFT AND RIGHT : 200 + 200 - 55

Horizontal mask movement:

Scrolling value applied to mask:
//((SCROLLER X POSITION - SCROLLER INITIAL POSITION) / HOW MUCH DISTANCE)*MASKED MC WIDTH
maskPosVal = ((scroller1_mc._x-left)/scrollerDistance)*600;

Application:
//STRAIGHT MOVEMENT
mask1_mc._x = maskPosVal;

or

//EASING
xVal = mask1_mc._x;
xDiff = maskPosVal-xVal;
xMove = xDiff/3;
mask1_mc._x = xVal+xMove;


Vertical mask movement:

Scroller values are the same, we just need to change the mask movement property, from _x to _y, we also need to change the width value for height value in our formula (*50 in this case), and last, rearrange the masks within the archive.

Scrolling value applied to mask:
//((SCROLLER X POSITION - SCROLLER INITIAL POSITION) / HOW MUCH DISTANCE)*MASKED MC HEIGHT
maskPosVal = ((scroller1_mc._x-left)/scrollerDistance)*50;

Application:
//STRAIGHT MOVEMENT
mask1_mc._y = maskPosVal;

or

//EASING EFFECT
yVal = mask1_mc._y;
yDiff = maskPosVal-yVal;
yMove = yDiff/3;
mask1_mc._y = yVal+xMove;

Tip: When you calculate the right pos, remember to take into account the size of the scroller as well. For example, in my case, the registration point of the scroller mc is on the left, and the scroller width size is 55px. So the right value in this case would be 200 (left pos) + 200 (size of white line) – 55 (the size of the scroller) = 345.

Download the zip file. The code is fully commented plus is very easy to understand. If you have any question or comment, you are welcome to post it.

Suggestion: If you want to learn how to master a soft or script language, my suggestion is that you have to read…. then keep reading… and read even more. Don’t get used to copy / paste. It might solve the inmediate problem but you will never know what you are actually doing.

Good Luck!
Federico :-)

This tutorial consists of several stages. In this first stage I’m going to talk about qTranslate which is the plugin I used to switch the content based on the selected language.

In the second stage I’m going to talk about how to translate everything that is in our template but is not coming from the wordpress editor. For that we are going to use GetText () (_e () and __ ()), and poEdit to generate .po and .mo files that contain our translations.

In the final stage I’m going to talk about the All In One SEO plugin, which is very useful for defining metatags, keywords and descriptions, not only for our home page but also on all of our individual pages and posts. Why do I include it here? Because with the use of a special qtranslate tag, we can also define metatags, keywords and descriptions in different languages as well.

qTranslate:
I want to clarify that qTranslate plugin makes no translation by itself, but allows us to write the post in different languages and display them depending on the language chosen by the user, as well as configure it to recognize automatically the browser’s language settings and display the content accordingly.

As you can see in the second image, once configured, we can post our article (title and content) in all the different languages we defined in the settings page. In my case, I have English and Spanish. What it’s not possible to customize (at least I couldn’t find out yet) is the permalink url. This is because, although we have content in different languages, it’s still one single post.

The installation is really simple, just like any other plugin. Download the files in the plugin folder. Then login to wordpress, go to plugin section and activate qTranslate. Finally go to settings -> Languages and select your choices.

We have just a few options here which are really easy to understand. If you need further information, please visit qTranslate forum.

In my case, I set it to work like: siteurl/lan/pages.

To include the language selector in our theme, we use this code:

<?php echo qtrans_generateLanguageSelectCode($arg); ?>

The params for $arg can be: 'image', 'text', 'both', 'dropdown'. Meaning, you change $arg with one of them.

This is how qTranslate works:
When we save our post, although everything is saved together, the content of each tab is enclosed with a special tag that defines the content language. Like for example the spanish tag which is <!--:es-- > y <!--:-- >. If you have access to the wordpress database, check wp_posts table and its data. You will see that each block of text starts and ends with the corresponding language tag. So based on the selected language, only the text within that tag will be displayed.

There is also a function that returns the selected language abbreviation. This function is <?php echo qtrans_getLanguage(); ?>. It’s very useful if we want to display a specific image based on the active language. The path to the image would be something like this:

<img src="path/name_'<?php echo qtrans_getLanguage(); ?>'.gif" />

Tip: If you created the navigation menu by hand and not by <?php wp_list_pages(); ?>, you will have to use absolute url’s. Like this:

<a href="'<?php bloginfo('siteurl'); ?>'"mypage">Page</a>

where <?php bloginfo('siteurl'); ?> will return site url + active language abbreviation. Notice that I didn’t include the inverted slash “/” in front of mypage. That’s because "siteurl" already returns siteurl/lan/.

This concludes the first part of the tutorial. In brief I’m going to post the 2nd part and see how to use the functions GetText () to translate text strings.

Suggestion: If you want to learn how to master a soft or script language, my suggestion is that you have to read…. then keep reading… and read even more. Don’t get used to copy / paste. It might solve the inmediate problem but you will never know what you are actually doing.

Good Luck!
Federico :-)

If you are looking for a home server, easy to install and easy to customize, AppServ works like magic. The wizard is really easy to follow, and you can even install it in your own pc along with the rest of your stuff.

Here it is the link to download it plus a step by step to install it.

One thing that you need to know if you want to have your own server, is the type of service you have with your ISP. That is, with a static IP or dynamic IP.

Static IP: A static IP address is simply a permanent address that remains associated with a single computer over an extended period of time and it’s assigned by your ISP. This type of IP let’s you run web servers, mail servers, FTP, etc… and redirect a domain to that IP without having to refresh DNS each time the IP changes, like with a dynamic IP.

Dynamic IP: A dynamic IP is assigned by a DHCP server at the start of each session, normally changing from one session to the next. If you have a DSL connection, the assigned IP doesn’t change really often but it’s not permanent so if you want to run a server and manage your own domain, you need a service (like www.cdmon.com) that refreshes DNS each time your IP changes.

Suggestion: If you want to learn how to master a soft or script language, my suggestion is that you have to read…. then keep reading… and read even more. Don’t get used to copy / paste. It might solve the inmediate problem but you will never know what you are actually doing.

Good Luck!
Federico :-)

Our DB is going to hold a list of contacts and the fields will be name and email address.

We are going to do the DB creation process through phpMyAdmin which is an open source tool written in PHP intended to handle the administration of MySQL over the World Wide Web. It can perform various tasks such as creating, modifying or deleting databases, tables, fields or rows; executing SQL statements; or managing users and permissions. If you have a hosting plan, you should be able to access phpMyAdmin through the cpanel. In case you don’t, check with your ISP.

Those that would like to have their own server, take a look at How to install AppServ

Next… Assuming you already got into phpMyAdmin panel, what you see is something like this:

In my case I have all set in English. But you can change the language choosing it from the language drop down menu.

To create the DB, we go to the textbox Create new database, we type a name, and then click create.

Tip: Try to choose a name that tells you something about the project so when you have a few more tables there, you can easily distinguish them.

In my example, I just named it test_1. So test_1 is our DB. Now we need to create a table to save the data. To do this, go to Create new table on database test_1 and give it a name.

We’ll call it contact and in “number of fields” we put 3. Then click go. Number of fields is the amount of cells our table will have. In our example, we have 3 cells. One for the ID to be automatically assigned to each new record, a second one to save contact name, and last one to save email account.

Tip: It is strongly recommended that you never use special characters like á-é-í-ó-ú, ( , ), ñ, [], etc, for the table or field names. I found these rules somewhere:

* No identifier can contain ASCII NUL (0×00) or a byte with a value of 255.
* Database, table, and column names should not end with space characters.
* Database and table names cannot contain “/”, “\”, “.”, or characters that are not allowed in file names.

Now that we have the table, we set the Field, Type and Length. I’m not going to explain the Type and Length various options since it’s beyond this tutorial. If you want to dig a little bit about it, please check MySQL datatypes. You can check the image below and do the same. And in the case of the ID, remember to select “auto_increment” in the extra field option, and choose “primary key” from the radio buttons.

Click Save to complete the table creation process. Now we are going to enter the data for name and email. To do that, click insert on top of menu options. When done, click go. We now have our first “record” done. If you would like to enter a new record, repeat the process.

So, we are ready to move on. To sum it up, we created a DB, we created a table with records and assigned data to those records. Now we just need to connect to the DB, do a query to request the data and show everything in a web page.

How we do that? With PHP. But first you need to confirm that you have PHP enabled in your hosting or wherever you are testing this. To do so, open your HTML editor, paste the code below, save it as .php in the root of your server.

<?php phpinfo(); ?>

Then open this same page in a browser. If PHP is enabled you will see all the information related to PHP, MySQL, etc. Once you confirm it, please don’t forget to delete the page. In case the page didn’t return any information (assuming you are accessing the page but nothing showed up) you will have to check with your hosting.

Assuming that PHP is enabled, create a new folder, a new php page and paste the code below. I’m going to explain it a little bit although it’s quite simple.


<?php
$db_host = "localhost";
$db_database = "test_1"; // DB Name
$db_username = ""; // Username to access MySQL server. Username and password should be provided by your hosting or if you have your own server, when you installed MySQL.
$db_password = ""; // Password


// Here we establish the connection with MySQL server
$db_connect = mysql_connect($db_host, $db_username, $db_password) or die (\'Error connecting to mysql\');


// We define which table we want to connect with
$db_select_db = mysql_select_db($db_database);


// Basically it means: Select everything from table contact order by name in descending order
$query="SELECT * FROM contact ORDER BY name DESC";


// Save the query resutls in $result var
$result = mysql_query($query) or die(\'Error : \' . mysql_error());


// Use a while to loop through all of the records we have in the DB.
// With mysql_fetch_assoc we are getting the data in associative array format instead of indexing format.
// This way we can access the result using the name of the field
while ($data=mysql_fetch_assoc($result)) {
// Finally, we create divs to hold and show the result
echo "<div style=\'float:left; width:300px;\'>".$data[\'name\']."</div>";
echo "<div style=\'float:left;\'>".$data[\'email\']."</div>";
echo "<div style=\'clear:both;\'></div>";
};
?>

If you followed the steps correctly, you should be able to see the contacts list. If not, check your DB to see if you entered the data. If you still have problems, send me an email and I’ll see what I can do to help you.

Suggestion: If you want to learn how to master a soft or script language, my suggestion is that you have to read…. then keep reading… and read even more. Don’t get used to copy / paste. It might solve the inmediate problem but you will never know what you are actually doing.

Good Luck!
Federico :-)

This is a very easy tutorial, although I would recommend you to have basic knowledge of AS, PHP and how to connect to a DB. If you don’t know how to create a DB, I suggest you to check How to create a Database.

If you want to test this app locally (your pc), you’ll need to have a server installed with PHP and SQL running. If you are on windows platform and would like to have your own server, please check AppServ. Here you have a direct link to download AppServ. And here a step by step how to configure AppServ.

Download Files

Suggestion: If you want to learn how to master a soft or script language, my suggestion is that you have to read…. then keep reading… and read even more. Don’t get used to copy / paste. It might solve the inmediate problem but you will never know what you are actually doing.

Good Luck!
Federico :-)