Assignment : Interactive dynamic tabbed menu

We had to design a tabbed menu keeping following things in mind.

• Trace the design close to the layout shown in reference.
• Menu will be created dynamically from an external XML file and will accept all data like number of tabs and label for each tab etc from XML.
• Each tab should adjust its width automatically as per the label’s size.
• If tabs are taking more space than the defined width, it should display two small arrows on both the sides allowing scroll/pan the menu.
• Selected menu should be highlighted as shown in reference.
• Please call a function by passing some id for each tabs, for example call showSection(id:Number).
• Use ActionScript 3.0

I just tried it creating a rough class. It may be helpful to anyone learning AS3.0.

Here I am making one "TabControls" class of which objects could be created. I am using some graphics from library. So i am attaching one fla below which carries all the required symbols.

http://www.box.net/shared/yf6net7ly7

The designed class also takes one parameter for maskWidth. It limits the width to which the tab control would be visible.

something like

var myTab:TabControls = new TabControls(500); addChild(myTab);

Lets take a look @ the code of the class.

TabControls.as

package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import flash.utils.Timer;
import flash.events.TimerEvent;

public class TabControls extends Sprite
{
private var _urlReq:URLRequest;
private var _urlLoad:URLLoader;
private var _noOfTabs:Number;
private var _externalXML:XML;
private var _tabArray:Array = new Array();
private var _objtab:Array = new Array;
private var _gridX:Number = 50;
private var _gridY:Number = 100;
private var _tabClip:MovieClip = new MovieClip();
private var _clickColorCode:uint = 0xff0000;
private var _defaultColorCode:uint = 0x666666;

private var _maskBground:Sprite = new Sprite();
private var _maskw:Number;
private var _maskh:Number = 28;

private var _leftArrow:leftarw = new leftarw();
private var _rightArrow:rightarw = new rightarw();

private var myTf:TextField = new TextField();
private var _myTimer:Timer;
private var _moveDirection:String;

public function TabControls (maskwidth:Number)
{
_maskw = maskwidth;
init ();
}
public function init ()
{
_urlReq = new URLRequest("tabData.xml");
_urlLoad = new URLLoader(_urlReq);
_urlLoad.addEventListener (Event.COMPLETE,onComplete);
addChild (myTf);
_myTimer = new Timer(100, 0);
_myTimer.addEventListener("timer", timerHandler);
}
public function onComplete (e:Event):void
{
_externalXML = new XML(_urlLoad.data);
_noOfTabs = _externalXML.tabDesc.attribute("nooftabs");
for (var k=0; k<_externalxml.tabs.length(); xx="0;" mousechildren =" false;" buttonmode="true;" name = "tab" text =" _tabArray[xx];" wordwrap="false;" autosize =" TextFieldAutoSize.LEFT;" width =" tabObj.tabText.textWidth" tempx =" 0;" tempy =" _gridY;" jj="0;" x =" tempX;" y =" tempY;" x =" _gridX" uint =" _tabClip.numChildren" ii="0;" colortransform =" _objtab[ii].tabBg.bgColor.transform.colorTransform;" color =" _defaultColorCode;" colortransform =" newColorTransform1;" colortransform =" _objtab[clickCode].tabBg.bgColor.transform.colorTransform;" color =" _clickColorCode;" colortransform =" newColorTransform;" x =" _gridX-2;" y =" _gridY-2;" mask =" _maskBground;" buttonmode =" true;" buttonmode =" true;" x =" _maskBground.x" y =" _maskBground.y" x =" _maskBground.x+_maskBground.width" y =" _maskBground.y" x =" _maskBground.x" y =" _maskBground.y" _movedirection = "right" _movedirection = "left" autosize =" TextFieldAutoSize.LEFT;" text =" _tabArray[id];" _movedirection ="="" x =" _tabClip.x" _movedirection ="=""> (_maskBground.width-_tabClip.width+_gridX))
{
_tabClip.x = _tabClip.x - 10;
}
}
}
}
}

he constructor of the class transfers the parameter for maskwidth to a local private var.

As you can notice the init() method of the class is loading all the XML and then latter "onComplete" event method is used to populate the array with values reading it from the XML.

The method "generateTabs()" create instance of "tabBox" a linked class found in the library of the fla linked above in article.

public function generateTabs()

{

for(var xx=0;xx<_tabarray.length;xx++)

{

_objtab[xx] = new tabBox();

_objtab[xx].name = "tab"+xx;

_objtab[xx].tabText.text = _tabArray[xx];

formatTab(_objtab[xx]);

}

addTabs();

}

