Web gallery built in flash to produce a coverflow like component.
This is an updated implementation of the popular coverflow way of display images. With the release of flash 10 with new 3D capabilities, this allows for a much easier and fast implantation of this popular web component.

File Main.AS

package {

    ////////////////////////////////////////////

    // IMPORTS

    ////////////////////////////////////////////

    //import flash.utils.*;

    //import flash.media.*;

    import flash.display.*;

    import flash.events.*;

    //import flash.net.*;

    //import flash.text.*;

    public class Main extends Sprite {

        ////////////////////////////////////////////

        // VARIABLES

        ////////////////////////////////////////////

        private var coverflow:Coverflow;

        ////////////////////////////////////////////

        // CONSTRUCTOR - INITIAL ACTIONS

        ////////////////////////////////////////////

        public function Main() {

            setupStage();

            //Resize Listener

            stage.addEventListener(Event.RESIZE, resizeHandler);

            resizeMe();

            init();

        }

        ////////////////////////////////////////////

        // FUNCTIONS

        ////////////////////////////////////////////

        public function setupStage():void {

            stage.quality = StageQuality.HIGH;

            stage.scaleMode = StageScaleMode.NO_SCALE;

            stage.align = StageAlign.TOP_LEFT;

        }

        //Handles Resizing the Image

        private function resizeHandler(event:Event):void {

            resizeMe();

        }

        private function resizeMe():void {

            //No Resizing for This

        }

        private function init():void {

            coverflow = new Coverflow(stage.stageWidth, stage.stageHeight, stage);

            addChild(coverflow);

        }

    }

}

File Coverflow.AS

