Monie Studios » Tutorials

Create Simple Animation with Illustrator

Monie — Thu, 19 Aug 2010 07:00:12 +0000

At some point in time in every designer’s life there comes a time where you need to make an animated web banner.

Illustrator itself has always been a print based application and one thing it just doesn’t do is animation.

There is an application called Adobe Flash. Flash does have the ability to create animation. It’s also one of the most popular applications being used to create animation. Flash uses the concept of framed based animation whereas in Illustrator, there is no frame. However, there are layers inside Illustrator and the beauty of Illustrator is that it can turn layers into frames for you.

Let’s see how we can do that.

Creating Layers

Opening my layers panel will show you that my banner is made up of 5 different layers. If you are familiar with the Flash application, you’ll know how easy it is to create an image like that. Now, just think of a layer as a frame and you’ll see how easy this will be.

What I have done here is basically to put every frame of my animation onto a separate layer. Right now I have five different layers and when combined, it will produce the full image like the example above.

Once you have completed setting up your layers, let’s create our animation.

Saving Your Animation

Things to consider when setting up the Save for Web & Devices command:

Optimized file format: SWF
Flash Player version: Flash Player 9 (the latest version on your machine)
Type of export: Layers to SWF Frames (this is the most important setting)
Curve Quality: 7
Frame Rate: 1 second
Loop: Play animation repeatedly (tick this checkbox)

Saving the file to SWF, a Flash format, Illustrator will ask you which flash player you want to optimize. Select Flash Player 9 which is the latest version at the time of writing this tutorial.

Type of export, this is the most important setting that you need to set. You can tell Illustrator to save your file into a big flash file by selecting the AI File to SWF File. You can also turn all your Illustrator layers into frames by selecting the second option which is Layers to SWF Frames and that’s going to create an animation.

Next, if you want to play the animation over and over again, put a tick in the Loop check box. Setting the frame rate to one frame per second means that every one second it’s going to switch within the layer.

Let’s go ahead and save the animation and select HTML and Images (*.html) in the Save as type. This will then automatically export an html demo file with the table already in it, so on and so forth.

This is how your html will look like, automatically generated for you by Illustrator.



Simple-Animation-In-Illustrator-2

DEMO

Click here to view demo!

How To Change Remote Desktop Default Port Number

Monie — Fri, 23 Jul 2010 00:16:33 +0000

This article applies to you if you have total control over your firewall devices, administration privileges to your computer and of course, some background in computer networking.

Note The default Remote Desktop Connection Client for Windows XP Professional is 3389.

You can use the Remote Desktop feature in Microsoft Windows XP Professional to connect to your computer from another remote computer. To change the port that Remote Desktop listens on, follow these simple steps.

Changing The Default Windows XP Pro RDP Port Number

Important This section, method, or task contains steps that tell you how to modify the registry. However, serious problems might occur if you modify the registry incorrectly. Therefore, make sure that you follow these steps carefully. For added protection, back up the registry before you modify it. Then, you can restore the registry if a problem occurs.

Start Registry Editor. (regedit)
Locate and then click the following registry subkey:
HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control \TerminalServer\WinStations\RDP-Tcp\PortNumber
On the Edit menu, click Modify, and then click Decimal.
Type the new port number, and then click OK.
Quit Registry Editor.

You have successfully changed your default RDP port number at this point.

Note When you try to connect to this computer by using the Remote Desktop connection, you must type the new port.

Port Forwarding Your Firewall To RDP To Your Computer

Once you have successfully changed your Windows XP default port number, it is time to do another trick (configuration in your firewall) to port forward your newly created RDP port number to point to your computer. Here is the setting and it may vary from different types/model of firewall.

Alternative To Windows RDP

You can use some third party application to access into your computer in a similar way by using any of this following application:

Hope this helps you with your RDP activity.

Quick Tips: Connecting Multiple MySQL Databases On A Single Page

Monie — Fri, 18 Jun 2010 02:00:05 +0000

The Scenario

I have information spread out across a few databases and want to put all the information onto one webpage using PHP. I was wondering how I can connect to multiple databases on a single PHP webpage.

The Solution

