Hola, estoy desarrollando un proyecto, concreatamente una nube de fotografias en flash, como última funcionalidad me gustaría añadirle añadirle el que cuando pases por encima de cada fotografía el ratón muestre un tooltip con el nombre de esa persona. He buscado como hacerlo, pero el problema es que además de que mis fotos son dinámica, es decir, se van moviendo en círculo y además no siempre son las mismas (en la aplicación que las crea que está en php hay veces que salen un numero determinado de fotos y otra vez salen más, dependiendo de las necesidades). Aqui está mi problema, de ahí que por tutoriales que vea no logro conseguirlo. He encontrado una clase Tooltip.as pero no logro que funciones. Si alguien me ayudase con esto le podría conpensar con una cantidad económica a tratar entre los dos (en realidad para uno que sabe ActionScript3 es un trabajo muy fácil que seguramente lo hará en 10 minutos, pero yo no tengo ni idea de actionscript y por eso pido ayuda). Por favor, el que esté interesado que me envie un privado y nos ponemos en contacto. Por supuesto, sería freelance desde su casa. Gracias
creo que para eso , que creo es lo que mas o menos quieres no debes de pagar por ello , puedes hacerlo tu mismo, si es dinamico tu galeria simplemente al contenedor de la foto que puede ser un sprite o un mc , agrega no se un campo de texo "TextField" , en el cual mostrara la descripcion del autor, agregar dos listeners "over" y "out", aun que no se si estes trabajando con clases , yo te lo pondre de la manera sencilla "acciones de frame"
el codigo seria lo siguiente:
Código ActionScript :
//contenedor es el nombre sprite o movieClip que almacena la foto, solo sustituyes por el nombre que tengas
var infoAutor:TextField = new TextField();//se crea un textField
infoAutor.text = "Cristalab";//aqui pones el nombre del autor o la persona x que sale en la foto
infoAutor.selectable = false;
infoAutor.visible = false;//desapares el textField
//agregar mas propiedades x,y... etc
contenedor.addChild(inforAutor);//se lo agregas al contenedor
contendor.addEventListener(MouseEvent.ROLL_OVER , overHandler);//listener que se ejecuta cuando el mouse este sobre el contenedor
contenedor.addEventListener(MouseEvent.ROLL_OUT , outHandler);//listener que se ejecuta cuando el mouse esta fuera de el contenedor
function overHandler(evt:MouseEvent):void
{
evt.target.infoAutor.visible = true; //se hace visible el textField
}
function outHandler(evt:MouseEvent):void
{
evt.target.infoAutor.visible = false;//se hace invisible el textField de nuevo
}
tambien seria bueno que pusieras el codigo, para que te ayuden mejor , y decirte en que parte va el codigo etc.., bueno espero te sirva, un saludo.
Muchísimas gracias por la respuesta, la verdad es que lo he probado mucho y no me ha salido, igual esque no acabo de entender el tema de las jerarquias en ActionScript. Si si, si he hecho más o menos lo mismo que me has dicho, lo que no me acaba de funcionar, por si acaso te pego el código en el que lo tengo que insertar (si quieres te pego el código último que he probado y comparamos a ver donde me he equivocado). Este es el código: package com.roytanck.photowidget { import flash.display.Sprite; import flash.display.MovieClip; import flash.events.*; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.display.Graphics; import flash.geom.ColorTransform; import flash.display.Loader; import flash.filters.BitmapFilter; import flash.filters.BitmapFilterQuality; import flash.filters.DropShadowFilter;
public class Thumb extends Sprite {
private var _back:Sprite; private var _mask:Sprite; private var _node:XML; private var _cx:Number; private var _cy:Number; private var _cz:Number; private var _holder:MovieClip; //New Variables private var _newWidth:Number; private var _newHeight:Number; //////////////////////////////////
private var _img:Loader;
public function Thumb( node:XML ){ _node = node; // create a holder mc _holder = new MovieClip(); addChild(_holder); // get and display the thumbnail image _img = new Loader(); var urlReq:URLRequest = new URLRequest( node.toString() ); _img.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); _img.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); _img.load(urlReq); _holder.addChild(_img); // events this.buttonMode = true; addEventListener(MouseEvent.CLICK, clickHandler); // hide tag for now while loading this.visible = false; }
private function clickHandler( e:MouseEvent ):void { var request:URLRequest = new URLRequest( _node["@href"] ); var targetFrame:String = ( _node["@target"] == undefined ) ? "_self" : _node["@target"]; navigateToURL( request, targetFrame ); }
private function errorHandler( e:IOErrorEvent ){ trace("ioErrorHandler: "+e.toString() ); }
private function completeHandler( e:Event ){ _newWidth = _node["@width"];//Creo que con esto leeriamos el tamaño (size para la imagen) de cada nodo _newHeight = _node["@height"];
// scale image if( _img.width > _img.height ){ //_img.height = 75; _img.height = _newHeight; _img.scaleX = _img.scaleY; } else { //_img.width = 75; _img.width = _newWidth; _img.scaleY = _img.scaleX; } _img.x = -_img.width/2; _img.y = -_img.height/2; // draw mask _mask = new Sprite(); _mask.graphics.beginFill(0xffffff, 1);//Configura el relleno _mask.graphics.drawRect( -(_newHeight/2), -(_newWidth/2), _newHeight, _newWidth );//dibuja un rectangulo (x:Number, y:Number, width:Number, height:Number) //_mask.graphics.drawRect( -37.5, -37.5, 75, 75 );//dibuja un rectangulo (x:Number, y:Number, width:Number, height:Number) _mask.graphics.endFill(); _holder.addChildAt(_mask,0); _img.mask = _mask; // create the back _back = new Sprite(); // apply drop shadow filter var filter:BitmapFilter = new DropShadowFilter( 3, 45, 0, 0.4, 6, 6, 1, BitmapFilterQuality.MEDIUM ); var myFilters:Array = new Array(); myFilters.push(filter); filters = myFilters; // draw background _back.graphics.beginFill(0xffffff, 1); if(_newHeight <60){//Si es una fotografia que se tiene que mostrar pequeña reducir el tamaño del fongo (el borde blanco) _back.graphics.drawRect( -((_newHeight/2)+2), -((_newWidth/2)+2), (_newHeight+4), (_newWidth+4) ); }else{ _back.graphics.drawRect( -((_newHeight/2)+4), -((_newWidth/2)+4), (_newHeight+, (_newWidth+ ); } //_back.graphics.drawRect( -41.5, -41.5, 83, 83 ); _back.graphics.endFill(); _holder.addChildAt(_back,0); // add a little randomness this.rotation = 10 - Math.random()*20; // set button mode this.buttonMode = true; // show image this.visible = true; }
// setters and getters public function set cx( n:Number ){ _cx = n } public function get cx():Number { return _cx; } public function set cy( n:Number ){ _cy = n } public function get cy():Number { return _cy; } public function set cz( n:Number ){ _cz = n } public function get cz():Number { return _cz; }
}
}
Cuando te decía que era dinámico me refiero que en vez de poner infoAutor.text = "Antonio Luis" lo que hay que hacer es recogerlo de un código PHP leyendo un XML (simplemente es llamar cada vez a _node["@name"] por tanto sería algo así (no sé si se puede hacer bien) infoAutor.text =_node["@width"]
Muchísimas gracias de antemano, propuse lo de pagar a la persona que me ayude porque me corre mucha prisa y necesito acabarlo ya. Un saludo
si es correcto lo que dices solo te quedaria importar la claseTextField y agregar los 2 listeners , seria mas o menos asi :
Código ActionScript :
package com.roytanck.photowidget
{
import flash.text.TextField;
//import ... todas las demas clases
public class Thumb extends Sprite
{
private var _infoAutor:TextField;
//private var... todas tus variables de instancia y propiedades de la clase
}
public function Thumb(node:XML)
{
_node=node;
// este como su nombre lo dice el contenedor
_holder=new MovieClip ;
addChild(_holder);
_infoAutor = new TextField();
_infoAutor.visible = false;//que no este visible
_infoAutor.text = node["@autor"];
_infoAutor.selectable = false;
//aqui puedes darle formato, su pocision etc..
//agregas el TextField al holder
_holder.addChild(_infoAutor);
//todas las de mas instancias...
//agregas los 2 listeners mas para el over y up
addEventListener(MouseEvent.CLICK,clickHandler);
addEventListener(MouseEvent.MOUSE_OVER,mouseOverkHandler);
addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
}
private function mouseOverHandler(e:MouseEvent):void
{
e.currentTarget._infoAutor.visible = true;
}
private function mouseOutHandler(e:MouseEvent):void
{
e.currentTarget._infoAutor.visible = false;
}
//los demas metodos ..
}
Hola Jonathan, muchísimas gracias por tu ayuda, parece que he avanzado un poco más (creo que el problema que tenía yo era con la jerarquia y el _holder). De todos modos, sigue sin mostrarseme el texto (como verás en la foto que te paso no aparece nada (he probado a poner texto a secas ej:"texto" y no funciona tampoco)). Mirate esta foto (lo he bordeado para que lo puedas apreciar mejor). Como ves, las fotos tiene cada una un nombre y quiero que aparezca al poner el ratón por encima.
Esta es un ejemplo de lo mal que lo hace (no sale el texto): [img]http://img200.imagevenue.com/img.php?image=61704_Dibujo_122_487lo.jpg#[/img]
private var _back:Sprite; private var _mask:Sprite; private var _node:XML; private var _cx:Number; private var _cy:Number; private var _cz:Number; private var _holder:MovieClip; //New Variables Pedro private var _newWidth:Number; private var _newHeight:Number; private var _infoAutor:TextField; //////////////////////////////////
private var _img:Loader;
public function Thumb( node:XML ){ _node = node; // create a holder mc _holder = new MovieClip(); addChild(_holder);
//aqui puedes darle formato, su posicion etc.. //agregas el TextField al holder _holder.addChild(_infoAutor); ////////////////////////////////////////////////// // get and display the thumbnail image _img = new Loader(); var urlReq:URLRequest = new URLRequest( node.toString() ); _img.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); _img.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); _img.load(urlReq); _holder.addChild(_img); // events this.buttonMode = true; addEventListener(MouseEvent.CLICK, clickHandler); addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler); // hide tag for now while loading this.visible = false; }
private function mouseOverHandler(e:MouseEvent):void { e.currentTarget._infoAutor.visible = true; } private function mouseOutHandler(e:MouseEvent):void { e.currentTarget._infoAutor.visible = false; }
private function clickHandler( e:MouseEvent ):void { var request:URLRequest = new URLRequest( _node["@href"] ); var targetFrame:String = ( _node["@target"] == undefined ) ? "_self" : _node["@target"]; navigateToURL( request, targetFrame ); }
private function errorHandler( e:IOErrorEvent ){ trace("ioErrorHandler: "+e.toString() ); }
private function completeHandler( e:Event ){ _newWidth = _node["@width"];//Creo que con esto leeriamos el tamaño (size para la imagen) de cada nodo _newHeight = _node["@height"];
// scale image if( _img.width > _img.height ){ //_img.height = 75; _img.height = _newHeight; _img.scaleX = _img.scaleY; } else { //_img.width = 75; _img.width = _newWidth; _img.scaleY = _img.scaleX; } _img.x = -_img.width/2; _img.y = -_img.height/2; // draw mask _mask = new Sprite(); _mask.graphics.beginFill(0xffffff, 1);//Configura el relleno _mask.graphics.drawRect( -(_newHeight/2), -(_newWidth/2), _newHeight, _newWidth );//dibuja un rectangulo (x:Number, y:Number, width:Number, height:Number) //_mask.graphics.drawRect( -37.5, -37.5, 75, 75 );//dibuja un rectangulo (x:Number, y:Number, width:Number, height:Number) _mask.graphics.endFill(); _holder.addChildAt(_mask,0); _img.mask = _mask; // create the back _back = new Sprite(); // apply drop shadow filter var filter:BitmapFilter = new DropShadowFilter( 3, 45, 0, 0.4, 6, 6, 1, BitmapFilterQuality.MEDIUM ); var myFilters:Array = new Array(); myFilters.push(filter); filters = myFilters; // draw background _back.graphics.beginFill(0xffffff, 1); if(_newHeight <60){//Si es una fotografia que se tiene que mostrar pequeña reducir el tamaño del fongo (el borde blanco) _back.graphics.drawRect( -((_newHeight/2)+2), -((_newWidth/2)+2), (_newHeight+4), (_newWidth+4) ); }else{ _back.graphics.drawRect( -((_newHeight/2)+4), -((_newWidth/2)+4), (_newHeight+, (_newWidth+ ); } //_back.graphics.drawRect( -41.5, -41.5, 83, 83 ); _back.graphics.endFill(); _holder.addChildAt(_back,0); // add a little randomness this.rotation = 10 - Math.random()*20; // set button mode this.buttonMode = true; // show image this.visible = true; }
// setters and getters public function set cx( n:Number ){ _cx = n } public function get cx():Number { return _cx; } public function set cy( n:Number ){ _cy = n } public function get cy():Number { return _cy; } public function set cz( n:Number ){ _cz = n } public function get cz():Number { return _cz; }
}
}
¿Esto puede ser por el tema de que yo utilizo AS3??? o tiene que ver con la incompatibilidad de TextField???? Muchas gracias, me estas ayudando a aclararme. Muy amable y espero ayudarte cuando lo necesites, no lo dudes. Un saludo muy fuerte!
hola , creo que probablemete si se muestre la informacion sobre el TextField , por varias cosas lo creo 1: apenas hace unos dias hice una galeria sencilla e implemente el codigo que te puse y funciona, 2: al checar tu codigo tienes un error cuando pusiste _infoAutor.text = "texto"; se te olvido poner " , y 3 : el problema con el display list de tu _holder , intenta agregar el TextField despues de objeto Loader.
De nuevo muchísimas gracias Jonathan, pero sigue sin funcionarme, aparece lo mismo (funciona bien pero no muestra el texto, ni el que se le pone de forma manual, tal cual escrito). Puede ser por el uso de la versión AS3 o el TextField puede dar problemas?? No sé, he probado todo y no sale texto(el mismo problema que el de la foto):
public function Thumb( node:XML ){ _node = node; // create a holder mc _holder = new MovieClip(); addChild(_holder);
// get and display the thumbnail image _img = new Loader(); var urlReq:URLRequest = new URLRequest( node.toString() ); _img.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); _img.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); _img.load(urlReq); _holder.addChild(_img); /////////////////////////////////////////////////// _infoAutor = new TextField(); _infoAutor.visible = false;//que no este visible _infoAutor.text = _node["@name"]; //_infoAutor.text = "texto"; _infoAutor.defaultTextFormat = new TextFormat("Verdana", 50, 0xFFFFFF, true);
//aqui puedes darle formato, su posicion etc.. ////////////////////// //agregas el TextField al holder _holder.addChild(_infoAutor); /////////////////////////////////////////////////// // events this.buttonMode = true; addEventListener(MouseEvent.CLICK, clickHandler); addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); // hide tag for now while loading this.visible = false; }
private function mouseOverHandler(e:MouseEvent):void { e.currentTarget._infoAutor.visible = true; } private function mouseOutHandler(e:MouseEvent):void { e.currentTarget._infoAutor.visible = false; }
Alguna sugerencia o idea que pudiese probar?? Te agradecería mucho que me siguieses ayudando, ya que como ves no avanzo y tampoco tengo mucha idea de AS3. Eternamente agradecido!! Muy amable
Yo creo que si que debe hacerlo bien, pero no entiendo porqué no muestra el texto ¿algún problema de capas? he enbebo la fuente (con la opción _infoAutor.embedFonts = true;) y aun así nada ¿hay alguna manera de ver si lo hago bien y si es problema de capas? Mil gracias!!!
hola he estado viendo la estructura de tu container "_holder" y el error sera que mas abajo de tu clase usuas addChildAt(etc..) y mueves de nivel , pero para evitar esto no agregues el TextFiel al _holder si no ala clase , y cuando lo agregues que sea despues de holder, y puedes usar la funcion trace(); para hacer prueba de que la propiedad text si este ocupada por la informacion del autor , a otra cosa el formato de tu texto es preferible usar la clase TextFormat. El codigo seria asi :
Código ActionScript :
_holder = new MovieClip();
addChild(_holder);
_infoAutor = new TextField();
infoAutor.text = "texto de prueba";
//infoAutor.text = nodo["@name"];
infoAutor.visible = false;
//todas las demas propiedades..
addChild(_infoAutor);
trace(_infoAutor.text);//hacemos una prueba si esta todo bien con el TextField, se debe mostrar en pantalla "texto de prueba" y el textField debe tener "texto de prueba"
//si se muestra correctamente el trace quita las // de infoAutor.text = nodo["@name"];
//y pon las // a infoAutor.text ="texto de prueba" asi sabremos si puede que sea un error del nodo xml que recibes.
//en los listeners dejalos como estan deben funcionar pero tambien agrega un trace
private function mouseOverHandler(e:MouseEvent):void
{
_infoAutor.visible = true;
trace(_infoAutor.text);
}
private function mouseOverHandler(e:MouseEvent):void
{
_infoAutor.visible = false;
}
bueno espero te sirva , y aqui andaremos por algun problema que salga. Suerte!!
Gracias de nuevo! Eres muy amable. Sigue sin funcionar, he probado con lo que recibía del nodo xml y parece que hay un fallo (me lo muestra vacio), es raro porque atrapo otras variables y me las lee bien (pero bueno, ya me lo miraré con calma). De todas formas, con el texto escrito estaticamente, poniendo _infoAutor.text = "texto de prueba"; me sale por pantalla en la salida lo atrapa bien pero cuando pruebo en la aplicación que tengo desarrollada sigue sin mostrar nada de texto. Ya estoy desesperado!!! ¿Qué más se puede probar?
Muchas gracias por todo, espero ayudarte en un futuro para devolverte el favor.
hola de nuevo , creo que ya va hacer de varias cosas aunque antes de todo no se PHP , jaja, otra cosa que deberias intentar es esa clase extenderla de MovieClip y en flash crear el simbolo y exportarlo con nombre de Clase y le asignas la clase Thumb , entras ala linea del mc y crear un textField y le das el nombre de instancia infoAutor y borras la variable de instanciay _infoAutor , pruebas, y por ultimo recurso postea todas las clases y demas pero con tag de codigo para que sea legible y llamar ala artilleria pesada aver si solisarg , eliseo2 y todos los demas masters de as3 nos ayuden , mira como una demostracion del que el codigo que te estube poniendo sirve te dejo una simple galeria que hice y use esta clase Thumb:
Código ActionScript :
package com.actionscript.display
{
import com.actionscript.ui.Preloader;
import com.actionscript.ui.PreloaderEvent;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.*;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.net.URLRequest;
public class Thumb extends MovieClip
{
private var id:int;
private var dataURL:XML;
private var infoText:TextField;
private var formatText:TextFormat;
public function Thumb(dataURL:XML)
{
this.dataURL = dataURL;
this.id = id;
init();
//propiedades del TextField
formatText = new TextFormat("verdana",9, 0xffffff);
infoText = new TextField();
infoText.selectable = false;
infoText.text = dataURL.description;
infoText.autoSize = "center";
infoText.border = true;
infoText.borderColor = 0xffffff;
infoText.background = true;
infoText.backgroundColor = 0x333333;
infoText.setTextFormat(formatText);
infoText.width = 100;
infoText.height = 15;
infoText.x = (this.width - infoText.width) * 0.5;
infoText.y = (this.height - infoText.height) * 0.5;
infoText.visible = false;
addChild(infoText);
addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}
private function mouseOverHandler(evt:MouseEvent):void
{
infoText.visible = true;
}
private function mouseOutHandler(evt:MouseEvent):void
{
infoText.visible = false;
}
private function init():void
{
var ldr:Loader = new Loader();
preloader.init(ldr,dataTextField);
preloader.addEventListener(PreloaderEvent.LOADING_FINISH, finishHandler);
ldr.load(new URLRequest(dataURL.file));
}
private function finishHandler(evt:PreloaderEvent):void
{
var plr:MovieClip = evt.target as MovieClip;
removeChild(plr);
removeChild(dataTextField);
plr = null;
dataTextField = null;
}
}
}
y aqui la galeria , espero se solucione esto, y si no pues llamar ala artilleria pesada espero nos ayuden jeje.
en flash crear el simbolo y exportarlo con nombre de Clase y le asignas la clase Thumb , entras ala linea del mc y crear un textField y le das el nombre de instancia infoAutor y borras la variable de instanciay _infoAutor
No entiendo muy bien esta parte, ¿como exporto con nombre de clase y asigno a la clase Thumb?? Cuando dices crear un símbolo te refieres a un botón en flash? Luego, lo que dices de crear un textFiel te refieres a un texto dinámico?? Eso creo que lo hice (no sé si bien o mal) y no me acabó de funcionar. Siento mi ignorancia pero hasta hace dos semanas yo no tenía ni idea de flash.
Muchas gracias por tu paciencia, menos mal que me ayudas, un saludo muy fuerte y miles de gracias!!
ja de echo creo que ya esta , eso ami tambien me paso de que nada mas salia ese cuadrito , y se debe al flash player , instala la version 10, aun que estes usando flash cs4 , tu instalalo de nuevo y pruebas, bueno asi me paso ami , y creo es por que tenia en la preferencias de publicacion flash 9 en el cs4, y como tambien tengo el flas cs3 bueno siento que se andubieron sobrescribiendo los flash players, pero yo lo soluciones con eso instalando el flash player de nuevo.