Flash - TheTechlabs.com

Creating a Gallery in Flash Using the Moto CMS Component

Paul Flores — Wed, 10 Aug 2011 15:13:01 +0000

In this tutorial we will create a gallery with the help of the Moto CMS Component.

I think many of you have heard about (or even worked with) Moto Flash CMS – an advanced content management system for Flash. The CMS is considered as today’s most feature-rich system for Flash that allows us to develop Flash websites with no limits in animation and effects, without getting into any coding.

The system is used by developers as a standalone version or together with a Flash template (that is actually a complete website that can be edited even by a user with no programming skills).

Results of Moto CMS Component:

Today I would like to show you what can be done with the help of the Moto CMS component. So, for creating a Flash photo gallery we will use two abstract classes.

Final Result:

Moto CMS - CMS Photo Gallery

1. FLA file settings For Moto CMS Gallery

Let’s start by opening Flash and creating a new FLA file. We’ll name it thumbnailsModule.fla in this tutorial. It should be put in the same folder where the “src” folder is placed. Now we’ll open the Publish Settings (Ctrl+Shift+F12), open the ActionScript settings, and set the classpath “./src”:

2. Creating the ThumbnailsModule Symbol CMS Photo Gallery

Open the Components window (Ctrl+F7) and drag the Moto CMS Component, the Moto CMS Image Loader, and Photo Gallery Thumbnails components to the library.

Drag the Photo Gallery Thumbnails component to the stage, give it the instance name “preview”, and press F8 to convert it to Symbol. Let’s name it ThumbnailsModule; use the same name for the Class name, and set the Base class: modules.photoGalleryModules.ThumbnailsModule

This class is not created yet, so we should create it before clicking OK. Let’s go to srcmodulesphotoGalleryModules and create ThumbnailsModule.as. We’ll add the script later.

Now let’s get back to the FLA, click OK, and select the created Movie Clip on the stage. We set its instance name to thumbnailsModule.

Open the ThumbnailsModule Movie Clip. Let’s create a Shape object on a new layer with the Rectangle tool (R), set Alpha = 0% in its color settings, and convert it to Symbol. Let’s name it contentHolder and give it the same instance name on the stage. Then we convert it to Symbol again. We name it galleryHolder, and use the same instance name as well.

As you can see, we have two layers in our ThumbnailsModule Movie Clip – one for preview, and the other for galleryHolder. The galleryHolder has the contentHolder inside.

3. Creating navigation controls with Moto CMS

Open the galleryHolder Movie Clip and insert a new layer. Let’s use the Pencil tool (Y) to draw an arrow on this layer. Then we can use the Transform Tool (Q) to rotate it the way we need to.

As we draw the white arrow in this example, we change the Backgrond Color of the flash document to grey.

Let’s convert this arrow to Symbol. The name and the Class name will be ThumbnailsNavigationBtn, and the Base class will be: modules.photoGalleryModules.ThumbnailsNavigationBtn

Let’s also set the Registration in the center.

We should create ThumbnailsNavigationBtn.as in srcmodulesphotoGalleryModules before clicking OK. We’ll leave the class empty for now.

Then we open the ThumbnailsNavigationBtn Movie Clip and convert the arrow to Symbol again. Let’s name it “clip”, and give its instance the same name. The Registration should be set in the center.

We should convert this Movie Clip to Symbol once again. This time it will be named “icon”. Registration: center. So now we have two Movie Clips inside the ThumbnailsNavigationBtn – “icon” and “clip”. We have created this structure to easily handle the button properties with the help of the script.

We should also create a Movie Clip which would be a hit area for the button. We open the ThumbnailsNavigationBtn Movie Clip, insert a new layer, and put it under the icon layer. Then we draw a Shaped object of the arrow’s dimensions, make it transparent, and convert it to Symbol. Let’s name it “back”. The instance name should be “back” as well.

Then we open this Movie Clip and convert the Shape object to Symbol again. This Movie Clip will be named backIcon. The instance name should be “icon”.

Now we’ll get back to the galleryHolder Movie Clip, select the ThumbnailsNavigationBtn on the stage, and convert it to Symbol. It will be the controlsHolder Movie Clip with the same instance name. We should also place it in zero coordinates inside Moto CMS.

Let’s open it, insert a new layer, and add one more instance of the ThumbnailsNavigationBtn Movie Clip to the stage. Again, in Moto CMS, lets’ move it to the right and select Modify – Transform – Flip Horizontal. It will be the next button. Let’s give the buttons instance names prevBtn and nextBtn, respectively.

So, we have created the thumbnails controls.

4. Creating the Moto CMS item class

Now we should create the thumbnail class (item renderer), which will be used by the script for every new thumbnail. Let’s get back to the main timeline of the FLA document and drag the Moto CMS Image Loader component to the stage. Let’s give it the instance name “image”. We should also open the Parameters tab and set the Scaling Mode: fill.

Then we convert it to Symbol and name it imageHolder. Don’t forget to set the Move Clip Registration to the top left corner, as it was by default.

Now we convert it to Symbol again. It will be the item renderer class, so we’ll check the “Export for ActionScript” box, and specify the class names:

We set Base class: modules.photoGalleryModules.ThumbnailItemRenderer
This class is not created yet, so we go to srcmodulesphotoGalleryModules and create an empty ThumbnailItemRenderer.as.

Now we can open the ThumbnailItemRenderer Movie Clip and animate the imageHolder. We should set the frame labels to “show”, “over”, and “out”. You can make any animation you like. In this example we make it appear from transparency (Alpha = 0% in the first keyframe), and increase its brightness on mouse over (Advanced color in the third keyframe, and 140% to every color channel).

We put the “stop();” code over each keyframe. There should also be the condition over the second keyframe, so that the selected thumbnail looks moused overe right after appearing:

Let’s also create the preloader. We insert a new layer, and create a Movie Clip with an instance name “preloader”. You can create any preloading animation insde this Movie Clip.

The item renderer is ready.

5. Creating the thumbnail cover with Moto CMS

Now we should create one more class, which will be something like a cover for the item renderer. Our thumbnails will have the border and the rounded corners set by the code, so it will be better to work with the cover.

Let’s get to to the main timeline and create a Movie Clip inside moto cms with a transparent shaped object. It’s instance name should be contentHolder (do not confuse with the contentHolder Movie Clip we have created before). Then we convert it to Symbol once again. We export it for ActionScript and specify the class names:

Base class: modules.photoGalleryModules.ThumbnailItemRendererCover

Same as before, we should go to srcmodulesphotoGalleryModules and create an empty ThumbnailItemRendererCover.as.

Now we can open the ThumbnailItemRendererCover Movie Clip and create the animation. We should use the same frame labels as we used for the ThumbnailItemRenderer: “show”, “over”, and “out”. In this example we only create the animation of appearing from transparency. You may also create the animation of mouse over and mouse out, if needed.

We have created all the needed elements in Flash. We should go to the main timeline and remove ThumbnailItemRenderer and ThumbnailItemRendererCover Movie Clips from the stage. They will be taken from the library via the linkage name. The only Movie Clip that has to be left on the stage is ThumbnailsModule.

6. Creating the CMS Photo Gallery ThumbnailsModule class

Now it’s time to create the script. The srcmodulesphotoGalleryModules path contains 6 AS files at the moment – 2 abstract classes, which will not be modified by us, and 4 empty classes. Let’s start from the main class – ThumbnailsModule.as. We add the class constructor with the main imports:

package modules.photoGalleryModules
{
	import com.moto.template.common.Moto;
	import com.moto.template.common.events.ExternalDataProviderEvent;
	import com.moto.template.common.view.IInteractiveItemRenderer;

	public class ThumbnailsModule extends AbstractGalleryThumbnailsModule
	{

		public function ThumbnailsModule()
		{
			super();

		}

	}
}

Then we create the necessary variables:

package modules.photoGalleryModules
{
	import com.moto.template.common.Moto;
	import com.moto.template.common.events.ExternalDataProviderEvent;
	import com.moto.template.common.view.IInteractiveItemRenderer;

	public class ThumbnailsModule extends AbstractGalleryThumbnailsModule
	{
		private var _controlsHolder:MovieClip;
		private var _nextBtn:ThumbnailsNavigationBtn;
		private var _prevBtn:ThumbnailsNavigationBtn;
		private var _propertyNavigationBtnWidth:Number = 0;

		public function ThumbnailsModule()
		{
			super();

		}

	}
}

Let’s also add MovieClip to imports: import flash.display.MovieClip;

Then we should assign the variables to the created elements, and specify the next/previous buttons:

package modules.photoGalleryModules
{
	import com.moto.template.common.Moto;
	import com.moto.template.common.events.ExternalDataProviderEvent;
	import com.moto.template.common.view.IInteractiveItemRenderer;

	public class ThumbnailsModule extends AbstractGalleryThumbnailsModule
	{
		private var _controlsHolder:MovieClip;
		private var _nextBtn:ThumbnailsNavigationBtn;
		private var _prevBtn:ThumbnailsNavigationBtn;
		private var _propertyNavigationBtnWidth:Number = 0;

		public function ThumbnailsModule()
		{
			super();

			_controlsHolder = _galleryHolder["controlsHolder"];
			_nextBtn = _controlsHolder["nextBtn"];
			_prevBtn = _controlsHolder["prevBtn"];

			thumbnailsPaginator.nextButton = _nextBtn;
			thumbnailsPaginator.previousButton = _prevBtn;
		}

	}
}

Now we override the updateProperty method. This method will handle the properties set in the xml file. Each case number matches the property ID in the XML file.

		override public function updateProperty(propertyVO:PropertyVO):void
		{
			super.updateProperty(propertyVO);
			switch (propertyVO.propertyType)
			{
				case 8:
					_nextBtn.updateProperty(propertyVO);
					_prevBtn.updateProperty(propertyVO);
				break;

				case 18:
				case 19:
				case 20:
					_nextBtn.updateProperty(propertyVO);
					_prevBtn.updateProperty(propertyVO);
				break;
			}
		}

We should also add PropertyVO to imports:

import com.moto.template.shell.model.vo.PropertyVO;

Then we override the protected method switchPaginatorHandler. We check whether there is the next/previous page and disable the appropriate button if not. Also we check to see if the thumbnail is clicked now. If it is not, the script switches pages.

		override protected function switchPaginatorHandler(event:Event = null):void
		{
			if (thumbnailsPaginator.hasNextPage())
			{
				_nextBtn.alpha = 1;
				_nextBtn.mouseEnabled = true;
			}
			else
			{
				_nextBtn.alpha = .5;
				_nextBtn.mouseEnabled = false;
			}

			if (thumbnailsPaginator.hasPreviousPage())
			{
				_prevBtn.alpha = 1;
				_prevBtn.mouseEnabled = true;
			}
			else
			{
				_prevBtn.alpha = .5;
				_prevBtn.mouseEnabled = false;
			}

			if (thumbnailsArranger.rememberSelectedItem)
			{
				thumbnailsArranger.selectItemRendererByIndex(currentIndex, false);
				if(thumbnailsArranger.selectedItemRenderer){
					ThumbnailItemRendererCover(thumbnailsArranger.selectedItemRenderer).showOverState();
				}
			}
		}

Let’s also import Event:

import flash.events.Event;

The next method which we are going to override is setSize. This method contains the logic of resizing and positioning.

		override public function setSize(newWidth:Number, newHeight:Number):void
		{
			super.setSize(newWidth, newHeight);

			newWidth = int(newWidth);
			newHeight = int(newHeight);

			if (initialized)
			{
				_nextBtn.setSize(newHeight, _propertyNavigationBtnWidth);
				_prevBtn.setSize(newHeight, _propertyNavigationBtnWidth);

				_nextBtn.x = _contentHolder.width;
				_controlsHolder.y = newHeight/2;
				_controlsHolder.rotation = 0;
				_contentHolder.x = 0;
				_contentHolder.y = 0;
			}
		}

We should add OrientationEnum to imports:

import com.moto.template.common.view.OrientationEnum;

Finally we override the show and hide methods to add tweens.

		override public function show():void
		{
			super.show();
			this.mouseChildren = true;
			Tweener.addTween(this, { alpha:1, time:.5 } );

		}

		override public function hide():void
		{
			super.hide();
			this.mouseChildren = false;
			Tweener.addTween(this, { alpha:0, time:.5} );
		}

We add the Tweener class to imports:

import caurina.transitions.Tweener;

7. Creating the ThumbnailItemRenderer class

When the ThumbnailsModule class is ready, we can switch over to ThumbnailItemRenderer.as. The class constructor will be:

