Galeria rotativa

Posteado el 22. Nov, 2010 por tuto in Flash

En este link podrás ver lo que aprenderás en este tutorial de Flash

PASO 1
Creamos un nuevo documento de Flash (ActionScript 3.0).

Galeria rotativa

PASO 2
En la ventana Properties modificamos el tamaño a 940 x 940 píxeles, un color de fondo negro y un Frame rate de 60 fps.

Galeria rotativa

PASO 3
En el centro de nuestro documento creamos la forma de un rectángulo con un color gris claro como se ve en la imagen.

Galeria rotativa

PASO 4
Damos clic derecho sobre el rectángulo y vamos a la opción Convert to Symbol…

Galeria rotativa

PASO 5
En la ventana le colocamos el nombre de flashmo mask y seleccionamos la opción Movie Clip.

Galeria rotativa

PASO 6
Vamos a la ventana Properties y en la opción de Instance name colocamos el nombre de flashmo_mask.

Galeria rotativa

PASO 7
Creamos una capa nueva sobre la capa de la máscara y creamos un rectángulo que cubra la parte superior, al rectángulo le agregamos un color de relleno negro y una opacidad de 75%.

Galeria rotativa

PASO 8
Convertimos el rectángulo en un Movie clip y le colocamos el nombre de photo_info_bg.

Galeria rotativa

PASO 9
En la ventana Properties en le espacio de Instance name colocamos el nombre de photo_info_bg.

Galeria rotativa

PASO 10
Con la herramienta de texto vamos a crea un cuadro de texto como el que se ve en la imagen.

Galeria rotativa

PASO 11
En la ventana Properties vamos a colocar los valores que se ven en la imagen.

Galeria rotativa

PASO 12
Seleccionamos la capa del texto y la convertimos en un Movie Clip y le colocamos el nombre de flashmo_pic_info.

Galeria rotativa

PASO 13
En la ventana Properties en la opción Instance name colocamos el nombre de flashmo_pic_info.

Galeria rotativa

PASO 14
Creamos una nueva capa y creamos un rectángulo pequeño debajo del espacio donde irá el texto de la descripción de cada foto.

Galeria rotativa

PASO 15
Convertimos en Movie Clip este rectángulo y le colocamos el nombre de loading bg, luego en la ventana Properties en la opción Instance name le colocamos el nombre de loading_info_bg.

Galeria rotativa

PASO 16
Creamos una nueva capa de texto sobre el espacio del cargador y en la ventana Properties colocamos los valores que se ven en la imagen.

Galeria rotativa

PASO 17
Vamos a dibujar una pestaña la cual nos servirá cuando hagamos un over sobre las imágenes.

Galeria rotativa

PASO 18
A la capa del texto en la ventana Properties le colocamos los valores que se ven en la imagen.

Galeria rotativa

PASO 19
Convertimos la forma y el texto en un Movie Clip y le colocamos el nombre de tooltip luego en la ventana Properties en la opción Instance name colocamos el nombre flashmo_tooltip.

Galeria rotativa

PASO 20
Creamos una nueva capa y dibujamos los dos botones que servirán para la navegación dentro de las imágenes.

Galeria rotativa

PASO 21
Ahora convertimos en botón el dibujo del preview y en la ventana Properties le colocamos el nombre de flashmo_previous.

Galeria rotativa

PASO 22
Al botón de next le colocamos el nombre de flashmo_next.

Galeria rotativa

PASO 23
Creamos una nueva capa y dentro de esta dibujamos el botón de cerrar, convertimos a botón nuestro dibujo y en la ventana Properties le colocamos el nombre de flashmo_close.

Galeria rotativa

PASO 24
Ahora creamos una nueva capa y dibujamos el espacio que utilizara nuestro scrooll horizontal, lo convertimos en movie clip lo nombramos drag area y luego en la ventana properties le colocamos el nombre de drag_area.

Galeria rotativa

PASO 25
En una capa nueva dibujamos el botón que servirá para mover nuestro scroll, lo convertimos en movie clip y en la ventana properties le colocamos el nombre de dragger.

Galeria rotativa

PASO 26
Ahora creamos una capa nueva a la cual vamos a nombrar actions, vamos a la Timeline y nos colocamos en el frame 1 y presionamos la tecla F9 y en la ventana copiamos el siguiente código Actions Scipts.

import caurina.transitions.*;
 
flashmo_graphic.visible = false;
loading_info.text = "Cargando Datos XML...";
 