package {

	////////////////////////////////////////////
	// IMPORTS
	////////////////////////////////////////////

	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.display.MovieClip;
	import flash.display.BlendMode;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.events.IOErrorEvent;
	import flash.geom.Matrix;
	import flash.geom.Rectangle;
	import flash.geom.ColorTransform;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.net.navigateToURL;
	import flash.display.Stage;
	import flash.utils.setTimeout;

	//TweenLite - Tweening Engine - SOURCE: http://blog.greensock.com/tweenliteas3/
	import com.greensock.*;
	import com.greensock.easing.*;

	public class Coverflow extends Sprite {

		////////////////////////////////////////////
		// VARIABLES
		////////////////////////////////////////////

		// size of the stage
		private var sw:Number;
		private var sh:Number;

		// padding between each cover, can be customed via xml
		private var coverflowSpacing:Number=30;

		// transition time for movement
		private var transitionTime:Number=0.75;

		// the center of the stage
		private var centerX:Number;
		private var centerY:Number;

		// store each image cover's instance
		private var coverArray:Array=new Array();

		// title of each image
		private var coverLabel:CoverflowTitle = new CoverflowTitle();

		// the slider under the image cover
		private var coverSlider:Scrollbar;

		// how many image covers
		private var coverflowItemsTotal:Number;

		// how to open the link
		private var _target:String;

		// size of the image cover
		private var coverflowImageWidth:Number;

		private var coverflowImageHeight:Number;

		//Holds the objects in the data array
		private var _data:Array = new Array();

		// the y position of the item's title
		private var coverLabelPositionY:Number;

		//Z Position of Current CoverflowItem
		private var centerCoverflowZPosition:Number=-125;

		// display the middle of the cover or not
		private var startIndexInCenter:Boolean=true;

		// which cover to display in the beginning
		private var startIndex:Number=0;

		// the slide's Y position
		private var coverSlidePositionY:Number;

		//Holder for current CoverflowItem
		private var _currentCover:Number;

		//CoverflowItem Container
		private var coverflowItemContainer:Sprite = new Sprite();

		//XML Loading
		private var coverflowXMLLoader:URLLoader;

		//XML
		private var coverflowXML:XML;

		// the image cover's white border padding
		private var padding:Number=4;

		// stage reference
		private var _stage:Stage;

		//reflection
		private var reflection:Reflect;

		//Reflection Properties
		private var reflectionAlpha:Number;

		private var reflectionRatio:Number;

		private var reflectionDistance:Number;

		private var reflectionUpdateTime:Number;

		private var reflectionDropoff:Number;

		////////////////////////////////////////////
		// CONSTRUCTOR - INITIAL ACTIONS
		////////////////////////////////////////////
		public function Coverflow(_width:Number, _height:Number, __stage:Stage = null):void {
			_stage=__stage;
			sw=_width;
			sh=_height;
			centerX=_width>>1;
			centerY=(_height>>1) - 20;
			loadXML();

			if (_stage) {
				_stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
			}
		}
		////////////////////////////////////////////
		// FUNCTIONS
		////////////////////////////////////////////

		private function keyDownHandler(e:KeyboardEvent):void {
			if (e.keyCode==37||e.keyCode==74) {
				clickPre();
			}
			if (e.keyCode==39||e.keyCode==75) {
				clickNext();
			}
			// 72 stand for "H" key, 191 stand for "?" key
			if (e.keyCode==72||e.keyCode==191) {

			}
		}

		// display the previous image
		private function clickPre(e:Event=null):void {
			_currentCover--;
			if (_currentCover<0) {
				_currentCover=coverflowItemsTotal-1;
			}
			coverSlider.value=_currentCover;
			gotoCoverflowItem(_currentCover);
		}

		// display the next image
		private function clickNext(e:Event=null):void {
			_currentCover++;
			if (_currentCover>coverflowItemsTotal-1) {
				_currentCover=0;
			}
			coverSlider.value=_currentCover;
			gotoCoverflowItem(_currentCover);
		}

		// loading the XML
		private function loadXML():void {
			// loading the cover xml here
			coverflowXMLLoader = new URLLoader();
			coverflowXMLLoader.load(new URLRequest("xml/data.xml"));
			coverflowXMLLoader.addEventListener(Event.COMPLETE, coverflowXMLLoader_Complete);
			coverflowXMLLoader.addEventListener(IOErrorEvent.IO_ERROR, coverflowXMLLoader_IOError);

		}

		// parse the XML
		private function coverflowXMLLoader_Complete(e:Event):void {
			coverflowXML=new XML(e.target.data);
			coverflowItemsTotal=coverflowXML.cover.length();
			coverflowSpacing=Number(coverflowXML.@coverflowSpacing);
			coverflowImageWidth=Number(coverflowXML.@width);
			coverflowImageHeight=Number(coverflowXML.@height);
			coverLabelPositionY=Number(coverflowXML.@coverLabelPositionY);
			coverSlidePositionY=Number(coverflowXML.@coverSlidePositionY);
			transitionTime=Number(coverflowXML.@transitionTime);
			centerCoverflowZPosition=Number(coverflowXML.@centerCoverflowZPosition);

			//Reflection Attributes
			reflectionAlpha=Number(coverflowXML.@reflectionAlpha);
			reflectionRatio=Number(coverflowXML.@reflectionRatio);
			reflectionDistance=Number(coverflowXML.@reflectionDistance);
			reflectionUpdateTime=Number(coverflowXML.@reflectionUpdateTime);
			reflectionDropoff=Number(coverflowXML.@reflectionDropoff);

			startIndex=Number(coverflowXML.@startIndex);
			startIndexInCenter = (coverflowXML.@startIndexInCenter.toLowerCase().toString()=="yes");
			_target=coverflowXML.@target.toString();

			for (var i=0; i<coverflowItemsTotal; i++) {

				//Make An Object To Hold Values
				var _obj:Object = new Object();

				//Set Values To Object from XML for each CoverflowItem
				_obj.image = (coverflowXML.cover[i].@img.toString());
				_obj.title = (coverflowXML.cover[i].@title.toString());
				_obj.link = (coverflowXML.cover[i].@link.toString());
				_data[i] = _obj;

			}
			loadCover();
		}

		private function coverflowXMLLoader_IOError(event:IOErrorEvent):void {
			trace("Coverflow XML Load Error: "+ event);
		}

		// load the image cover when xml is loaded
		private function loadCover():void {

			for (var i:int = 0; i < coverflowItemsTotal; i++) {
				var cover:Sprite=createCover(i,_data[i].image);
				coverArray[i]=cover;
				cover.y=centerY;
				cover.z=0;
				coverflowItemContainer.addChild(cover);
			}

			if (startIndexInCenter) {
				startIndex=coverArray.length>>1;
				gotoCoverflowItem(startIndex);

			} else {

				gotoCoverflowItem(startIndex);

			}
			_currentCover=startIndex;
			coverSlider=new Scrollbar(coverflowItemsTotal,_stage);
			coverSlider.value=startIndex;
			coverSlider.x = (_stage.stageWidth/2) - (coverSlider.width/2);
			coverSlider.y=_stage.stageHeight-40;
			coverSlider.addEventListener("UPDATE", coverSlider_Update);
			coverSlider.addEventListener("PREVIOUS", coverSlider_Previous);
			coverSlider.addEventListener("NEXT", coverSlider_Next);
			addChild(coverSlider);

			//coverLabel.x = (sw - coverLabel.width)>>1;
			coverLabel.x = (_stage.stageWidth/2) - (coverLabel.width/2);
			coverLabel.y=coverLabelPositionY;
			addChild(coverLabel);

			addChild(coverSlider);
			addChild(coverLabel);

		}

		private function coverSlider_Update(e:Event):void {
			var value:Number=(coverSlider.value);
			gotoCoverflowItem(value);
			e.stopPropagation();
		}

		private function coverSlider_Previous(e:Event):void {
			clickPre();
		}

		private function coverSlider_Next(e:Event):void {
			clickNext();
		}

		// move to a certain cover via number
		private function gotoCoverflowItem(n:int):void {
			_currentCover=n;
			reOrderCover(n);
			if (coverSlider) {
				coverSlider.value=n;
			}
		}

		private function cover_Selected(event:CoverflowItemEvent):void {

			var currentCover:uint=event.data.id;

			if (coverArray[currentCover].rotationY==0) {
				try {
					// open the link if user click the cover in the middle again
					if (_data[currentCover].link!="") {
						navigateToURL(new URLRequest(_data[currentCover].link), _target);
					}

				} catch (e:Error) {
					//
				}

			} else {
				gotoCoverflowItem(currentCover);

			}

		}

		// change each cover's position and rotation
		private function reOrderCover(currentCover:uint):void {
			for (var i:uint = 0, len:uint = coverArray.length; i < len; i++) {
				var cover:Sprite=coverArray[i];

				if (i<currentCover) {
					//Left Side
					TweenLite.to(cover, transitionTime, {x:(centerX - (currentCover - i) * coverflowSpacing - coverflowImageWidth/2), z:(coverflowImageWidth/2), rotationY:-65});
				} else if (i > currentCover) {
					//Right Side
					TweenLite.to(cover, transitionTime, {x:(centerX + (i - currentCover) * coverflowSpacing + coverflowImageWidth/2), z:(coverflowImageWidth/2), rotationY:65});
				} else {
					//Center Coverflow
					TweenLite.to(cover, transitionTime, {x:centerX, z:centerCoverflowZPosition, rotationY:0});

					//Label Handling
					coverLabel._text.text=_data[i].title;
					coverLabel.alpha=0;
					TweenLite.to(coverLabel, 0.75, {alpha:1,delay:0.2});

				}
			}
			for (i = 0; i < currentCover; i++) {
				addChild(coverArray[i]);
			}
			for (i = coverArray.length - 1; i > currentCover; i--) {
				addChild(coverArray[i]);
			}

			addChild(coverArray[currentCover]);
			if (coverSlider) {
				addChild(coverSlider);
				addChild(coverLabel);
			}
		}

		//Create CoverflowItem and Set Data To It
		private function createCover(num:uint, url:String):Sprite {

			//Setup Data
			var _data:Object = new Object();
			_data.id=num;

			//Create CoverflowItem
			var cover:CoverflowItem=new CoverflowItem(_data);

			//Listen for Click
			cover.addEventListener(CoverflowItemEvent.COVERFLOWITEM_SELECTED, cover_Selected);

			//Set Some Values
			cover.name=num.toString();
			cover.image=url;
			cover.padding=padding;
			cover.imageWidth=coverflowImageWidth;
			cover.imageHeight=coverflowImageHeight;
			cover.setReflection(reflectionAlpha, reflectionRatio, reflectionDistance, reflectionUpdateTime, reflectionDropoff);

			//Put CoverflowItem in Sprite Container
			var coverItem:Sprite = new Sprite();
			cover.x=- coverflowImageWidth/2-padding;
			cover.y=- coverflowImageHeight/2-padding;
			coverItem.addChild(cover);
			coverItem.name=num.toString();

			return coverItem;
		}

	}
}