package modules.photoGalleryModules
{

	public class ThumbnailItemRenderer extends AbstractThumbnailItemRenderer
	{

		public function ThumbnailItemRenderer()
		{
			super();

		}

	}
}

Then we create variables for image and preloader and import the needed classes.

package modules.photoGalleryModules
{
	import com.moto.template.common.view.components.loaders.ImageLoader;
	import flash.display.MovieClip;	

	public class ThumbnailItemRenderer extends AbstractThumbnailItemRenderer
	{
		private var _image:ImageLoader;
		private var _preloader:MovieClip;

		public function ThumbnailItemRenderer()
		{
			super();

		}

	}
}

Now we assign the variables to the elements in the class constructor.

package modules.photoGalleryModules
{
	import com.moto.template.common.view.components.loaders.ImageLoader;
	import flash.display.MovieClip;	

	public class ThumbnailItemRenderer extends AbstractThumbnailItemRenderer
	{
		private var _image:ImageLoader;
		private var _preloader:MovieClip;

		public function ThumbnailItemRenderer()
		{
			super();

			_image = imageHolder["image"];
			_preloader = this["preloader"];

			_preloader.alpha = 0;
		}

	}
}

Then we override the updateRenderer method. We specify the image path and add listeners for successful complete and error events.

These classes should be added to imports:

import com.moto.template.common.events.MediaLoaderErrorEvent;
import flash.events.Event;

		override public function updateRenderer(data:Object):void
		{
			super.updateRenderer(data);

			_image.source = pathPrefix + dataVO.getPropertyValueByID(2);
			_image.addEventListener(Event.COMPLETE, imageCompleteHandler);
			_image.addEventListener(MediaLoaderErrorEvent.ERROR, imageCompleteHandler);			

			Tweener.addTween(_preloader, {alpha:1 , delay:0.5, time:1});
		}

The events will be handled by the imageCompleteHandler method, which we need to create now. In case of succesful complete we hide the preloader and play the showing animation.

		private function imageCompleteHandler(event:Event):void {
			switch(event.type) {
				case Event.COMPLETE:
					Tweener.addTween(_preloader, { alpha:0, time:1 } );
					show();
					gotoAndPlay(showLabel);
				break;

				case MediaLoaderErrorEvent.ERROR:
					Tweener.addTween(_preloader, { alpha:0, time:1 } );
				break;
			}

		}

Let’s also import the Tweener class:

import caurina.transitions.Tweener;

The next step will be overriding the setSize method and adding the resizing logic.

		override public function setSize(newWidth:Number, newHeight:Number):void
		{
			newWidth = newWidth || getDimensions().width;
			newHeight = newHeight || getDimensions().height;

			_image.setSize(newWidth, newHeight);
			_image.drawNow();

			_preloader.x = (newWidth - _preloader.width) / 2;
			_preloader.y = (newHeight - _preloader.height) / 2;
		}

The getDimensions method passes the actual size of the element. So, we override it and return a rectangle of image dimensions.

		override public function getDimensions():Rectangle
		{
			return new Rectangle(0, 0, _image.width, _image.height);
		}

Rectangle should be added to imports:

import flash.geom.Rectangle;

8. Creating the ThumbnailItemRendererCover class

Right after the ThumbnailItemRenderer class we are going to write a script for its “cover” – ThumbnailItemRendererCover.as. Let’s start with adding the basic code:

package modules.photoGalleryModules
{
	import com.moto.template.modules.gallery.GalleryThumbnailCover;
	import flash.display.MovieClip;

	public class ThumbnailItemRendererCover extends GalleryThumbnailCover
	{

		public function ThumbnailItemRendererCover()
		{
			super();

		}

	}
}

We add a new variable, which will be used in the script. Then we create a new Sprite object in the base class and add a content holder. This way we implement the thumbnail covering. We also enable buttonMode, disable mouseChildren, and add an event listener.

package modules.photoGalleryModules
{
	import com.moto.template.modules.gallery.GalleryThumbnailCover;
	import flash.display.MovieClip;

	public class ThumbnailItemRendererCover extends GalleryThumbnailCover
	{
		private var _borderThicknessOnOver:uint;

		public function ThumbnailItemRendererCover()
		{
			super(new Sprite());

			Sprite(this["contentHolder"]).addChild(_contentHolder);

			buttonMode = true;
			mouseChildren = false;

			addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler)
		}

	}
}

Let’s also add Sprite and Event classes to imports:

import flash.display.Sprite;
import flash.events.Event;

Now we should create a function which will be fired when the thumbnail cover is added to stage. It should remove the event listener and play the showing animation.

		private function addedToStageHandler(event:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);

			show();
			gotoAndPlay(showLabel);
		}

Then we override the updateProperty method. It will handle the thumbnail properties related to the border shaping. This way we apply them to the cover, not to the thumbnail itself.

		override public function updateProperty(propertyVO:PropertyVO):void
		{
			super.updateProperty(propertyVO);
			var thisDimensions:Rectangle = getDimensions();
			switch (propertyVO.propertyType)
			{
				case 6:
					_roundRadius = uint(propertyVO.value) * 2;

					setSize(thisDimensions.width, thisDimensions.height);
				break;

				case 7:
					_borderThicknessOnOver = uint(propertyVO.value);
					_strokeThickness = 0;
					setSize(thisDimensions.width, thisDimensions.height);
				break;

				case 8:
					_strokeColor = uint(propertyVO.value);

					setSize(thisDimensions.width, thisDimensions.height);
				break;

				case 9:
					_strokeAlpha = uint(propertyVO.value) / 100;

					setSize(thisDimensions.width, thisDimensions.height);
				break;
			}
		}

We also add PropertyVO and Rectangle to imports:

import com.moto.template.shell.model.vo.PropertyVO;
import flash.geom.Rectangle;

Then we add getter and setter for the stroke thickness property.

		public function get strokeThickness():uint {
			return _strokeThickness;
		}

		public function set strokeThickness(value:uint):void {
			_strokeThickness = value;
		}

We should also create the showOverState method, which will be called to play the mouseover animation when a new thumbnail is selected by the prev/next button.

		public function showOverState():void {
			over();
		}

Then we override over and out methods and add tweens for mouseover and mouseout animation.

		override protected function over():void
		{
			super.over();

			Tweener.addTween(this, {strokeThickness:_borderThicknessOnOver, time:0.3, rounded:true, onUpdate:setSize, onUpdateParams:[0, 0]} );
		}

		override protected function out():void
		{
			super.out();

			Tweener.addTween(this, {strokeThickness:0, time:0.6, onUpdate:setSize, onUpdateParams:[0, 0]} );
		}

Let’s also import the Tweener class:

import caurina.transitions.Tweener;

The ThumbnailItemRendererCover class is ready.

9. Creating the ThumbnailsNavigationBtn class

Now we proceed to the only class left – ThumbnailsNavigationBtn. Let’s add the basic code.

package modules.photoGalleryModules
{
	import common.AbstractNavigationBtn;

	public class ThumbnailsNavigationBtn extends AbstractNavigationBtn
	{

		public function ThumbnailsNavigationBtn()
		{
			super();

		}

	}
}

Then we create new variables which will be used in the script.

package modules.photoGalleryModules
{
	import common.AbstractNavigationBtn;
	import flash.display.MovieClip;

	public class ThumbnailsNavigationBtn extends AbstractNavigationBtn
	{
		private var _backShape:MovieClip;
		private var _iconShape:MovieClip;

		private var _propertyBackColor:uint = 0x000000;
		private var _propertyBackAlpha:Number = .15;

		private var _propertyIconColor:uint = 0xFFFFFF;
		private var _propertyActiveIconColor:uint;
		private var _propertyIconAlpha:Number = .15;

		private var _propertyRoundRadius:uint = 0;

		public function ThumbnailsNavigationBtn()
		{
			super();

		}

	}
}

In the class constructor we stop the playback on the first frame, set buttonMode and mouseChildren, specify hitArea, assign variables to the elements, and initialize ColorShortcuts.

package modules.photoGalleryModules
{
	import caurina.transitions.properties.ColorShortcuts;
	import common.AbstractNavigationBtn;
	import flash.display.MovieClip;

	public class ThumbnailsNavigationBtn extends AbstractNavigationBtn
	{
		private var _backShape:MovieClip;
		private var _iconShape:MovieClip;

		private var _propertyBackColor:uint = 0x000000;
		private var _propertyBackAlpha:Number = .15;

		private var _propertyIconColor:uint = 0xFFFFFF;
		private var _propertyActiveIconColor:uint;
		private var _propertyIconAlpha:Number = .15;

		private var _propertyRoundRadius:uint = 0;

		public function ThumbnailsNavigationBtn()
		{
			super();

			gotoAndStop(1);

			buttonMode = true;
			mouseChildren = false;
			hitArea = back;

			_backShape = back["clip"];
			_iconShape = icon["clip"];

			ColorShortcuts.init();

		}

	}
}

Then we override the updateProperty method and handle the buttons’ properties, such as color and transparency level.

		override public function updateProperty(propertyVO:PropertyVO):void
		{
			super.updateProperty(propertyVO);
			switch (propertyVO.propertyType)
			{
				case 18:
					_propertyActiveIconColor = uint(propertyVO.value);
				break;

				case 19:
					_propertyIconColor = uint(propertyVO.value);

					MotoUtils.setColor(_iconShape, _propertyIconColor, _propertyIconAlpha);
				break;

				case 20:
					_propertyIconAlpha = uint(propertyVO.value) / 100;

					MotoUtils.setColor(_iconShape, _propertyIconColor, _propertyIconAlpha);
				break;
			}
		}

Finally we override over and out methods. We add tweens and set them to colour the buttons on mouseover and mouseout.

		override public function over():void
		{
			super.over();
			Tweener.addTween(this, {_color:_propertyActiveIconColor, time:1} );
		}

		override public function out():void
		{
			super.out();
			Tweener.addTween(this, {_color:_propertyIconColor, time:1} );
		}

So we have created all the needed classes.

10. Initializing the module

If we added this gallery to Moto template, it would be initialized automatically. We want to initialize it outside the template, so we need to add special code. Let’s go to the main timeline of the FLA file and insert a new layer. Then we select the first frame and press F9. We should insert this code:

import org.puremvc.as3.multicore.patterns.facade.Facade;
import com.moto.template.shell.model.vo.*;
import com.moto.template.shell.model.*;
import com.moto.template.common.*;

var _propertiesXML:XML = new XML(
	'' +
		'' + // Widget Connection ID. This property is needed only when the module is loaded in the Moto template.
		'' + // Prevent Second Click
		'' + // Image to Start From
		'' + // Item Creation Delay
		'' + // Item Corner Radius
		'' + // Item Border Width
		'' + // Item Border Color
		'' + // Item Border Alpha
		'' + // Item Width
		'' + // Vertical Spacing
		'' + // Rows
		'' + // Active Arrows Color
		'' + // Base Arrows Color
		'' + // Arrows Alpha
	''
);

var _facade:Facade = new Facade("TEST");
_facade.registerProxy(new WebsiteProxy(this));
var _motoProxy:MotoProxy = new MotoProxy();
_facade.registerProxy(_motoProxy);
var _templateMoto:TemplateMoto = new TemplateMoto(_motoProxy);
Moto.setInstance(_templateMoto);

initializeModule(
	thumbnailsModule,
	[],
	'' +
		'gallery.xml' +
		'ThumbnailItemRenderer' +
		'ThumbnailItemRendererCover' +
	'',
	true
);

function initializeModule(module:MovieClip, propertiesValues:Array = null, data:String = "",
	resizable:Boolean = true):void
{
	// Module type
	var moduleTypeVO:ModuleTypeVO = new ModuleTypeVO();
	moduleTypeVO.resizable = resizable;

	// Slot
	var moduleVO:ModuleVO = new ModuleVO();
	moduleVO.moduleType = moduleTypeVO;

	moduleVO.width= 937;
	moduleVO.height = 671;
	moduleVO.x = 62;
	moduleVO.y = 0;

	// Properties
	moduleVO.properties = propertiesParser(_propertiesXML);

	// data
	moduleVO.data = data;

	// Init slot
	module.init(moduleVO);
}

function propertiesParser(xml:XML):Array
{
	var objectProperties:Array = [];
	for each (var property:XML in xml.elements())
	{
		var propertyType:uint = uint(property.@propertyType);
		if (propertyType)
		{
			var propertyVO:PropertyVO = new PropertyVO();
			propertyVO.propertyType = propertyType;
			propertyVO.value = String(property);

			// Get parameters
			propertyVO.parameters = new Object();
			for each (var parameter:XML in property.attributes())
			{
				var key:String = parameter.name().toString();
				var value:String = parameter.valueOf().toString();
				propertyVO.parameters[key] = value;
			}

			objectProperties.push(propertyVO);
		}
	}
	return objectProperties;
}