var folder:String = "photos/";
var css_file:String = "flashmo_210_style.css";
var show_tooltip:Boolean = true;	// true OR false
var follow_mouse:Boolean = false;	// true OR false
var follow_mouse_value:Number = 1;
var tween_duration:Number = 0.5;
var rotation_speed:Number = 5;	// range from 1 to 10
var radius_x:Number = 320;
var radius_y:Number = 80;
var tn_border_size:Number = 5;
var tn_border_color:Number = 0xFFFFFF;
var photo_border_size:Number = 10;
var photo_border_color:Number = 0xFFFFFF;
var bar_status:uint = 0;
var dragger_x:Number = 3000;
var dragger_y:Number = 3000;
 
var pic_info_x:Number;
var pic_info_y:Number;
var previous_x:Number;
var previous_y:Number;
var next_x:Number;
var next_y:Number;
var close_x:Number;
var close_y:Number;
 
var progress_interval:uint;
var loading_y:Number;
var y_offset:Number;
var dynamic_speed:Number = 0;
var ratio:Number;
var i:Number;
var tn:Number = 0;
var current_pic_no:Number = -1;
var next_pic_no:Number;
var total_items:Number;
var pic_loader:Loader = new Loader();
var css_loader:URLLoader = new URLLoader();
var flashmo_style:StyleSheet = new StyleSheet();
var flashmo_xml:XML;
var flashmo_photo_list = new Array();
var photo_bm:Bitmap = new Bitmap();
var mc:MovieClip = new MovieClip();
var flashmo_pic:MovieClip = new MovieClip();
var flashmo_pic_border:Shape = new Shape();
var photo_property:MovieClip = new MovieClip();
var thumbnail_group:MovieClip = new MovieClip();
 
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener( FullScreenEvent.FULL_SCREEN, check_screen_mode );
flashmo_fullscreen.addEventListener( MouseEvent.CLICK, switch_screen_mode );
 
flashmo_tooltip.visible = false;
flashmo_pic_info.visible = false;
flashmo_close.visible = false;
flashmo_previous.visible = false;
flashmo_next.visible = false;
flashmo_fullscreen.visible = false;
close_loading.visible = false;
 
photo_property.mask = flashmo_mask;
 
this.removeChild(flashmo_mask);
this.addChild(thumbnail_group);
this.addChild(flashmo_tooltip);
 
function load_gallery(xml_file:String):void
{
	var xml_loader:URLLoader = new URLLoader();
	xml_loader.load( new URLRequest( xml_file ) );
	xml_loader.addEventListener( Event.COMPLETE, create_gallery );
 
	y_offset = 85;
	loading_y = loading_info_bg.y;
	stage.addEventListener( Event.RESIZE, resize_listener );
}
 
this.x = Math.floor( stage.stageWidth * 0.5 );
this.y = Math.floor( stage.stageHeight * 0.5 ) - y_offset;
 
function resize_listener( e:Event ): void
{
	this.x = Math.floor( stage.stageWidth * 0.5 );
	this.y = Math.floor( stage.stageHeight * 0.5 ) - y_offset;
}
 
