Monday, August 31, 2009

hongkiat.com

hongkiat.com


10 Killer Flash Tips For Beginners

Posted: 31 Aug 2009 07:15 AM PDT

flash tips for beginners

This article will come in handy for those of you who are interested in Flash, or perhaps have a basic idea and would like to learn more about Adobe Flash.

Before we get started:
The list below provides you valuable and useful short tips including sample FLA source files to help you understand better and apply faster in your Flash projects. You need to have Adobe Flash CS3 or CS4 Professional software installed in your computer to open the source files.

1. Understanding Object Names

Usually some Flash beginners think that object names in the library are same as instance names. In fact, they ARE NOT. Please make sure that you do not get confused with instance names, class names, and object names in the library. They have totally different meanings in Flash. Below example shows that gray_box_01 is the instance name, graybox is the class name without spacing (which is used to create instances by ActionScripts), gray box is the movieclip (or object) name with spacing in the library.

Moreover, gray_box_01 is just an instance of gray box movieclip in the library, there can be gray_box_02, gray_box_03, gray_box_04, etc and they are just instances of the same gray box movieclip.

Instance Name

2. How to make URL buttons in ActionScript 3.0

  1. Create a button in the library.
  2. Drag it onto stage 2 times and position them.
  3. Give the instance names button_01 and button_02.
  4. Add Event Listeners as show in below screenshot and code below:
         button_01.addEventListener( MouseEvent.CLICK, goto_hongkiat );         button_02.addEventListener( MouseEvent.CLICK, goto_koflash );         function goto_hongkiat(e:MouseEvent):void         {         navigateToURL( new URLRequest( "http://www.hongkiat.com" ), "_blank" );         }         function goto_koflash(e:MouseEvent):void         {         navigateToURL( new URLRequest( "http://www.koflash.com" ), "_blank" );         }         

URL Buttons AS3

Download Source

3. How to duplicate MovieClips in ActionScript 3.0

  1. Create a movieclip "box" in the library.
  2. Right-click on it and click on Linkage…
  3. Set the class as box as show in below screenshot.
  4. var b:MovieClip = new box(); duplicates a movieclip.
  5. Line no. 4 and 5 set the X and Y positions of a dupliated movieclip.
  6. addChild() function adds that dupliated movieclip onto stage.

Duplicate MovieClips AS3

Download Source

4. How to add Right-Click menu in Flash ActionScript 3.0

  1. Create custom menu items.
  2. Add Event Listeners to those items.
  3. Hide built-in items.
  4. Apply the custom menu items.

Right-Click Menu AS3

Download Source

5. Using Tweener class or tween engine for motion tweening

There are a number of open source tween engines on the web. Tweener is one of the most popular tween engines for motion tweening.

  1. Download Tweener Class (AS3).
  2. Import Tweener class by unzipping it and put caurina folder into the folder that your flash file exists.
  3. Create a movieclip "gray box" in the library.
  4. Drag it 2 times and give them instance names gray_box_01 and gray_box_02.
  5. Apply Tweener to them.
  6. Download Tweener Documentations to understand and apply it better.

Using Tweener Engine

6. General Structural Guidelines for Flash

It is really important to keep your flash timeline structure and library clean and reusable. This way you can save a lot of time for future projects.

  1. Create and apply layer folders when you have more than 10 layers on timeline.
  2. Avoid using default layer names (examples: Layer 1, Layer 2, etc.) and give them meaningful names.
  3. Put all actionscripts in one layer (named "actions") and put it on top of all layers.
  4. Give the meaningful names for every object in the library and use folders to group related objects.
  5. Remove unused objects from the library by clicking the small drop down arrow, then "Select Unused Items" and press delete button.
  6. Download FLA file from Flashmo.

7. How to create a simple preloader

  1. Add new scene preloader using the scene panel click on plus icon . (Window > Other panels > Scene or press Shift + F2)
  2. Move the preloader scene above content scene as show in below screenshot.
  3. Create a movieclip "preloader bar" drawing a rectangle using width 200px, height 4px, and color: #CCCCCC.
  4. Create another movieclip "preloader bar bg" drawing a rectangle using width 400px, height 4px, and color: #666666.
  5. Put them on stage giving instance names bar and bar_bg and align them centered as show in the screenshot.
  6. Put a dynamic textfield loader_info and put it below the bar and centered.
  7. Add an event listener with a function to calculate the percentage loaded as show in the screenshot.