There is a set of properties in _propertiesXML. These properties are handled by updateProperty methods, which we have created in AS files. Lines 36-38 contain the XML file name and the thumbnail’s and its cover’s library linkage names. Lines 54-57 contain the module’s width, height, and coordinates. You can adjust these values to your needs.

Let’s open the Flash Document Properties and set the dimensions. These values depend on the thumbnails gallery size. In this example we set 1040 x 671.

11. Creating the Moto CMS gallery XML file.

The script from the previous step contains reference to the gallery.xml file. We can put it to the same directory where our SWF file is placed, or create somea folder and add a path prefix to the gallery.xml file location. Here is the XML file content:



 
 
 
 
 
 
 
 
 
 
 
 
 true
 true
 true

The gallery elements should be put in the tag. Three items are already added as an example. Every an item has three properties, properties with id 1 and 2 are the preview and the thumbnail images paths. The third property can be used for specifying a link. You can just duplicate the existing “item” node to add as many elements as you need. Please note that every new item must have the unique “id” and “order” attributes.

This post on Moto CMS was brought to you by Paul Flores. He currently works with the Moto CMS components and develops Flash websites on the basis of Moto CMS and Moto Flash templates.

Thank you for reading the Moto CMS tutorial! I hope you liked it. Your comments will be highly appreciated.

The post Creating a Gallery in Flash Using the Moto CMS Component first appeared on TheTechlabs.com.

Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part II/II

Mario Santos — Wed, 01 Dec 2010 13:34:11 +0000

Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part I/II

Here is the first part: Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part I/II

Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part II/II

In the second part you will transform your gallery made on the first part of this two-part tutorial into a gallery with some polaroid distributed thumbnails. You will also learn how to auto-create those thumbs in php, load them randomly into flash and use the same animation style to show the gallery.

We will add also a simple button to swap from thumbnails gallery (part two) to slideshow (part one).

First let’s take a look to this second part final result.

Final Result:

https://www.thetechlabs.com/wp-content/uploads/2010/11/gallery.swf

This gallery will have some cool final result features, let’s take a brief look:

Auto-find images in folder (works with PNG, JPEG, JPG)
Write an XML file automatically
Can work only with an XML file and without php
Have a full screen option
Fits automatically the screen center
Can customize the speed of slideshow
Automatically generate thumbnails of images in folder *
Spread the thumbnails automatically on the screen *
Make the slideshow static (only opens in thumbnail click) *

This tutorial is be divided into two parts, the first one is available here.

Requirements

Have Flash CS4.
An amp server (or similar like wampserver), any online hosting with php support works to.
The TweenLite engine that you can download here.
The first part of this tutorial, that can be downloaded here.
The open source thumb creation class available here. Can be downloaded directly here.
Have this polaroid image to add a better look and feel to our loaded thumb.

Pre Requirements

Know a little of PHP.
Understand the concept of constraint layout in flash (auto position content).
A good knowledge of Flash, especially Action Script 3.

Getting started

It’s highly recommended that you go through the first part of tutorial first. Explore the code a little and understand the php part of it. A good knowledge of constraint layouts is a must.

This second part is easier to follow and achieve than the first part, but pay attention to all steps, they are most of them in action script code, so I recommend that you write them and not copy. This is great to practice. Remember; Write instead Copy & Paste!

Step 1 – Updating PHP files

All the php files are supposed to be in the c:/www/wamp folder, so we will continue with this. Grab the thumbnail files (the class.files.php and class.thumbs.php) form this archive and put them on the previously created folder called gallery. Then just open the imageHandler.php file, find the ary2xml() function and inside it, got to the line:

$data.="rn";

and replace it by this one:

$data.="rn";

This will update your gallery thumbnails path to the folder thumbs so the flash searches this folder for thumbnails. This will do nothing for now because the main thumbnail generation job will be made by those two files we had added on the folder. Just save the file.

Step 2 – Creating the thumbnails with PHP

This step is quite easy because those two classes are ready to use. Just open your discover.php file and do the following changes:

Add this line after the

include_once("class.thumbs.php");

and before this:

print_r($tm->ary2xml($data,0,'',"images.xml"));

add these two lines:

$thumbs = new thumbs("./", 0, "thumbs/", false, 0, 100, false, 125, 125);

  $thumbs->creates_thumbs();

And that’s all! This will create thumbnails with 125x125px in the thumbs folder with the same image name. Our thumbs are ready to use. Save the file and open the previous flash project.

Step 3 – Creating a polaroid thumbnail

With your flash project open, just go to menu Insert->New Symbol and create a movieClip with polaroidMC name and export it to action script, like this: (please note that my ui language is French, but should be easy to understand when you have this window on flash)

This will create a movieClip that can be loaded from action script to create multiple instances of it. Is the fast way to duplicate items on stage. All the regular MovieClip properties will be available in this movieClip also.

Now, just import into stage our polaroid.png image and center in on stage. File->Import->Import into stage and select our polaroid image. Make it similar to this:

Then we just need to put a text input into the bottom part to display the image name and a empty and masked movieclip to load the thumb picture. This is quite easy, create 3 more layers over the existing one, name the first one Text, the second Image Loader and the third Mask.

Now, on the first one draw a text field, center the text and make the field with +- the same with of the image. Then , on the Image Loader draw a rectangle with the same area than the blue part of the polaroid image, something like this:

Now Right Click on it, and convert it into a movieClip Symbol… name this instance img. Name the text Field instance to “lbl” and now just create another rectangle with the same area of the one in black but do draw it on the Mask layer.

Now, just mask that layer: Right Click-> Mask.

Our Thumbnail loader is created and ready to load our picture.

Step 4 – Make changes on the trigger command

Go to our main stage, on the first frame actions and open actions panel. On this panel we need to make some changes to our movie.

The first thing to have in mind is that we will load our movieclip with all the thumbnails distributed over the screen area, and we will also have a button to play a slide show with those pictures. This is already made, so we need only to create a button to load the slide show, and on the very first start it will be stopped. So, for that we will add a variable called SLIDE_ON to control the slide state. Just add this on the top of the script declarations:

var SLIDE_ON:Boolean=false;

var THUMBS_HIDDEN=false;

The we need to avoid slid to start, just go to the function onXmlComplete() and replace this:

onTime(new TimerEvent(TimerEvent.TIMER)); //load first;

with this:

if(SLIDE_ON) onTime(new TimerEvent(TimerEvent.TIMER)); //load first;

This will stop slide from loading, but the lines and the loader will appear, we just want them to disappear, for that just do this function:

Step 5 – Code a function to hide/stop the slide

 function hideSlide():void {
	LT.alpha=0;
	LB.alpha=0;
	preloader.alpha=0;
}

and call it on the onXmlComplete function on the else instruction, making it appear like this:

function onXmlComplete(evt:Event):void {
 IMAGES = xml2Array(evt.target.data); //load images into array
 if(SLIDE_ON) onTime(new TimerEvent(TimerEvent.TIMER)); //load first;
 else hideSlide();
 }

Step 6 – Create a button to switch between slide/thumbnails presentation

Now the slide is ready to load our pictures into the thumbs and spread the randomly overt the screen, but first lets create a start/stop slide button. Grab this archive and extract those two pictures some place, then in flash create a new MovieClip name it slideControl and the import those two extracted images to stage: File-> Import -> Import to stage. Create two frames and on the first frame put the “screen” image and on the second one the “folder/thumbs” image. Make sure they are placed on the exactly same position: x=0 and y=0. On the first layer actions write down

stop();

Now, just go back to stage, double click on the galControls movieClip and then just drop from the library our recently created slideControl movie clip. Put it on the left aligned with the existing ones.

Name it’s instance as btnSlide and go back to main stage. The in the actions write this down on bottom of the existing code:

Step 7 – Code the slide switch button actions

galControls.btnSlide.buttonMode=true;
galControls.btnSlide.useHandCursor=true;
galControls.btnSlide.addEventListener(MouseEvent.CLICK, switchSlide);

After this we will need to create this switchSlide function but not for now…

Step 8 – Creating the thumb loader function

Now, we need to create a function to load all our thumbnails and spread them over the screen, just create these functions:

		var thumb:polaroidMC;
      var thumbLoader:Loader;function loadThumbs():void {
      //let's define stage container size to distribute thumbs
     for(var h:int=0; h
This function will load all thumbs as polaroidMC’s, and add them a Loader as child to load the thumbnail image.
 
Step 9 – The thumb load complete event
When the thumb image is finished downloading, just open it and spread it over the screen:
function onThumbDone(evt:Event):void {
   var tmb:polaroidMC = (evt.target as polaroidMC);
   var max_x:Number=stage.stageWidth;
   var max_y:Number=stage.stageHeight;
   var min_x=0;
   var min_y=0;
	 var rndX:Number=Math.ceil(Math.random() * (max_x - 0 + 1)) + (0 - 1);
   var rndY:Number=Math.ceil(Math.random() * (max_y - 0 + 1)) + (0 - 1);

 	TweenLite.to(tmb,1,{x:rndX, y:rndY});
   }
 
Step 10 – Thumb Mouse Interaction Switcher
It calls also a function to load the events on it. It will act as a switcher allowing to load/unload these properties on each polaroidMC:
function loadEvents(mc:polaroidMC, opt:Boolean):void {
 if(opt==true) {
 mc.buttonMode=true;
 mc.useHandCursor=true;
 mc.addEventListener(MouseEvent.MOUSE_OVER, onThumbOver);
 mc.addEventListener(MouseEvent.MOUSE_OUT, onThumbOut);
 mc.addEventListener(MouseEvent.CLICK, onThumbClick);
 }
 else {
 mc.buttonMode=false;
 mc.useHandCursor=false;
 mc.removeEventListener(MouseEvent.MOUSE_OVER, onThumbOver);
 mc.removeEventListener(MouseEvent.MOUSE_OUT, onThumbOut);
 mc.removeEventListener(MouseEvent.CLICK, onThumbClick);
 }
 }
 
Step 11 – The thumb event handlers
Now we need to create the events for the thumbs, just add some fade in/out effects and call the image to open when thumb is clicked:
function onThumbOver(evt:MouseEvent):void {
   (evt.currentTarget as polaroidMC).alpha=0.75;
   }
   function onThumbOut(evt:MouseEvent):void {
   (evt.currentTarget as polaroidMC).alpha=1;
   }
When a user click on the thumb we will hide all the existing thumbs and make the animation to load the selected image:
function onThumbClick(evt:MouseEvent):void {
   hideThumbs(loadImage, HOST+"/"+(evt.currentTarget as polaroidMC).id);
   ldr.addEventListener(MouseEvent.CLICK, onLDRClick);
   }
 
Step 12 – The hide thumbs function
For hide the thumbs we will code this that will search for all the stage child this the thumb name and hide them:
function hideThumbs(onComplete:Function=null, arg:String=null):void {
   for(var g:int=0; g-1)  {
 TweenLite.to(getChildAt(g),1,{alpha:0, onComplete:hiden, onCompleteParams:[getChildAt(g)] });
 loadEvents((getChildAt(g) as polaroidMC), false);
 }
 }
 THUMBS_HIDDEN=true;
 if(onComplete!=null && arg!=null) onComplete(arg);
 else if(onComplete!=null) onComplete();
 }
This function is a little special, it will receive as argument a new function and it’s function arguments, meaning the is possible to call any specific function that we can input to act as a onComplete function, this is very useful cause after all the thumbs are hidden we need to open the selected image.
The function acts like this:
Find all the stage children’s that have on it’s name the “thumb” word, then Tween them alpha=0; then call the function loadEvents() that will unload the thumb mouse interaction and on the end of this tween call the function provided by the function arguments.
function hiden(mc:polaroidMC):void {
   mc.visible=false;
   }
We need this function also to make visible=false all the thumbs because if they have only the alpha=0; they will still clickable and we do not want this.
 
Step 13 – The show thumbs function
We need also to create a function to show our thumbs again when the loader is licked and the displayed picture closed, write this down:
function showThumbs():void {
 trace("showing thumbs");
 for(var g:int=0; g-1 && getChildAt(g).visible==false )  {
 TweenLite.to(getChildAt(g),1,{alpha:1});
 getChildAt(g).visible=true;
 loadEvents((getChildAt(g) as polaroidMC), true);
 }
 }
 THUMBS_HIDDEN=false;
 }
 