function create_gallery(e:Event):void
{
	flashmo_xml = new XML(e.target.data);
	total_items = flashmo_xml.photo.length();
 
	show_tooltip = flashmo_xml.config.@show_tooltip.toString() == "false" ? false : true;
	follow_mouse = flashmo_xml.config.@follow_mouse.toString() == "true" ? true : false;
 
	if( flashmo_xml.config.@folder.toString() != "" )
		folder = flashmo_xml.config.@folder.toString();
 
	if( flashmo_xml.config.@css_file.toString() != "" )
		css_file = flashmo_xml.config.@css_file.toString();
 
	if( flashmo_xml.config.@tween_duration.toString() != "" )
		tween_duration = parseFloat( flashmo_xml.config.@tween_duration.toString());
 
	if( flashmo_xml.config.@rotation_speed.toString() != "" )
		rotation_speed = parseInt( flashmo_xml.config.@rotation_speed.toString());
 
	if( flashmo_xml.config.@radius_x.toString() != "" )
		radius_x = parseFloat( flashmo_xml.config.@radius_x.toString());
 
	if( flashmo_xml.config.@radius_y.toString() != "" )
		radius_y = parseFloat( flashmo_xml.config.@radius_y.toString());
 
	if( flashmo_xml.config.@tn_border_size.toString() != "" )
		tn_border_size = parseInt( flashmo_xml.config.@tn_border_size.toString());
 
	if( flashmo_xml.config.@tn_border_color.toString() != "" )
		tn_border_color = flashmo_xml.config.@tn_border_color.toString();
 
	if( flashmo_xml.config.@photo_border_size.toString() != "" )
		photo_border_size = parseInt( flashmo_xml.config.@photo_border_size.toString());
 
	if( flashmo_xml.config.@photo_border_color.toString() != "" )
		photo_border_color =  flashmo_xml.config.@photo_border_color.toString();
 
	if( flashmo_xml.config.@bar_status.toString() != "" )
		bar_status = parseInt( flashmo_xml.config.@bar_status.toString());
 
	if( flashmo_xml.config.@dragger_x.toString() != "" )
		dragger_x = parseFloat( flashmo_xml.config.@dragger_x.toString());
 
	if( flashmo_xml.config.@dragger_y.toString() != "" )
		dragger_y = parseFloat( flashmo_xml.config.@dragger_y.toString());
 
	if( !show_tooltip )
	{
		this.removeChild(flashmo_tooltip);
	}
	else
	{
		flashmo_tooltip.visible = false;
		flashmo_tooltip.addEventListener( Event.ENTER_FRAME, tooltip );
	}
 
	if( follow_mouse ) follow_mouse_value = -1;
 
	if( rotation_speed > 10 || rotation_speed < 1 ) rotation_speed = 5;
 
	for( i = 0; i < total_items; i++ )
	{
		flashmo_photo_list.push( {
			thumbnail: flashmo_xml.photo[i].thumbnail.toString(),
			filename: flashmo_xml.photo[i].filename.toString(),
			tooltip: flashmo_xml.photo[i].tooltip.toString(),
			description: flashmo_xml.photo[i].description.toString()
		} );
	}
	css_loader.load( new URLRequest(css_file) );
	css_loader.addEventListener(Event.COMPLETE, css_complete);
}
 
function css_complete(e:Event):void
{
	flashmo_style.parseCSS(css_loader.data);
	flashmo_pic_info.photo_description.styleSheet = flashmo_style;
	load_tn();
}
 
function load_tn():void
{
	var pic_request:URLRequest = new URLRequest( folder + flashmo_photo_list[tn].thumbnail );
 
	pic_loader = new Loader();
	pic_loader.load(pic_request);
	pic_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, tn_progress);
	pic_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, tn_loaded);
	tn++;
}
 
function tn_progress(e:ProgressEvent):void
{
	loading_info.text = "Cargando miniaturas " + tn + " de " + total_items;
	loading_info_bg.width = loading_info.width;
}
 
function tn_loaded(e:Event):void
{
	var flashmo_tn_bm:Bitmap = new Bitmap();
	var flashmo_tn_mc:MovieClip = new MovieClip();
 
	flashmo_tn_bm = Bitmap(e.target.content);
	flashmo_tn_bm.smoothing = true;
	flashmo_tn_bm.x = - flashmo_tn_bm.width * 0.5;
	flashmo_tn_bm.y = tn_border_size;
 
	if( tn_border_size > 0 )
	{
		var bg_width:Number = flashmo_tn_bm.width + tn_border_size * 2;
		var bg_height:Number = flashmo_tn_bm.height + tn_border_size * 2;
 
		flashmo_tn_mc.graphics.beginFill(tn_border_color);
		flashmo_tn_mc.graphics.drawRect( - bg_width * 0.5, 0, bg_width, bg_height );
		flashmo_tn_mc.graphics.endFill();
	}
 
	flashmo_tn_mc.addChild(flashmo_tn_bm);
	flashmo_tn_mc.name = "flashmo_tn_" + thumbnail_group.numChildren;
	flashmo_tn_mc.buttonMode = true;
	flashmo_tn_mc.y = 1000;
 
	thumbnail_group.addChild( flashmo_tn_mc );
 
	if( tn < total_items )
		load_tn();
	else
	{
		pic_loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, tn_progress);
		pic_loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, tn_loaded);
		pic_loader = null;
		activate_carousel();
	}
}
 
