LetsFlex

Actionscript based effects examples

jlagunas — Fri, 19 Dec 2008 01:42:04 +0000

Here’s an example of the effects code from a previous post. It fades the Flex icon out and in, same goes with the move effect, it moves the Flex icon to the bottom right and back.

MXML File

VIEW SOURCE

ModuleManager with ProgressBar and Fade Effect

jlagunas — Wed, 17 Dec 2008 20:44:55 +0000

This examples shows you how you can use the ModuleManager with the ProgressBar and a fade effect.

MXML File

moduleManager.as

import flash.display.DisplayObject;
import mx.controls.Alert;
import mx.events.ModuleEvent;
import mx.modules.IModuleInfo;
import mx.modules.ModuleManager;

[Bindable]
private var moduleInfo:IModuleInfo;
private var displayObject:DisplayObject;

private function moduleHandler(moduleUrl:String):void
{
	if(moduleLoader.numChildren > 0)
	{
		if(moduleInfo.url != moduleUrl)
			unloadModule();
		else
			return;
	}

	currentState = "progress";

	moduleInfo = ModuleManager.getModule(moduleUrl);
	moduleInfo.addEventListener(ModuleEvent.READY, readyHandler);
	moduleInfo.addEventListener(ModuleEvent.ERROR, errorHandler);
	moduleInfo.load();
}

private function readyHandler(event:ModuleEvent):void
{
	displayObject = moduleInfo.factory.create() as DisplayObject;

	moduleLoader.addChild(displayObject);

	FadeEffect(displayObject, 1000, 0, 0, 1);

	currentState = "";
}

private function errorHandler(event:ModuleEvent):void
{
	Alert.show("ERROR Loading Module: " + moduleInfo.url, "ERROR");
	currentState = "";
}

private function unloadModule():void
{
	moduleLoader.removeAllChildren();
	moduleInfo.unload();
}

effects.as

import mx.effects.Move;
import mx.effects.Fade;
import mx.effects.easing.Cubic;

public function MoveEffect(target:Object, duration:Number, delay:Number, xStart:Number, xEnd:Number, yStart:Number, yEnd:Number):void
{
	var moveEffect:Move = new Move();
	moveEffect.end();
	moveEffect.target = target;
	moveEffect.duration = duration;
	moveEffect.startDelay = delay;
	moveEffect.easingFunction = Cubic.easeInOut;
	moveEffect.xFrom = xStart;
	moveEffect.xTo = xEnd;
	moveEffect.yFrom = yStart;
	moveEffect.yTo = yEnd;
	moveEffect.play();
}

public function FadeEffect(target:Object, duration:Number, delay:Number, alphaFrom:Number, alphaTo:Number):void
{
	var fadeEffect:Fade = new Fade();
	fadeEffect.end();
	fadeEffect.target = target;
	fadeEffect.duration = duration;
	fadeEffect.startDelay = delay;
	fadeEffect.easingFunction = Cubic.easeInOut;
	fadeEffect.alphaFrom = alphaFrom;
	fadeEffect.alphaTo = alphaTo;
	fadeEffect.play();
}

VIEW SOURCE

Effect easing classes

jlagunas — Wed, 17 Dec 2008 19:58:50 +0000

Here’s the list of all the easing classes for the effects package.

Back
Bounce
Circular
Cubic
Elastic
Exponential
Linear
Quadratic
Quartic
Quintic
Sine

Effects

jlagunas — Wed, 17 Dec 2008 19:15:45 +0000

Using the Fade effect class via Actionscript. The same thing can be done with the other effects such as Move.

import mx.effects.Fade;
import mx.effects.Move;
import mx.effects.easing.Cubic;

public function FadeEffect(target:Object, duration:Number, delay:Number, alphaFrom:Number, alphaTo:Number):void
{
	var fadeEffect:Fade = new Fade();
	fadeEffect.end();
	fadeEffect.target = target;
	fadeEffect.duration = duration;
	fadeEffect.startDelay = delay;
	fadeEffect.easingFunction = Cubic.easeInOut;
	fadeEffect.alphaFrom = alphaFrom;
	fadeEffect.alphaTo = alphaTo;
	fadeEffect.play();
}