Step 14 – The loader click handler
This is the listener of loader clicks (when user click on the main photo loaded the image will close and the thumbs will appear again):
function onLDRClick(evt:MouseEvent):void {
 resetLines();
 ldr.removeEventListener(MouseEvent.CLICK, onLDRClick);
 preloader.visible=false;
 LT.alpha=0;
 LB.alpha=0;
 IMAGE_LOADED=false;
  }
 
Step 15 – The slide Switcher
Well it’s almost done, just need to create a function to switch to slide mode:
function switchSlide(evt:MouseEvent=null):void {
 if(SLIDE_ON==false) {
 hideThumbs();
 SLIDE_ON=true;
 LT.visible=true;
 LB.visible=true;
 preloader.visible=true;
 LT.alpha=1;
 LB.alpha=1;
 preloader.alpha=1;

 timex.start();
 galControls.btnSlide.gotoAndStop(2);
 }
 else {
 SLIDE_ON=false;
 timex.stop();
 resetLines();
 LT.alpha=0;
 LB.alpha=0;
 preloader.alpha=0;
 preloader.visible=false;
 //preloader.alpha=0;
 galControls.btnSlide.gotoAndStop(1);
 }
   }
function swapThumbs(evt:MouseEvent):void {
 if(THUMBS_HIDDEN==true) showThumbs();
 else hideThumbs();
 }
 
Step 16 – Replacing thumbs on screen resize
And it’s almost done, just need to create a function to reload all the thumbs into new screen positions when the user switch’s to full screen. Write this function down:
function reloadPos():void {
 for(var g:int=0; g-1)  {
 getChildAt(g).x=stage.stageWidth+150;
 getChildAt(g).y=stage.stageHeight+150;

 var max_x:Number=stage.stageWidth-70;
 var max_y:Number=stage.stageHeight-70;
 var min_x=0;
 var min_y=0;
 var rndX:Number=Math.ceil(Math.random() * (max_x - 0 + 1)) + (0 - 1);
   var rndY:Number=Math.ceil(Math.random() * (max_y - 0 + 1)) + (0 - 1);
   var rot:Number=Math.ceil(Math.random() * (45 - 0 + 1)) + (0 - 1)
   getChildAt(g).alpha=1;
   if(IMAGE_LOADED==false) getChildAt(g).visible=true;

   getChildAt(g).rotation=rot;

   TweenLite.to(getChildAt(g),1,{x:rndX, y:rndY});

   loadEvents((getChildAt(g) as polaroidMC), true);
   }
   }
   }
A function to reload thumbs position, this will be called on screen resize.
function replaceThumbs():void {
   hideThumbs(reloadPos);
   }
 
Step 17 – Updating the code
Now just need to make some minor changes to the part I tutorial code;
On the onXmlComplete() function write on bottom:
loadThumbs();
then on function resetLines() replace the bottom line :
 else TweenLite.to(preloader, 1, {alpha:1});
with this one:
 else TweenLite.to(preloader, 1, {alpha:1, onComplete:showThumbs});
On the reloadLines() function, write on bottom:
 if(SLIDE_ON==false) replaceThumbs();
On the animateToImage() function just replace the
timex.start()
with
if(SLIDE_ON==true) timex.start();
And finally on the onImageComplete() function, find the lines:
if(FIRST_RUN==true) { //if is the first run
 timex.start(); //if it's first run, activate the timer to load next images.
 FIRST_RUN=false; //now it's not the first run
 }
And replace them with
if(FIRST_RUN==true) { //if is the first run
   if(SLIDE_ON==true) timex.start(); //if it's first run, activate the timer to load next images.
   FIRST_RUN=false; //now it's not the first run
   }
This will avoid loading slideshow on first movie run.
Well, that’s all… save your project and run it! Nice ha?
So, I hope you liked this tutorial! Don’t forget to comment, subscribe to our RSS feed and follow us on Twitter. If you have any doubts, just sign up on our forum and ask for help.
The post Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part II/II first appeared on TheTechlabs.com.

Getting Started With BetweenAS3

Devon — Tue, 21 Jul 2009 12:00:44 +0000

There are many popular open source tweening engines in the Flash community today. Numbered among these are Tweener, TweenLite/Tweenmax, Tweensy, and GTween. This is a short look at the capabilities of newcomer to the scene: BetweenAS3. BetweenAS3 is the tweening engine brainchild of Yoshihiro (yossy) Shindo and is available as part of the Spark project (i.e. it is brought to us by one of the same group that brought the world the FLARToolkit for Augmented Reality in Flash and countless other goodies).

Requirements

To go through the code examples presented here, you will, of course, need the BetweenAS3 library added to your class path. The library can be downloaded from the .svn depository here. You’ll notice that there are two branches to the library – one for Flash Player 9 and one for Flash Player 10. Although the syntax for the two branches is the same, I’ve used the Flash Player 10 branch for the examples here. I’ve also written the examples here as a pure Actionscript project, so something that can compile actionscript projects, such as FlashBuilder/Flexbuilder or FlashDevelop plus the Flex SDK is also required. Flash CS4 can also be used if each example class is used as a .fla document class. The included download contains all actionscript files plus the FlashDevelopment project file.

Pre-Requisites

As the name BetweenAS3 implies, all code presented will be in Actionscript 3. While it would be helpful (and is assumed) that the reader has at least a basic working knowledge of Actionscript 3, this isn’t 100% necessary.

Basic Syntax and Functionality

Primarily, BetweenAS3 relies on several static method calls. Each of these static methods will return an instance of an ITween interface. Because of this, BetweenAS3 offers a great deal of flexibility as each of these static methods may nest any number of additional methods thereby building extremely complex tweens from relatively simple syntax.

In its most simple form, a basic BetweenAS3 tween may look like this:

var tween:ITween = BetweenAS3.tween(targetObject, toObject, fromObject, time, easingMethod);

Once created, the tween can be started using the play() method, stopped using the stop() method or controlled with the Movieclip like methods gotoAndPlay(time) or gotoAndStop(time). You can determine the length of the tween in seconds with the duration property, the current time of the tween with the position property and can determine whether or not the tween is playing at any given moment with the aptly named isPlaying property.

Like all good tweening engines, with BetweenAS3 you are able to trigger actionscript methods when the tween starts, stops, updates or completes. Unlike most tweening engines, though, BetweenAS3 offers two ways of doing this. You can either use the standard AS3 event model and listen for a BetweenEvent, or you can use a more AS2 style approach and add callback methods to the tween instance. For example, say you wanted to call the method named tweenDone when a tween completes. You could say:

tween.addEventListener(BetweenEvent.COMPLETE, tweenDone);

private function tweenDone(event:BetweenEvent):void {
	// the tween is complete
}

Or, instead, you could say:

tween.onComplete = tweenDone;

private function tweenDone():void {
	// the tween is complete
}

Using this latter approach, it is also possible to pass parameters to the callback method by passing an array of parameters to the tween instance’s onCompleteParams property like so:

tween.onComplete = tweenDone;
tween.onCompleteParams = ["hello", 3];

private function tweenDone(param1:String, param2:int):void {
	trace(param1, param2);
}

Now that we are armed with some basic knowledge of how BetweenAS3 operates, let’s take a look at some specific examples of this powerful tweening engine in action.

The Basic Tween

Before diving straight into examples, let’s first create a couple simple class files that we can reuse throughout this tutorial. The first thing we’ll want is a target to tween. For this we’ll simply extend the Sprite object and use its graphics property to draw a small grey square. This then is our TweenTarget class:

package  {

	import flash.display.Sprite;

	/**
	 * Simple DisplayObject to demonstrate BetweenAS3
	 */
	public class TweenTarget extends Sprite {

		public function TweenTarget() {
			graphics.beginFill(0x999999);
			graphics.drawRect(0, 0, 25, 25);
			graphics.endFill();
		}
	}
}

The second bit of code we’ll want to get out of the way is a template that we can use with each example. This class will just create an of a textfield (that simply says to click to start or stop the tween), and a tween instance class property. It will also contain a toggleTween method that, using the methods mentioned above, will allow our ITween instance to start or stop by clicking the stage. Once our template is made, the only things that will change from example to example are the name of the class (unless you’d like to overwrite each example), the initTween method which creates our class property tween instance, perhaps the easing method imports, and possibly a few other small details. The general template, then will look like this:

package  {

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Expo;
	import org.libspark.betweenas3.tweens.ITween;

	[SWF(width='540', height='200', backgroundColor='#000000', frameRate='60')]
	public class TweenExample extends Sprite {

		private var _tween:ITween;
		private var _tf:TextField;

		public function TweenExample() {
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(event:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);

			initText();
			initTween();

			stage.addEventListener(MouseEvent.CLICK, toggleTween);
		}

		private function initText():void {
			var fmt:TextFormat = new TextFormat("_sans", 12, 0xFFFFFF);
			_tf = new TextField();
			_tf.selectable = false;
			_tf.mouseEnabled = false;
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.defaultTextFormat = fmt;
			_tf.text = "Click to start/stop tween.";
			_tf.x = Math.round(stage.stageWidth * .5 - _tf.width * .5);
			_tf.y = Math.round(stage.stageHeight - _tf.height - 10);
			addChild(_tf);
		}

		private function initTween():void {
			// will change from example to example
		}

		private function toggleTween(event:MouseEvent):void {
			// if the tween is playing, stop it
			if (_tween.isPlaying) {
				_tween.stop();
			} else {
				// otherwise if the tween is at the end, start it over
				if (_tween.position == _tween.duration) {
					_tween.gotoAndPlay(0);
				// if it's not at the end, simply play the tween
				} else {
					_tween.play();
				}
			}
		}
	}
}

Now that we are armed with these basic items, let’s roll up our sleeves and dig into a concrete example of BetweenAS3 in action. As mentioned earlier, the syntax for creating a basic tween looks like this:

_tween = BetweenAS3.tween(target, toObject, fromObject, time, easing);

In more detail, the target is the obejct whose property or properties we wish to tween, the toObject is an object containing properties and their corresponding ending values. Likewise, the fromObject is an object containing the same properties as the toObject, but with their beginning value. Time is the duration of the tween in seconds, and easing is an IEasing interface instance which we can get from the org.libspark.betweenas3.easing package. In our initTween method, then, let’s create a TweenTarget instance, add it to the display list and use it as the target of our tween instance. So initTween becomes:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 20;
	targ.y = 60;
	addChild(targ);
	_tween = BetweenAS3.tween(targ, { x:500 }, null, 2.0, Expo.easeOut);
}

Notice that we passed a null in place of a fromObject. By doing so, we are telling BetweenAS3 to use the tween target’s current properties. We already created the toggleTween method which will play the tween when you click the stage, so go ahead and compile the .swf. You should get something like the example below:

Delaying a Tween

As mentioned, complex tweens can be built with BetweenAS3 by nesting various static methods of the class. So far we have looked at only one of those methods, tween. Let’s look at another, now, delay. Like the tween method, delay returns an instance of an ITween interface. The delay method syntax looks like this:

var tween:ITween = BetweenAS3.delay(ITweenToDelay, delayTime, postDelayTime);

Here, the ITweenToDelay is a tween instance we wish to delay, the delay time is how many seconds the tween should be delayed before the tween starts and the postDelayTime is how many seconds the tween should be delayed before the next tween starts. The postDelayTime defaults to 0.0 and, in this example, we will leave it so.

So, let’s go back to our TweenExample template and change the initTween method to look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 20;
	targ.y = 60;
	addChild(targ);
	var t:ITween = BetweenAS3.tween(targ, { x:500 }, null, 2.0, Expo.easeOut);
	_tween = BetweenAS3.delay(t, 1.0);
}

Now, when we compile our example, we see that when we click on the stage, there is a one second delay before the tween target tweens its way across the stage like below.

Parallel and Serial Tweens

The next static methods of the BetweenAS3 class we’ll consider are parallel and serial. The parallel method lets you run any number of tween instances at the same time. Similarly, the serial method allows you to run any number of tween instances in a row (one after another). Syntactically, both methods are identical, you simply pass any number of ITween instances as parameters.

For our parallel example, let’s change our initTween method to look like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;
	addChild(targ1);

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;
	addChild(targ2);

	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Expo.easeOut);
	var t2:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Expo.easeOut);
	_tween = BetweenAS3.parallel(t1, t2);
}

Once compiled, that will look like this:

And for our serial example, try this for the initTween method:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;
	addChild(targ1);

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;
	addChild(targ2);

	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut);
	var t2:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeOut);
	_tween = BetweenAS3.serial(t1, t2);
}

Note that we’ve tried a different easing method here which means a different easing method will need to be imported from the org.libspark.betweenas3.easing package before compiling. Once compiled, though, you’ll see something like this:

At this point it should start to be obvious what was meant when it was stated that very complex tweens could be built up by nesting simpler tweens. For example, you could easily pass two parallel tweens and a delayed tween to the BetweenAS3 serial method and so on.

Reversing and Repeating Tweens

The next two static methods we’ll look at are reverse and repeat. The reverse method, as its name suggests, reverses a tween and takes two parameters, the tween to reverse and a boolean indicating whether or not to reverse the tween’s position. Most often you would simply leave this boolean set to its default state of true. The repeat method, true to it’s name, repeats a specified tween. Repeat accepts two arguments: the tween instance to repeat and the number of times it should repeat.

This time our initTween method will be a little bit trickier and we’ll really start to see the power of nesting BetweenAS3 calls. We’ll begin by creating a basic tween that moves our TweenTarget instance across the stage with a nice elasticity. Nothing new there. Then, though, we’ll create a repeated tween that repeats four times. That repeated tween will be passed an instance of a serial tween that tweens first the basic tween then the reverse of the basic tween. Our initTween method then will look like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 60;
	addChild(targ1);
	var t1:ITween = BetweenAS3.tween(targ1, { x:500 }, { x:targ1.x }, 2.0, Elastic.easeInOut);
	_tween = BetweenAS3.repeat(BetweenAS3.serial(t1, BetweenAS3.reverse(t1)), 4);
}

Compiled, you should get a result such as this:

Adding and Removing Children

One of the interesting benefits of using BetweenAS3 is the ability to add and remove child display objects as a tween using the static methods addChild and removeFromParent respectively. The addChild method expects two arguments: the child to add and the parent the child should be added to. The removeFromParent accepts only a single argument, the child to remove. Both of these methods, again, return ITween instances and can be nested into other BetweenAS3 methods to build up complex tween sequences.

In this example, we’ll instantiate three TweenTarget instances, use the BetweenAS3.addChild method to add them to the display list with a .5 second delay, tween them all across the stage in parallel, then use the removeFromParent method to get remove them from the display list. This time our initTween method looks like this:

private function initTween():void {
	var targ1:TweenTarget = new TweenTarget();
	targ1.x = 20;
	targ1.y = 25;

	var targ2:TweenTarget = new TweenTarget();
	targ2.x = 20;
	targ2.y = 60;

	var targ3:TweenTarget = new TweenTarget();
	targ3.x = 20;
	targ3.y = 95;

	var t1:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ1, this), .5);
	var t2:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ2, this), .5);
	var t3:ITween = BetweenAS3.delay(BetweenAS3.addChild(targ3, this), .5, .5);
	var t4:ITween = BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut);
	var t5:ITween = BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeIn);
	var t6:ITween = BetweenAS3.tween(targ3, { x:500 }, null, 2.0, Elastic.easeInOut);
	var t7:ITween = BetweenAS3.parallel(t4, t5, t6);
	var t8:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ1), .5);
	var t9:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ2), .5);
	var t10:ITween = BetweenAS3.delay(BetweenAS3.removeFromParent(targ3), .5);

	_tween = BetweenAS3.serial(t1, t2, t3, t7, t8, t9, t10);
}

Note that for the sake of legibility, I created several single ITween instances, but if you really wanted to, you could actually create the _tween instance in a single line like so:

_tween = BetweenAS3.serial(BetweenAS3.delay(BetweenAS3.addChild(targ1, this), .5), BetweenAS3.delay(BetweenAS3.addChild(targ2, this), .5), BetweenAS3.delay(BetweenAS3.addChild(targ3, this), .5, .5), BetweenAS3.parallel(BetweenAS3.tween(targ1, { x:500 }, null, 2.0, Elastic.easeOut), BetweenAS3.tween(targ2, { x:500 }, null, 2.0, Elastic.easeIn), BetweenAS3.tween(targ3, { x:500 }, null, 2.0, Elastic.easeInOut)), BetweenAS3.delay(BetweenAS3.removeFromParent(targ1), .5), BetweenAS3.delay(BetweenAS3.removeFromParent(targ2), .5), BetweenAS3.delay(BetweenAS3.removeFromParent(targ3), .5));

Such is the power of nesting tween methods in BetweenAS3.

Whichever method you choose to create your tween instance, the compiled .swf will look like the example below:

Color Tweening

In addition to nesting ITween instances it is also possible with BetweenAS3 to nest property objects to build complex tweens. In this example we’ll take a look at how to tween the properties of the colorTransform property of the transform property of the TweenTarget instance. This time in our initTween method, we’ll enlarge our TweenTarget instance, then tween its color. Our initTween method will look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 235;
	targ.y = 40;
	targ.scaleX = 3;
	targ.scaleY = 3;
	addChild(targ);
	_tween = BetweenAS3.tween(targ, { transform:{colorTransform:{ redOffset:-255, greenOffset:-255, blueOffset:255 }} }, null, 4.0, Expo.easeOut);
}

Compiled, you should see something like the below:

Filter Tweening

Again, by nesting property objects, BetweenAS3 can also be used to tween DisplayObject filters. In this quick example, we’ll take a look at tweening a glow filter back and forth. Before we begin though, there is one other property of the ITween interface to take a look at: the stopOnComplete property. This property is a boolean that tells the tween to stop when it is finished. If set to false, as it will be in this example, the tween will run indefinitely starting at it’s beginning each time it completes. In this example, we’ll again enlarge our TweenTarget instance, add a GlowFilter object to its filters property, then, finally tween that filter. Our initTween method will look like this:

private function initTween():void {
	var targ:TweenTarget = new TweenTarget();
	targ.x = 235;
	targ.y = 40;
	targ.scaleX = 3;
	targ.scaleY = 3;
	addChild(targ);
	targ.filters = [new GlowFilter(0xFFFF00, 1, 0, 0, 2, 3)];
	var t1:ITween = BetweenAS3.tween(targ, { _glowFilter: { blurX:32, blurY:32 } }, { _glowFilter: { blurX:0, blurY:0 }},  1.0, Expo.easeOut);
	_tween = BetweenAS3.serial(t1, BetweenAS3.reverse(t1));
	_tween.stopOnComplete = false;
}

Compiled our glow filter example will look like this:

In case you’re wondering where that “_glowFilter” property came from, BetweenAS3 will, by default, recognize the following filter properties: “_bevelFilter”, “_blurFilter”, “_colorMatrixFilter”, “_convolutionFilter”, “_displacementMapFilter”, “_dropShadowFilter”, “_glowFilter”, “_gradientBevelFilter”, “_gradientGlowFilter”, and “_shaderFilter”.

Tweening Array Members

Possibly one of my favorite features of BetweenAS3 is its ability to tween the members of Array instances just like they were properties of an object (which, when you think about it, they are). Why would you want to tween array members, you ask. Well, one possible example is that you want to tween an image from “normal” to “embossed” and back again. You can easily emboss an image using a ConvolutionFilter, but to tween the transition will require tweening an array.

If you’re not familiar with the ConvolutionFilter object, you create one using a matrix array. Creating a ConvolutionFilter with an array like this (0,0,0,0,1,0,0,0,0), will not affect the image to which it’s applied. Using an array like this however, (-2,-1,0,-1,1,1,0,1,2), will emboss the image.

So, in this example, we will embed an image, create a tween that tweens the members of the array that change and then tweens them back, and add an event listener to that tween so as the tween updates, a ConvolutionFilter has its matrix property updated then the filter is applied to our image.

Because this script is so completely different from all the others, I will present it in its entirety below:

package  {

	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.ConvolutionFilter;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Quad;
	import org.libspark.betweenas3.events.BetweenEvent;
	import org.libspark.betweenas3.tweens.ITween;

	[SWF(width='540', height='450', backgroundColor='#000000', frameRate='60')]
	public class MatrixTween extends Sprite {

		[Embed(source = "../assets/prague.jpg")]
		private var JPG:Class;

		private var _image:Sprite;
		private var _tween:ITween;
		private var _tf:TextField;

		private var _matrixArray:Array = [ 0, 0, 0, 0, 1, 0, 0, 0, 0];
		private var _convFilter:ConvolutionFilter = new ConvolutionFilter(3, 3, _matrixArray);

		// IDENTITY ARRAY:	(0,0,0,0,1,0,0,0,0)
		// EMBOSS ARRAY:	(-2,-1,0,-1,1,1,0,1,2);

		public function MatrixTween() {
			_image = new Sprite();
			_image.addChild(new JPG());
			addChild(_image);

			initText();
			initTween();

			stage.addEventListener(MouseEvent.CLICK, toggleTween);
		}

		private function initText():void {
			var fmt:TextFormat = new TextFormat("_sans", 12, 0xFFFFFF);
			_tf = new TextField();
			_tf.selectable = false;
			_tf.mouseEnabled = false;
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.defaultTextFormat = fmt;
			_tf.text = "Click to start/stop tween.";
			_tf.x = Math.round(stage.stageWidth * .5 - _tf.width * .5);
			_tf.y = Math.round(stage.stageHeight - _tf.height - 10);
			addChild(_tf);
		}

		private function initTween():void {
			var t1:ITween = BetweenAS3.tween(_matrixArray, { 0: -2, 1: -1, 3: -1, 4:1, 5:1, 7:1, 8:2 }, { 0:0, 1:0, 3:0, 4:1, 5:0, 7:0, 8:0 }, 2.0, Quad.easeInOut);
			_tween = BetweenAS3.serial(t1, BetweenAS3.reverse(t1));
			_tween.addEventListener(BetweenEvent.UPDATE, applyFilter);
		}

		private function applyFilter(event:BetweenEvent):void {
			_convFilter.matrix = _matrixArray;
			_image.filters = [_convFilter];
		}

		private function toggleTween(event:MouseEvent):void {
			if (_tween.isPlaying) {
				_tween.stop();
			} else {
				if (_tween.position == _tween.duration) {
					_tween.gotoAndPlay(0);
				} else {
					_tween.play();
				}
			}
		}
	}
}

Notice how the index numbers of the array members are used as property names. Compiling the .swf will yield the results below:

In conclusion, even though still in version 0.00 (Preview) at the time of writing this, BetweenAS3 is already a powerful tween engine addition to any actionscript coder’s arsenal. As always, I always recommend using the right tool for the job and BetweenAS3 may certainly not be right for every time a tween is required, but at the cost of a measly 14k or so, it is definitely worth keeping handy. For more information regarding BetweenAS3, check out this slide show created by the engine’s author.

The post Getting Started With BetweenAS3 first appeared on TheTechlabs.com.

Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part I/II

Mario Santos — Mon, 13 Jul 2009 11:30:14 +0000

In this article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

So, why the XML term in title? Easy, the gallery will work also with a xml if you want to, just change two lines of code and it is working with a XML file.

And the PHP? If you want the gallery to auto load and discover the photos, you will need to have two simple php files on any web/local server (php support is mandatory). One of this files will automatically discover the images in folder and create the XML with them, when this creation is done it informs flash of it’s location.

Final Result:

This gallery will have some cool final result features, lets take a brief look:

Auto find images in folder (works with PNG,JPEG,JPG)
Write an XML file automatically
Can work only with a XML file and without php
Have a full screen option
Fit’s automatically the screen center.
Can customize the speed of slideshow.
Automatically generate thumbnails of images in folder *
Spread the thumbnails automatically on the screen *
Make the slideshow static (only open’s in thumbnail click) *
Can be configured without any XML (with flash vars) *

This project will be divided into two parts, on the first we will focus the first 6 topics, and on the second part the other ones.

Requirements.

Have Flash CS4
A amp server (or similar like wampserver), any online hosting with php support works to.
The TweenLite engine that you can download here

Pre Requirements

Know a little of PHP
Understand the concept of constraint layout in flash (auto position content)
A good knowledge of Flash, especially Action Script 3

Getting started

Keep in mind that this is a complex tutorial and you will need to pay some attention to details, so… if you are following this tutorial or if you got the source and have any doubts you should not ignore any step… follow them carefully.

Step 1 – Setting up PHP

Make sure you got an installed php server, go to your web server root (if local and using wamp server, something like c:/wamp/www) and create a folder called gallery, inside it create two php files named discover.php and imageHandler.php these files will handle any request from flash, discover the image files in folder, create a images.xml file and output his name to flash.

Write down this code on imageHandler.php:

rn";
		  $data.="rn";
		  for($h=0; $hrn";
		  }
		  $data.="";

		  if($file_name!='') {
			  @unlink($file_name);
			  $myFile = $file_name;
			  $fh = fopen($myFile, 'w');
			  fwrite($fh, $data);
			  fclose($fh);
			  return $file_name;
		  }
		  else return $data;
   	}
  }