Flash is a popular development tool for now a day webdesign and become the standard tools on web development.

As you are a webdesigner, you should learn it or you already learn it. But, since the introduce o f Actionscript 3.0, some people may stuck with the new programming language because it is well structured and more strict. You need more effort to start learning and master it.

But ActionScript 3.0 is a must for many jobs now. So,  i Introduce some resource which help you to get start with Action Script 3.0.

Ntt.cc – Beginning Action Script 3.0

Build the first ActionScript project
Variables
Data type
Literal and Constant

Flash Speaks ActionScript

Moving From AS2 to AS3: Handling Depths

Instance names and code hinting – Tips & Tricks

ActionScript 3 Reference for iPhone

I will contiune to update this post for more resources.

So, we place this code in the web configuration file. Configuration files are used to store information about application settings.

These files are also referred to as Application Configuration Files and provide security to the data contained in them.

We place the connection string in App.config file for windows applications and web.config file for web applications.
-web.config is created automatically by VS.NET when you create any web project.

-When you compile the web application, web.config is NOT renamed or copied to the BIN folder.

-web.config has several default entries in it to support web/IIS configuration & security.

-You can add the <appSettings>section in the web.config and add your key/value pairs in that section.

-You can have separate web.config files for each directory in your web application, in addition to the one in the root. For each web page, by default, system will look for a web.config in the same folder as the page and if not found, then looks in the parent folder. The web.config file with the connection string will have the following content.

  < ?xml version="1.0"?>
  < configuration>
	< appSettings>
		< add key="DatabasePath"
		  value="server=localhost;
		database=FinAccounting;
		Integrated Security=true;"/>
	< /appSettings>
  < /configuration>