You can make multiple calls to mysql_connect(), but if the parameters are the same you need to pass the value “true” as the forth parameter, otherwise the same connection is reused. Here is a demonstration on connecting multiple MySQL databases on a single Page.

Database One

    // Database ONE Connection

    // Constant variable declaration
    $host = 'localhost';
    $user = 'database_user';
    $pass = 'password';
    $name = 'database_name';

    // 1. Create database connection
    $db1_connection = mysql_connect($host, $user, $pass) or die(mysql_error());

    // 2. Select database to use
    $db1 = mysql_select_db($qn_name, $db1_connection) or die(mysql_error());

Database Two

    // Database TWO Connection

    // 1. Create the second database connection
    // Passing the "true" value in the forth parameter here
    $db2_connection = mysql_connect($host, $user, $pass, true) or die(mysql_error());

    // 2. Select database to use
    $db2 = mysql_select_db($name, $db2_connection) or die(mysql_error());

Problem solved! Happy coding…

Create Short URLs Using PHP Functions

Monie — Wed, 12 May 2010 02:12:17 +0000

You might have notice that whenever you retweet some post to your twitter account, or whenever you share some link to your twitter account, you will see that your link become something that you don’t quite understand, weird and definitely a lot shorter than it used to be. So, what is that all about?

MonieStudios.com

Introduction To URL Shortening Services

One of the most popular URL shortening services is Bit.ly, which you see a lot in your twitter post link sharing. Bit.ly requires you to sign up for an account and once you have an account, you may attain your login detail, your appkey (you can find your appkey by clicking your username link) and your URL information. That is where you will be doing your URL shortening activity manually.

Most CMS like WordPress have a plugins of built in support for this service where you don’t have to be logged in to Bit.ly in order for you to shorten your link. It will be done right at your page just before it passed on to your twitter account.

What if you want to do the same thing with your custom made website. After all, custom made website doesn’t have shortening URL plugins like WordPress do!

I’ll show you how to create Bit.ly URLs remotely with PHP function.

The Functions

/* make a URL small with bit.ly */
function make_bitly_url($url,$login,$appkey,$format = 'xml',$version = '2.0.1') {

    //create the URL
    $bitly = 'http://api.bit.ly/shorten?version='.$version.'&longUrl='.urlencode($url).'&login='.$login.'&apiKey='.$appkey.'&format='.$format;

    //get the url, could also use cURL here
    $response = file_get_contents($bitly);

    //parse depending on desired format
    if(strtolower($format) == 'json') {
        $json = @json_decode($response,true);
        return $json['results'][$url]['shortUrl'];
    }
     //xml
    else {
        $xml = simplexml_load_string($response);
        return 'http://bit.ly/'.$xml->results->nodeKeyVal->hash;
    }
}

The Usage

Just put this code where you want to share the page to your social boorkmark (facebook, twitter, etc..). Your new URL that has been shorten can be access with the variable: $short

Example of usage would be something like this:

    // Get the full address of your website page
    $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

    // Authentication details
    $login = "your.email.id@gmail.com";
    $appkey = "R_22c9bc44570b459ab9d095d7ef5e78fe";

    /* Calling up the function */
    $short = make_bitly_url($url,$login,$appkey,'json');

    /* Share on Twitter link */
    Twitter

Happy shortening!

Adding Multiple Widgets In Your WordPress Theme

Monie — Fri, 16 Apr 2010 07:45:13 +0000

I was playing around with my WordPress theme. At the moment, I have three portions in my main page, which have the same div class; i.e div class = “box”. All of them are referring to About Me, My Service and Blog Updates. Suddenly I realize that I wanted to have something more dynamic! A theme with maximum flexibility to be exact! Then I was thinking, I should have a sidebar widget instead of a raw html hardcoded footer. Let’s see how a widget can help to solve the problem.

The WordPress theme that I have right now supports only one sidebar widget. Let me show you how you can add in more sidebar widgets into your current theme.


    
          About Me
          About me description here...
    
    
        My Services
        
            Custom Web Design
            WordPress Theme
            Technical Support
        
    
    
        Blog Updates
        
            Writing Functions In PHP - Return Values
            Writing Functions In PHP - Flexibility
            Writing Functions In PHP - Introduction
            Install WordPress In Windows