The method "formatTab()" was required so that the width of the tabs could be dynamically be controlled.

tabObj.tabText.autoSize = TextFieldAutoSize.LEFT;

The autosizing code and then calculating it with the background clip allows us the reach the goal.

Finally "addTabs()" method allows us to add the tabs..on the stage.

The method arranges in such a way that it views as tabs. The "addMasktoTabs()" method has been added to limit the view area of the tabControl. It uses the same "maskwidth" parameter which we passed to the constructor of the class.

One very important method is "onRollTab()"

public function onRollTab(e:MouseEvent):void

{

var topPosition:uint = _tabClip.numChildren - 1;

_tabClip.setChildIndex(_objtab[e.currentTarget.name.substr(3,2)], topPosition);

}

This method is basically doing the depth management of the tabs. It is checking all the childs in the MovieClip container "_tabClip" and then swapping the rolledover tab to highest index.

All associated files can be downloaded from below link.

http://www.box.net/shared/r9qsy1h0kk

-Nitin

duplicateDisplayObject (Duplicate Clip) using Senocular Class

I was just trying to duplicate a MovieClip when i got this a very good class from senocular library.

http://www.senocular.com/flash/actionscript.php?file=ActionScript_3.0/com/senocular/display/duplicateDisplayObject.as

This class helps in duplicating the clips.

Here in example i have created a circle Sprite and i am duplicating it with the senoclular class.

The basic idea that i felt was that, you can duplicate the object after it is added to stage. Please reply me if anyone of you get any understanding of it. I am new to AS3.0 n hv just started learning.

Consider a simple class. This could be anything but for simplicity i am taking it.

doubleRed.as

package {

import flash.display.Graphics;

import flash.display.Sprite;

import flash.display.MovieClip;

public class doubleRed extends Sprite{

public function doubleRed()

{

graphics.beginFill(0x00ff00);

graphics.drawCircle(50,50,15);

graphics.endFill();

}

}

}

Look @ this Flash File code.

var db:doubleRed = new doubleRed();

addChild(db);

var newInstance:DisplayObject = duplicateDisplayObject(db, true);

newInstance.x = 200;

newInstance.addEventListener(MouseEvent.MOUSE_DOWN,dragme);

newInstance.addEventListener(MouseEvent.MOUSE_UP,stopme);

function dragme(event:MouseEvent):void{

event.target.startDrag();

}

function stopme(event:MouseEvent):void{

event.target.stopDrag();

}

var newInstance1:DisplayObject = duplicateDisplayObject(db, true);

newInstance1.addEventListener(MouseEvent.MOUSE_DOWN,dragme);

newInstance1.addEventListener(MouseEvent.MOUSE_UP,stopme);

I have just created the instance and first added it to the stage.

You can download all the realated files from below link.

http://www.box.net/shared/ea402vdv3l

-Nitin

Assignment : Dynamic photo Gallery

This is just a simple image gallery where we are using a XML file to load images.

Requirements

Create a dynamic photo gallery, call all thumbnail images dynamically and make dynamic vertical scroller for thumbnail to view more thumbnails.

Thumbnail display will be 3x2 and rest will viewable with scroller. Images will control from either XML or from array inside flash. Once u click on thumbnail images then bigger image of thumbnail will change with some transition effect.

We can notice here that we can use our ImageViewer class that has been created in previous post.

We will divide our work in modules

1. Create one XML to store the image info.

2. Load XML and push the values in arrays.

3. Generate Grid as required.

4. Add a scrollbar to grid.

5. View a large image with transition.

Let's have the XML in following way. You cab modify it as the way you want but that will require minor modification in the code.

XML file link:

http://www.box.net/shared/33mcfx9809

The XML tag "" stores the path to thumbnails and largeimages.

and img tag stores the name of big and small image.

consider this main.as file describing the document class.

main.as

