Web Design Blog

Adobe has just announced new verson of its popular software products, Creative Suite 4 product family including Flash CS4, Dreamweaver CS4, Photoshop CS4, Fireworks CS4, Illustrator CS4, Acrobat 9 Pro, Premiere Pro CS4, After Effects CS4 and more.

Adobe Creative Suite Master Collection CS4 combines virtually all of Adobe’s new design and development applications, technologies and services in a single box.

“Adobe Creative Suite 4 delivers powerful cross-media technologies that have the ability to elevate products, brands and ideas above the clutter.”

Find out new features on CS4 softwares

Read Adobe’s press release

Watch a serie of videos about Adobe CS4 Launch Event

FlashEff Pattern Contest

admin — Tue, 23 Sep 2008 02:16:18 +0000

Jumpeye components is holding a Flash effect pattern contest with total 3 prices worth $7,500. Each winner will get $2,000 cache and $500 discount coupons to be spent on JumpeyeComponents.com products.

The contest is open to any Flash developer. You need to have advanced skills for ActionScript 3.0 and strong OOP background to participate in the contest. Submissions are open till October 31st 2008. Be sure to check out FlashEff.com SDK or Developer API page for the contest details and requirements.

What is FlashEff?

FlashEff is a Flash CS3 AS3.0 component that can build effects on any object (image, movieclip, and text) and to configure interactive animations visually without knowing ActionScript.

Jumpeye components is a company which sells high quality Flash components or extensions.

Google Chrome Beta

admin — Wed, 03 Sep 2008 04:27:11 +0000

Did you know about Google Chrome (beta) which is new web browser just released? IF you are not, you shall try and see it in action. Some of the greatest features included are

Dynamic Tabs - Drag and Drop tabs to arrange or group in any combination of multiple tabs or windows easily.
Crash Control - Tabs are running independently. If one app is crashed, there is a task manager to close it without affecting other tabs.
Incognito mode for private browsing.
Application Shortcuts to put on desktop, start menu or quick launch bar.
Import settings - It is pretty easy to import bookmarks and passwords from existing browser.
New Tab page which shows recently visited websites, search engines and recent bookmarks.
Memory Usage - You can check memory usage for every tab page.

Download

Information for web developers

Why Google invented Chrome browser?

Oh… it crashes when you enter :% in Google Chrome address bar.

You may share your browsing experiences on Google Chrome by posting a comment below.

AS3 Bitmap Smoothing in Flash

admin — Thu, 28 Aug 2008 07:22:18 +0000

This is just a small experiment on Flash bitmap smoothing in ActionScript 3. A small piece of codes can be sometimes too hard if one does not know how to write it properly. You may try the below sample and adapt it for your own Flash projects.

View Sample SWF File or Download Flash Source File (Adobe Flash CS3 is required to open it)

PLAIN TEXT

Actionscript:

var flashmo_bm:Bitmap = new Bitmap();
var flashmo_mc:MovieClip = new MovieClip();
var pic_request:URLRequest = new URLRequest(“flashmo_400×300_02.jpg”);
var pic_loader:Loader = new Loader();pic_loader.load(pic_request);
pic_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_loaded);
pic_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, on_progress);
flashmo_info.text = “”;function on_loaded(e:Event):void
{
flashmo_bm = Bitmap(pic_loader.content);
flashmo_bm.x = - flashmo_bm.width * 0.5;
flashmo_bm.y = - flashmo_bm.height * 0.5;
flashmo_bm.smoothing = true;
flashmo_mc.addChild(flashmo_bm);
flashmo_mc.x = stage.stageWidth * 0.5;
flashmo_mc.y = stage.stageHeight * 0.5;
flashmo_mc.buttonMode = true;
stage.addChild(flashmo_mc);
flashmo_info.text = “Bitmap smoothing is “ + flashmo_bm.smoothing;
flashmo_mc.addEventListener( MouseEvent.MOUSE_DOWN, activate );
flashmo_mc.addEventListener( MouseEvent.CLICK, deactivate );
toggle_button.addEventListener( MouseEvent.CLICK, toggle_smoothing );
}
function on_progress(e:ProgressEvent):void
{
var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
flashmo_info.text = “Loading… “ + percent + “%”;
}
function activate(e:MouseEvent):void
{
this.addEventListener( Event.ENTER_FRAME, moving );
}
function deactivate(e:MouseEvent):void
{
this.removeEventListener( Event.ENTER_FRAME, moving );
}
function moving(e:Event):void
{
flashmo_mc.rotation = mouseX + stage.stageWidth;
flashmo_mc.x = mouseX;
flashmo_mc.y = mouseY;
flashmo_mc.scaleX = flashmo_mc.scaleY = 0.003 * mouseY + 0.2;
}
function toggle_smoothing(e:MouseEvent):void
{
if( flashmo_bm.smoothing == true )
flashmo_bm.smoothing = false;
else
flashmo_bm.smoothing = true;
flashmo_info.text = “Bitmap smoothing is “ + flashmo_bm.smoothing;
}