Registering The Sidebars

I am assuming that you are familiar with the WordPress platform; otherwise you won’t end up reading this tutorial.

To begin this tutorial, firstly you need to tell WordPress how many widget(s) that you need. Navigate to your functions.php page, the one that is in your theme folder. Without much difficulty, you will see these few lines of code. If it’s difficult to find, search for the string called register_sidebars.

Once you have found them, all you need to do is change the number according to your requirement and then save the file. You can increase this number if you want to have more sidebars as long as your theme layout can accommodate it.

Now, go to your WordPress Admin section and browse to the widgets under the menu item called Appearance. You can see there are three sidebars listed there. You can drag your widget items into any of the sidebars to start using it.

Building The Sidebars

Here comes the part where we actually build the sidebars. If your theme has only one sidebar, locate the file called sidebar.php in your theme folder. If for some reason your theme has two sidebars, you should have the files called sidebar.php, sidebar1.php and sidebar2.php. So if you want to add another sidebar widget into your theme, you should duplicate either sidebar1.php or sidebar2.php and rename it as sidebar3.php.

In this tutorial, we will modify the theme by adding two more sidebars and let’s rename sidebar.php to sidebar1.php and duplicate this file and rename it as sidebar2.php. Add the code below into the widget template, sidebar2.php and save the file:

Remember that this code, dynamic_sidebar(2) is referring to your widget template which is sidebar2.php. So for your sidebar1.php, you would call this as dynamic_sidebar(1) instead.

Just to add more flexibility to your theme, the page won’t display an empty sidebar widget if you didn’t add any widgets into your theme. Add in this default value for your widget, replacing the code above.




Sidebar 2
This is your sidebar 2. You can drag your widget here from your WordPress admin section and browse to the widgets under the menu item called Appearance.

Calling The Sidebar

Now, we have the two sidebars ready but how do we call it? How do we place them in the area that we want in our page? You can call them from anywhere in your theme with this line of code;

or for the second sidebar,

Let’s go back to our index.php page with the current sidebar being hardcoded. Let’s update them and call this widget.

Preview your theme. You will see your new widgets appearing on your website just the way you want it. There may be some minor issues on the div alignment and positioning. I’m sure you can easily fix that with your CSS. If you have not placed any widgets yet, you will still see the default value that we’ve created earlier. You can add more sidebars in a similar way to your WordPress theme.

I hope this tutorial is helpful and enjoy blogging.

Upgrade Windows XP Home To Professional Without Reinstallation

Monie — Mon, 05 Apr 2010 01:33:21 +0000

This quick tips will show you how you can convert or upgrade your Windows XP Home edition into Windows XP Professional without re-installation.

Back in a few years ago, my boss gave me one simple assignment. He says:

I want you to join all this PC’s to this server and create an active directory account for each of the user. And don’t forget to set the wallpaper as well!

At first, I am thinking that this person is out of his mind! So I went to seek some advice with the old fashion way and there I am spending a few hours in front of my computer asking for some miracle answers. After a few click and scroll, this angel comes to my rescue.

Legal vs Illegal Action

After installing Windows XP Home Edition or Windows XP Professional Edition onto a computer, officially it’s impossible for user to convert, or upgrade from Windows XP Home to Pro edition, or downgrade from Windows XP Professional to Home edition without reformatting and reinstalling the operating system from clean and fresh state.

A lot of people always associate conversion of Windows XP edition to illegitimate or privacy reason, but sometimes, there may be legitimate and genuine reason for change, such as customer, who all the while using Windows XP Home Edition finally buy a genuine license product key for Professional edition to replace the illegal pirated version installed, or user receives additional license as gift, but don’t want to go through clean install Windows XP again, or want to keep using the computer with all data intact without interruption.

Here’s a trick to convert and turn Windows XP Home Edition to Windows XP Pro Edition, from within the operating system without going through installation again. Ok, let’s be frank. The hack doesn’t actually install and add in all the features from Windows XP Professional that Windows XP Home lacks of, such as Remote Desktop Server and Group Policy Editor utility tools, which has been removed on Windows XP Home edition.

Basically, the trick only work to let Windows XP recognizes itself as Professional edition.