package{

import flash.display.Sprite;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.events.Event;

import flash.display.MovieClip;

import flash.events.MouseEvent;

import com.gen.ImageViewer;

import com.hamferus.utils.ContentScroller;

import flash.filters.GlowFilter;

import caurina.transitions.Tweener;

public class main extends Sprite{

private var urlRequest:URLRequest;

private var urlLoad:URLLoader;

private var externalXML:XML;

private var thumbArray:Array = new Array;

private var largeArray:Array = new Array;

private var thumbPath:String;

private var largePath:String;

private var objImg:Array = new Array;

private var gridX:Number = 125;

private var gridY:Number = 450;

private var gridScroll:MovieClip = new MovieClip();

private var gridScrollBar:ContentScroller;

private var largeImage:ImageViewer;

private var myFilter:GlowFilter

public function main()

{

init();

}

public function init()

{

urlRequest = new URLRequest("data/data.xml");

urlLoad = new URLLoader(urlRequest);

urlLoad.addEventListener(Event.COMPLETE, onComplete);

}

public function onComplete(e:Event):void

{

externalXML = new XML(urlLoad.data);

thumbPath = externalXML.path.thumb;

largePath = externalXML.path.large;

populateArray();

}

public function populateArray()

{

for(var k=0;k

{

thumbArray[k] = externalXML.images.img[k].small.toString();

largeArray[k] = externalXML.images.img[k].large.toString();

}

generateGrid(externalXML.images.img.length());

}

public function generateGrid(maxLen:Number)

{

var _tempx:Number = gridX;

var _tempy:Number = gridY;

for(var xx=0;xx

{

objImg[xx] = new ImageViewer(thumbPath+thumbArray[xx]);

objImg[xx].x = _tempx;

objImg[xx].y = _tempy;

objImg[xx].name = "thumb"+xx;

gridScroll.addChild(objImg[xx]);

objImg[xx].addEventListener(MouseEvent.MOUSE_DOWN, loadBigImage);

if((xx+1) % 3 == 0)

{

_tempy += objImg[xx].height;

_tempx = gridX;

}

else

{

_tempx += objImg[xx].width;

}

}

addChild(gridScroll);

if (gridScroll.height > 150) {

gridScrollBar = new ContentScroller(gridScroll,425,200,15,0xf7cf9d,0xbabff9,3,true);

addChild(gridScrollBar);

gridScrollBar.y = gridY;

}

}

public function loadBigImage(e:MouseEvent):void

{

if(largeImage != null)

{

if(contains(largeImage))

{

removeChild(largeImage);

}

}

largeImage = new ImageViewer(largePath+largeArray[String(e.currentTarget.name).substr(5,3)]);

addChild(largeImage);

largeImage.x = 30;

largeImage.y = 30;

myFilter = new GlowFilter(0x000000,1,0,0,1,1,false,false);

largeImage.filters = [myFilter];

Tweener.addTween(myFilter, {blurY:100, blurX:20,time:1 ,transition:"linear", onUpdate:updateHandler});

}

function updateHandler():void {

largeImage.filters = [myFilter];

}

}

}

Lets go through the code.

/* These 3 variables are used for loading the XML*/

private var urlRequest:URLRequest;

private var urlLoad:URLLoader;

private var externalXML:XML;

/* These 4 variables are storing values in array from XML*/

private var thumbArray:Array = new Array;

private var largeArray:Array = new Array;

private var thumbPath:String;

private var largePath:String;

/* This array stores the values of the objects of ImageViewer*/

private var objImg:Array = new Array;

Let's discuss the generateGrid method in the main class.

It receives the maxlength as the parameter counting the all the img tags in XML.

public function generateGrid(maxLen:Number)

{

var _tempx:Number = gridX;

var _tempy:Number = gridY;

for(var xx=0;xx

{

objImg[xx] = new ImageViewer(thumbPath+thumbArray[xx]);

objImg[xx].x = _tempx;

objImg[xx].y = _tempy;

objImg[xx].name = "thumb"+xx;

gridScroll.addChild(objImg[xx]);

objImg[xx].addEventListener(MouseEvent.MOUSE_DOWN, loadBigImage);

if((xx+1) % 3 == 0)

{

_tempy += objImg[xx].height;

_tempx = gridX;

}

else

{

_tempx += objImg[xx].width;

}

}

addChild(gridScroll);

if (gridScroll.height > 150) {

gridScrollBar = new ContentScroller(gridScroll,425,200,15,0xf7cf9d,0xbabff9,3,true);

addChild(gridScrollBar);

gridScrollBar.y = gridY;

}

}

The first for loop creates the objects of ImageViewer class. It further generates the grid. The mod is used to divide generate the grid.

if((xx+1) % 3 == 0)

{

_tempy += objImg[xx].height;

_tempx = gridX;

}

else

{

_tempx += objImg[xx].width;

}

this code adds to all grid generation. You can get all the other classes used in this example from the links given belwow

http://code.google.com/p/tweener/

http://nitin-sinha.blogspot.com/2009/01/create-simple-imageviewer-class-in-as30.html

http://www.gotoandlearnforum.com/viewtopic.php?t=14343

You can download the files from below link.

http://www.box.net/shared/ilntza6qg2

Nitin-