Counting down stated for the launch of Adobe CS5..!

Join Adobe online event for your first look at CS5 at Monday, April 12, 2010 at 8am PDT / 11am EDT / 4pm BST

Adobe Photoshop 20th Anniversary

For 20 years, the world has used Adobe Photoshop software to transform creative inspiration into nearly everything we see in print, online, and across media.

See what today’s Photoshop family of products can do for you.

Adobe® Flash® Builder™ 4 (formerly Adobe Flex® Builder™) software is designed to help software developers rapidly develop cross-platform rich Internet applications (RIAs) and content using the open source Flex framework.

Flex is a highly productive, free, open source framework for building expressive web applications that deploy consistently across browsers, desktops, and operating systems by leveraging the Adobe® Flash® Player and Adobe AIR® runtimes. While Flex applications can be built using only the Flex framework, Adobe Flash Builder™ (formerly Adobe Flex® Builder™) software can accelerate development through features like intelligent coding, interactive step-through debugging, and visual design of the user interface layout.

Get the trial version of Flash Builder 4 from Adobe

What’s new in Adobe® Flash® Builder™ 4

Powerful coding tools

Develop using a powerful Eclipse™ based IDE that includes editors for MXML, the ActionScript® language, and CSS, as well as syntax coloring, statement completion, code collapse, interactive step-through debugging, and automatic generation of common code.

Rich visual layout

Visually design and preview user interface layout, appearance, and behavior using a rich library of built-in components. Extend the built-in Flex framework components or create new ones as needed. Import functional application UI created using the Adobe Flash Catalyst™ interaction design tool.

Data-centric development

Introspect Java™, PHP, Adobe ColdFusion®, REST, and SOAP services to display methods and properties in the new Data/Service Explorer. Bind methods to UI components using a simple drag-and-drop approach.

Interactive data visualization

Create data dashboards and interactive data analysis by simply dragging and dropping a chart type and linking it to a data source using the Flex Charting library. Use the powerful Advanced Datagrid to enable users to explore complex data.

Skinning and styling

Customize the appearance of an application using CSS and graphical property editors. Quickly set the most commonly used properties and preview the results in Design View. Browse available themes and apply them to your project using the new Theme Browser.

Integration with Adobe Creative Suite design tools

Import design assets created using Adobe Flash Professional, Illustrator®, Photoshop®, or Fireworks® software, or import a complete application user interface created using Flash Catalyst. A new workflow between Flash Professional and Flash Builder facilitates importing and updating custom Flex components.

Native support for Adobe AIR

Create applications for the Adobe AIR® runtime with Flash Builder 4, including all the tools required to build, debug, package, and sign AIR applications. Adobe AIR lets you quickly develop RIAs for the desktop using the same skills and codebase you use to build RIAs for the browser.

Code refactoring

Quickly navigate through code or restructure it by renaming all references to a class, method, or variable. Flash Builder 4 adds move refactoring.

Powerful testing tools

Accelerate application performance using memory and performance profilers that monitor and analyze memory consumption and CPU cycles. Support for automated functional testing tools such as HP QuickTest Professional is also available.

Network Monitor

Generate a detailed audit trail of all data passed between the local Flex application and the back end, assisting with debugging and performance tuning.

Advanced data services

Use open source BlazeDS to add binary, high-performance, HTTP-based data transport, or add the Adobe LiveCycle® Data Services ES2 module for real-time data push and pub/sub messaging.

Command line build

Use the new command line build capability to automate your build process.

Flex unit testing integration

Automate functional testing using the Flex unit testing framework.

ASDoc support

Display comments in MXML and ActionScript editors using ASDoc.

Abstract Glowing Background

This tutorial, you will learn how to draw different shapes, apply gradient, blend different shapes in the background.

A Vibrant Space Nebula

In this tutorial you learn how to create a detailed nebula quickly & easily infront of a beautiful starfield.