For the web.config file to be read, place the following code in your web application as shown below.

  Imports System.Configuration
  Imports System.Data.SqlClient

  Partial Class _Default
    Inherits System.Web.UI.Page

    Dim dbpath As String
	 = ConfigurationSettings.AppSettings("DatabasePath")
    Dim str_sql_user_select As String
	 = "SELECT * FROM AccountsTable"
    Dim comUserSelect As SqlCommand
    Dim myreader As SqlDataReader

    Protected Sub Page_Load
	(ByVal sender As Object, ByVal e As System.EventArgs)
	  Handles Me.Load

        Dim myConnection As SqlConnection
		 = New SqlConnection(dbpath)
        comUserSelect = New
		 SqlCommand(str_sql_user_select, myConnection)
        TextBox1.Text = ""
        TextBox2.Text = ""
        myConnection.Open()
        myreader = comUserSelect.ExecuteReader
        If (myreader.Read = True) Then
            TextBox1.Text = myreader(0)
            TextBox2.Text = myreader(1)
        Else
            MsgBox("You have reached eof")
        End If

    End Sub
  End Class

However, because Microsoft isn’t providing technical support for the Beta, I strongly recommend that only experienced computer users sign up. How experienced? At minimum, you should be comfortable backing up a computer, formatting a hard drive, burning an ISO file to DVD, and installing an operating system from scratch. You should also be comfortable troubleshooting problems on your own. If you’ve not used beta software before, please read the warning messages and make sure you know what you’re getting into.

Windows release candidate is available free to everyone form http://www.microsoft.com/windows/windows-7/download.aspx
and is licensed including a free KEY number, which will continue to work until 1st July 2010. After which you will have to remove it.

PLEASE NOTE at this time of writing, there is no easy upgrade from the free RC1 to the full purchaced version of windows 7.

