Wednesday, September 10, 2008

Event Handling In Flash




An event handler method is a method of a class that is invoked when


an event occurs on an instance of that class. For example, the


MovieClip class defines an onPress event handler that is invoked


whenever the mouse is pressed on a movie clip object. Unlike other


methods of a class, however, you don't invoke an event handler directly;


Flash Player invokes it automatically when the appropriate event occurs.
The following ActionScript classes are examples of classes that define event handlers: Button, ContextMenu, ContextMenuItem, Key, LoadVars, LocalConnection, Mouse, MovieClip, MovieClipLoader, Selection, SharedObject, Sound, Stage, TextField, XML and XMLSocket. For more information about the event handlers they provide, see the entries for each class in ActionScript 2.0 Language Reference. The word handler is added in the title of each event handler.
By default, event handler methods are undefined: when a particular event occurs, its corresponding event handler is invoked, but your application doesn't respond further to the event. To have your application respond to the event, you define a function with the function statement and then assign that function to the appropriate event handler. The function you assign to the event handler is then automatically invoked whenever the event occurs.
An event handler consists of three parts: the object to which the event applies, the name of the object's event handler method, and the function you assign to the event handler. The following example shows the basic structure of an event handler:


object.eventMethod = function () { // Your code here, responding to event.

}


For example, suppose you have a button named next_btn on the Stage. The following code assigns a function to the button's onPress event handler; this function advances the playhead to the next frame in the current timeline:

next_btn.onPress = function () { nextFrame();

}

Assigning a function reference:
In the previous code, the nextFrame() function is assigned to an event handler for onPress. You can also assign a function reference (name) to an event handler method and later define the function, as shown in the following example:

// Assign a function reference to button's onPress event handler.next_btn.onPress = goNextFrame;

// Define goNextFrame() function.function goNextFrame() { nextFrame();

}

Notice in the following example that you assign the function reference, not the function's return value, to the onPress event handler:

// Incorrect!
next_btn.onPress = goNextFrame();
// Correct.
next_btn.onPress = goNextFrame;

Receiving passed parameters:
Some event handlers receive passed parameters that provide information about the event that occurred. For example, the TextField.onSetFocus event handler is invoked when a text field instance gains keyboard focus. This event handler receives a reference to the text field object that previously had keyboard focus.
For example, the following code inserts some text into a text field that no longer has keyboard focus:

this.createTextField("my_txt", 99, 10, 10, 200, 20);
my_txt.border = true;
my_txt.type = "input";
this.createTextField("myOther_txt", 100, 10, 50, 200, 20);
myOther_txt.border = true;
myOther_txt.type = "input";
myOther_txt.onSetFocus = function(my_txt:TextField) {
my_txt.text = "I just lost keyboard focus";
};


Event handlers for runtime objects:
You can also assign functions to event handlers for objects you create at runtime. For example, the following code creates a new movie clip instance (newclip_mc) and then assigns a function to the clip's onPress event handler:

this.attachMovie("symbolID", "newclip_mc", 10);
newclip_mc.onPress = function (
)
{ trace("You pressed me");

Overriding event handler methods:
By creating a class that extends an ActionScript class, you can override event handler methods with the functions that you write. You can define an event handler in a new subclass that you can then reuse for various objects by linking any symbol in the library of the extended class to the new subclass. The following code overrides the MovieClip class's onPress event handler with a function that decreases the transparency of the movie clip:

// FadeAlpha class -- sets transparency when you click the movie clip.
class FadeAlpha extends MovieClip {
function onPress() {
this._alpha -= 10;
}

}




Using button and movie clip event handlers:
You can attach event handlers directly to a button or movie clip instance on the Stage by using the onClipEvent() and on() event handlers. The onClipEvent() event handler broadcasts movie clip events, and the on() event handler handles button events.
To attach an event handler to a button or movie clip instance, click the button or movie clip instance on the Stage to bring it in focus, and then enter code in the Actions panel. The title of the Actions panel reflects that code will be attached to the button or movie clip: Actions Panel - Button or Actions Panel - Movie Clip. For guidelines about using code that's attached to button or movie clip instances,
Do not confuse button and movie clip event handlers with component events, such as SimpleButton.click, UIObject.hide, and UIObject.reveal, which must be attached to component instances and are discussed in Using Components.

You can attach onClipEvent() and on() only to movie clip instances that have been placed on the Stage during authoring. You cannot attach onClipEvent() or on() to movie clip instances that are created at runtime (using the attachMovie() method, for example). To attach event handlers to objects created at runtime, use event handler methods or event listeners.
Attaching onClipEvent() and on() handlers is not a recommended practice. Instead, you should put your code in frame scripts or in a class file, as demonstrated throughout this manual. For more information,

Monday, September 8, 2008

Google Chrome Features


Google Chrome:
is a web browser built with open source code developed by Google. The name is derived from the graphical user interface frame, or "chrome", of web browsers.Chromium is the name of the open source projectbehind Google Chrome,released under the BSD license.

The release announcement was originally scheduled for 3 September 2008, and a comic by Scott McCloud was to besent to journalists and bloggers explaining the features of and motivations for the new browser. Copies intended for Europe were shipped early and German blogger Philipp Lenssen of Google Blogoscopedmade a scannedcopy of the 38-page comic available on his website after receiving it on 1 September 2008.Google subsequentlymade the comic available on Google Books and their site and mentioned it on its official blog along with an explanation for the early release.

Beta release:
A beta version for Microsoft Windows was released on 2 September 2008 in 43 languages. Google said more would be coming soon.On 3 September, a Slashdot news item drew attention to a passage in the terms of service for the initial beta release, which seemed to grant to Google a license to all content transferred via the Chrome browser.Thepassage in question was inherited from the general Google terms of service.The Register summarized the passageas "Your copyright goes up in smoke." On the same day, Google responded to this criticism by stating that the language used was borrowed from other products, and removed the passage in question from the Terms of Service.Googlenoted that this change would "apply retroactively to all users who have downloaded Google Chrome.
The first release of Google Chrome passed the Acid1 and Acid2 tests, but does not pass the Acid3 test; however, itscores 78/100, which is higher than both Internet Explorer 7 and Firefox 3.

Design:
Primary design goals were improvements in security, speed, and stability compared to existing browsers. There also were extensive changes in the user interface.Chrome was assembled from 26 different code libraries from Google and others from third parties such as Netscape.
SecurityChrome periodically downloads updates of two blacklists (one for phishing and one for malware), and warns users when they attempt to visit a harmful site. This service also is made available for use by others via a free public API called "Google Safe Browsing API". In the process of maintaining these blacklists, Google also notifies the ownersof listed sites who may not be aware of the presence of the harmful software.

Speed:
The JavaScript virtual machine was considered a sufficiently important project to be split off (as was Adobe/Mozilla'sTamarin) and handled by a separate team in Denmark. Existing implementations were designed "for small programs, wherethe performance and interactivity of the system weren't that important", but web applications such as Gmail "areusing the web browser to the fullest when it comes to DOM manipulations and Javascript". The resulting V8 JavaScriptengine has features such as hidden class transitions, dynamic code generation, and precise garbage collection. Tests by Google show that V8 is about twice as fast as Firefox 3 and the Safari 4 beta.
Application support:
A feature of the Google browser (in fact one of the main reasons it was created) is the Application Mode. This is muchmore than just hiding the omnibox (navigation bar). This allows web pages to break free of the restrictions of the current browser paradigm. The browser paradigm freely allows the user to reload a page, navigate away or close the window, which would be disastrous for an application that is editing sensitive content. Although this appears to bea minor change, the lack of this feature means that there is no mechanism to prevent the sudden loss of unsaved data(without a major investment in an far more complex AJAX architecture). Other features still are required, such as desktop interaction, filetype support, and database access. This limits the browser chrome so as not to "interruptanything the user is trying to do", allowing web applications to run alongside local software (similar to Mozilla Prism and Fluid).

User interface:
The main user interface includes back, forward, refresh, bookmark, go, and cancel options. The options are similar toSafari, while the location of the settings is similar to Internet Explorer 7/8. The minimize, maximize, and closewindow buttons are based on Windows Vista.
When the window is not maximized, the tab bar appears directly under the standard Windows title bar. When maximized,the title bar disappears, and instead, the tab bar is shown at the very top of the screen. Unlike other browsers such as Internet Explorer or Firefox which also have a full-screen mode that hides the operating system's interface completely, Chrome can only be maximized like a standard Windows application. Therefore, the Windows task bar, systemtray, and start menu link still take space at all times unless they have been configured to hide at all times.
As opposed to the latest versions of Firefox and Internet Explorer, which allow the user to adjust the display dimensions of a web page completely, Chrome allows the resizing of the text only. Therefore, a web page 800 pixels wide, for example, will still be 800 pixel wide—even if the user resizes it. Only the text will be affected by theresizing.
Chrome includes Gears, which adds developer features that may, or may not, become web standards, typically relatingto the building of web applications (including offline support).
Chrome replaces the browser home page which is displayed when a new tab is created with a New Tab Page. This shows thumbnails of the nine most visited web sites along with the sites most often searched, recent bookmarks, and recently closed tabs.[11] This concept appeared first with Opera's Speed Dial.

Privacy:
Users quickly began raising privacy concerns about data collection in Chrome. The omnibar's auto-suggest features send data back to Google about the keystrokes inputted. A Google representative said that about 2% of the data wouldbe stored along with the IP address of the computer that sent the data. Google also stated users can opt-out byturning off the auto-suggest feature or switching to Incognito.

Security flaws:
Multiple security experts have criticized what serves as the automatic file download feature that comes enabled by default in Google Chrome. They argued that it could be used easily by an attacker to trick a user into opening a malicious executable file.A denial-of-service vulnerability also has been found that allows a malicious web page to crash the whole web browser.Google Chrome developers confirmed the flaw, and it already has been fixed in the SVN repository.

Tuesday, August 5, 2008

The Principles of Design:

The basic principles of design are true for Web design as well as other design. They show you how to put together design elements in an effective manner. Design is more than just slapping HTML tags up onto a page, and using these principles will help you build more pleasing and useful designs.
Balance.

Balance:
is the distribution of heavy and light elements on the page. Larger, darker elements appear heavier in the design than smaller, lighter elements. The principle of balance shows you how to lay out your pages so that they work.

Contrast:
When most people think of contrast, they typically think of colors or black and white. But there is more to contrast than color. You can have contrasting shapes (square vs. circle), or contrasting sizes (large vs. small), or contrasting textures (smooth vs. rough).
Emphasis

Emphasis:
is what the eye is drawn to in a design. It's tempting to give everything equal emphasis or try to emphasize everything in a design, but this ends up making the design bland and flat. Instead, as a designer you should determine the hierarchy of the page and then apply the emphasis to the elements based on that hierarchy.
Rhythm

Rhythm:
is also called repetition. Rhythm brings an internal consistency to your Web designs. Patterns are easy for humans to comprehend, and repetition provides patterns that make your site easier to comprehend.


Unity:
Unity is also called proximity. It is the principle of keeping like elements together and diverse elements further apart. Unity pulls elements together.

The Importance of Whitespace in Web Designs:

The Importance of Whitespace in Web Designs:
When we're building Web pages we often focus on the stuff that shows in the design, you know, the fonts, colors, images, etc. But often the part of a design that has the most impact is the part that doesn't really show - the whitespace or negative space between the elements. Unfortunately, most Web designers (and many Web clients as well) think of whitespace as "empty space". In other words, it's space that could (and should) be filled with content to get people to read, click, and buy. But whitespace serves a very important purpose. Whitespace sets the tone of your design and affects the usability dramatically.

What is Whitespace?
At its most basic, whitespace is the characters that don't print anything when you type them, for instance: tab, space, and carriage return. These are whitespace characters. But there is more to whitespace than just these characters.

Whitespace in a design is the spaces around elements in the design to help them stand out or separate from the other elements. This includes the space on the edges of a fixed width layout and the space in the margins and padding around pictures and blocks of text (margins and padding). Whitespace also includes the space between lines of text (leading) and letters in words (tracking and sometimes kerning).

Remember, too, that whitespace doesn't have to be white. If the background color of a design is black, then the whitespace will be black. Whitespace is the areas of a design where there is no element placed by a designer.

How Does Whitespace Affect Design?
Whitespace is used in two ways in design:

1. Legibility
Whitespace at the micro level (leading, kerning, and tracking) can help improve or destroy the legibility of a Web page. If you have a lot of content you need to get across in a small amount of space, you can increase the leading or tracking to make the text easier to read. If you look at the print version of the Wall Street Journal, the paper always has many columns of text with very little margin or padding around it. But the space between the lines and letters makes the columns readable.
2. Tone
Whitespace at the macro level (spacing around the biggest objects on the page) can convey a sense of elegance or down-market quality to a design. The more whitespace there is the more expensive and high-quality a design may seem. If you look at the advertisements in an expensive women's magazine, you will notice that most ads have very little non-negative space. The text is small, leaving more room for background images, and there are very few elements on the page. Contrast that with a direct mail advertisement and you'll see large blocks of text covering multiple images and very little negative space.

Start Playing with Whitespace in Your Designs:
On the next page you design instead of thinking about where to put that image or how much space you should allocate to the text, ask yourself if there's enough space in the margins and padding to convey the tone and legibility you want. Learn to manage the margins and paddings around your elements. Work with the leading and tracking on your text.
If you're feeling really ambitious, create your design in two ways: once with lots of whitespace to convey an elegant tone and once with very little to convey a more down-market tone. Use the exact same elements in both designs, just change the spacing between them

Monday, August 4, 2008

Basic Elements For Logo Design

The most prominent identity item for many businesses is the logo. It appears on almost all printed materials.

Keep following things in mind while making logos.

Create Logos from Simple Shapes and Lines:
The logo should be design by using lines, circles, squares, and triangles to construct simple graphics,often suitable for logos.

Do It Yourself Logos, Letterhead, & Business Cards:
Recommended reading for small business owners and non-designers tasked with creating an identity system for theirbusiness. For designers, it is also a valuable addition to any design reference library.

Jumpstart Logo Design with Graphic Building Blocks:
Use basic iconic shapes as a starting point for logo design

What's the Best Software for Logo Design?
PowerPoint, Word, and Publisher are not the best tools for crafting quality logos. Find out what software works forlogo design and why.

Saturday, August 2, 2008

5 Tips for a Great Brochure

Tip 1: Know Your Print Size

One of the most common errors made by those who create their own brochures, but one of the most challenging to correct, is an incorrect setup size for the brochure. He says that all too often, a print layout has to be returned to the customer because it wasn't setup for the proper output size. Don't use an 8.5 x 11 layout and submit it for printing on 8x10 paper. When a print service has to stretch or shrink a brochure layout to fit the paper, the quality of the print resolution may be compromised.


Tip 2: Allow for Bleed

What is print bleed? Think of it as an insurance policy to make your final printed brochure look its best. Brochures are printed together in sheets, and then sliced into single units. The blade that cuts out each brochure is precise, but when cutting thousands of pieces, it can fluctuate slightly over the course of the order.

"By expanding your brochure design slightly beyond the established page borders, when we cut each page you’ll have solid ink coverage from edge to edge. This is imperative if you have a photo, color, or pattern that needs to be displayed to the extreme edge of your brochure layout." Designing your brochure with an extra 1/8th inch of coverage beyond each edge is recommended.


Tip 3: Resolution is Key

Using high-resolution images in your layout is a critical step toward creating a professional looking final brochure. If you submit something for print that isn’t the proper resolution, your images will come out ‘soft’, blurry, or even pixilated.

The images you see on your computer monitor are only 72 dpi (dots-per-inch), which is fine for viewing on a monitor, but very inadequate for a professional-looking printed brochure. Your images should be at least 300 dpi to print clearly with full sharpness. There are a variety of stock image sites on the web where you can obtain inexpensive, high-resolution, royalty-free images to use in your brochure designs. Some stock image sites even offer free high-resolution pictures you can use for your brochure.


Tip 4: Select the Correct Paper

Most print shops that print brochures offer either an 80lb or 100lb stock paper, with a variety of gloss / matte finishes. It’s really your choice in the end, but a 100lb stock is surprisingly more substantial than 80lb stock paper without a huge cost difference. Using a heavier paper may convince a potential customer that you are more professional than your competitors.

Adding varnish will add an appealing gloss to your brochure, but if you have a lot of ink coverage your brochure will appear glossy anyway. However, if you use too many dark colors in your brochure design, using a varnish will prevent fingerprint smudges on your brochure.

Tip 5: Be Original and be Creative

Carefully consider what you want to say with your brochure. What information are you trying to convey?

You can start by looking at your competitors to see what approach they're taking in their advertising materials. Have they provided all of the necessary contact information? What makes other brochure designs leap out at you?

Remember, the front of your brochure is all people will see when scanning display racks, so make sure the front of your brochure is appealing and makes prospective customers want to pick it up!

"Don’t get stuck using the fonts that shipped with your software. Everybody has those fonts, and you don’t want your brochure to look like everyone else's." Look around the web for a variety of free, interesting fonts you can use to make your brochure stand out from the crowd and look very professional at the same time.

Friday, August 1, 2008

Preparing Contant For a Website Profile

Following are the important steps for making attractive web profile

Determine the Goals:
When building a new online portfolio, there are many factors to consider and decisions to make to set yourself apart and properly showcase your work.
In order to create the content for your site, you must know your goals. Some important questions to ask are:

• Who is your target audience?
• Are you looking to build a freelance business or land a design job?
• Do you want to get work in a specific field, such as music, or find a specific type of work, such as book cover design?
The answers to these questions will help determine the work you choose to present and the style of your written content, or the “voice” of the site.

Create an Outline:
Reading an outline of your content will let you focus on what to include on your site without being distracted by design. You can also start to think about the names for the different sections, though of course they can change later in the process. Common sections include:
Portfolio: This is the showcase of your work, and is discussed more in later steps.
About: This can be a bio and/or company overview.
Contact: Be sure to make it easy for people to find your contact info.
The Process: Talk about your design process, goals and how you deal with clients.
Case Studies: In a case study section, you can focus on a few clients or projects and discuss the design process. This is effective for showcasing branding jobs or clients for whom you have done several related projects.
Clients: A list of clients, often divided by industry or job type.
Press: Show publications you have appeared in and any awards or honors.
Resume: Depending on the goal of the site, including a standard format resume can be helpful to prospective employers or clients.

Categorize Your Work:
Before selecting work to present, it often needs to be broken into categories. If you are presenting a small selection of work, one section may be enough. However, if you are presenting different types of work, aimed at different audiences, there are several ways
Type of Media: A common breakdown is separating your work by major categories such as print, web and illustration.
Type of Work: Depending on your focus, present your work in categories such as book design, packaging, posters, business cards, brochures, etc.
Industry: Show your work by industry, such as music, non-profit, entertainment, law, etc. This is effective if you focus on a few industries.

Select Your Work:
Once you have determined how to present and categorize your design, choose the best pieces to include. “Less is more” can certainly come into play here, as potential employers and clients may be looking at many portfolios and not spending much time on each. Each work should be something you are proud of, whether it is a school project or a commercial piece.

Prepare Your Work:
Once you have selected your favorite work, it is important to present it well. For some pieces, displaying the final design as exported from your graphics software will do. For others, it may look best if you photograph it. Package design and book design are examples of work that will be more impressive if the user can see the actual finished product. Try shooting the products yourself, but consider hiring a professional photographer (or friend) if budget allows, as the quality of the pictures is as important as the work itself.

Write Your Content:
They style of your written content will reflect your personality as much as your design. Decide what type of image you are going for, and write content to match. Again, consider hiring a professional writer to create, or at least edit, your content. Content includes project descriptions, bios, company background, and even how you word your contact page.

Design and Launch Your Site:
It’s time to actually start on the design process. Start with wire frames, which are simple line drawings of your site that set up where elements will appear on the page. Creating these first allows you to focus on layout without being distracted by color, type and other elements.
Using your final wire frames, create several designs. Treat this process as you would any project…tweak your designs until they are exactly what you want (in this case, you are your own client). Remember to consider unique methods for presenting your selected work.
Once you have finalized a design, it’s time to build a working website. If you are a graphic designer, but not a web designer, this may mean hiring a professional. Again, if budget is a concern, consider working with others that have different skill sets and exchange services. When the site is ready, you will need a domain name (website address) and hosting to get it online.