?>

This PHP Class has two different functions, one is to discover all the JPG, JPEG and PNG files and output them in an array, the second one is a function to create an images.xml file, that will output a XML file something like this:

On the second part of this tutorial we will change a little the php class to create and write down the images thumbnails in here, for now only the structure.

On the other php document, discover.php, write this down:

getImageList("./");

  echo($tm->ary2xml($data,0,'',"images.xml"));
?>

This will call the getImageList function, then with the images array we call the function to write down the images.xml, this last function returns the filename when done: images.xml.

That’s all, just put some pictures in this folder, we will need them to continue in flash.

Step 2 – Creating a new project in Flash

This is quite simple, create a new project and define his stage size 850x470px. The stage size is not important because our flash gallery will automatically fetch the stage area, so you do not need to respect this size…but make it similar…

On our timeline, create 4 layers, name the top one “actions”, the second “masker”, the third masker and the bottom one “imageLoader”. This is all that we need. After creating this layers, you should have something link this:

These layers disposition is very important, in the controls layer we will put a custom preloader, and a movieclip with two icons to control the normal/full screen mode and the speed of our slideshow. In the masker layer, we will simply put a movieclip to mask the imageLoader (to create the mask effect). On the imageLoader we will put a movieclip that will hold the loader to load our images and on the actions layer we will write down our code.

First of all lets create the preloader, the mask and the imageLoader movieClip’s.

Save your file.

Step 3 – Creating the image preloader

The image preloader is very simple, just create a new empty movieclip and name it preloader (Menu Insert->New Symbol or CTRL+F8), After this on our movieclip create 3 layers, name the top one “Loader” the middle one “Mask” and the bottom one “Bar”. On the “Loader” layer create a static text and write “Loading…” And on the mask layer create a rectangle with 104×15, and color like #CCCCCC then put it behind the Loading Text.. size the loading text field to fit this rectangle…

On the last layer, the Bar, create another rectangle, color it #999999 and put it on the left side of the loading text and convert it into a symbol (name it masker_bar), after these steps you must have the things like this:

Now, extend the 3 layers till the frame 100 (click on each layer frame 100 and right-click->Insert key frame). This will allow us to make a animation from 0 to 100, creating the loading effect.

On the bottom layer, the bar one, right click on frame 10/15 and select Create Classic Tween, then select the frame 100 of this layer, then select the Left masker_bar symbol and put it over the loading area, make sure it covers it all, something like this:

This will create a smooth move animation, the final part is to put some stop actions on the start and end frames, click on frame one of the Mask layer, then click F9 (actions) and write stop(); do the same on layer 100. Then mask the bar: Right-click on the mask layer and then select Mask.

We have finished our image preloader:

Time to save your project.

Step 4 – Creating the image loader

The image loader is quite simple, if still inside the preloader, go back main stage, select menu Insert->New Symbol then name it “imageLoader”. After this, do nothing inside the imageLoader, leave it empty… we need this that was so we can add a loader into it as child, that will load our image.

Go back to main stage.

Step 5 – Creating a mask movieClip.

Do the same steps to create a new movieClip, but name this one “masker” and inside him, on the first layer and frame simply draw a small rectangle…10x15px is enough. This rectangle movieCLip will be used as mask, we will resize it according to each image size, so it masks the image correctly.

Step 6 – Creating the animation lines

Another very simple step. Insert a new movieClip, name it Liner but this time export it to action script, we will need this to call the lines into Action Script code, the MovieClip properties should be like this (it’s in French, but you will easy understand when looking at the options):

Then in this movieClip select the line tool and make a long horizontal line, with +- 2500px, make sure it starts on the x=0 and y=0 coordinates, like this:

This is done, save it and go back to main stage.

Step 7 – Creating the control buttons

For this step, you will need my images that can be downloaded here, take those two png images (max.png and speed2.png) and import them into flash; File->Import to stage, and select those two images. On the stage, just put the two images side-by-side and then convert them into a “slideControls” movieClip.

Open this movieclip and here we need to do some stuff.

Click on the arrows image, and then convert it onto a movieClip named “fullScreen”, and do the same to the other left icon and name it “speed”. On the properties of each movieClip on the instance name write down “fullscreen” for the fullScreen button and “speedBtn” for the speed button. This will allow us to identify this clips in action script.

Now, double Click on the speed button, we will make a static image click able on the small arrows, for this inside the speed button, create a new layer, name it backBtns, and on this one create a small rectangle, color it #CCCCCC and with +- the size of each small arrow, then convert it into a backBtn movieClip. Copy a new instance of it from library and put them over the small arrows, like this:

Name the top instance on properties panel of “up” and the bottom one “down”. Go to right panel, choose style, and alpha property equal to 0.

This is now ready to receive some code.

Now, create a new Layer above the existent, name it actions and go to panel actions to write this down:

	up.useHandCursor=true;
  up.buttonMode=true;
  up.addEventListener(MouseEvent.CLICK, onClick);
	down.useHandCursor=true;
  down.buttonMode=true;
  down.addEventListener(MouseEvent.CLICK, onClick);

	function onClick(evt:MouseEvent):void {
	  if(evt.target.name.toString()=="up") {
  	//go up
		  dispatchEvent(new Event("speedUp"));
  	}
  	else {
  	//go down
  	dispatchEvent(new Event("speedDown"));
  	}
 }

stop();

This will dispatch two custom events that we will listen on main stage to perform the speed change action. The events names are “speedUp” when user clicks to increase speed and “speedDown” to decrease.

Go back inside the slideControls movieClip, add a new layer on top, name it “actions” and in the panel actions write this down:

	fullScreen.buttonMode=true;
  fullScreen.useHandCursor=true;
  fullScreen.addEventListener(MouseEvent.CLICK, onFullMouse);
  fullScreen.addEventListener(MouseEvent.MOUSE_OVER, onFullMouse);
  fullScreen.addEventListener(MouseEvent.MOUSE_OUT, onFullMouse);

	function onFullMouse(evt:MouseEvent):void {
	  if(evt.type==MouseEvent.CLICK) {
  	(stage.displayState==StageDisplayState.NORMAL) ?
		stage.displayState=StageDisplayState.FULL_SCREEN :
		stage.displayState=StageDisplayState.NORMAL;
	  }
   else if(evt.type==MouseEvent.MOUSE_OVER)
		{
  	fullScreen.alpha=0.5;
  	}
  else {
		fullScreen.alpha=1;
  }
}

This will make our fullScreen image behave as a button, and add 3 listeners on it. In this case i use only one function to handle the 3 events, because they have something in common, the argument is on the 3 cases a MouseEvent, so i use only one function and compare the event type. If it’s a CLICK the flash checks if the displayState is in full screen and turn it on normal state or do the inverse.

The stage.displayState = StageDisplayState.FULL_SCREEN transform flash in full screen, but only if we make a small transformation on the publishing argument “allowFullScreen” of the HTML to true. We will see this later.

Well, save your project again.

Step 8 – Place movieClip’s on stage.

It’s now time to put all things on our stage. Because all of our stuff will be automatically sized and placed on stage, we do not really need to concern about the position of elements, just make sure you set up the good instance names and put them on the correct layers.

So, go to main stage, click on the layer “controls” and drag and drop the “preloader” and “slideControls” movieClip’s from the library into the stage, the place does not matters. Click now on the preloader movieclip and name it’s instance “preloader”, do the same on slideControls movieClip and name it’s instance to “galControls”.

Click now on layer masker, and drag the masker movieClip from library into stage, name it’s instance “masker”.

Finally click on “imageLoader” layer and drag the “imageLoader” movieclip into stage (because it’s an empty movieClip pay some attention to the place and the small round circle, this is where your imageLoader is) and name the instance as “imageLoader”.

Note: Naming these instances is very important, or you will get some errors while accessing to the movieClip’s from Action Script.

Now you just need to mask the layer mask; Right-click on it and select Mask.

You should get something like this…

Well… we are almost done, now is time to code… but before…

Step 9 – Understanding stage constraint

When, the things might be a little confusing, but this image will help you out, we will have a image (box) on screen and we need to center it, easy, but if the stage size changes (when going to full screen) the center of the stage changes, so we need to reset it’s position. We simply add an event to listen resizeEvents on stage to reposition the box on screen center, so.. look at the following image, it will help you out on the code.

So, now that we learn a little more about the layout, lets take a quick view on the tasks we have to make (from top to bottom order):

Setup elements positions on screen.
Call the discover service (discover.php) and wait for it’s response.
Read the xml file returned from the discover service.
Transform the xml data to an array.
Preload first photo
Animate and show first photo, load the timer to loa next photos

These are the main things we have to do in Action Script, so lets begin.

Step 10 – Declare all the variables and imports

So, click the actions layer and on frame one actions write this down and make sure you got the gs folder of TweenLite in the same folder of your flash file:

import gs.TweenLite; //tween classes
import gs.plugins.*; //tweenlite sizePlugin

  //variables
  var HOST:String="http://www.msdevstudio.com/mywork/gallery/"; //gallery host
  var CUR_PHOTO:int=-1; //actual photo
  var FIRST_RUN:Boolean=true; //first run
  var IMAGE_LOADED:Boolean=false; //is there a loaded image?
  var IMAGES:Array = new Array(); //images array
  var SPEED:Number=3000;

	var timex:Timer = new Timer(SPEED); //timer to change photos
  var LT:Liner = new Liner(); //our lines
  var LB:Liner = new Liner();

	var ldr:Loader = new Loader(); //our image loader
  var PhpLoader:URLLoader = new URLLoader(); //the php loader / discover service
  var XmlLoader:URLLoader = new URLLoader(); //xml loader

	//file loaders, discover.php and the XML result file
	PhpLoader.addEventListener(Event.COMPLETE, onPhpComplete); //php discover
  XmlLoader.addEventListener(Event.COMPLETE, onXmlComplete); //php loader

 	//stage properties, align left and no scale
  stage.scaleMode = StageScaleMode.NO_SCALE;
  stage.align = StageAlign.TOP_LEFT;

	//activate the tweenLite setSize() plugin
  TweenPlugin.activate([SetSizePlugin]);

	//add the loader to imageLoader and set his alpha to 0;
  imageLoader.addChild(ldr);
  imageLoader.alpha=0;

	//galLoader events
  galControls.speedBtn.addEventListener("speedUp", changeSpeed);
  galControls.speedBtn.addEventListener("speedDown", changeSpeed);

  //out image loader listeners
  ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageComplete)
  ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);

  //Add Resize listener
  stage.addEventListener(Event.RESIZE, onResizeS);

  //timer event for image transitions
  timex.addEventListener(TimerEvent.TIMER, onTime);

The main declarations are many, you will find comments on code that will help you out, you just have to change the path for your server on the HOST variable (make sure to add a ending slash.) If you want, you can leave it like that… well, at least it will work on your localhost.

Now we need to create the functions to handle all this stuff…

Step 11 – Create handling functions

These are the functions that will handle all the events and requests of our code, you will get comments on each one, and what for it’s used.

Write this next to previous step code:

/*** function to increase/decrease speed ***/

function changeSpeed(evt:Event):void {
	if(evt.type.toString()=="speedUp") {
		SPEED+=1000; //+1 second
	}
	else SPEED-=1000;
	if(SPEED<1000) SPEED=1000; //minimum speed;
	timex.delay=SPEED; //change our timer speed
}

/*** image load progress, used to set the preloader animation state ***/
function onProgress(evt:ProgressEvent):void {
	var percentLoadede:Number = evt.bytesLoaded/evt.bytesTotal;
	var percent:Number = Math.round(percentLoadede * 100); //percentage loaded
	preloader.gotoAndStop(percent); //set the correct frame of preloader anim.
	if(percent==100) preloader.gotoAndStop(1); //if complete, goto to first frame
}

/****************Setup the lines at screen center ********************/
function setLines():void {
	LT.width=stage.stageWidth; //total screen size
	LT.y=(stage.stageHeight/2)-7.5; //middle - 7.5px the loader has 15px height
	LT.x=0; //at 0

	LB.width=stage.stageWidth;
	LB.y=(stage.stageHeight/2)+7.5;
	LB.x=0;

	addChild(LT); //add lines as stage childs.
	addChild(LB);
}