You will have to do a full reinstall sometime before July 2010.

Windows 7 provides an improved task bar and full-screen previews. Jump Lists put the documents you want handy and the ones you’ve used recently a couple clicks away. Desktop enhancements simplify how you work with the windows on your desktop. You’ll have more intuitive ways to open, close, resize, and arrange them. Introduced with Windows Vista, Windows Search helps you find virtually anything on your PC quickly and easily. Windows 7 also makes search results more relevant and easier to understand. Available now, Internet Explorer 8 helps you do what you want online, faster. With Windows 7, you’ll use a single Devices and Printers screen to connect, manage, and use whatever printers, phones, and other devices you have on-hand.

Crisp, clean, speedy, and highly-usable: It’s the Windows 7 release candidate!
This is possibly the best release of windows ever.

In general terms, we can already see major improvements. Looked at across the span of these two preceding releases, the Windows 7 RC is a shining star of performance, usability, stability, and maturity. Yes, there are teething pains, bits of inconsistency that will drive purists nuts (for example, Microsoft can’t seem to settle on a single spelling or capitalization scheme for the HomeGroup feature).

But Windows 7, in release candidate guise, is already a towering achievement that casts Windows Vista immediately in its shadow. I’ve often opined that the true measure of any OS is how painful it renders using its predecessor. And now, several long months after moving to Windows 7 full time, I can honestly state that Windows 7 makes Windows Vista look like a bad dream by comparison. Among many other things, Vista is sluggish compared to 7, and it doesn’t remember window sizes and customization styles. (Windows XP, which lacks so many Vista/7-era features that it’s painful to even discuss, fares even worse by comparison, except in the performance category.)

So here we are on the cusp of a new Windows. A Windows that is faster than its predecessor and runs just fine on low-end netbook hardware. It’s more compatible with both hardware and software, especially when you factor in the exciting new XP Mode feature. It’s more secure and reliable. And, most important from an end user perspective, it’s more usable. Now, more than ever, it seems like Microsoft has examined every single nhook and cranny in this OS and has tweaked and gussied up virtually all of it. Some of the user experience changes, like the new taskbar, are immediately obvious on first boot, while other more minor changes simply become apparent over time in the using. There’s a happy change around every corner, it seems.

This, then, is the Windows 7 release candidate. And while Microsoft continues to promise only that it will ship Windows 7 sometime by early 2010, I’m here to tell you that Microsoft’s public schedule is almost comically conservative. The Windows 7 RC could literally ship as the final version of the product. There are mitigating factors that will prevent that from happening–persistent rumors of a new UI skin among them–

If you build websites that require users to register it’s your responsibility to keep their passwords safe. And if you’re storing the passwords in plain text then you’re not doing your job properly. What happens if your database is stolen? It’s not just your site that is compromised. Since most users use the same password on multiple sites, all those sites have also been compromised.

No data is entirely secure, and if anyone else has access to your webserver (the company managing the server for you?) or your database (the company storing the backups?) then you don’t have total control over the security anyway. So there’s always a chance your database could be stolen. So, the simple rule is to hash your passwords.

Hashing

A hash is a string derived from the original password via a one-way algorithm. In other words, it’s easy to create the hash from the original, but harder (when used for security, ideally impossible) to create the original from the hash. You store the hash in the database, and when the user signs-in you hash the password they sign-in with and compare it to the hash in the database. Something like this

$userPasswordHash == sha1( $_POST['password'] )

That way, you never store the user’s password.

There are a number of hashing algorithms in PHP, of which md5 and sha1 are the most commonly used. Unfortunately, neither is as secure as they were once thought to be. It would be better to use a more secure hash, and if you have the Hash engine in your PHP installation (included by default since PHP 5.1.2) then you have access to many more algorithms. So a better example would be

The Code Bit

 $userPassWordhash == hash( 'whirlpool', $_POST['password'] )

To see a full lis of hashing algorithms in PHP use this code:

<?PHP
$algos = hash_algos();
$word="hash me!";