function activate_carousel():void
{
	for( i = 0; i < total_items; i++ )
	{
		mc = MovieClip( thumbnail_group.getChildByName("flashmo_tn_" + i) );
		mc.addEventListener( MouseEvent.CLICK, tn_click );
		mc.addEventListener( Event.ENTER_FRAME, tn_update );
		mc.angle = i * ( Math.PI * 2 / total_items );
		mc.enabled = false;
 
		if( show_tooltip )
		{
			mc.addEventListener( MouseEvent.MOUSE_OVER, tn_over );
			mc.addEventListener( MouseEvent.MOUSE_OUT, tn_out );
		}
	}
	loading_info.text = "";
	loading_info_bg.visible = false;
 
	if( dragger_y == 3000 )
		dragger.y = thumbnail_group.y + thumbnail_group.height + radius_y + 50;
	else
		dragger.y = dragger_y;
 
	drag_area.y = dragger.y;
	flashmo_fullscreen.y = dragger.y;
 
	if( dragger_x != 3000 )
	{
		dragger.x = dragger_x;
		drag_area.x = dragger.x;
		flashmo_fullscreen.x = dragger.x + 77;
	}
 
	dragger.visible = true;
	drag_area.visible = true;
	flashmo_fullscreen.visible = true;
 
	this.addChild( drag_area );
	this.addChild( dragger );
	this.addChild( flashmo_fullscreen );
	this.addEventListener( Event.ENTER_FRAME, on_update );
 
	thumbnail_group.scaleX = thumbnail_group.scaleY = thumbnail_group.alpha = 0.2;
	Tweener.addTween( thumbnail_group, { alpha: 1, scaleX: 1, scaleY: 1,
					 time: tween_duration, transition: "easeOutBack" } );
}
 
function on_update(e:Event):void
{
	sort_group(thumbnail_group);
}
 
function sort_group(group:MovieClip):void
{
	var i:int;
	var child_list:Array = new Array();
 
	i = group.numChildren;
 
	while(i--)
	{
		child_list[i] = group.getChildAt(i);
	}
 
	child_list.sortOn("y", Array.NUMERIC);
	i = group.numChildren;
 
	while(i--)
	{
		if( child_list[i] != group.getChildAt(i) )
		{
			group.setChildIndex(child_list[i], i);
		}
	}
}
 
function tn_update(e:Event):void
{
	mc = MovieClip(e.target);
	mc.x = Math.cos(mc.angle) * radius_x;
	mc.y = Math.sin(mc.angle) * radius_y;
 
	ratio = ( mc.y + radius_y ) / ( radius_y * 2 );
	if( ratio < 0.3 ) ratio = 0.3;
 
	mc.scaleX = mc.scaleY = ratio;
	mc.angle += dynamic_speed;
}
 
function tn_over(e:MouseEvent):void
{
	mc = MovieClip(e.target);
	flashmo_tooltip.visible = true;
	flashmo_tooltip.pic_title.text = flashmo_photo_list[ parseInt( mc.name.slice(11, 14) ) ].tooltip;
}
 
function tn_out(e:MouseEvent):void
{
	flashmo_tooltip.visible = false;
}
 
function tn_click(e:MouseEvent):void
{
	mc = MovieClip(e.target);
	next_pic_no = parseInt(mc.name.slice(11,13));
	load_photo();
}
 
function tooltip(e:Event):void
{
	flashmo_tooltip.x = mouseX;
	flashmo_tooltip.y = mouseY - 5;
}
 
function load_photo():void
{
	if( next_pic_no >= flashmo_photo_list.length )
		next_pic_no = 0;
	else if( next_pic_no < 0 )
		next_pic_no = flashmo_photo_list.length - 1;	
 
	close_loader();
 
	var pic_request:URLRequest = new URLRequest( folder + flashmo_photo_list[next_pic_no].filename );
	pic_loader = new Loader();
	pic_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_photo_loaded);
	pic_loader.load(pic_request);
 
	this.addChild( loading_info_bg );
	this.addChild( loading_info );
	this.addChild( close_loading );
 
	progress_interval = setInterval( add_progress_listener, 1000 );
}
 
function add_progress_listener()
{
	try
	{
		pic_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, on_photo_progress);
	}
	catch( e:Error ){}
}
 
function on_photo_progress(e:ProgressEvent):void
{
	clearInterval( progress_interval );
 
	if( !loading_info_bg.visible )
	{
		if( stage.displayState == StageDisplayState.NORMAL && flashmo_pic.numChildren > 0 )
			set_loading_y( loading_y + y_offset );
		else
			set_loading_y( loading_y );
 
		loading_info.text = "Cargando Imagen...";
		loading_on( true );
	}
	var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
 
	if( percent < 100 )
	{
		var filesize:Number = Math.round(e.bytesTotal / 1024);
		loading_info.text = "Cargando " + flashmo_photo_list[next_pic_no].tooltip +
							"... " + percent + "% (" + filesize + "KB)";
		loading_info_bg.width = loading_info.width;
	}
}
 
function on_close_load_click( me:MouseEvent ):void
{
	loading_on( false );
	close_loader();
	next_pic_no = current_pic_no;
}
 
