| Mensaje |
Autor |
 Publicado: Mar Nov 06, 2007 9:47 pm |
Citar  |
Mediante este tip voy a explicar cómo crear una botonera dinámica como esta:
Para empezar vamos a crear un clip en nuestra biblioteca que sera nuestro botón modelo, también creamos un campo de texto dinamico instanciado como "t"
Luego, cuando ya tenemos nuestro botón en la biblioteca, hacemos click con el boton derecho, y en la parte de vinculación le damos un nombre y aplicamos la opción de vinculación para Actionscript y exportar en el primer fotograma.
Ahora vamos con el código.
Primero creamos un MovieClip vacio q contendrá los botones.
Código :
this.createEmptyMovieClip("botonera",this.getNextHighestDepth());
Luego declaramos un Array que contendrá la cantidad de botones a crear y sus nombres.
Código :
var labels:Array = Array("home","about","services","contact");
Ahora con width() escribimos dentro del clip vacio para evitar problemas de rutas.
Código :
with(botonera){
}
Primero posicionamos la botonera:
Código :
with(botonera){
this._x = 50;
}
Luego creamos un for seteado por la longitud del Array.
Código :
with(botonera){
this._x = 50;
for(i=1;i <= labels.length; i++){
}
}
Ahora declaramos una vaiable de tipo MovieClip que funcionara de modelo a nuestros botones y le damos por valor cada boton attachado.
Código :
with(botonera){
this._x = 50;
for(i=1;i <= labels.length; i++){
var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
}
}
Posicionamos los botones.
Código :
with(botonera){
this._x = 50;
for(i=1;i <= labels.length; i++){
var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
modelButton._x = 0;
modelButton._y = ((i*0)+this._height) +5; //multiplicamos por 0, para q la distancia sea constante
}
}
Le ponemos título a cada botón, dados por los elementos del Array.
Código :
with(botonera){
this._x = 50;
for(i=1;i <= labels.length; i++){
var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
modelButton._x = 0;
modelButton._y = ((i*0)+this._height) +5; //multiplicamos por 0, para q la distancia sea constante
modelButton.t.text = labels[i-1];
}
}
Ahora eventos de rollOver y rollOut.
Código :
with(botonera){
this._x = 50;
for(i=1;i <= labels.length; i++){
var modelButton:MovieClip = this.attachMovie("boton", "boton"+i , this.getNextHighestDepth ());
modelButton._x = 0;
modelButton._y = ((i*0)+this._height) +5; //multiplicamos por 0, para q la distancia sea constante
modelButton.t.text = labels[i-1];
modelButton.onEnterFrame = function (){
//ecuacion para la trancicion de alpha
//donde: a = transparencia
// v = velocidad de trancicion
this._alpha += (this.a - this._alpha) /this.v;
//si el cursor esta sobre el boton...
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
//...cambia su transparencia al 50%
this.a = 50;
this.v = 5;
//sino, vuelve o se mantiene al 100%
} else{
this.a = 100;
this.v = 10;
}
}
}
}
}
Finalmente para eventos de click usamos onMouseDown()
Código :
modelButton.onMouseDown = function (){
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
if(this._name == "boton1"){
trace("welcome home")//acciones
}
if(this._name == "boton2"){
trace("about us")//acciones
}
if(this._name == "boton3"){
trace("our services")//acciones
}
if(this._name == "boton4"){
trace("contact us")//acciones
}
}
}
Cada botón nos muestra un mensaje distinto en el output.
Cómo ven para añadir otro botón solo deben agragar un elemento más al Array
Aquí pueden descargar el .fla
Espero les sirva  |
|
|
penHolder
clabLevel: 1778
| mdz |
19 Tips
|
|
Volver arriba |
 |
| Publicado: Mar Nov 06, 2007 10:20 pm |
Citar  |
Esta muy bueno y practico!!!
*esperando la version de clases |
_________________
 |