The Procedure

Open Registry Editor (regedit).
Navigate to HKEY_LOCAL_MACHINE/SYSTEM/ControlSet00X/Control/ProductOptions, where ControlSet00X is the one with the highest number.
Delete the ProductSuite registry key.
Then, create a new DWORD value and named it as Brand.
Set the Brand value data as 0.
Reboot the system.
On boot up after the BIOS screen, press F8 to display Windows XP Startup Menu.
Choose Last Known Good Configuration (LNG) and hit Enter.

Windows XP will start up as usual. After logging into the desktop, check the system properties to verify that it’s now Windows XP Professional.

Writing Functions In PHP – Default Values

Monie — Tue, 02 Mar 2010 06:30:21 +0000

We saw earlier how the numbers of arguments that were passed into a function needed to match the number of arguments that the function was defined with. But with default arguments, that’s not entirely true because we can set some defaults so that if it doesn’t get a value, it has something that it can assume, and this not only will make our functions more flexible but also error resistant. Let’s go ahead and try one now…



Writing Functions In PHP - Default Values

Output: the color of the room is blue.

That is a simple straight forward example. What if we didn’t pass a value into the function?

Sure we will get an error message.

Output:
Warning: Missing argument 1 for paint()…
Notice: Undefined variable…
The color of the room is .

Functions With Default Values

In the example above, we can set a default value for $color, so that if it doesn’t get a $color, we have something to fall back on. We do that by simply putting in a normal equal assignment in the function right after the arguments.

So now, “red” will be our default value if we haven’t passed any value to the function. In other words, if no value were passed into the function, use “red”! The default value is overwritten when you specify a value, otherwise the value will stay the same. Even though we didn’t ask for another argument, it went ahead and assume “red”. If instead we tell it “blue”, it goes ahead and uses “blue”.

So you can see how this is going to make our function a little more error resistant because it will not give us that big nasty error if we didn’t pass something in.

Flexible Functions With Default Values

Let’s go ahead and make this function even more flexible. Lets say we just are not going to paint the “room”, but instead we are going to paint the $room as a variable.



Writing Functions In PHP - Default Values

Output: The color of the bedroom is blue.

So, this function takes two arguments into it and we must pass two values into it as well. Even though we didn’t pass anything into the function, it went ahead and made the assumption with the default value that we have declared earlier. All of this will work:

Output: The color of the office is red.

Output: The color of the bedroom is red.

What if we say “blue” and leave out the other one which is the $room?

Output: The color of the blue is red.

It went ahead and says “The color of the blue is red.”, and why is that? This is because it’s going to still assume that the arguments are coming in the correct order. So we have to make sure that we always pass something in the right order.

Required Value vs Not Required value

Consider this example:

Output: The color of the bedroom is blue.

We know this will work. $room is a required value and $color is not a required value, in this function. This means, a required value is a value that is having the highest priority for us, we want to make sure that we pass the correct value to this required value. Not like the $color value, which is not a required value, we can choose whether we want to specify the value or just let the function go ahead and assume for us.

If we did it the other way around and made our $color as the required value and pass in only one argument into the function:

Output:
Warning: Missing argument 2 for paint3()…
Notice: Undefined variable…
The color of the bedroom is.

This function will take “bedroom” as being the $room, and it’s going to ask for the required value which is the $color. We didn’t pass any value to the function for the variable $color. This will return an error message to us.

So you want to always make sure that your default values occur last in line. In other words, anything that is required needs to come first in the arguments list, anything that is optional needs to come later and the order of this doesn’t matter and you can’t skip spaces in between. So you need to pass in something along the way.

Conclusion

Another thing that I found helpful with default arguments is that you very quickly get a sense of what kind of information you’re expecting to be passed in to your function.

Clearly here, I am looking for a color, I know it is going to be “red” and I am looking for a room which I know is something like an “office”. This gives us some context for knowing what those variables actually mean in our function.

Now that we’ve looked into default argument values, I think we’ve explored enough of functions that we will be able to get a lot out of them once we start coding and developing.

Thank you and enjoy learning.

Writing Functions In PHP – Global Variable

Monie — Tue, 23 Feb 2010 09:04:19 +0000