/*****called when image loading process is complete ********************/
function onImageComplete(evt:Event):void {
	TweenLite.to(preloader,1,{alpha:0}); //hide the preloader with smooth alpha effect 

  imageLoader.height=ldr.height; //change size of the imageloader according to image size
  imageLoader.width=ldr.width;

  imageLoader.x=(stage.stageWidth/2)-(imageLoader.width/2); //imageLoader on center x
  imageLoader.y=(stage.stageHeight/2)-(imageLoader.height/2); //imageLoader on center y

  imageLoader.alpha=1; //show the imageLoader MC
  IMAGE_LOADED=true; //the image is loaded
  CUR_PHOTO++; //increese photo loaded;

  if(FIRST_RUN==true) { //if is the first run
  	timex.start(); //if it's first run, activate the timer to load next images.
 		FIRST_RUN=false; //now it's not the first run
  }
  AnimateToImage(); //animate the mask and lines to make the appear effect
}

/*********** function to reset imageLoader to orignial screen center position ****/
function fixLoader():void {
	imageLoader.height=ldr.height; //fetch the imageloader size to image size
	imageLoader.width=ldr.width;

	imageLoader.x=(stage.stageWidth/2)-(imageLoader.width/2); //imageLoader center x
	imageLoader.y=(stage.stageHeight/2)-(imageLoader.height/2); //imageLoader center y
	masker.width=stage.stageWidth;
	masker.x=0;
	masker.y=(stage.stageHeight/2)-(imageLoader.height/2);
	masker.height=(imageLoader.height/2);
}

/******************* function to load separated images *********************/
function loadImage(img:String=null):void {
	setPreload(); //set the preloader original position
	TweenLite.to(preloader,1,{alpha:1}); //make it appear
	ldr.load(new URLRequest(img)); //laod the requested image
}

/***** Animate the lines and mask to show the image loaded *******/
function AnimateToImage():void {

  TweenLite.to(imageLoader, 1, {alpha:1}); //alpha the imageLoader
  TweenLite.to(masker, 1, {setSize:{height:imageLoader.height}, y:masker.y-(imageLoader.height/2)+7.5}); //resize the mask
	//make lines close the image to original position
  TweenLite.to(LT, 1, {y:imageLoader.y, setSize:{width:stage.stageWidth, height:1}});
  TweenLite.to(LB, 1, {y:imageLoader.y+imageLoader.height, setSize:{width:stage.stageWidth, height:1}});
  //animation is done, so lets start the timer again
  timex.start();
 }

/*** put preloader at center position *********/
  function setPreload():void {
      preloader.x=(stage.stageWidth/2)+4;
  	preloader.y=(stage.stageHeight/2)+7.5;
 }

/****** set the controls on bottom ****/
  function setControls():void {
	    galControls.x=stage.stageWidth-(galControls.width+20);
  	galControls.y=stage.stageHeight-(galControls.height+20);
 }

/*** Set mask original position ****/
  function setMasker():void {
  	masker.width=stage.stageWidth;
  	masker.x=0;
  	masker.y=(stage.stageHeight/2)-7.5;
  	masker.height=15;
 }

/*** Set the imageLoader original position **/
  function setLoader():void {
  	imageLoader.width=stage.stageWidth;
  	imageLoader.x=0;
  	imageLoader.y=(stage.stageHeight/2)-7.5;
  	imageLoader.height=15;
}

/*********** Called on Resize, reset the lines at center screen **/
function ReloadLines():void {
	//if the is an image loaded
	if(IMAGE_LOADED==true)
	{
		//position the lines to center screen
		TweenLite.to(LT, 1, {y:(stage.stageHeight/2)-(imageLoader.height/2), setSize:{width:stage.stageWidth, height:1}, overwrite:0});
		TweenLite.to(LB, 1, {y:(stage.stageHeight/2)+(imageLoader.height/2), setSize:{width:stage.stageWidth, height:1}, overwrite:0});
		TweenLite.to(imageLoader,1,{x:(stage.stageWidth/2)-(imageLoader.width/2), y:(stage.stageHeight/2)-(imageLoader.height/2), overwrite:0})
		TweenLite.to(masker,1,{x:0, y:(stage.stageHeight/2)-(masker.height/2),overwrite:0, setSize:{width:stage.stageWidth}})
	}
	else
	{
		//Kill existing tween, if a tween is running, force stop at the end of effect
		TweenLite.killTweensOf(LT, true);
	 	TweenLite.killTweensOf(LB, true);
		TweenLite.killTweensOf(imageLoader, true);
		TweenLite.killTweensOf(masker, true);
	 	//animate the lines to original "closed" position
		TweenLite.to(LT, 1, {y:(stage.stageHeight/2)-7.7, setSize:{width:stage.stageWidth, height:1},overwrite:0});
		TweenLite.to(LB, 1, {y:(stage.stageHeight/2)+7.5, setSize:{width:stage.stageWidth, height:1},overwrite:0});
		TweenLite.to(masker, 1, {x:0, y:(stage.stageHeight/2)-7.5, setSize:{width:stage.stageWidth, height:15},overwrite:0});
		TweenLite.to(imageLoader, 1, {y:(stage.stageHeight/2)-7.5, setSize:{width:stage.stageWidth, height:15},overwrite:0});
		//we run this to fix a bug founded when passing to fullscreen during a transition.. this resets all this to original position;
		//do not ask me why this happens, but it happens some times, maybe because a tweenlite bug!
		TweenLite.killTweensOf(LT, true);
	 	TweenLite.killTweensOf(LB, true);
		TweenLite.killTweensOf(imageLoader, true);
		TweenLite.killTweensOf(masker, true);
	}
	//move controls and loader to new position.
	TweenLite.to(galControls,1,{x:stage.stageWidth-(galControls.width+20), y:stage.stageHeight-(galControls.height+20), overwrite:0})
	TweenLite.to(preloader,1,{x:(stage.stageWidth/2)+4,y:(stage.stageHeight/2)+7.5, overwrite:0})
}

/******* on screen resize ***/
function onResizeS(evt:Event):void {
	ReloadLines();
}

/**** send lines back to original position, close effect ****/
  function resetLines(loadNext:String=null):void {
		TweenLite.to(imageLoader, 1, {alpha:0});
  	TweenLite.to(masker, 1, {setSize:{height:15}, y:(stage.stageHeight/2)-7.5});

		setPreload();

		TweenLite.to(LT, 1, {y:(stage.stageHeight/2)-7.5, setSize:{width:stage.stageWidth, height:1}});
		TweenLite.to(LB, 1, {y:(stage.stageHeight/2)+7.5, setSize:{width:stage.stageWidth, height:1}});

	 if(loadNext!=null) {
  	TweenLite.to(preloader, 1, {alpha:1, onComplete:loadImage, onCompleteParams:[HOST+"/"+IMAGES[CUR_PHOTO+1].imageName]});
  }
  else  TweenLite.to(preloader, 1, {alpha:1});
}

/******* On time function, load next image ***/
function onTime(evt:TimerEvent):void {
	timex.stop(); //stop the timer so images don't load befor that previous load is complete
	if((CUR_PHOTO+1)>(IMAGES.length-1)) CUR_PHOTO=-1; //if it's the final photo, load next

	if(IMAGE_LOADED==true) { //if it is loaded, reset the lines and load photo after that
		IMAGE_LOADED=false;
		resetLines(HOST+"/"+IMAGES[CUR_PHOTO+1].imageName); //load image after reseting lines
	}
	else {
		loadImage(HOST+"/"+IMAGES[CUR_PHOTO+1].imageName);
	}
}

/*** on php discover response ****/
function onPhpComplete(evt:Event):void {
 	 XmlLoader.load(new URLRequest(HOST+"/"+PhpLoader.data))
}

/*** on xml loaded, build images array ***/
function onXmlComplete(evt:Event):void {
  IMAGES = xml2Array(evt.target.data); //load images into array
  onTime(new TimerEvent(TimerEvent.TIMER)); //load first;
}

/*** tranform xml response into array ****/
function xml2Array(dados:String):Array {
			var menuXML:XML = new XML(dados);
			//just in case
			menuXML.ignoreWhitespace = true;
			//get XML item's entrys
			var XMLItems = menuXML.descendants("image");
			//load all items into an array
			var itemsArray:Array = new Array();
			var itemObj:Object;
			for(var i in XMLItems)
			{
				itemObj=new Object();
				itemObj.imageName=XMLItems[i].@nameI; //save image path into imageName
				itemObj.imageThumb=XMLItems[i].@thumb; //save image thumb path
				itemObj.itemID="image-"+i;
				itemsArray.push(itemObj);
			}
		return itemsArray;
}

Almost done! The main function are all done, we just need to initialize the things up.

Step 12 – Writing initialization code

Just add this after all this code:

setLines();
setControls();
setPreload();
setMasker();
setLoader();

var req:URLRequest = new URLRequest(HOST+"discover.php");
PhpLoader.load(req);
stop();

This will start all the slide and gallery process, you should not get any errors, but if you find some one just say.

Save your file and run your movie.

Step 13 – Allowing fullScreen on HTML

Full screen will into work, we need to make some changes into the published HTML, first of all Publish your project; File->Publish

After this, you will get an HTML file with the same name of your project, you just need to browse the source code of that HTML file, and find (usually) the 3 “allowFullScreen” parameters in the embed code, set all these 3 to “true”;

Save your HTML File, and load it on a browser! Now you have full screen mode available, just click in the arrow’s on bottom.

Final Notes

The first part of this tutorial is now complete, you will have some time to understand the code and why not suggest improvements, some things could be simplified, maybe… but this is up to you. Want to test with your own pictures? Just change the HOST path, and put some pictures on that folder.

If you want the slideshow to read the XML instead auto-discovering the images, just go to the end of the code, and replace this:

var req:URLRequest = new URLRequest(HOST+"discover.php");
req.method = URLRequestMethod.GET;
PhpLoader.load(req);

by this:

var req:URLRequest = new URLRequest(HOST+"images.xml");
XmlLoader.load(req);

And make sure you have the same structure that i have on the XML file. (Step 1).

Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part II/II

Here is the second part: Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part II/II

The post Create an intelligent XML image Gallery & Slideshow in Flash CS4 (+PHP) – Part I/II first appeared on TheTechlabs.com.

Build a Creative “Swirl Animated Menu” with Flash CS4

Mario Santos — Wed, 01 Jul 2009 12:00:35 +0000

Flash it’s a powerful application and can be really complex, but even beginners can create a cool menu for demonstration or for use in a personal site. The menu that we will create is simple, but the swirl animation is something that you don’t see everywhere, for that I’ve decided to explain one way to make an animation of growing swirls without any Action Script code.You will also learn how to import artwork from illustrator where I’ve pre-made the graphics, the work is very simple and the result will be very cool.

Final Result

The final result of this tutorial is a growing swirl effect in a simple menu, take a look.

Pre-Requisites

We will use a Adobe Illustrator file that I’ve made with the graphical elements. Grab it here and don’t worry if you don’t work with Illustrator, you do not need to open it.

You will need Flash CS4 (but it will work also in previous versions).

You should feel fine about developing in Adobe Flash and Action Script 3.

Step 1 – Setup Flash Environment

The very first thing is to create a new Action Script 3 Project! Please ignore the OS in French, this is how I work. The things should be easy to follow.

On properties, change the dimensions to:

In here setup the speed to 70 frames/second to make the animation faster. We got now our flash stage prepared, now is time to work, but before save it as menu.fla.

Step 1 – Import Illustrator artwork into Flash

If you do not work with illustrator you should! Illustrator it’s a great tool, not only for print design, but also for web. One of the cool features is the possibility to transform illustrator elements into movie clips without exit illustrator. In our case, this is already done, so you do not need to open the menuBig.ai file, just download the zip file and extract it to any place.

Go to flash menu File, then select Import and Import into stage (CTRL+R) and browse to the location where you have extracted the Illustrator menuBig.ai file, then select it and choose Open. A new window will now open with all of illustrator elements, and if you take a closer look, you will find all elements with movie clips icon’s, these are the converted artwork from illustrator, so, select all the elements like this:

Now click OK, the artwork should be placed correctly into the stage, like this:

So, everything is ready to use.

Step 2 – Isolate each button elements.

We need to isolate each button because each one is different, for that follow these steps:

Select the Green button circle, the green swirl and the Home label. (to select more that one element press shift while selecting)
Right-Click on those elements, and select Convert to Symbol.
Name the Movie Clip myButtonGreen and click ok.

Repeat these 3 steps for both red and blue elements but on the third one, change the name to myButtonRed for the red one and myButtonBlue for the blue one.

Now each button elements are on his own Movie Clip.

The next thing to do, is to name each button instance, this is extremely important! Click on each button, go to to panel properties, and on the instance name write myButtonGreen, myButtonRed and myButtonBlue on each one of the buttons. This will allow us to access them via action script.

Step 3 – Distribute the menus to layers.