|
CarlosRuminott
clabLevel: 483 
Yo solo se que no se nada...
3 Tips
|
|
Volver arriba |
|
| Publicado: Mar Nov 06, 2007 10:23 pm |
Citar |
no pude descargar el fla, me aparecireon un monton de simbolos raros y entre eso el AS, curioso nunca me habia pasado!!!
no importa lo voy a hacer manualmente. |
_________________
|
|
CarlosRuminott
clabLevel: 483
Yo solo se que no se nada...
3 Tips
|
|
Volver arriba |
|
| Publicado: Mie Nov 07, 2007 5:48 am |
Citar |
| Buen aporte, pero... Código :
modelButton._y = ((i*0)+this._height) +5; //multiplicamos por 0, para q la distancia sea constante
constante??? es decir siempre cero??? 
Esto debería ser solamente:Código :
modelButton._y = this._height+5;
|
_________________
+Otaku RzO+
// Viviendo en Twitter  |
|
Otaku RzO
clabLevel: 291
TwitterLand
|
|
Volver arriba |
|
| Publicado: Mie Nov 07, 2007 11:45 am |
Citar |
Que tal chicos el tutorial es muy bueno peroooo hay varios comentarios que debo hacer 
Otaku ya se dio cuenta de un error pero..
La onda sería así..
Código :
modelButton._y = (this._height*i) (5 * i);
Y para hacerlo mas practico sería cuestión de crear una var "distancia" donde ahi la modificamos a gusto, sin tener que buscar ese 5 escondido.
Otra cosa,, para los estados de over y out, definitivamente no usaría onEnterFrame, sino preguntale a Freddie 
De ultimaaaa le haces un enterframe que inicie cuando estás sobre el boton, y que este se elimine cuando se sale de el y ya.
Yo por lo general lo que hago (que ya me lo tome como mi estandar de botoneras) es dentro del MC le creo 2 o 3 labels en la linea de tiempo(o más si es necesario). Algo como INN, OUT, OFF, y por ejemplo
Código :
boton.onRollOver = function(){
this.gotoAndPlay('INN');
}
Esto es bueno por si queremos hacer algun efecto que no podemos lograr en AS o que nos llevaría mucho menos tiempo realizarlo "manualmente". O también podría suceder si no sabemos tanto AS como para crear efectos "zarpados" (es mi caso  )
Saludos chicaos. |
|
|
Raxiro_blog
Invitado
|
|
Volver arriba |
|
| Publicado: Mie Nov 07, 2007 11:47 am |
Citar |
Fe de erratas (son las 8:50am!! )
Código :
modelButton._y = (this._height*i) (5 * i);
|
|
|
Raxiro_blog
Invitado
|
|
Volver arriba |
|
| Publicado: Mie Nov 07, 2007 11:49 am |
Citar |
| otra vez io... bueno no sale el más y nose porque Código :
modelButton._y = (this._height*i) "MAS" (5 * i);
|
|
|
Raxiro_blog
Invitado
|
|
Volver arriba |
|
| Publicado: Mie Nov 07, 2007 5:02 pm |
Citar |
@Raxiro: lo probaste ?! Se separa mucho
En si debería ser:
Código :
modelButton._y = (modelButton._height + 5)*i;
Pero si no quieren el espacio vacío al inicio:
Código :
modelButton._y = ((modelButton._height + 5)*i) - modelButton._height;
|
_________________
+Otaku RzO+
// Viviendo en Twitter |
|
Otaku RzO
clabLevel: 291
TwitterLand
|
|
Volver arriba |
|
| Publicado: Jue Nov 08, 2007 9:25 pm |
Citar |
es cierto es q al escribir this, me lo toma como el clip botonera, y yo queria q se refiera a modelButton, zks por la correccion  |
_________________
I'm perfect in wickness |
|
penHolder
clabLevel: 1778
| mdz |
19 Tips
|
|
Volver arriba |
|
| Publicado: Mar Nov 20, 2007 3:49 pm |
Citar |
| perfecto muy bueno. Pero cuando lo vinculo y lo paso a dreamweaver 8 el vinculo no funciona. Hice algo mal? |
|
|
jose_blog
Invitado
|
|
Volver arriba |
|
| Publicado: Lun Feb 25, 2008 2:02 pm |
Citar |
| si en ves de tirar un mensaje me llamara un swf, donde debo cambiar el codigo? |
|
|
sarj
Invitado
|
|
Volver arriba |
|
| Publicado: Lun Feb 25, 2008 7:56 pm |
Citar |
|
sarj escribió:
si en ves de tirar un mensaje me llamara un swf, donde debo cambiar el codigo?
Si en vez de preguntar checaras primero el tip completo? haber si esto te dice donde cambiarle
Código :
modelButton.onMouseDown = function (){
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
if(this._name == "boton1"){
trace("welcome home")//acciones
}
if(this._name == "boton2"){
trace("about us")//acciones
}
if(this._name == "boton3"){
trace("our services")//acciones
}
if(this._name == "boton4"){
trace("contact us")//acciones
}
}
}
|
_________________
::Nothing is Impossible:: |
|
flashreloco
clabLevel: 741
En un mundo, donde dormir es para los débiles
|
|
Volver arriba |
|
|