Global Scope Variable vs Local Scope Variable

Take a look at the following code, and give it your best guess whether it’s going to come back with “outside” or “inside”?



Writing Functions In PHP - Global Variable


    ";

    ?>

Output: outside

Why does it output “outside” instead of “inside”?

This is because the variable $bar (local scope variable) inside of the function has no relationship to the variable $bar (global scope variable) that was on the outside of the function. The variable inside of the function doesn’t know what value $bar is and has nothing to return out of the function. So it took the original value of $bar which is global scope variable that is “outside”. Let us see another example.

Now, take a guess whether it’s going to come back with “outside” or “inside” with this one?



Writing Functions In PHP - Global Variable


    ";

    ?>

Output: inside

Yes, it’s going to display “inside” for this function. We’ve set the value for the variable $bar to “outside”, pass it as an argument into the function foo2(). The function received it and reset them with the value “inside”, a function’s local variable, and later on return back the value out of the function which will be assigned to the variable $bar.

There is another way that we can do this kind of variable declaration, that is by using Globals.
Global Variable Declaration

Referring back to our first example,

";

?>

The variable $bar which is on the outside of the function is considered as a global variable. It has a global scope. It can be accessed anywhere inside the same page that we are working with. What ever happens inside the function is considered a local variable. It’s local only to the function and it doesn’t exist in the global scope. Anyway, we can change that by simply saying “Global $bar” inside of the function.

";

?>

Output: inside

What we are doing here is that we’ve told it to pull in that global variable $bar, go outside of the function and grab the variable for $bar, the global scope and pull that in so we can use it inside the function.

When the function finished execution, any changes that we’ve made to the variable $bar inside the function are going to be to that variable, no matter whether if it is a global scope variable or a local scope variable. In other words, the changes that we’ve made to the variable $bar inside the function are going to reset any other variable $bar outside of the function.

Method Comparison

When using global variable, you want to be careful because once you’ve declared something global, you’re effecting what happens outside of the function. So my advice is, use it with caution. You might be better off, passing in a variable into the function like we did in the second example.

If you are sure that you want to use your variable globally, then it is fine to declare your variable as global, but if you want to keep track on the values as they move around your script then you will declare your variable as a local variable. It’s a stylish choice that you’ll have to make. Here is the functions comparison that produces the same end result.



Writing Functions In PHP - Global Variable



    ";

    ?>

    


    ";

    ?>

Now we are ready to look at how we can set some default values to the arguments that can pass into a function so that a function can have some reasonable default values in case the user doesn’t pass in information or an argument into the function.

We will do that in the next tutorial in this series which is the final topic that we will be discussing about php function.

Writing Functions In PHP – Return Values

Monie — Wed, 17 Feb 2010 07:44:14 +0000

Catch Up!

(You can see part 1 here and part 2 here)

Referring back to our previous overtime() function:



Writing Functions In PHP - Return Values

Output: 15.625

Function With Return Values

We know that we must get the value out of the function (instead of just displaying it) in order for us to keep using it and keep working with it even if the function has finished execution. In order to do that, we need to return the value of $hourly_pay from the function and that’s just done with simply the word return, that’s the function that we are calling. We are telling the function, return this value!

It also is going to exit out of the function at that point when we say return. It’s a lot like break was when we were working with the loop. Let’s update our overtime() function so that it can return a value out of the function. The only thing that you should do is to replace the word “echo” with “return” and some modification in how we call the function.



Writing Functions In PHP - Return Values

So we called the function overtime(), we are going to return the value $hourly_pay to $returned_value and then echo back the new value.

Now, its a good idea whenever we are working with functions, especially functions that don’t just do display like we did with say_hello(), that you always return a value out of them. Just get in a habit of making sure every function has a return. Maybe all it returns is true or false based on whether it works successfully, but we want to have something returned out of the end of that function just to let you know.

So for our say_hello() function, we should write something like this:

So, a quick tips for you. You could actually have several return values inside a function. You could have it like this:

You could even have a function that had dozens of return value in it and a final return value at the very end of the function so that if none of the others were true, non of the others happen, than it would return something like FALSE or a DEFAULT value.