function on_photo_loaded(e:Event):void
{
	try
	{
		clearInterval( progress_interval );
		loading_on( false );
 
		flashmo_fullscreen.mouseEnabled = false;
		flashmo_close.mouseEnabled = false;
		flashmo_pic.mouseEnabled = false;
 
		photo_bm = new Bitmap();
		photo_bm = Bitmap(e.target.content);
		photo_bm.smoothing = true;
 
		if( flashmo_pic.numChildren > 0 )
		{
			flashmo_pic_info.visible = flashmo_previous.visible =
			flashmo_next.visible = flashmo_close.visible = false;
 
			Tweener.addTween( flashmo_pic, { alpha: 0, time: tween_duration, transition: "easeOut",
							 				 onComplete: remove_photo });
		}
		else
		{
			thumbnail_group.mouseChildren = false;
			thumbnail_group.alpha = 0.5;
			flashmo_pic.alpha = 0;
			add_photo( true );
		}
	}
	catch( e:Error ){ }
}
 
function loading_on( loading_visible:Boolean ):void
{
	if( loading_visible )
	{
		loading_info.visible = true;
		loading_info_bg.visible = true;
		close_loading.visible = true;
		close_loading.addEventListener( MouseEvent.CLICK, on_close_load_click );
	}
	else
	{
		loading_info.text = "";
		loading_info.visible = false;
		loading_info_bg.visible = false;
		close_loading.visible = false;
		close_loading.removeEventListener( MouseEvent.CLICK, on_close_load_click );
	}
}
 
function remove_photo(): void
{
	flashmo_pic.removeChildAt( 0 );
	add_photo( false );
}
 
function add_photo( first_time:Boolean ):void
{
	var bg_width:Number = photo_bm.width + photo_border_size * 2;
	var bg_height:Number = photo_bm.height + photo_border_size * 2;
 
	photo_property.x = - photo_bm.width * 0.5;
	photo_property.y = - photo_bm.height * 0.5;
 
	if( stage.displayState == StageDisplayState.NORMAL )
		photo_property.y +=	y_offset;
 
	if( first_time )
	{
		flashmo_pic_border = new Shape();
		flashmo_pic_border.graphics.beginFill( photo_border_color );
		flashmo_pic_border.graphics.drawRect( 0, 0, bg_width, bg_height );
		flashmo_pic_border.graphics.endFill();
		this.addChild( flashmo_pic_border);
		set_border_mask();
	}
	else
	{
		if( flashmo_pic_border.width != bg_width || flashmo_pic_border.height != bg_height )
		{
			Tweener.addTween( flashmo_pic_border, { x: photo_property.x - photo_border_size,
							 						y: photo_property.y - photo_border_size,
													width: bg_width, height: bg_height,
													time: tween_duration, transition: "easeOut" });
			Tweener.addTween( flashmo_mask, { x: photo_property.x, y: photo_property.y,
										      width: photo_bm.width, height: photo_bm.height,
										      time: tween_duration, transition: "easeOut", onComplete: set_buttons });
		}
		else
			set_border_mask();
	}
}
 
function set_border_mask(): void
{
	flashmo_pic_border.x = photo_property.x - photo_border_size;
	flashmo_pic_border.y = photo_property.y - photo_border_size;
	flashmo_mask.x = photo_property.x;
	flashmo_mask.y = photo_property.y;
	flashmo_mask.width = photo_bm.width;
	flashmo_mask.height = photo_bm.height;
	set_buttons();
}
 
function set_buttons(): void
{
	flashmo_pic.addChild( photo_bm );
 
	Tweener.addTween( flashmo_pic, { alpha: 1, time: tween_duration, transition: "easeOutQuart",
					 				 onComplete: enable_buttons });
 
	flashmo_pic.doubleClickEnabled = true;
	flashmo_pic.addEventListener( MouseEvent.DOUBLE_CLICK, on_close_click );
	flashmo_pic.addEventListener( MouseEvent.CLICK, on_photo_click );
	flashmo_close.addEventListener( MouseEvent.CLICK, on_close_click );
	flashmo_previous.addEventListener( MouseEvent.CLICK, on_previous_click );
	flashmo_next.addEventListener( MouseEvent.CLICK, on_next_click );
 
	flashmo_pic_info.photo_description.width = photo_bm.width - ( flashmo_pic_info.photo_description.x * 2 );
	flashmo_pic_info.photo_info_bg.width = photo_bm.width;
	flashmo_pic_info.photo_description.htmlText = flashmo_photo_list[next_pic_no].description;
 
	set_x_y();
 
	flashmo_pic_info.x = pic_info_x;
	flashmo_pic_info.y = pic_info_y;
	flashmo_previous.x = previous_x;
	flashmo_previous.y = previous_y;
	flashmo_next.x = next_x;
	flashmo_next.y = previous_y;
	flashmo_close.x = close_x;
	flashmo_close.y = close_y;
 
	photo_property.addChild(flashmo_pic);
	photo_property.addChild(flashmo_pic_info);
	photo_property.addChild(flashmo_close);
	photo_property.addChild(flashmo_previous);
	photo_property.addChild(flashmo_next);
 
	flashmo_pic_info.visible = flashmo_previous.visible =
	flashmo_next.visible = flashmo_close.visible = true;
 
	this.addChild( photo_property );
	this.addChild( flashmo_mask );
 
	flashmo_mask.y = photo_property.y;
	flashmo_pic_border.y = photo_property.y - photo_border_size;
 
	pic_loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, on_photo_progress);
	pic_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, on_photo_loaded);
	pic_loader = null;
 
	current_pic_no = next_pic_no;
}
 