Simple Preloader AS3

Download Source

8. How to use Bandwidth Profiler and Simulate Download in Flash

You can simulate download in Flash. This is really a very useful tool in Flash, especially to check how flash movies are loaded for slow network speed users.

  1. Run your flash file, go to main menu Control > Test Movie (or press Ctrl + Enter).
  2. Click on View > Bandwidth Profiler (or press Ctrl + B) in Test Movie window.
  3. Click on View> Simulate Download (or press Ctrl + Enter) in Test Movie window.
  4. You can adjust the download speed by View > Download Settings > (different speed options).

Flash Bandwidth Profiler

Download Source

9. How to play timeline frames in reverse

  1. Declare a boolean variable reverse which can be only 2 values, either true or false.
  2. Add event listeners for mouse over, mouse out and enter frame events to the button instance box_01.
  3. When mouse pointer is on the button, reverse value is set to true.
  4. When mouse pointer is NOT on the button, reverse value is set to false.
  5. Event.ENTER_FRAME executes run function continuously. It executes the run function 30 times per second if the frame rate is 30 fps.
  6. run function continuously checks if the reverse value is true or false.
  7. It goes to previous frame when reverse is true and it goes to next frame when reverse is false.
  8. You may see how the timeline pointer goes in bandwidth profiler while testing this movie.

Play Reverse Frames

Download Source

10. How to use a Timer class in Flash

  1. Create a new timer variable timer_01 as in this example.
  2. Add an event listener function play_timer.
  3. Copy box movieclip from the FLA file of TIP number 3 into the library.
  4. Add play_timer function.

Additional: You may download and see how Timer is used with play/pause buttons in Flash XML photo rotator

AS3 Timer Class

Download Source

To make things easier for you, we’ve got all tutorials’ source files compressed in one single download file so you don’t have to download them one by one. Download All Source Files

Article by: Min Thu – Founder of flashmo.com and koflash.com. Follow Min Thu in Twitter.



Thursday, August 27, 2009

hongkiat.com

hongkiat.com


Ultimate Guide To Web Optimization (Tips & Best Practices)

Posted: 27 Aug 2009 07:19 AM PDT

Web optimization is a vital part of web development and maintenance but also something often overlooked by webmasters. Just think of the money you can save, and how it can potentially help increase your readership and traffic when they are properly done.

web optimization guide

If you have not done any optimization to your website (or blog) so far or merely curious how it can help speed up your site, please take a look at this list of optimization tips we’ve put together.

We’ve split things up into 3 separate sections for better readability – respectively server-side optimization, assets optimization (which includes web components like CSS, Javascript, images, etc) and platform, where we’ll focus on Wordpress optimization. At the last section, we throw in a couple of links we figured useful. Full list after jump.

Optimization: Server-side

  1. Choose a decent Web Host

    Your web hosting account has no direct relationship with the optimizations you are about to perform but we figured choosing the right web hosting account so important we decided to bring it to your attention first. Hosting account is the foundation of your website/blog where it’s security, accessibility (cPanel, FTP, SSH), server stability, prices and customer supports all play important roles. You need to make sure you are in good hands.

    Recommended reading:
    How to Choose a Web Host
    by wikiHow is a great article that gives you steps and tips you should know before purchasing any web hosting account.

  2. Host Assets Separately

    When we mention assets, we meant web components like images and static scripts that don’t require server-side processing. These includes any web graphics, images, Javascripts, Cascading Style Sheets (CSS), etc. Hosting assets separately is not a must, but we’ve seen tremendous result in terms of server stability with this implementation when the blog was having a traffic spike.

    Recommended reading:
    Maximizing Parallel Downloads in the Carpool Lane.

  3. Compression with GZip

    In short, contents travel from server side to client side (vicet versa) whenever a HTTP request is make. Compressing the content for sending greatly reduce the time needed to process each request.

    GZip is one of the best ways to do this and it various according to the type of servers you are using. For instance, Apache 1.3 uses mod_zip, Apache 2.x uses mod_deflate and here’s how you do it in Nginx. Here are some really good articles to get you familiar with server side compressions:

  4. Minimize Redirects

    Webmasters do URL redirect (whether it’s Javascript or META redirects) all the time. Sometimes it’s purpose is to point users from an old page to new, or merely guide users to the correct page. Each redirect create an additional HTTP request and RTT (round-trip-time). The more redirection you have, the slower user will get to the destination page.

    Recommended reading:
    Avoid Redirects
    by Google Code gives you a good overview on the matter. The article also recommends some practical ways to minimize redirection to increase serving speed.

  5. Reduce DNS Lookups

    According to Yahoo! Developer Network Blog, it takes about 20-120 milliseconds for DNS (Domain Name System) to resolve IP address for a given hostname or domain name and the browser cannot do anything until the process is properly completed.

    Author Steve Souders suggested that splitting these components across at least two but no more than four hostnames reduces DNS lookups and allow high degree parallel downloads. Read more on the article.