Web Design Tutorials

admin — Tue, 26 Aug 2008 13:38:05 +0000

You need to know some of the basic things about web design no matter you are making HTML, CSS or Flash websites for personal or commercial purpose. You need to focus on basic HTML first before you step into JavaScript or CSS or whatever. If you wish to make your website to be very successful, you will also need to learn more topics regarding usability, compatibility with major web browsers, SEOs or Search Engine Optimization Techniques, etc. There are a lot of good tutorials and resources on the net and some of the best sites are listed below for your learning purpose. You may also share other useful links in your comment. Enjoy learning about web design!

W3Schools

Web Design

Entheos Web Design Tutorials

Markup Tutorials

Smart Webby

Mike Markel’s Tutorials

Websie Tips

The Site Wizard Tutorials

How to design a website

Simple Preloader in ActionScript 3

admin — Wed, 20 Aug 2008 04:41:44 +0000

It is just a few number of lines for making a simple preloader. You may download this file as an example. Below codes are located in actions layer of preloader scene.

PLAIN TEXT

Actionscript:

stop();
var loaded:Number;
var percent:Number;
fm_bar.addEventListener( Event.ENTER_FRAME, load_progress );
function load_progress(e:Event):void
{
loaded = stage.loaderInfo.bytesLoaded / stage.loaderInfo.bytesTotal;
percent = Math.round(loaded * 100);
fm_bar.scaleX = loaded;
loader_info.text = “Loading… “ + percent + “%”;
if( percent == 100 )
{
fm_bar.removeEventListener( Event.ENTER_FRAME, load_progress );
play();
}
}

Right Click Menu in ActionScript 3

admin — Wed, 20 Aug 2008 04:34:16 +0000

It is pretty easy to make a custom right click menu or context menu in Flash ActionScript 3. You may try and adapt below source codes for your projects.

PLAIN TEXT

Actionscript:

import flash.net.URLRequest;
import flash.ui.ContextMenu;
var fm_menu:ContextMenu = new ContextMenu();
var copyright:ContextMenuItem = new ContextMenuItem( “Copyright © flashmo.com” );
var credit:ContextMenuItem = new ContextMenuItem( “Free Flash Templates” );
copyright.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visit_flashmo );
credit.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visit_flashmo );
credit.separatorBefore = false;
fm_menu.hideBuiltInItems();
fm_menu.customItems.push(copyright, credit);
this.contextMenu = fm_menu;
function visit_flashmo(e:Event)
{
var flashmo_link:URLRequest = new URLRequest( “http://www.flashmo.com” );
navigateToURL( flashmo_link, “_parent” );
}

Download Source File

Flash Contact Form in ActionScript 3

admin — Thu, 14 Aug 2008 02:05:48 +0000

This flash contact form is simply made in Adobe Flash CS3 ActionScript 3. Email validation is better than previous version in ActionScript 2. It sends the form field variables to PHP and loads the response variables back to Flash using URLVariables, URLLoader, and URLRequest classes. It will be very useful for you to use or adapt it for your Flash projects.

Download source file

ActionScript 3 Tutorials

admin — Mon, 11 Aug 2008 03:17:11 +0000

Here is a list of flash tutorial websites for learning ActionScript 3 that every flash developer should know.

Flash and Math - related to Math and Science
Metah.ch - video tutorials
GotoAndLearn - video tutorials
Oman3D - both textual and video tutorials
Lemlinh.com - various collections of flash tutorials
Learning ActionScript 3.0
GotoAndPlay
FlashMyMind
School of Flash
The Tech Labs
Flash Magazine
ActionScript.org
I heart actionscript
Kirupa
Senocular - getting started with AS3
gskinner - AS3 workshop
Adobe AS Tech Center

Good Luck everyone!

3D Flash Websites part 2

admin — Thu, 07 Aug 2008 07:34:11 +0000

Although 3D development in flash is still at the early stage, it is really amazing to see interactive flash websites in 3D environment. This post features some of the creative 3D flash websites for your inspirations and ideas. Enjoy!

Create a Photo Gallery using Flash Slideshow Maker

admin — Tue, 05 Aug 2008 01:41:52 +0000

Did you know that you can build a flash photo gallery without any knowledge about Flash or ActionScripts or XML? There is a software which can easily create a photo gallery or slideshow for you within a few minutes.

First, select some photos to put in your photo gallery. Second, select any theme from presets and add a background music if you wish to. Moreover, you can customize the properties in advanced mode. Third, publish it into a folder which stores an HTML file, an XML file, a SWF file, all thumbnails and photos. You just need to upload it to your web server. You can also publish a standalone SWF file to share with your friends via email.

You may take a look at some sample screenshots below. Click on each thumbnail for full size preview. Download free trial version if you wish to try it in action. Then, you may consider buying it for $49.95 if you like it.

Flash Best Practices part 2

admin — Thu, 31 Jul 2008 04:08:28 +0000

If you are a flash beginner, you should have read A Flash Journalism Presentation by Mindy McAdams which covers very good points about the Timeline and motion tweening. It is very easy for you to learn as the presentation is clearly demonstrated by screen captures.

If you wish to learn further about flash best practices to become a flash professional, there is also another great article written by Jen deHaan from Adobe which covers quite a lot of things in term of organizing ActionScripts, behaviors conventions, screens conventions, video conventions, accessibility, version control guidelines, and optimizations for performance. The article is suitable for beginner or intermediate level.

Related Post: Flash Best Practices part 1

10 Beautiful Landscape Wallpapers

admin — Wed, 23 Jul 2008 04:27:36 +0000

This post features a collection of 10 beautiful landscape wallpapers for your desktop.

Slogan Contest from Templates.com

admin — Tue, 15 Jul 2008 14:42:52 +0000

This is about a slogan contest from Templates.com. You just have to come up with a Kicking Slogan for Templates.com, leave a message in comments on Templates.com blog post, and you’ll stand to win $100 in cash or credits from Templates.com!

The contest starts on July 15th 2008, and the results will be announced at the beginning of August. Each participant of this contest who has an account on Templates.com will get 4 credits, so everyone will win! Don’t worry, you can register an account for free if you do not have one.

What is Templates.com website about?

They create 3D Clip Art, 3D Models, Illustrations, Icons, Website Templates, Flash Templates, and they love what they do. So, they have thought it would be great to involve their customers, friends and guests who no doubt are creative people into the process of slogan creation.

Prizes

1st place: $100 in cash
2nd place: 100 credits from Templates.com which can be used to purchase our products
3rd place: 50 credits from Templates.com which can be used to purchase our products

You just have to visit Templates.com website, and get some ideas for slogan text.

Good luck everyone!

Editing buttons in flash templates

admin — Mon, 14 Jul 2008 03:58:32 +0000

This is a quick solution for those who wanted to assign some buttons to go to web pages or URLs in existing main menu of flashmo.com templates. Button action scripts are usually located on first frame of actions layer.

First, you need to use the separator | between button label and URL. e.g. “Services|service.html”, “Company|http://www.flashmo.com” for buttons which are pointing to other web pages.

PLAIN TEXT

Actionscript:

var menu_label:Array = new Array(“Home”, “Services|service.html”, “Testimonials”,
“Company|http://www.flashmo.com”, “Contact”);

Second, add a few lines of codes for splitting button label and URL.

PLAIN TEXT

Actionscript:

var each_substring:String = menu_label[i].split(“|”);
menu_item_group[“menu_item”+i].item_label = each_substring[0];
menu_item_group[“menu_item”+i].item_url = each_substring[1];

Third, add if else statement to check the URL exists or not in button onRelease action.

PLAIN TEXT

Actionscript:

if( this._parent.item_url != undefined )
getURL(this._parent.item_url, “_parent”);
else
_root.change_page(this._parent.item_no);

Here is the complete source codes.

PLAIN TEXT

Actionscript:

menu_item_group.menu_item._visible = false;
var menu_label:Array = new Array(“Home”, “Services|service.html”, “Testimonials”,
“Company|http://www.flashmo.com”, “Contact”);
var total:Number = menu_label.length;
var distance_x:Number = 124;
var i:Number = 0;
for( ; i <total; i++ )
{
menu_item_group.menu_item.duplicateMovieClip(“menu_item”+i, i);
menu_item_group[“menu_item”+i].over = true;
var each_substring:String = menu_label[i].split(“|”);
menu_item_group[“menu_item”+i].item_label = each_substring[0];
menu_item_group[“menu_item”+i].item_url = each_substring[1];
menu_item_group[“menu_item”+i].item_no = i;
menu_item_group[“menu_item”+i]._x = i * distance_x;
}
function change_page(no):Void
{
for( i = 0; i <total; i++ )
{
menu_item_group[“menu_item”+i].flashmo_button._visible = true;
menu_item_group[“menu_item”+i].over = true;
menu_item_group[“menu_item”+i].flashmo_button.onRollOver = function()
{
this._parent.over = false;
}
menu_item_group[“menu_item”+i].flashmo_button.onRollOut =
menu_item_group[“menu_item”+i].flashmo_button.onDragOut = function()
{
this._parent.over = true;
}
menu_item_group[“menu_item”+i].flashmo_button.onRelease = function()
{
if( this._parent.item_url != undefined )
getURL(this._parent.item_url, “_parent”);
else
_root.change_page(this._parent.item_no);
}
menu_item_group[“menu_item”+i].onEnterFrame = function()
{
if( this.over == true ) this.prevFrame();
else this.nextFrame();
}
}
delete menu_item_group[“menu_item”+no].flashmo_button.onRollOut;
menu_item_group[“menu_item”+no].flashmo_button._visible = false;
menu_item_group[“menu_item”+no].over = false;
_root.page = no + 1;
_root.play();
}
change_page(0); // the default page on load

Edit the timeline in menu item movie clip for rollover effect for modifying the button effect.
Edit menu item label movie clip for embedding characters in your language font. See the example below:

Flash Best Practices part 1

admin — Fri, 11 Jul 2008 05:14:40 +0000

When you work on Flash documents, it is important to keep the structure neat, clean, and accessible in all aspects of flash environment no matter you work alone or as part of a team. This post is to give you some guidelines about Timelines and the library.

Flash Timeline structure

Name layers in meaningful way (see the below samples to compare good and bad Timeline structures) and avoid using default layer names (such as layer 1, layer 2, etc.) which cannot tell you anything.
Use layer folders when there are more than 10 layers.
Try to keep the number of layers as low as possible.
Put all actions and frame labels in one layer: e.g. “actions” layer, do not put any other object on this layer.

Flash Library Structure

Name objects in meaningful way (see the below samples to compare good and bad library structures) and avoid using default object names (such as Symbol 1, Symbol 2, Tween 1, etc.) which cannot give you any information about the object.
Use library folders and group related objects when there are more than 20 objects in the library (see the below sample to compare bad design and good practices)
Delete unused items to keep the library clean.

It is always necessary to have a good structure for both Timeline and the library. This way you can get a lot of benefits than you can think of such as reuse flash assets effectively, save time, and no more frustrations about finding needed objects.

Continue to Part 2

Creating Subpages in Flash Templates

admin — Sun, 29 Jun 2008 15:29:35 +0000

Many people have been wanting to know how to create subpages in existing flash templates. Finally, butterfly studio template has arrived to show you a good example for creating subpages in flash contents. The main idea is simply to create a movie clip for subpages which can easily be put into a specific frame inside “flashmo contents” movieclip.

All main pages are located inside “flashmo contents” movie clip as usual.
There is subpages layer which stores all subpages movie clips, each frame has a subpage movie clip for a specific main page.
Inside each subpage movie clip, there are different layers which have subtitles, text contents, menu buttons, menu labels, and a pointer. Those elements can be easily modified according to your needs.
If you need new subpage movie clip, you can simply duplicate existing one in the library and apply it to another page.

Hope this information should be helpful enough to guide you to understand how things are organized effectively and apply for your own flash websites. Feel free to drop a comment if you have any question.

Special Lottery from Template Monster

admin — Thu, 26 Jun 2008 03:54:39 +0000

Template Monster is going to hold a lottery with give-away to any participant. It will expose two website designs. If you wish to participate in the lottery, you should vote for one design or the other. The design which gets the most votes becomes the winner. The best design will be chosen during this two weeks period. The voting (and participation in the lottery) is active through June 25th until July 7th 2008.

Benefits for users to take part in our lottery:

Participant will get the free Icon Set. All icons included into this free Icon Set also relate to patriotic and 4th of July topic.
Participant has a chance to get one of the special prizes.

Special prizes are:

1 Gift Certificate giving the opportunity to get any product from Template Monster database for free.
two 80% discount coupons for purchasing any product from Template Monster database.
three 50% discount coupons for purchasing any product from Template Monster database.

VOTE NOW