public function MoveEffect(target:Object, duration:Number, delay:Number, xStart:Number, xEnd:Number, yStart:Number, yEnd:Number):void
{
	var moveEffect:Move = new Move();
	moveEffect.end();
	moveEffect.target = target;
	moveEffect.duration = duration;
	moveEffect.startDelay = delay;
	moveEffect.easingFunction = Cubic.easeInOut;
	moveEffect.xFrom = xStart;
	moveEffect.xTo = xEnd;
	moveEffect.yFrom = yStart;
	moveEffect.yTo = yEnd;
	moveEffect.play();
}

Module Loader

sucka — Wed, 17 Dec 2008 08:02:02 +0000

Here is a quick and easy way of using ModuleLoader to load other sections of your “site”, just remember that the modules that you are loading are not any ol’ regular swfs like the ones that you can export from flash, they are modules specifically for the ModuleLoader.

MXML File

VIEW SOURCE

google maps: geocoding with text input fields

jlagunas — Wed, 26 Nov 2008 17:19:54 +0000

This google maps examples contains text input fields for the address, city, state and zip code which are then used to geocode and place a marker on that latitude and longitude. the markers themselves are clickable and contain its address.

note: you will need to download the Google Maps API for Flash SDK.

MXML File


	

		
			Label { font-weight: bold; }
		

		
			 0)
					{
						map.setCenter(placeMarkers[0].point, currentMapZoom);

						var marker:Marker = new Marker(placeMarkers[0].point);
						marker.addEventListener(MapMouseEvent.CLICK, markerClickHandler);

						function markerClickHandler(event:MapMouseEvent):void
						{
							contentFormat = new TextFormat();
							contentFormat.font = "Arial";
							contentFormat.size = 12;

							var address:String = placeMarkers[0].address;

							var infoWindow:InfoWindowOptions = new InfoWindowOptions();
							// USE REPLACE TO FIND THE FIRST COMMA AT THE END OF THE PHYSICAL ADDRESS
							// AND SWAP IT OUT WITH A NEW LINE FOR THE CITY, STATE, ZIP CODE AND COUNTRY
							infoWindow.content = address.replace(", ", "n");
							infoWindow.contentFormat = contentFormat;
							infoWindow.padding = 10;

							marker.openInfoWindow(infoWindow);
						}

					map.addOverlay(marker);

					}
				}

				private function geocodingFailureHandler(event:GeocodingEvent):void
				{
					Alert.show("can not locate: " + event.name);
				}

				private function mapResizeHandler(event:ResizeEvent):void
				{
					map.setSize(new Point(mapComponent.width, mapComponent.height));
				}

				private function intMapType():void
				{
					mapTypes = new Array(MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.HYBRID_MAP_TYPE, MapType.PHYSICAL_MAP_TYPE);

					if(!currentMapType)
						currentMapType = 0;

					mapType.dataProvider = mapTypes;
					mapType.labelFunction = getMapTypeLabels;
					mapType.selectedIndex = currentMapType;

					map.enableScrollWheelZoom();
					map.enableContinuousZoom();
				}

				private function mapTypeChangeHandler():void
				{
					currentMapType = mapType.selectedIndex;
					map.setMapType(IMapType(mapTypes[currentMapType]));
				}

				private function getMapTypeLabels(item:Object):String
				{
					return IMapType(item).getName();
				}

				private function intMapZoom():void
				{
					mapZoomSlider.minimum = map.getMinZoomLevel();
					mapZoomSlider.maximum = map.getMaxZoomLevel();
					mapZoomSlider.allowTrackClick = true;
				}

				private function mapZoomChangeHandler():void
				{
					currentMapZoom = mapZoomSlider.value;

					if(map.isLoaded())
						map.setZoom(currentMapZoom);
				}

				private function updateMapZoom(event:MapEvent):void
				{
					currentMapZoom = map.getZoom();
					mapZoomSlider.value = currentMapZoom;
				}

			]]>