Now that we have all the artwork successfully imported into the stage, each button is created and for clean organization we will need to separate all the things into layers, that process is very easy, will all selected (CRTL+A), Right-Click on one of the menu items and select Distribute to Layers, that will create some new layers with separated artwork, like these ones:

This will give us more control on each element.

The next thing to do is to create on each swirl an animation. This is the next step

Step 4 – Creating the growing animation

This animation almost impossible to achieve in action script code, so the work should be made in pure frame-by-frame animation. We will create a mask that will show is contents along with some few frames. We could create a rectangle to mask, put it outside the swirl area and making it move over the swirl to make it appear… but that is to much automatic, so we need to make it seems more real, but how to do this?

Easy! Instead the rectangle, we will use the pencil with a small circular brush. Let me explain.

First, we will start with the green button. Double click on it and then double click on the swirl Movie Clip. Now you can see the full swirl in an unique layer right?

Create now a new layer and name it mask. With this layer selected go to the tools panel and select the pencil tool, the one on the small picture here.

Then go bottom on the tools panel, and on the pencil size, choose the third one counting from top.

Now on the selected layer click with mouse to draw a point over the swirl near the button green limits, on a “visible area”, i mean on the area that will be visible on the swirl, because some parts of the swirl will be behind the green circle we do not need to mask them (if you cannot see well the circle limits make a zoom on stage to 200%), after that create a new keyframe on this layer and put one or two new “brush points”, create a third layer and continue with the same steps and some more “brushes points” to cover all the “visible” swirl area, you can guide yourself by the back green circle. I will explain the first three steps, then the middle and the final completed mask elements. This mask fill should be made progressive to demonstrate the grow effect.

Se what I’m talking about:

Step 5 – Creating the fade-out animation

Now we will create a fade-out transition next to the last frame (on my case the frame 46), create a keyframe on the bottom layer on frame 46 (or on your case the last one) then on the frame 56 create a new keyframe.
Now right-click on one of the middle frames, one between frame 46 and 56 and select Create Classic Animation, a arrow will fill the frames, like this:

Now we need to put the alpha equal to 0 on our swirl clip on the final frame, just click on the last frame, then click on the swirl movie clip the go to right panel, color effects and select style as alpha. Choose 0%.

Our clip has now also a fade-out effect, just need to extend also the mask to it, for that click on frame 56 from the mask layer and insert a keyframe there (F6). Now our animation is complete, just need to avoid that the grow and fade out animation starts. Just create a new layer on top of them, name it actions and insert 3 keyframes, one on the first frame and other on the frame before the fade-out animation (in this case 45) and the last one at the frame 46. Click on the first frame and go to actions panel and just write:

stop();

Do the same thing at the frame 45 on the layers action. It’s almost done.

The last thing to do is to make this swirl invisible to the first frame (i don’t want it to be visible at start, just on Mouse Over action) so, Click on the first frame of the mask, then press SHIFT key and then click the last frame of the bottom layer (where is the swirl), this will select the 2 layers frames. Now drag the mouse to your right till the frames are positioned on frame 2, this will insert a empty frame at the beginning on both layers that will make the swirl and the mask invisible at first frame that is what we want, it should stay stopped there (stop();) and showing nothing (empty frames). He should only show the grow animation when we send it to play at frame two, and the fade-out animation when we send it play the frame 47 (48 because we moved all the stuff one frame right). Click on the frame 47/48 on the layer actions and name the frame “fade” (without the “” ). With this we will be able to call the gotoAndPlay(“fade”) to fadeout the swirl.

Finally, Right-Click the layer mask and select Mask.

Check if all the layers are similar:

Swirl animation it’s done! If you run the application, it will remain as this:

Step 6 – Create how many menu items you want

Because we got 3 menu items, you will need to do the same animation procedure to both Red an Blue items, the same “Step 4” steps, is not mandatory the number of frames to be equal, but longer the frame animation, longer the animation smooth effect. Remember, enter the clip, then enter the swirl clip, create a layer mask, draw the progressive mask effect, create a fade-out, create a layer actions, make them stop at the correct layers, move them to right one layer, name the fade layer as “fade” and save all this.

The procedure is the same for how many menu items you want even if in my case I’ve only used 3.

Now we got all this ready to rock, but because i want the click area be only the size of the circle, we need to do something about it, that lead us to the next step.

Step 7 – Preparing the menu items.

Because i want that the label color changes when the user put the mouse over, i need to create a second state for each label, i will explain the first and then you do the other two. First thing to do is to double click on the buttonGreen, then double click again in the label home. You are now inside label home movie clip. Transform the “Home” text into a new movie clip called home, then on the same layer create a keyframe on the second frame. The label movie clip will be automatically copied, now just need to click on the “About” in the second frame, the go to right panel and on color effects choose tint and choose a white color. It’s done!

Just one more thing, add a second layer on top name it actions and write on it:

stop();

Do this step in buttonAbout and buttonContact.

Now we need to make a circle with the same area as the button circle; Exit the label movie clip, and create a new layer on top, name it buttonBack, and draw a circle with the ellipse tool over the green circle without border color, something like this:

Then convert it to movie clip and name it buttonBack, then name the instance name as buttonBackGreen.

Go to right panel and make his style as alpha at 0%. This will serve as button, and it’s important that his instance name is buttonBackGreen.

Got to the other buttons and make the same process, create a new layer and this time import the buttonBack movie clip from the library, and put it over the button and name it buttonBackRed and buttonBlackBlue on both buttons and with alpha at 0%.

Well, our buttons are ready to be animated. Go back to main stage and name the greenButton instance as: btnGreenBig, the red as btnRedBig and the blue one as btnBlueBig.

Step 8 – Create a status area

On any of those layers create a dynamic text field and name his instance Mstatus. This will show our menu mouse interactions, like Over, Out or Click. This is not very important but to make it similar to mine do it anyway.

Step 9 – Writing some code

This is the final step, just use the empty layer that already exists in main stage, drag it to top of all layers, name it actions:

Now write this code on the layer actions:

loadButtons(); //load the listeners

function loadButtons():void {
	btnGreenBig.buttonBackGreen.useHandCursor=true;
	btnGreenBig.buttonBackGreen.buttonMode=true;

	btnRedBig.buttonBackRed.useHandCursor=true;
	btnRedBig.buttonBackRed.buttonMode=true;

	btnBlueBig.buttonBackBlue.useHandCursor=true;
	btnBlueBig.buttonBackBlue.buttonMode=true;

	btnGreenBig.buttonBackGreen.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
	btnGreenBig.buttonBackGreen.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
	btnGreenBig.buttonBackGreen.addEventListener(MouseEvent.CLICK, onMouseClick);

	btnBlueBig.buttonBackBlue.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
	btnBlueBig.buttonBackBlue.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
	btnBlueBig.buttonBackBlue.addEventListener(MouseEvent.CLICK, onMouseClick);

	btnRedBig.buttonBackRed.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
	btnRedBig.buttonBackRed.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
	btnRedBig.buttonBackRed.addEventListener(MouseEvent.CLICK, onMouseClick);
}

//the glow filters to apply the swirl
var glR:GlowFilter = new GlowFilter(0xcc0000,1,50,50,2.5);
var glG:GlowFilter = new GlowFilter(0x91e600,1,50,50,2);
var glB:GlowFilter = new GlowFilter(0x0033ff,1,50,50,3.5);

//mouse over handler
function onMouseOver(evt:MouseEvent):void {
	switch(evt.currentTarget.name) { //this is one way to find if the mouseOver is dispatched from the buttonBack MC
		case "buttonBackGreen":
			btnGreenBig.homeOverSwirl.gotoAndPlay(2); //animate the swirl grow
			btnGreenBig.homeLabel.gotoAndStop(2); //put the label on white
			btnGreenBig.homeOverSwirl.filters=[glG]; //applay filters to the swirl
			Mstatus.text="mouseOver Home!"; //update button status text
			startTimer(btnGreenBig); //start the timer to animate the cricular move of button
		break;
		case "buttonBackBlue":  //same as on the green button
			btnBlueBig.contactOverSwirl.gotoAndPlay(2);
			btnBlueBig.contactLabel.gotoAndStop(2);
			btnBlueBig.contactOverSwirl.filters=[glB];
			Mstatus.text="mouseOver Contact!";
			startTimer(btnBlueBig);
		break;
		case "buttonBackRed": //same as on the green button
			btnRedBig.aboutOverSwirl.gotoAndPlay(2);
			btnRedBig.aboutLabel.gotoAndStop(2);
			btnRedBig.aboutOverSwirl.filters=[glR];
			Mstatus.text="mouseOver About!";
			startTimer(btnRedBig);
		break;
	}
}

//mouse out handler
function onMouseOut(evt:MouseEvent):void {
	switch(evt.target) { //this is another way to check if the event is dispatched from buttonBack MC
		case btnGreenBig.buttonBackGreen:
			btnGreenBig.homeOverSwirl.gotoAndPlay("fade"); //play the fade effect
			btnGreenBig.homeLabel.gotoAndStop(1); //return label to his original color
			Mstatus.text="mouseOut Home!"; //update status text
			stopTimer(btnGreenBig); //stop the circular move
		break;
		case btnBlueBig.buttonBackBlue: //sabe as green button
			btnBlueBig.contactOverSwirl.gotoAndPlay("fade");
			btnBlueBig.contactLabel.gotoAndStop(1);
			Mstatus.text="mouseOut Contact!";
			stopTimer(btnBlueBig);
		break;
		case btnRedBig.buttonBackRed: //sabe as green button
			btnRedBig.aboutOverSwirl.gotoAndPlay("fade");
			btnRedBig.aboutLabel.gotoAndStop(1);
			stopTimer(btnRedBig);
			Mstatus.text="mouseOut About!";
		break;
	}
}

//click handler
function onMouseClick(evt:MouseEvent):void {
	switch(evt.currentTarget.name) {
		case "buttonBackGreen":
			Mstatus.text="mouseClick Home!";
		break;
		case "buttonBackBlue":
			Mstatus.text="mouseClick Contact!";
		break;
		case "buttonBackRed":
			Mstatus.text="mouseClick About!";
		break;
	}
}

/***circular animation ***/
var distance:Number = 0.4; //circular distance
var speed:Number=20; //more hight, less speed

//button timers to do the circular move
var time:Timer = new Timer(speed); //green one
var timerBlue:Timer = new Timer(speed); //blue
var timerRed:Timer = new Timer(speed); //red
//listeners to update button position
time.addEventListener(TimerEvent.TIMER, moveCircle);
timerRed.addEventListener(TimerEvent.TIMER, moveRed);
timerBlue.addEventListener(TimerEvent.TIMER, moveBlue);

//current rotation angle position
var angle:Number=0;
var angleB:Number = 0;
var angleR:Number = 0;

//green circular function
function moveCircle (e:TimerEvent):void {
	btnGreenBig.x = btnGreenBig.x + (Math.cos(angle) * distance);
	btnGreenBig.y = btnGreenBig.y + (Math.sin(angle) * distance)
	angle += 0.1;
}

//red circular function
function moveRed (e:TimerEvent):void {
	btnRedBig.x = btnRedBig.x + Math.cos(angleR) * distance;
	btnRedBig.y = btnRedBig.y + Math.sin(angleR) * distance;
	angleR += 0.1;
}

//blue circular function
function moveBlue(e:TimerEvent):void {
	btnBlueBig.x = btnBlueBig.x + Math.cos(angleB) * distance;
	btnBlueBig.y = btnBlueBig.y + Math.sin(angleB) * distance;
	angleB += 0.1;
}

//start timer/circular anim on the provided movieclip.
function startTimer(it:MovieClip):void {
	if(it==btnGreenBig) time.start();
	if(it==btnRedBig) timerRed.start();
	if(it==btnBlueBig) timerBlue.start();
}
//stop timer/circular anim
function stopTimer(it:MovieClip):void {
	if(it==btnGreenBig) time.stop();
	if(it==btnRedBig) timerRed.stop();
	if(it==btnBlueBig) timerBlue.stop();
}

Well, this code is enough.

Step 10 – Finishing our application

Change background color to black then save and run the project! This step is quite simple!

Nice ah?

Final considerations!

Take some time to read the code, I’ve made some comments that will help you out.

Some of the code could be even more simplified, but i did not do that because this way the things get easy to understand. The timer could be replaced by a Enter Frame event but some times that will overload the menu, these three timers can be replaced only for one, saving you a few lines of code, but this is your work right?

Hope you like it! And again! Don’t forget to follow us on twitter and subscribe to our RSS feed!

The post Build a Creative “Swirl Animated Menu” with Flash CS4 first appeared on TheTechlabs.com.