function enable_buttons(): void
{
	flashmo_fullscreen.mouseEnabled = true;
	flashmo_close.mouseEnabled = true;
	flashmo_pic.mouseEnabled = true;
}
 
function set_x_y():void
{
	pic_info_x = flashmo_pic.x;
	previous_y = flashmo_pic.y + ( flashmo_pic.height - flashmo_previous.height ) / 2;
	next_y = previous_y;
 
	if( bar_status == 0 )
	{
		pic_info_y = flashmo_pic.y + flashmo_pic.height;
		previous_x = flashmo_pic.x - flashmo_previous.width - 5;
		next_x = flashmo_pic.x + flashmo_pic.width + flashmo_next.width + 5;
		close_x = flashmo_pic.x + flashmo_pic.width + 5;
		close_y = flashmo_pic.y - flashmo_close.height - 5;
	}
	else
	{
		pic_info_y = flashmo_pic.y + flashmo_pic.height - flashmo_pic_info.height;
		previous_x = pic_info_x;
		next_x =  flashmo_pic.x + flashmo_pic.width;
		close_x = flashmo_pic.x + flashmo_pic.width - flashmo_close.width;
		close_y = flashmo_pic.y;
	}
}
 
function on_photo_click(me:MouseEvent):void
{
	bar_status++;
 
	if( bar_status > 1 )
		bar_status = 0;
 
	set_x_y();		
 
	Tweener.addTween ( flashmo_pic_info, {	y: pic_info_y,
						time: tween_duration, transition: "easeOutQuart" } );
	Tweener.addTween ( flashmo_previous, {	x: previous_x,
						time: tween_duration, transition: "easeOutQuart" } );
	Tweener.addTween ( flashmo_next, {	x: next_x,
						time: tween_duration, transition: "easeOutQuart" } );
	Tweener.addTween ( flashmo_close, {	x: close_x, y: close_y,
						time: tween_duration, transition: "easeOutQuart" } );
}
 
function on_close_click(me:MouseEvent):void
{
	close_loader();
	loading_on( false );
 
	flashmo_pic.removeEventListener( MouseEvent.CLICK, on_photo_click );
	flashmo_close.removeEventListener( MouseEvent.CLICK, on_close_click );
	flashmo_previous.removeEventListener( MouseEvent.CLICK, on_previous_click );
	flashmo_next.removeEventListener( MouseEvent.CLICK, on_next_click );
 
	photo_property.removeChild( flashmo_close );
	photo_property.removeChild( flashmo_previous );
	photo_property.removeChild( flashmo_next );
	photo_property.removeChild( flashmo_pic_info );
	this.removeChild( flashmo_pic_border );
 
	Tweener.addTween( thumbnail_group, { alpha: 1, time: tween_duration, transition: "easeIn" });
	Tweener.addTween( flashmo_pic, { alpha: 0, time: tween_duration,
					  transition: "easeIn", onComplete: unload_photo });
}
 
function unload_photo():void
{
	flashmo_pic.removeChildAt(0);
	photo_property.removeChild( flashmo_pic );
	this.removeChild( photo_property );
	this.removeChild( flashmo_mask );
	thumbnail_group.mouseChildren = true;
}
 
function close_loader():void
{
	try
	{
		pic_loader.close();
		pic_loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, on_photo_progress);
		pic_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, on_photo_loaded);
	}
	catch( e:Error ){}
}
 
function on_previous_click(me:MouseEvent):void
{
	next_pic_no--;
	load_photo();
}
 
function on_next_click(me:MouseEvent):void
{
	next_pic_no++;
	load_photo();
}
 
