Suppose we need to convert 14 – 100 as 0% – 100%

X may be any input from 14 to 100, and the calculation is

((X – 14)/(100 – 14)) * 100

This might be usefull in scrollBar calculations or when we want to restrict size of Image and so on.

But the For each can be used only when we need the value of an object not the key, loop is bit fast than for in.

Using for in loop we can get the value, key pair of an object.

Sample For in loop:

for(var item:* in object)
trace(item,object[item]);

Sample For each loop:

for(var item:* in object)
trace(item);

Note: Above outputs only the value not the Object key.

1. Open new document of any size and create a shape that going to be a button. The below is the shape I have created.

2. Select some irregular portion of the shape which going to be the higlight area in button. Copy and paste the highligt area to new Layer.

3. Next Apply white to alpha gradient to shape.

Below is the gradient setting I applied.

4. Select the highlight area and scale it by pressing Ctrl + alt + s and scale it down by 97%

Here is the final button with dropshadow filter effect

Download the Final Output Files.

mx_internal is a way to access variables that are hidden but available to use for developers.

we can use the variables in the code before that we need to import.

import mx.core.mx_internal;

< ?xml version="1.0" encoding="utf-8"?>


	
		< ![CDATA[
			import mx.controls.TextInput;
			import mx.core.mx_internal;

			protected function initButton():void
			{
				var tf:TextField = bt.mx_internal::getTextField()
				tf.visible = false;
			}
		]]>
	
	

Here we are accesing the TextField from button and making it invisible. So this is just an easy way to access all the variables of a component.

Note:
Adobe uses the mx_internal namespace to mark things that may change in future versions of the framework , so you have to use it at your own risk.

Difficulty:
To Beginners

Final Output File:

Open New Document in Flash using File -> New or Ctrl + N

