Monie Studios

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.

Learn How Google Works: in Gory Detail

Monie — Sun, 04 Jul 2010 14:30:49 +0000

Download High resolution Here!

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!

Winners of “Panda Internet Security License” Giveaway

Monie — Tue, 27 Apr 2010 06:15:31 +0000

Without further do, here are the 2 lucky winners, in no particular order.

The Lucky Winner!

Felix Robert
Sreeparna

Congratulation guys. You’ll be receiving an e-mail notification together with the download instruction and activation code soon.

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.

25 Best Practices In Banner Advertising

Monie — Fri, 09 Apr 2010 08:55:33 +0000

We are happy to offer you “25 best practices in banner advertising”, a short ebook that will help you to dramatically improve the way you advertise online, and eventually create successful banner ads.

Where To Download

Why you should read this book?

The ebook contains dozens of practical pieces of advice that you can apply right away
It comprises all the basics of banner advertising
It’s short and easy to read
The book is based on the experience that we, the people here at BannerSnack, have accumulated interacting with the banner advertising business
It’s free

Feel free to post this ebook on your blog or share it with whoever might benefit from reading it.
Thank you from Monieweb!

25 Facts About Web Designer

Monie — Thu, 08 Apr 2010 05:36:45 +0000

This list was to better define the thin line between a web designer wannabe (newbie) and a mature (professional) web designer. So, are you really a web designer?

You are not a Web Designer IF:

1. You don’t know what a PIXEL is!
2. You don’t know what a MOCKUP is!
3. You don’t know what RGB or CMYK is and stands for!
4. You don’t know what SCREEN REAL ESTATE is!
5. You only DESIGN and never CODE!
6. You don’t know the difference between VECTOR and RASTER!
7. You have no idea what CRUD is!
8. You can’t name an alternative to PHOTOSHOP!
9.You know only a way of selection in PHOTOSHOP!
10.You don’t know what DPI stands for!
11. You don’t know what IMAGE FORMATS are!
12. You only know MSSQL database!
13. You have no knowledge of DESIGN HISTORY!
14. You don’t know what a DTD is!
15. You use only HTML TRANSITIONAL DTD!
16. You don’t know the difference between HTML & XHTML!
17. You don’t know what CSS is!
18. You don’t use FIREFOX as your default browser!
19. You don’t have WEB DEVELOPER TOOLBAR!
20. You’ve never heard about W3C!
21. You know to code only in DREAMWEAVER!
22. You test your web pages only in INTERNET EXPLORER!
23. You don’t read WEB DESIGN BLOGS!
24. You have a MAC! (You are not necessarily a designer if you own a Mac)
25. You don’t have a WEBSITE!!!

The World Most Unsuccessful Web Designers

Monie — Wed, 07 Apr 2010 06:05:49 +0000

Today, we will be discussing some of the most common traits of web designers who fail at design and freelancing in general. Mixed in with these ten items are topics that range from time management to the ugly table codes we’ve all grown to hate. If you know of something that an unsuccessful web designer does but isn’t in this list, make sure to make it known to everyone in the comments section of this post.

So how do you know if someone is categorized as “The World Most Unsuccessful Web Designers”?

10 Trends of the World’s Most Unsuccessful Web Designers

Not Using Any Form of CSS
Making Everything on the Page a Graphic
Using Bright, Blinking Text Everywhere
Stretching Their Time Too Thin and Causing Problems with Clients
Not Utilizing Any Web Trends After 1990
Never Test their Designs in Different Browsers
Making Things Pretty and Totally Avoiding Usability
Using Color Combination’s That Make You Want to Puke
Tables – All Tables!
Relying on One Source for Job Leads is a Death Trap

Original source by Mike Smith at onextrapixe