function switch_screen_mode( me:MouseEvent )
{
	if( stage.displayState == StageDisplayState.NORMAL )
		stage.displayState = StageDisplayState.FULL_SCREEN;
	else
		stage.displayState = StageDisplayState.NORMAL;
}
 
function check_screen_mode( fe:FullScreenEvent )
{
	if ( fe.fullScreen )
	{
		this.x = Math.floor( stage.stageWidth * 0.5 );
		this.y = Math.floor( stage.stageHeight * 0.5 );
		photo_property.y = - photo_bm.height * 0.5;
		set_loading_y( loading_y );
	}
	else
	{
		this.x = Math.floor( stage.stageWidth * 0.5 );
		this.y = Math.floor( stage.stageHeight * 0.5 ) - y_offset;
		photo_property.y = - photo_bm.height * 0.5 + y_offset;
 
		if( flashmo_pic.numChildren > 0 )
			set_loading_y( loading_y + y_offset );
	}
 
	flashmo_mask.y = photo_property.y;
	flashmo_pic_border.y = photo_property.y - photo_border_size;
}
 
function set_loading_y( y_value:Number ):void
{
	loading_info.y = loading_info_bg.y = close_loading.y = y_value;
	loading_info.y -= ( loading_info.height * 0.5 );
}
 
var on_drag:Boolean;
var diff:Number = ( drag_area.width - dragger.width ) * 0.5;
 
dragger.x = drag_area.x;
dragger.y = drag_area.y;
dragger.addEventListener( MouseEvent.MOUSE_DOWN, drag);
dragger.addEventListener( MouseEvent.MOUSE_UP, drop);
dragger.visible = false;
drag_area.visible = false;
 
function drag(me:MouseEvent):void
{
	on_drag = true;
	Tweener.removeAllTweens();
	dragger.addEventListener( Event.ENTER_FRAME, dragger_update);
	stage.addEventListener(MouseEvent.MOUSE_UP, stage_up);
}
 
function drop(me:MouseEvent):void
{
	on_drag = false;
	Tweener.addTween( dragger, { x: drag_area.x, time: tween_duration, transition: "easeOutQuart" } );
	stage.removeEventListener(MouseEvent.MOUSE_UP, stage_up);
}
 
function stage_up( me:MouseEvent ):void
{
	on_drag = false;
	Tweener.addTween( dragger, { x: drag_area.x, time: tween_duration, transition: "easeOutQuart" } );
}
 
function dragger_update(e:Event):void
{
	if( on_drag )
	{
		dragger.x = this.mouseX;
 
		if( dragger.x - drag_area.x < - diff )
			dragger.x = - diff + drag_area.x;
 
		if( dragger.x - drag_area.x > diff )
			dragger.x = diff + drag_area.x;
	}
	else if( dragger.x - drag_area.x == 0 )
	{
		dragger.removeEventListener( Event.ENTER_FRAME, dragger_update);
	}
 
	dynamic_speed = ( dragger.x - drag_area.x ) * rotation_speed * 0.0003 * follow_mouse_value;
}

Galeria rotativa

PASO 27
Seleccionamos todos los elementos y los convertimos en un Movie clip y le colocamos el nombre de Resizable Carrusel, luego en la ventana Properties le colocamos el nombre de flashmo_carousel.

Galeria rotativa

PASO 28
Creamos una nueva capa sobre la capa del carrusel y la renombramos actions

Galeria rotativa

PASO 29
Vamos a la timeline y en el frame 1 presionamos la tecla F9 y en la ventana Agregamos el siguiente código Actiosn Script.

var xml_file:String = "flashmo_230_photo_list.xml";
 
try
{
	var key_str:String;
	var value_str:String;
	var param_obj:Object = LoaderInfo(this.root.loaderInfo).parameters;
	for ( key_str in param_obj )
	{
		value_str = String( param_obj[key_str] );
 
		if( key_str == "xml_file" )
			xml_file = value_str;
		break;
	}
}
catch (error:Error) {}
 
flashmo_carousel.load_gallery(xml_file);
 
// Right-Click Menu
import flash.net.URLRequest;
import flash.ui.ContextMenu;
 
var fm_menu:ContextMenu = new ContextMenu();
var copyright:ContextMenuItem = new ContextMenuItem( "Creado Por Tutoriales en la web" );
var credit:ContextMenuItem = new ContextMenuItem( "Galería Carousel" );
 
copyright.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visit_flashmo );
credit.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visit_carousel );
credit.separatorBefore = false;
 