Change Background color(#090D11) of the document By pressing Ctrl + J or from Properties Dialog box

Create A oval shape With alpha 1% and of any dimension

Convert the Oval Shape to MovieClip by selecting the shape in stage and select Modify-> convert to symbol.. from Menu

Next double click to edit the MovieClip. Create a guide layer for layer1 and draw an oval outline.
Note: To draw an outlite, create an oval shape and delete the fill.

Next Animate the oval shape on the layer 1, use many frames to move the object very slow.

Make sure the starting point and end point are the same in animation (Download and Open Steps_Middle.fla)

Duplicate the animate shape and resize them using transform tool.

Final file is ready.

So before starting the tutorial download a nice panoramic picture from Internet. Rename the file as ‘panorama.jpg’

Difficulty:
Beginner to Intermediate Actionscript knowledge.

At the End of this tutorial we will know how to use,

• Ternary operator in ActionScript.
• HitTestPoint in ActionScript

Using Ternary Operator:

The ternary operator “?:” is shorter version of “IF Else”  statement used to evaluate a condition is either true of false, The syntax for ternary operator is

(Condition)?if condition is true : if condition is false;

We can write the above for IF ELSE
if(Condition)
{
If Condition is true;
}else
{
If Condition is false;
}

Using hitTestPoint Method of DisplayObject:

hitTestPointMethod used to test whether a point hits over a shape even it is irregular one.

Syntax for hitTestPoint:

displayObject.hitTestPoint(point.x, point.y, true|false);

Note: Supply true if you want to test against actual shape and false to test against the bounding box.

Demo File:
Below is the output file of this Actionscript panoramic viewer.

Image from acojon.deviantart.com

Create a new Flash File( Actionscript 3.0 ) save it on disk, where the panaromic picture got saved.

Change the Document Size by pressing Ctrl + J , Set dimension to 500 px X 500 px

Create a rectangle shape of above dimensions with x,y = 0,0 and convert it to MovieClip.

Give instance name for the MovieClip as “touchMC”

Next, We need to load the Panorama image in to Flash. We can load external files into Flash using Loader Class.

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.load(new URLRequest("panorama.jpg"));

When the image got loaded in to Flash completeHandler will be triggered. Where we are duplicating the loaded image to create panoramic effect using Bitmap Class.

var image1:Bitmap = (Bitmap)(loader.content);
	var image2:Bitmap = new Bitmap(image1.bitmapData.clone());
	holder_mc.addChild(image1);
	holder_mc.addChild(image2);
	addChild(holder_mc);

Finally we are adding ENTER_FRAME event to stage, which will be listened by PanaromaMove function.

stage.addEventListener(Event.ENTER_FRAME, PanaromaMove);

In ENTER_FRAME function we are checking whether the Image Pans across right limit or left limit and adusting it accordingly to the stage.

touchMC.hitTestPoint(this.mouseX, this.mouseY) == true? _flag = true:_flag = false;

	if(_flag)
	{

		//this.mouseX>stage.stageWidth/2 ? holder_mc.x -= 10 : holder_mc.x += 10;
		this.mouseX>stage.stageWidth/2 ? holder_mc.x += Math.ceil((((stage.stageWidth/2)- this.mouseX)*.01)*_speed): holder_mc.x -=Math.floor(((this.mouseX-(stage.stageWidth/2))*.01)*_speed);

		if (holder_mc.x>0)
			holder_mc.x= -holder_mc.width /2;
		else if (holder_mc.x < stage.stageWidth - holder_mc.width)
			holder_mc.x= stage.stageWidth - holder_mc.width/2 ;

	}

Entire code for Reference.

import flash.display.BitmapData;
import flash.geom.Rectangle;

var _flag:Boolean = false;
var _speed:Number = 4;

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.load(new URLRequest("panorama.jpg"));

var holder_mc:Sprite = new Sprite();

function completeHandler(event:Event):void{

	var image1:Bitmap = (Bitmap)(loader.content);
	var image2:Bitmap = new Bitmap(image1.bitmapData.clone());
	holder_mc.addChild(image1);
	holder_mc.addChild(image2);
	image1.x = 0;
	image2.x = image1.width;

	addChild(holder_mc);
	holder_mc.x = 0;

	stage.addEventListener(Event.ENTER_FRAME, PanaromaMove);
}
function PanaromaMove(e:Event):void
{

	touchMC.hitTestPoint(this.mouseX, this.mouseY) == true? _flag = true:_flag = false;

	if(_flag)
	{

		//this.mouseX>stage.stageWidth/2 ? holder_mc.x -= 10 : holder_mc.x += 10;
		this.mouseX>stage.stageWidth/2 ? holder_mc.x += Math.ceil((((stage.stageWidth/2)- this.mouseX)*.01)*_speed): holder_mc.x -=Math.floor(((this.mouseX-(stage.stageWidth/2))*.01)*_speed);

		if (holder_mc.x>0)
			holder_mc.x= -holder_mc.width /2;
		else if (holder_mc.x < stage.stageWidth - holder_mc.width)
			holder_mc.x= stage.stageWidth - holder_mc.width/2 ;

	}
}

In this tutorial we learnt some basics of Flash ActionScript3.0 and we have created Panaromic viewer in AS3

Download the Final Output Files.

Difficulty of Use:
Intermediate to advanced users.

Sample component1:

Code for Sample1:

import com.Designscripting.Components.ICheck;

	var _icheck:CheckButton = new CheckButton();
		_icheck.index = 1;
		_icheck.x = _icheck.y = 60;
		_icheck._txt.text = "SampleData 1";
		_icheck._btn.addEventListener(MouseEvent.CLICK, buttonClicked);
		addChild(_icheck);

function buttonClicked(e:MouseEvent):void
{
	//Code to open URL in _blank window.
	navigateToURL( new URLRequest("http://www.designscripting.com/"), "_blank");
	ICheck.setItem(e.target.parent);
}

Here we are importing the custom classes and creating an instance for CheckButton and adding it to display list.
Later on selecting the checkbox we are launching the URL:designscripting.com

Some Useful Functions of the Component:

• setItem()
• getSelectedIndices()
• getSelectedData()
• isItemSelected()

setItem: Static method to set the checkbox item selected.

getSelectedIndices: Static method to return selected index of checkbox, return type Array.

getSelectedData: Static method to return selected data of checkbox, return type Array.

isItemSelected: Static method to return checkbox is selected or not. return type Boolean.

Sample Component 2:

Code for Sample2:

import com.Designscripting.Components.ICheck;

var verticalSpacing:Number = 50;

for(var count:int =0; count<3; count++)
{
	var _icheck:CheckButton = new CheckButton();
	_icheck.x = 40
	_icheck.y = 70+count*verticalSpacing;
	_icheck.index = count;
	_icheck._txt.text = "SampleData "+count;
	_icheck._btn.addEventListener(MouseEvent.CLICK, buttonClicked);
	addChild(_icheck);
}

function buttonClicked(e:MouseEvent):void
{
	ICheck.setItem(e.target.parent);
}
resultMc.buttonMode = clearMc.buttonMode = true;
resultMc.addEventListener(MouseEvent.CLICK, function(e:MouseEvent){
	_resultTxt.text = String("Selected Item\n"+ICheck.getSelectedIndices())
	trace(ICheck.getSelectedData())
	})
clearMc.addEventListener(MouseEvent.CLICK, function(e:MouseEvent){ICheck.reset();_resultTxt.text = ""})

Find the source files attached.

Here we are going to use For each statement and iterate through the nodes to access information intead of using index values.

Here is XMLManager class to load XML without pain.

Before proceeding we must know the difference between XML and XMLList.

XML:
XML is a single or collection of XMLNodes with in a rootnode.

XML example:

Note:
Here the root node is Library which contains Book Nodes.

XMLList:
A collection of XMLNode without root node.

XMLList example:

Next we will see how to interate through XMLNodes.

var _xml:XML =

var _xmlList:XMLList = _xml.Book;

for each(var node in _xmlList)
trace(node.attribute('id'))

There may be situation that the number of attributes with in a node may not be know. So we should loop through the all the attributes of a XMLNode.

var _xml:XML =

var _xmlList:XMLList = _xml.Book;
trace("Attribute::Value");
trace("----------------")
for each(var node in _xmlList){
		for each(var attribute in node.attributes())
		trace(attribute.name()+"::"+attribute)
		trace("********Node End*********")
	}

Output:

Attribute::Value
—————-
id::1
name::Book1
author::XXXXXX
category::YYYYYY
********Node End*********
id::2
name::Book2
author::AAAAAA
category::ZZZZZZ
********Node End*********

Cheers :p

Flash Player 10.1 is also designed to take advantage of media delivery with HTTP streaming, including integration of content protection powered by Adobe Flash Access 2.0. This initiative, codenamed Zeri, will be an open format based on industry standards and will provide content publishers, distributors and partners the tools they need to utilize HTTP infrastructures for high-quality media delivery in Flash Player 10.1 and Adobe Air 2.0 software.

1. Open new File Flash CS4.
2. Select File > Publish Settings or Press Ctrl + Shift + F12, Publish Settings window will Popup.
3. Click on Settings… and Select Library path

4. Click on Plus Symbol to add SWC path or File.

5. Copy and Paste the Flex SWC files Path.

For example:C:\Program Files\Adobe\Adobe Flash Builder Beta 2\sdks\4.0.0\frameworks\libs

Thats it now we can compile SWC files created for Flex Applications.