Optimization: The Assets (CSS, Javascripts, Images)

  1. Merge Multiple Javascripts into One

    Folks at rakaz.nl shares how you can combine multiple Javascripts like:

             http://www.creatype.nl/javascript/prototype.js         http://www.creatype.nl/javascript/builder.js         http://www.creatype.nl/javascript/effects.js         http://www.creatype.nl/javascript/dragdrop.js         http://www.creatype.nl/javascript/slider.js     

    Into a single file by changing the URL to:

         http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js     

    by manipulating the .htaccess and using PHP. Click here to read more.

  2. Compress Javascript & CSS

    Minify is a PHP5 app that can combine multiple CSS and Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching.

    minify

    Compress them online!
    compress css
    There are also some web services that allow you to manually compress your Javascripts and CSS files online. Here are few we come to know:

  3. Customize Header Expiry/Caching

    header expiry
    Credit: httpwatch

    By using a customized Expiry header, your web components like images, static files, CSS, Javascript skipped unnecessary HTTP request when the same user reload the page for the second time. It reduces the bandwidth needed and definetely help in serving the page faster.

    Recommended readings:

  4. Off-load The Assets

    By off-loading, we mean separating the Javascripts, images, CSS and static files from main server where the website is hosted and place them on another server or rely on other web services. We’ve seen significant improvement here in Hongkiat by off-loading assets to other web services available, leaving the server to mainly do the PHP processing. Here are some suggestions of online services for off-loading:

    *Paid hostings – Paid services always have better reliability and stability. If your website is constantly requesting for the assets, you’ll need to make sure they are in good hands. We recommend Amazon S3 and Cloud Front.

  5. Handling Web Images

    Images are important part of your website. However if they are not properly optimize, they can become a burden and end up utilizing unpredictably large amount of bandwidths on daily basis. Here are some best practices to optimize your images:

    • Optimize PNG Images
      Folks at Smashing Magazine describes some clever techniques that may help you optimize your PNG-images.
    • Optimizing for Web – Things you need to know (the formats)
      Learn more about Jpeg, GIF, PNG and how you should save your images for web.
    • Don’t Scale Images
      Always practice inserting the width and height for each images. Also don’t scale down an image just because you need a smaller version on the web. For example: Do not force scale a 200×200 px image to 50×50 px for your website by altering the width and height. Get a 50×50 px instead.

    Optimizing with Web Services and Tools. Good news is, you don’t need to be a Photoshop expert to optimize your images. There are plenty of web services and tools to help you do the job.

    • Smush.it
      smushit
      Probably one of the most efficient online tool to optimize images. There’s even a Wordpress plugin for it!
    • JPEG & PNG Stripper
      A Windows tool for stripping/cleaning/removing unnecessary metadata (junk) from JPG/JPEG/JFIF & PNG files.
    • Online Image Optimizer
      Lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site, by Dynamic Drive
    • SuperGIF
      Effortlessly make all your GIF images and animations smaller.
    • Here’s more.
  6. Handling CSS

    Modern websites uses CSS as the foundation of the style, as well as the look and feel. Not only CSS gives great flexibility to changes, it is also lesser in terms of codes needed. However, if they are badly coded, it could be a backfire. Here are some checklists, or rather guides to you make sure your CSS are properly optimized:

    • Keeping Your Elements’ Kids in Line with Offspring
      How to keep your markup clean with CSS Selectors.
    • Keep CSS short
      When they give the same style, the codes are better the shorter they are. Here’s a CSS Shorthand guide you’ll probably need.
    • Use CSS Sprite
      css sprite
      CSS Sprite technique reduce HTTP request each time a page is load by combining several (or all) images together on a single image file and control it’s output with CSS background-position attribute. Here are some useful guides and techniques to create CSS Sprites:
    • Using every declaration just once
      When looking to optimize your CSS files, one of the most powerful measures you can employ is to use every declaration just once.
    • Reduce amount of CSS files
      The reason is simple, the more CSS files you have the more HTTP request it’ll have to make when a webpage is being requested. For example, instead of having multiple CSS files like the following:
                 <link rel="stylesheet" type="text/css" href="main.css" />             <link rel="stylesheet" type="text/css" href="body.css" />              <link rel="stylesheet" type="text/css" href="footer.css" /> 

      You can combine them into the one single CSS:

                 <link rel="stylesheet" type="text/css" href="layout.css" />        

    Recommended readings:

Optimization for Wordpress

From time to time, we monitor, benchmark and analyze the performance of our Wordpress blog. If the site is running slow, we need to know why. Here are some basic changes we’ve done and we figured will significantly increase the speed of your Wordpress blog.

  1. Cache Your Worpress Blog

    WP-Cache is an extremely efficient WordPress page caching system to make you site much faster and responsive. We also recommend WP Super Cache which enhances from the previous mentioned plugin and too does a great job.

  2. Deactivate and Delete Unused Plugins

    When you notice your blog is loading real slow, see if you have a lot of plugins installed. They might be the culprit.

  3. Remove unnecessary PHP Tags

    If you take a look into your theme’s source codes, you will find a lot tags like these:

             <?php bloginfo('stylesheet_directory'); ?>         
             <?php bloginfo('description'); ?>         

    They can be pretty much replaced with text content that don’t cause load to the server. Check out Michael Martin’s 13 Tags to delete from your Wordpress Blog

Recommended Readings:

Last but not least…

Here are some useful web services and tools that gives you a broader perspective and better analyzation to help you in web optimization.

  • Yahoo! YSlow

    YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. It gives you a good idea what needs to be done in order for the website to load faster.

    (Firebug required)

    yahoo yslow

  • PageSpeed

    Similar to Yahoo! YSlow, Google Page Speed is an open-source Firebug add-on to evaluate the website performances and how to improve them. (Firebug required)

    pagespeed

  • Pingdom Tools

    Pingdom Tools take a complete load of your website including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes) and shows you general statistics about the loaded page such as the total number of objects, total load time, and size including all objects.

    pingdom

Recommended readings:
Here are more tips and tools worth checking out.



Tuesday, August 25, 2009

hongkiat.com

hongkiat.com


40 Free Unique Cartoon and Comic Fonts

Posted: 25 Aug 2009 07:45 AM PDT

Have you ever feel that traditional fonts are a little too boring and plain for your designs and artworks? Ever wanted to use fonts that are funkier, stylish and fun to look at?

cartoon and comic fonts

Cartoon and comic fonts are very popular and most people are only familiar with Comic Sans MS and that’s about it. We have now discovered 40 unique and refreshing cartoon and comic fonts for you to give your artwork and design that extra ummmppphhh. Here are a few for sneak preview and the full list is right after the jump.

Here are more font related entries we’ve previously published:

Que FONTita!

que fontita

Burrito

burrito

Oogie Boogie

oogie boogie

Pokemon

pokemon

Clink Clank

clink clank

Denne's Aliens

denne aliens

Fighting Spirit

fighting spirit

Armor Piercing

armor

Eyesis

eyesis

akaHoggle

aka hoggle

Altamonte

altamonte

BabOonjaZzbaSsoOn

baboonja

Cactus Sandwich

cactus

Cosmic Dude

cosmic dude

Candy Time

candy time

Chubby Cheeks

chubby cheeks

Gwibble

gwibble

LoOse Gangster

loose

Chlorinar

chlorinar

Army Beans

army beans

Ice Age

ice age

Broken Toys

broken toys

Fontdinerdotcom Sparkly

fontdiner

Space Pontiff

space pontiff

Umberto

umberto

Chizzler

chizzler

Mickey

mickey

Smartie

smartie

Taxidermist

taxidermist

MTF Scribblie

mtf

Letras Locas

letras

Brown Bear Funk

brown bear funk

Baby Kruffy

Baby Kruffy

Bumbazoid

Bumbazoid

Chachie

chachie

Glimstick

Glimstick

Joint By Pizzadude

Joint By Pizzadude

Mandingo

mandingo

Seven Swordsmen

Seven Swordsmen

Smilage

smilage