Alien Invasion!

In this tutorial, you will learn to create an image of alien invasion.

Cool Eclipse Effect

This tutorial you learn to create Cool Eclipse Effect.

Making of Space Scene

Make a Space Scene from this tutorial.

Space Explosion Photoshop

This tutorial shows you how to create your own space scene using three stock photos and Adobe Photoshop.

How to use?

Insert the jquery and jQuery UI libraries to the header section of html

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>

The HTML Structure is as follows.
In the example there is two vertical columns defined by div with class=”column” that hold our panels. You can increase the number of panels by adjusting the width in the style sheet for .column. Each panel is a div with class=”dragbox”. And the content of each panel resides within div
with class=”dragbox-content”.

	<div class="column" id="column1">
		<div class="dragbox" id="item1" >
			<h2>Handle 1</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item2" >
			<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item3" >
			<h2>Handle 3</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
	</div>
	<div class="column" id="column2" >
		<div class="dragbox" id="item4" >
			<h2>Handle 4</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here-->
			</div>
		</div>
		<div class="dragbox" id="item5" >
			<h2>Handle 5</h2>
			<div class="dragbox-content" >
				<!--Panel Content Here-->
			</div>
		</div>
	</div>

The CSS code

.column{
	width:49%;
	margin-right:.5%;
	min-height:300px;
	background:#fff;
	float:left;
}
.column .dragbox{
	margin:5px 2px  20px;
	background:#fff;
	position:relative;
	border:1px solid #ddd;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	padding:5px;
	background:#f0f0f0;
	color:#000;
	border-bottom:1px solid #eee;
	font-family:Verdana;
	cursor:move;
}
.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #f0f0f0;
	border:1px dashed #ddd;
}
.dragbox h2.collapse{
	background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
	font-size:11px; font-weight:normal;
	margin-right:30px; float:right;
}

The JavaScript Code
This code is to make the boxes dragable and droppable for this we will be using Portables function from jQuery UI library.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
})
.disableSelection();

In this the connectWith lets you move panels across different columns and handle defines the tag which is used to drag the panel. The placeholder parameter is the CSS class to use for the panel placeholder which is displayed when you drag a panel to show the possible position of the dragged panel. forcePlaceholderSize makes sure that placeholder size is equal to the size of the dragged panel and at last opacity sets the opacity of the panel while dragging.
To collapse the content of a panel box when you click on the panel header and show the configure link on panel header on hover, use the below code in jQuery document ready function.

$('.dragbox').each(function(){
    $(this).hover(function(){
        $(this).find('h2').addClass('collapse');
    }, function(){
        $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
        $(this).find('.configure').css('visibility', 'visible');
    }, function(){
        $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
        $(this).siblings('.dragbox-content').toggle();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
});

One thing you’ll notice after adding this code is that when you drag the panel, the content of the panel toggles as when you drag the click event of panel header also fires that toggles the state of content. To fix this, you need to add another parameter to storable so that when drag is finished, state of content does not toggle.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
        $(ui.item).find('h2').click();
    }
})
.disableSelection();

Here I added another parameter stop that defines the function to use when drag is complete. Once the drag is complete, click event of panel header is fired so that the original state of content is restored.

You can view the demo here
Download the source file from here.

Some sites that explains Drag and Drop

Wil-linssen

Brothercake

Snook.ca

Chris Bolson

1. Parallax Explained

For web designs it is the layered movement animation of background images when we do browser resize or mouse move or scrolling. It makes us the feel the depth between the images.

For further definition of parallax please check here

2. Some sites that use Parallax

Dezignus

Eric Johansson

Silverback

3. Tutorial site to create Parallax – jQuery and Mootools

This tutorial will show you how to create a cool Parallax efftect using jQuery and the jParallax jQuery plugin.

Webdev.stephband

Progtuts

This tutorial will show you how to create a cool Parallax effect using Mootools .

Piksite