VIEW SOURCE

google maps: controls

jlagunas — Wed, 26 Nov 2008 06:27:20 +0000

Don’t feel like using the default controls that google provides? Well here is an example on using a ComboBox component for the different map types and a VSlider for zooming in and out.

note: you will need to download the Google Maps API for Flash SDK.

MXML File


	

		
			Label { font-weight: bold; }
		

		
			 0)
					{
						map.setCenter(placeMarkers[0].point, currentMapZoom);

						var marker:Marker = new Marker(placeMarkers[0].point);
						marker.addEventListener(MapMouseEvent.CLICK, markerClickHandler);

						function markerClickHandler(event:MapMouseEvent):void
						{
							contentFormat = new TextFormat();
							contentFormat.font = "Arial";
							contentFormat.size = 12;

							var address:String = placeMarkers[0].address;

							var infoWindow:InfoWindowOptions = new InfoWindowOptions();
							// USE REPLACE TO FIND THE FIRST COMMA AT THE END OF THE PHYSICAL ADDRESS
							// AND SWAP IT OUT WITH A NEW LINE FOR THE CITY, STATE, ZIP CODE AND COUNTRY
							infoWindow.content = address.replace(", ", "n");
							infoWindow.contentFormat = contentFormat;
							infoWindow.padding = 10;

							marker.openInfoWindow(infoWindow);
						}

					map.addOverlay(marker);

					}
				}

				private function geocodingFailureHandler(event:GeocodingEvent):void
				{
					Alert.show("can not locate: " + event.name);
				}

				private function mapResizeHandler(event:ResizeEvent):void

				{
					map.setSize(new Point(mapComponent.width, mapComponent.height));
				}

				private function intMapType():void
				{
					mapTypes = new Array(MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.HYBRID_MAP_TYPE, MapType.PHYSICAL_MAP_TYPE);

					if(!currentMapType)
						currentMapType = 0;

					mapType.dataProvider = mapTypes;
					mapType.labelFunction = getMapTypeLabels;
					mapType.selectedIndex = currentMapType;

					map.enableScrollWheelZoom();
					map.enableContinuousZoom();
				}

				private function mapTypeChangeHandler():void
				{
					currentMapType = mapType.selectedIndex;
					map.setMapType(IMapType(mapTypes[currentMapType]));
				}

				private function getMapTypeLabels(item:Object):String
				{
					return IMapType(item).getName();
				}

				private function intMapZoom():void
				{
					mapZoomSlider.minimum = map.getMinZoomLevel();
					mapZoomSlider.maximum = map.getMaxZoomLevel();
					mapZoomSlider.allowTrackClick = true;
				}

				private function mapZoomChangeHandler():void
				{
					currentMapZoom = mapZoomSlider.value;

					if(map.isLoaded())
						map.setZoom(currentMapZoom);
				}

				private function updateMapZoom(event:MapEvent):void
				{
					currentMapZoom = map.getZoom();
					mapZoomSlider.value = currentMapZoom;
				}

			]]>

VIEW SOURCE

google maps: InfoWindowOptions.customContent

jlagunas — Tue, 25 Nov 2008 21:52:34 +0000

The following example continues from the previous post google maps geocoding service by using the customContent parameter to display an image instead of using the content parameter to display company information.

note: you will need to download the Google Maps API for Flash SDK Version 1.8a.

MXML File

VIEW SOURCE

XML File

VIEW XML

google maps: geocoding service

jlagunas — Tue, 26 Aug 2008 17:53:01 +0000

The following example shows you an introduction to google’s map geocoding service to find your address from an xml file.

note: you will need to download the Google Maps API for Flash SDK.

MXML File

VIEW SOURCE

XML File

VIEW XML

button click handler with alert window using AS3

jlagunas — Tue, 22 Jul 2008 18:01:09 +0000

The following example shows you how to listen for a button click and show an alert window using actionscript 3.

VIEW SOURCE