Of course if I am returning a value, then I also have to receive (or catch) the value at the other end. Unlike say_hello() function where I called it on it’s own,

I set it to the variable $returned_value so I can echo it back.

The next return value tips that I want to tell you about is that return one and only one value. If you need to return more than one value, there is a way to do that.

Function With More Than One Return Values

For this, let me explain in a new example.



Writing Functions In PHP - Return Values

This function will take the two values I give it, it will do both addition and subtraction, and right now it’s going to return addition. Subtraction will just get lost like nothing ever happen. So we can’t return more than once so we have to choose. But what if we want both?

Array is going to be our friendly solution here. Let’s see how array can help us.



Writing Functions In PHP - Return Values


";
    echo "Subt: " . $result_array[1] . "
";
?>

Output: Add: 15
Output: Subt: 5

Let me guide you in the solution provided.

$result = array($add, $subt);

The reason we use array is because array simply takes variables and put then into a single structure and assigns it to a single value like the above example. So when we want to echo both of the returned value, we call them like so:

    $result_array = add_subt(10,5);
    echo "Add: " . $result_array[0] . "
";
    echo "Subt: " . $result_array[1] . "
";

The number in the bracket [0] and [1] indicates the $add and the $subt variable from the function attributes that we called earlier: array($add, $subt); So [0] for additional and [1] for subtraction.

So that’s the way that we can pass multiple results out of the function. So if we need to pass something more that just one value, we can do it with an array.

Now that we’ve talked about return values. We seen how a functions can do it’s processing and return a result back to what ever call the function. Next, we will look into Global Variable, a variable that is accessible from any method, procedure, or function and whose value can therefore be changed anywhere in the application.

We will look into that in the next series in Writing Functions In PHP – Global Variable.

Quick Tip: How To Use Your Favorite Font In Your Website?

Monie — Thu, 11 Feb 2010 04:44:18 +0000

Let me introduce you to the best way to do your @font-face definitions, and you can start using your most favorite font type in your website!

I know the first thing that comes to your mind is:

“Will my browser support it?”
“Will anyone see my font type even if they don’t have the font installed on their computer?”
“What about licensing?
“Do I need extra script to make this work?”

I do believe that you should forget about all the “question” first and start to learn how this things is done and later on then you decide. This wont take much of your time so let us proceed.

Before we begin, just to let you know that an IE browser doesn’t support of use any .ttf or .otf font type. What IE needs is .eot. Other browsers must take a .ttf or .otf.

The best possible solution for both IE and Firefox user

@font-face {
font-family: 'AniversRegular';
src: url('font/Anivers_Regular.eot');
src: local('Anivers Regular'), local('Anivers-Regular'),
    url('font/Anivers_Regular.otf') format('opentype');
}

Notice the difference in font format. We have .eot and .otf. Why do we have all this different format in this declaration?

Internet Explorer has its own method and they prefer to use the .eot method. They will not even response to the opentype or the truetype method, if you are using .ttf font format here. So, we have to make sure that we load the .eot font format first in order to make sure IE will not load all the other font format that will lead to bandwidth wastage.

How do we make sure IE wont load the .otf or the .ttf font format?

Here, non-IE browsers skip any .eot file and move on. IE will try to parse the second src value, but it can’t understand the local() location nor the multiple locations, so it resorts to the EOT instead.

Quote from Paul Irish

IE browser does not understand all the commas and the local() declaration, so it will skip that line completely and it will only render the .eot file format (code line #3).

Why do we have extra font name declaration?

src: local('Anivers Regular'), local('Anivers-Regular'),
    url('font/Anivers_Regular.otf') format('opentype');

The first local declaration “local(‘Anivers Regular’)” will find the existing font type in the user local computer and load that. If it can’t find that, then it will execute the second selection which is the “local(‘Anivers-Regular’)“, just in case they have a different name in the user’s PC. The last resort, it will load the font that we have included in our website.

How to use it?

h1 { font: 32px 'Anivers','AniversRegular',Georgia, sans-serif; }

The first declaration, “Anivers” is going to find if the font exist in the user’s computer. The second one “AniversRegular” will load our favorite font that we’ve declared earlier, and when everything else went wrong, the backup font type will be loaded which is “Georgia” or “sans-serif”.