fm_menu.hideBuiltInItems();
fm_menu.customItems.push(copyright, credit);
this.contextMenu = fm_menu;
 
function visit_flashmo(e:Event)
{
	var flashmo_link:URLRequest = new URLRequest( "http://www.tutorialesenlaweb.com" );
	navigateToURL( flashmo_link, "_parent" );
}
 
function visit_carousel(e:Event)
{
	var flashmo_link:URLRequest = new URLRequest( "http://www.tutorialesenlaweb.com" );
	navigateToURL( flashmo_link, "_parent" );
}

Galeria rotativa

PASO 30
Ahora abrimos Adobe Dreamweaver y creamos un nuevo documento XML.

Galeria rotativa

PASO 31
Dentro del archio XML copiamos el siguiente código xml.

<photos>
	<config
		show_tooltip="true"
		follow_mouse="false"
		folder="photos/"
		css_file="flashmo_210_style.css"
		tween_duration="0.5"
		rotation_speed="4"
		radius_x="300"
		radius_y="60"
		tn_border_size="5"
		tn_border_color="0xFFFFFF"
		photo_border_size="10"
		photo_border_color="0xFFFFFF"
		bar_status="1"
		dragger_x="0"
		dragger_y="220">
	</config>
	<photo>
		<thumbnail>s_photo_001.jpg</thumbnail>
		<filename>photo_001.jpg</filename>
		<tooltip>tutoriales en la web 01</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_002.jpg</thumbnail>
		<filename>photo_002.jpg</filename>
		<tooltip>tutoriales en la web 02</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_003.jpg</thumbnail>
		<filename>photo_003.jpg</filename>
		<tooltip>tutoriales en la web 03</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_004.jpg</thumbnail>
		<filename>photo_004.jpg</filename>
		<tooltip>tutoriales en la web 04</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_005.jpg</thumbnail>
		<filename>photo_005.jpg</filename>
		<tooltip>tutoriales en la web 05</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_006.jpg</thumbnail>
		<filename>photo_006.jpg</filename>
		<tooltip>tutoriales en la web 06</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_007.jpg</thumbnail>
		<filename>photo_007.jpg</filename>
		<tooltip>tutoriales en la web 07</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_008.jpg</thumbnail>
		<filename>photo_008.jpg</filename>
		<tooltip>tutoriales en la web 08</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_009.jpg</thumbnail>
		<filename>photo_009.jpg</filename>
		<tooltip>tutoriales en la web 09</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_010.jpg</thumbnail>
		<filename>photo_010.jpg</filename>
		<tooltip>tutoriales en la web 10</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_011.jpg</thumbnail>
		<filename>photo_011.jpg</filename>
		<tooltip>tutoriales en la web 11</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_012.jpg</thumbnail>
		<filename>photo_012.jpg</filename>
		<tooltip>tutoriales en la web 12</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_013.jpg</thumbnail>
		<filename>photo_013.jpg</filename>
		<tooltip>tutoriales en la web 13</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_014.jpg</thumbnail>
		<filename>photo_014.jpg</filename>
		<tooltip>tutoriales en la web 14</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_015.jpg</thumbnail>
		<filename>photo_015.jpg</filename>
		<tooltip>tutoriales en la web 15</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_016.jpg</thumbnail>
		<filename>photo_016.jpg</filename>
		<tooltip>tutoriales en la web 16</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_017.jpg</thumbnail>
		<filename>photo_017.jpg</filename>
		<tooltip>tutoriales en la web 17</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_018.jpg</thumbnail>
		<filename>photo_018.jpg</filename>
		<tooltip>tutoriales en la web 18</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_019.jpg</thumbnail>
		<filename>photo_019.jpg</filename>
		<tooltip>tutoriales en la web 19</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
	<photo>
		<thumbnail>s_photo_020.jpg</thumbnail>
		<filename>photo_020.jpg</filename>
		<tooltip>tutoriales en la web 20</tooltip>
		<description><![CDATA[<p class="subtitle">Tutoriales en la Web</p><p><a href="http://www.tutorialesenlaweb.com" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Quisque nec nisl. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero.</p><p><span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
	</photo>
 
</photos>

Guardamos el archivo XML con el nombre flashmo_230_photo_list.xml

Galeria rotativa

PASO 32
Por ultimo creamos una carpeta llamada Photos dentro de la cual vamos a colocar nuestras miniaturas y las fotos a tamaño real.

Galeria rotativa

PASO 33
Exporte su swf y listo ya tenemos nuestra galería tipo Carrusel terminada.

Galeria rotativa

Descarga el editable Galeria rotativa en Flash

Tags: ,

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes