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.

Get the Google maps API key

Follow the instruction from Google and get Google map API key by signing up. Click here for details. For testing the flash here is a sample API Key.

Download the Google maps API SDK for flash

You can download Google maps API SDK from here.
Unzip the file and copy map_1_9 Flash Component file to component folder of flash.
For windows copy to this location

For Mac OS X copy to this location

If you wish to make components organized make a new folder name it say Google and paste into it.

Inserting Google maps API flash component

Open new flash document (Ctrl + N)

Open Component panel, if not open click (Ctrl + F7). The Components panel will appear with a Google Maps API node. Drag Google Maps Library component to the stage and give the instance name as gmaps

Insert AS3 code for Google maps

Insert new layer and name it as actions. Select the first key frame and open the action panel (press F9) and follow the code.

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
// Importing Map Controls
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.OverviewMapControl;
// Importing Map markers amd map mouse events
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;

// Creating The Map
var gmaps:Map = new Map();
gmaps.key = "ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g";
// Setting the size to component to stage size
gmaps.setSize(new Point(stage.stageWidth, stage.stageHeight));
gmaps.addEventListener(MapEvent.MAP_READY, onMapReady);
// Adding component to stage
this.addChild(gmaps);

function onMapReady(event:MapEvent):void {
// Setting Longitude and Latitude and the type of view
  gmaps.setCenter(new LatLng(40.68913,-74.0446), 17, MapType.HYBRID_MAP_TYPE);
// Adding zoom, position, map type and small pan window map controls
  gmaps.addControl(new ZoomControl());
  gmaps.addControl(new PositionControl());
  gmaps.addControl(new MapTypeControl());
  gmaps.addControl(new OverviewMapControl());
// Loading the Xml marker file
  xmlMarkerLoader();
}

function xmlMarkerLoader(){
 function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true;
	 var mapMarker_xml:XML = new XML(e.target.data);

	 for (var i:Number = 0; i < mapMarker_xml.location.length(); i++){

		 var latlng:LatLng = new LatLng(mapMarker_xml.location[i].lat, mapMarker_xml.location[i].lon);
		 var tip = mapMarker_xml.location[i].name;
		 var myTitle:String = mapMarker_xml.location[i].title;
		 var myContent:String = mapMarker_xml.location[i].content;
		 // Calling Marker
		 gmaps.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
	 }

	 // Add Markers On The Map
	 function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var i:Marker = new Marker(latlng,new MarkerOptions({hasShadow: true, tooltip: ""+tip }));
			   i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void {
				gmaps.openInfoWindow(event.latLng, new InfoWindowOptions({titleHTML: ""+myTitle, contentHTML: ""+myContent }));
				});
               return i;
      }
 }

 var xmlLoader:URLLoader = new URLLoader();
 xmlLoader.addEventListener(Event.COMPLETE, loadXML);
 xmlLoader.load(new URLRequest("marker.xml"));
}

Enjoy ! It’s done

Test movie (Ctrl + Enter) to see the running application

Download

You can download the source code from here.
[Download not found]

Free Google map component

AFC omponents

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. The HTML code of the menu

In this the “ul” tag is the menu container and each “li” is menu-item.

<ul class="lavaLamp">
            <li><a href="#">Home</a></li>
            <li><a href="#">Plant a tree</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Ride an elephant</a></li>
</ul>

2. The CSS code

The CSS used in example is as follows

/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

3. JavaScript

Include the following code to the head section of HTML.

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/jquery.easing.js"></script>

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

You can download the source file from gmarwaha. Please click here to get the latest version

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