Principles of User Interface Design

Principles of User Interface Design are intended to improve the quality of user interface design. According to Larry Constantine and Lucy Lockwood in their usage-centered design, these principles are:[1]

* The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.

* The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

* The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives or confuse with unneeded information.

* The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

* The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.

* The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

Flash Broadcast

Let walk through Some of the important things for Flash broadcast. Almost 15 years ago, Flash animation were quietly moving from computer screen to Computer screens. Animation were exported from Flash to AVI or Quick timer move. But the process was painful because so many limitation on the way like limitation of Flash Frames and layers. Flash animator preparing breaking their project in to 20 – 30 section.

With the introduction of HD video in Flash Player 9.0.115 and the ability to create and play HD video using the H.264 codec and the .mp4 format Flash became untethered. The same video can be just as easily played in a browser as it can on a Sony Playstation or the HD screen.

In the Flash Player 10, Flash animators will be producing content, in Flash, that shows up, simultaneously, on 52-inch HD screens, computer monitors, gaming systems and SmartPhone screens. In this article I am only going to deal with preparing Flash animations for TV.

PNG sequences are the way to go when frame accuracy is critical. PNG sequance is better than Quick timer option. With this technique your Flash movie, for want of a better analogy, is treated as a Flip Book and each frame of your Flash movie is rendered out as a numbered PNG document.

We can see the png files saved with sequentially numbered. Open After Effects CS-4 and import. Navigated to the folder containing the PNG images and selected the first file in the sequence. After Effects recognizes this selection as being the first image of a PNG Sequence and selecting “Force alphabetical order” makes sure the images come into After Effects in order. The neat thing about this is when I click Open, the sequence arrives in the After Effects Project panel as a single document, not 75 individual images. From there a Video or Motion Graphics artist can further manipulate the files before outputting for broadcast.

TV displays less color than your computer monitor. Monitor can display all of the RGB colors from 0 to 255. When it comes to TV. Flash palette needs to be reduced to a range from 16 and 235. Black, [0,0,0], actually gets shifted to [16,16,16] meaning the colors between 0 and 16 are clipped. Same thing for white, [255,255,255]; it gets downshifted to [235,235,235]. The color that really tends to bleed is red, might want to reduce it from [255,0,0] to [200,16,16] and add the swatch to your color palette.

If creating custom colors is tedious you might want to head out to the web and pick up Warren Fuller’s FlashNTSC swatch palette.

Import Swatch Color
Installing it isn’t difficult. Open the Flash Swatches panel and, from the panel pop down menu select Replace colors. When the Import Swatch Color dialog box opens navigate to the folder where you saved the .clr file, select the file and click Open.
When the dialog box closes, the NTSC Swatches will appear in the Swatch panel.

Fireworks CS5

Adobe Fireworks CS5 recently launched. Hope it is far batter than other CS version of Fireworks which are too buggy, slow perform and crash any time.  Always new version coming some great features. Fireworks CS 5 coming with new features specially for handheld devices with great compression ratio. some of  the enhanced features listed over here.

New in Fireworks Cs5

1. Most important feature in Fireworks CS5 communication between Flash Catalyst and Flash Builder for RIA development.

2. Device Central Intigration: Make sure your graphics are going to display correctly on an ever-growing list of handsets using Adobe’s endlessly updated online emulator service.

3. Enhanced property panels

4. Smooth Gradiyant

Flex and Flash User Group Meeting in Ahemdabad

First Flash and Flex user group meeting was organized in Ahmadabad last Sunday in Gateway Technolabs Pvt. Ltd. Group meeting got great success. This kind of events create strong community for the current as well upcoming technology. In the meeting group members can share their experience and difficulties. I hope next time It will be more successful and more informative.

Mandar
Ahmedabad Flash Platform User Group

13-Sep-2009

Flash: Smooth animation using updateAfterEvent

Smoth animation when drag the objects

onMouseMove = function(){
updateAfterEvent();
}

greenSphere.onPress = function(){
this.startDrag();
}
greenSphere.onRelease = function(){
this.stopDrag();
}

redSphere.onPress = function(){
this.startDrag();
}
redSphere.onRelease = function(){
this.stopDrag();
}

---

Web design Process & Methodology

Design Process Methodology

Over many years of industry experience, we’ve developed a methodology that applies to all projects regardless of size, length, and type of service. This continuous process, namely our development lifecycle, begins with learning your goals and ends with far exceeding them resulting in the success of your new web site project.

Define

The first step is to define the exact needs and goals of your business. Your job is to teach us your vision, and ours is to bring it to life. A few examples of questions which will be addressed during this phase:

Is the site a tool for existing clients or a way of generating new business? Do you sell products and/or services directly through the web or would you prefer to generate leads that you can follow-up for further dialog? Do you require some kind of content management system? What technologies will be necessary to use for your web site?

Most importantly, how do you intend to receive your visitors? You may have the best site in the world but without visitors it is useless. The best method is through Internet search engines such as Google, Yahoo, and MSN. Therefore your site must be designed with search engine optimization and good coding style in mind right from the beginning.

The discovery phase clearly states the problem, and contains all of the information needed to design a solution to the problem.

Design

After we’ve completed the discovery phase and received the client’s approval, we come to the design phase. Keeping in mind all your goals and priorities we will begin to design graphic and layout samples.The site’s navigation structure is one of the main focuses here as well for it must be highly optimized and quick and easy for your visitors to browse. Often an alpha site will be created without graphics to see if the site’s navigation and ability to deliver content works. When both our design team and you, the client, are completely satisfied with the proposed “look and feel,” we then move forward with development.

Develop

In the development phase, the web pages drawn up in the design phase will be created and optimized. Import and conversion of all database information is done at this time. Great attention to detail is given and we and utilize standard conventions for good programming style – site-wide CSS stylesheets, web-based content management systems, highly optimized graphics, etc.

Functional beta versions of the site are created and every aspect of it is tested thoroughly before site launch. Clients can watch the progress of their development and participate in testing on our development servers. The final site optimization is always done by hand using a text editor for every site we publish, no matter what application was used to create your site!

Deploy

The final stage of the site’s creation is deployment. Once it is demonstrated that the web site functions as desired and outlined in our agreed upon proposal, it is published on your public Web server for all to see. Launches are pre-planned to ensure minimal interruption to business functions.Only now after successful deployment should your site be submitted to search engines and directories. Off-page search engine optimization can now be performed along with all other web site marketing strategies. Two additional steps Monitor and Maintain. Monitor As a full service I.T. solutions provider, we go beyond the standard 4-Ds development process. Since we frequently provide web hosting and SEO services for our web development projects, we are committed to the ongoing success of your web site, and thus our relationship does not end. Monitoring your site for errors, performance, and visitors statistics play an important role for long-term success. Maintain As your business requirements change, so too will the needs of your site. Successful web sites that generate visitors day after day, year after year must be kept up-to-date with fresh new content. This is why we offer web site maintenance services to all clients, whether or not BCN initially created your site. In time, your site may become outdated and need a fresh look, and so the process begins anew, and we will be here to help.

---

Flex easing classes used by effects

The mx.effects.easing package contains the easing classes used by effects.

Classes

Back
Bounce
Circular
Cubic
Elastic
Exponential
Linear
Linear
Quartic
Quintic
Sine

Method

easeIn
easeInOut
easeNone
easeOut

Example

<mx:Move yFrom=”-10″ easingFunction=”Linear.easeOut” duration=”1000″ />

AS 3.0 Loader

var request:URLRequest = new URLRequest(“mandar.swf”);
var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loadProgress(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
trace(“Loading: “+percentLoaded+”%”);
}
function loadComplete(event:Event):void {
trace(“Complete”);
}

loader.load(request);
addChild(loader);

---

AS3.: can stop net connection

Previous versions of the Flash player could not close connections to the internet once a download into the player has started. For example if you start loading 30mb and sudenely you need to stop and handle differnt request. previous version couldn’t do it.

In Flash Player 9, using ActionScript 3, you can now stop connections and abort loading requests made by the player. see the following code

var loader:Loader = new Loader();
var request:URLRequest = new URLRequest("image.jpg");
loader.load(request);
addChild(loader);

// abort loading if not done in 3 seconds
var abortID:uint = setTimeout(abortLoader, 3000);

// abort the abort when loaded
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, abortAbort);

function abortLoader(){
    try {
        loader.close();
    }catch(error:Error) {}
}
function abortAbort(event:Event){
    clearTimeout(abortID);
}

Flash: Dynamically Change Frame Rate

New to ActionScript 3.0 is the ability to dynamically change the frame rate at which your file plays at runtime. The default frame rate of a Flash movie is 12 frames per second, and we can change dynamically increase or decrease frame rate run time. following example shows how to change frame rate runtime.

Create two buttons on stage and give name “faseter” and “slower”.

faster.addEventListener(MouseEvent.CLICK, onFasterClick, false, 0, true);
slower.addEventListener(MouseEvent.CLICK, onSlowerClick, false, 0, true);

function onFasterClick(evt:MouseEvent):void {
stage.frameRate += 5;
trace(stage.frameRate);
}
function onSlowerClick(evt:MouseEvent):void {
if (stage.frameRate > 5) {
stage.frameRate -= 5;
}
trace(stage.frameRate);
}

---