foreach($algos as $algo)
{
    echo "Algorithm: ".$algo.": "."<br>";
    echo "Hash: ".hash($algo, $word)."<br>";
    echo "String Length: ".strlen(hash($algo, $word))."<br>";
    echo "<hr>";
}
?>

Sample output:

Algorithm: md5:
Hash: 88a568e86f4ffbb458bb4ebfe3df6e2e
String Length: 32

Algorithm: sha1:
Hash: 0195580447ce25847a2954422de4b5f7d01bc143
String Length: 40

Algorithm: whirlpool:
Hash: a4718a7a9ec6eb2bb8b4813961fd8ab0104a23a3f3ec677
4117dd67b8665a27eaea998bc85b69cfb74ac2cdb49a92b
f36d9beb22ece6fd934b315e40267195d7
String Length: 128

How to use the in checking password script:

<?php
session_start();
//connect to server and select database
//Host , User, Password, Database Name
$mysqli = mysqli_connect("localhost", "user", "dbpassword", "dbname");

$username = stripslashes(trim($_POST["username"]));
$password = stripslashes(hash('whirlpool',$_POST[password]));

//create and issue the query
$sql = "SELECT username FROM users WHERE username = '".$username."' AND password = '".$password."'";
$result = mysqli_query($mysqli, $sql) or die(mysqli_error($mysqli));
.
.
.
?>

Rainbow tables

But there’s another problem. Once your database is stolen, the thief has plenty of time to crack the passwords using a simple Rainbow Table attack. This involves creating a large selection of hashes based on likely passwords (e.g. every word in the dictionary) and then comparing the hashes with the hashes in your database. Within an day or so, half the passwords in your database will probably have been cracked.

To prevent this you should salt each password by adding a random string to it (called a salt or nonce). The time consuming part of a rainbow table attack is building the dictionary of hashes. Adding a random salt to the password means the thief has to build a whole new dictionary of hashes for each salt, making a rainbow table attack too time consuming to be viable. Each password should have a different salt, and the salt doesn’t even need to be secret.

The Code bit

The code below demonstrate hone way you can add salt to a password hash. Copy code between <?php … ?> tags to paste in to a new php file to try.

<?php
// get a new salt - 8 hexadecimal characters long
// current PHP installations should not exceed 8 characters
// on dechex( mt_rand() )
// but we future proof it anyway with substr()
function getPasswordSalt()
{
    return substr( str_pad( dechex( mt_rand() ), 8, '0', STR_PAD_LEFT ), -8 );
}
// calculate the hash from a salt and a password
function getSaltedPasswordHash( $salt, $password )
{
    return $salt . ( hash( 'whirlpool', $salt.$password.$salt ) );
}

$salt = getPasswordSalt();
$password="Hash me!";
$standardHash = hash('whirlpool',$password);
$saltedHash=getSaltedPasswordHash( $salt, $password );

echo "Password: ".$password."<br/>";
echo "Salt: ".$salt."<br/>";

echo "Standard Hash: ".$standardHash."<br/>";
echo " Salted Hash : ".$saltedHash."<br/>";

?>

So, for secure passwords use

// get a new salt - 8 hexadecimal characters long
// current PHP installations should not exceed 8 characters
// on dechex( mt_rand() )
// but we future proof it anyway with substr()
function getPasswordSalt()
{
    return substr( str_pad( dechex( mt_rand() ), 8, '0', STR_PAD_LEFT ), -8 );
}

// calculate the hash from a salt and a password
function getPasswordHash( $salt, $password )
{
    return $salt . ( hash( 'whirlpool', $salt . $password ) );
}

// compare a password to a hash
function comparePassword( $password, $hash )
{
    $salt = substr( $hash, 0, 8 );
    return $hash == getPasswordHash( $salt, $password );
}

// get a new hash for a password
$hash = getPasswordHash( getPasswordSalt(), $password );

You don’t have to attach the salt to the hash, you can instead store them separately within the database, but I like keeping them together in a single string. Equally, the salt needn’t be in hexadecimal, but I like the symmetry with the hexadecimal hash.

Finally, as Thomas Ptacek points out, you don’t want the fastest hash algorithm in the world for this – a fast algorithm is more useful to an attacker than it is to you.