Comunidad de diseño web y desarrollo en internet online

Galeria a base de componentes

Citar            
MensajeEscrito el 01 Oct 2004 07:06 pm
Bueno veamos si los duendes son mitologia o reales :

Acabado el componente Preload , el foro estara a la altura ??

Para empezar se deberia crea la ayuda de la clase ObjectLoader , mirar : http://www.cristalab.com/foros/viewtopic.php?p=8634#8634

y despues teneis el preload ...

Como veo freddie algo impaciente XD XD asi q tienes luz verde para publicar la api de dibujo , parece q va bien...

http://www.activicio.com/lab/Dibujo.rar

Para la gente q ya la tiene instalada , desinstale y instale esta nueva :

hay poco cambios pero son importantes :

- quitado la parodia de AsBroadcaster , no se porq demonios me parecio una buena idea ...
- la classe es Dynamica como MovieClip !!

Este componente no tiene apartado grafico solo se trabaja por as , es lo q hay ... , si veis q es demasiado para tu nivel siempre te queda el componente de flash o crearte uno .

El preload pesa un pelin para ser un preload pero es para usar en la peli madre no en swf externos , pesa unos 9 kb , casi como la galeria , es q hay un huevo de code (+ 1500 lineas) y claro querais o no pesa ...

Q sepais q no pienso crear la ayudad ni tampoco ningun tutorial , lo q creo son herramientas para mi , soy lo bastante imbecil como para regalar mi code y encima perder la mañana en explicar como usarlo ...

Teneis un buen curro asi q cuantos mas seais ... , quierro betatesters q prueben los componentes en busca de bugs , si descubreis algun estilo majo publicarlo ...

Curros::

-Crear una plantilla con el logo de cristalab , hasta le podeis poner publi XD , usareis la css de macromedia ??
-Crear la ayudad de cada metodo
-Crear el xml de la ayudad
-Crear el mxi (es como un xml) es el q crea el mxp

Bueno pasemos a explicar como funciona y como hacerlo funcionar :

Extructura de preload :

Código :

MovieClip
|
BuhoObject :
   |   _css : get/set propiedad comun en todos los componentes , es el estilo de los campo de texto
   |   _style : get/set propiedad comun en todos los componentes , es el estilo de los colores de componente
   |   setDefault(path) function comun en todos los componentes , comprueba si _css y _style fueron definididos en caso de no estarlo carga la clase q le le da el componente , ejemplo en Preload antes de dibujar nada llamo a : setDefault (com.buho.componentes.defecto.StylePreload) , si _css o _style o ambos no fuero declarado carga "com.buho.componentes.defecto.StylePreload"
|
Preload :
   |
   |   ObjectLoader:
         |   evento : onLoadProgress
         |   evento : onLoadComplete
         |   evento : onLoadError
         |
   |
   |   StylePreload :    clase q contiene los estilos por defecto para Preload
   |   
   |   addPreload
   |   setTexto
   |   setSize
   |   load
   |
   |   evento : onLoadComplete
   |   evento : onLoadError
|


Como usarlo :

Código :

import com.buho.componentes.*;


/*    Preload.addPreload (
                  clip : nivel donde quierres crear el preload (miClip,_root,this) 
                  x : la posicion donde quierres colocar el preload (_x) [opcional , por defecto = 0] 
                  y : la posicion donde quierres colocar el preload (_y) [opcional , por defecto = 0] 
                  nivel : profundida de el preload [opcional , por defecto = clip.getNextHighestDepth()] 
                   )
*/

var mp :Preload = Preload.addPreload (this ,50,50,1);

/* 
   setTexto (
          Inicio : texto q aparece durante la transferencia
          final : texto q aparece cuando se acaba la transferencia
          )
   
   el simbolo # sirve para cortar el string
   el simbolo $ sirve para decir q es una variable 
   
   tipos de variables :
      $porcentaje
      $bytesTotal
      $bytesLoaded
      
   ejemplo : "Cargado jpg #$bytesLoaded# / #$bytesTotal# Kb"
   da como resultado : "Cargado jpg 0 / 69 Kb"
*/
mp.setTexto ("Cargando jpg #$bytesLoaded# / #$bytesTotal# Kb","se cargo jopee!");

/*
   setSize (
          barra : objecto q contiene las medidas de la barra [opcional , por defecto = {ancho:80,alto:10}] 
          marco : objecto q contiene las medidas de el marco [opcional , por defecto = {ancho:100,alto:40}]
          )
   
   aparte de dar la medida de el preload , es el q dibuja el preload , asi q aunq dejes los valores por defecto tienes q usarlo (setSize ())
   
*/
mp.setSize ({ancho:180,alto:10},{ancho:200,alto:40})//


// creamos los eventos
listener = new Object ();
   
listener.onLoadComplete = function(objecto,obj) {
   trace("Se descargo :"+objecto);
   trace("porcentaje :"+obj.porcentaje);
   trace("bytesTotal :"+obj.bytesTotal);
   trace("bytesLoaded :"+obj.bytesLoaded);
   trace("ya se cargo");
};
   
listener.onLoadError = function(objecto,string) {
   trace("No se pudo descargar :"+objecto);
   //trace(string);
};   

// creamos un contenedor pa la foto
this.createEmptyMovieClip("foto", 2);
foto.createEmptyMovieClip("container", 1);
//foto._visible = false ;

mp.onPress = function () {
   // cargamos la foto
   this._parent.foto.container.loadMovie("2.jpg"); //"http://activicio.com/lab/2.jpg?t="+new Date().getTime()
   /*
      load (
           listener : objecto donde se encuentra los eventos
           object : objecto a seguir la transferencia 
           )
   */
   this.load (this._parent.listener,this._parent.foto.container) ;
}


Para aplicar estilos hay dos formas :

-1 pisando mi default :

Código :

import com.buho.componentes.defecto.*;
   
StylePreload._style = {//lo q sea}
StylePreload._css = {//lo q sea}


-2 aplicando un estilo a cada componente :

Código :

var mp :Preload = Preload.addPreload (this ,50,50,1);

mp._style = {//lo q sea}
mp._css = {//lo q sea}}



Explicacion de _style , tenemos 3 objectos :
nota:[poner enlace de referencia a Dibujo en la ayuda]



-1 movimiento : es la animacion q hay entre los intervalos de la consulta de la transferencia

Código :

movimiento = {   
         vel : 10, // velocidad 
         interval : tiempo en la q se comprueba como va la transeferencia , + tiempo == + bruto == + se ve el movimiento , en sg
      }


-2 barra es la barra q se mueve

Código :

barra = {
   ver:true,//Si se ve o no (puede interesar si solo quierres enseel texto ...)
   radio : 0,//radio de el rectangulo
   inf : {
       color: {
         el cuadrado verde oscuro
      }
   },
   med : {
      color: {
         la barra el q se mueve , degradado
      }
   },
   sup : {
      color: {
         la linea negra
      }
   }
}


-3 marco esto llegaria ha ser el fondo de el preload

Código :

marco:{
   ver:true,//Si se ve o no (ha experimentar con eso , cambia mucho la aparencia de el preload, gracias a esto son 2 preload al precio de uno  ...)
   radio : 10,//radio de el rectangulo
   color: {
      es el verde claro
   }
}


Explicacion de _css :

Código :

_css = {
      // css mirar ayudad de flash [poner enlace de referencia a las css]
      color: '#000000',
      fontFamily: '_sans',
      fontSize: '9',
      fontWeight: 'bold',
      //porpiedades de el preload
      ver:true, // si se ve o no
      textAlign : 'center' , // posicion de el campo de texto // left // right // center
      posy : 'inf'// posicion de el campo de texto // sup // inf // med   
   }



ejemplos reales :














supongo q quereis un fla con las clases no ? XD XD
http://www.activicio.com/lab/Preload.rar

Toi curioso de ver duendes :roll:

salu2

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 



Ultima edición por buho29 el 15 Oct 2004 11:06 am, editado 1 vez

unknown
Citar            
MensajeEscrito el 01 Oct 2004 07:37 pm
Está genial, gracias Mr. Buho20

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

unknown
Citar            
MensajeEscrito el 01 Oct 2004 09:04 pm
Easing incluido, dioz, sombreros fuera :wink:

Por TheOm3ga

267 de clabLevel

1 tutorial

1 ejemplo

 

To your south!!!

unknown
Citar            
MensajeEscrito el 02 Oct 2004 02:49 am
buho29 ...
Vamos a ver si te gusta la siguiente idea

Publico como ejemplos el ObjectPreloader y el APi de Dibujo

Publico como un tuto el uso del ObjectPreloader que tienes ahi

Me dices que te parece la idea que te puse en el otro post de hacer un post para el weblog donde mostremos al mundo tu monstruo

Y al final de todo esto, ... te tengo algo que decir


¿Que opinas?

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown
Citar            
MensajeEscrito el 02 Oct 2004 09:52 am
Es que los hay geniales :lol:

Por Sisco

BOFH

3700 de clabLevel

12 tutoriales
4 articulos

Genero:Masculino   Bastard Operators From Hell

Catalunya

unknown
Citar            
MensajeEscrito el 02 Oct 2004 08:26 pm
me parece bien ! , pero el tutorial va a ser muy escueto :oops: :oops: , intenta mejorarlo ...

Ya he escrito (hoy) la clase Loader! 8) 8)

salu2

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 

unknown
Citar            
MensajeEscrito el 15 Oct 2004 04:19 pm
Como va esa ayudad ??? XD XD XD XD

Freedie ... , publicas la api ?? o saco el :bate: XD

Modificado Preload ! , cambie el movimiento por el easing de toa la vidad , para este tipo de animacion queda mejor ...

Esto ya hace q lo tengo pero estaba un poco saturao para explicar el componente ...

Loader : carga swf y jpg , permite decir el tamaño de el contenedor y redimensiona la foto al contenedor , no pierde nunca el ratio , con o sin recorte de imagen , 2 tipos de transicion al acabar de cargar y tienen temporizador 8) 8)

aplicar un estilo es como en preload:

Código :

// style a cada instancia
var miLoader : Loader = Loader.addLoader (this);  
miLoader._style = {//lo q sea}

// style general
com.buho.componentes.defecto.StyleLoader._style = {//lo q sea} 


el contenido de style :

Código :

_style:Object = {
      
      efecto :{
         // en realidad no es alpha , uso el color para simular eso , + bonico y - recursos , 
         //el color de el efecto lo cojo de fondo.color.solido.color lo digo por si meteis un degradado al fondo
         alpha : { 
            ver : true ,// si se ve el efecto
            ecuacion : com.robertpenner.easing.Circ.easeIn ,// tipo de animacion 
            duracion :  1 , // duracion de la animacion sg
            delay : .8 // tiempo de espera para disparar la animacion
         },
         brillo : {
            ver : true ,// si se ve el efecto
            ecuacion : com.robertpenner.easing.Sine.easeOut ,// tipo de animacion 
            duracion : .8 , // duracion de la animacion sg
            delay : 0 // tiempo de espera para disparar la animacion
         }
      },
      // color de fondo de el cuadrado
      fondo : {
         radio:10,
         color: {
            ver :{linea:true, fondo:"solido"} ,
            linea:{grosor:4 , color:0x8B8654 , alpha:100} ,
            solido:{color:0xC2CFD5, alpha:100}
         }
      },
      preload : {
         // mirar Preload
         _style:{ },
         _css: { }
      }
      
   }


uso en flash:

Código :

import com.buho.componentes.*;
//para las animaciones (tween)
#include "lmc_tween.as"

var mp : Loader = Loader.addLoader (this);
// declarando el texto como en Preload
mp.setTexto ("Cargando jpg #$bytesLoaded# / #$bytesTotal# Kb");
//el tamaño setSize (ancho,alto, si se corta la foto)
//el 3° parametro es para decir si se permite recortar la foto por defecto :false
mp.setSize (400,400,true)

onLoadComplete = function(obj) {
   trace("ya se cargo");
};
   
onLoadError = function(objecto,string) {
   trace("No se pudo descargar :"+objecto);
};

mp.load ( this, "2.jpg" ) ;


Bueno esto empieza a pesar un poco ... , 15 kb ... , los culpables : Dibujo y lmc_tween entre las dos se va pa 10 kb , no me extraña q pesen los componentes ...

ejemplo con setSize en true :



ejemplo con setSize en false :



fla y clases : http://activicio.com/lab/loader.rar

salu2

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 

unknown
Citar            
MensajeEscrito el 15 Oct 2004 05:23 pm
buho, estas ultimas semanas mi mente ha entrado en proceso de inclosión uniformemente acelerada (INA) asi que por favor, se que tenemos un monton de cosas tuyas por lanzar a este mundo impenitente y desprevenido; ¿Podrias recordarme que tenemos pendiente de publicarte? zzz:

onegai :$

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown
Citar            
MensajeEscrito el 15 Oct 2004 05:39 pm
solo la api de Dibujo , nada mas ...

Lo otro da igual , has probado dormir ???

desconecta ...

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 

unknown
Citar            
MensajeEscrito el 15 Oct 2004 05:47 pm
Me podrias recordar donde esta para armar el post para el weblog?

Lo de dormir ... eso ya esta puesto aparte de mi (lee las variadas horas en las que posteo aqui xD )

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown
Citar            
MensajeEscrito el 15 Oct 2004 08:28 pm
http://www.activicio.com/lab/Dibujo.rar

Tambien puedo esperar unos dias no pasa na ...

ya me habia fijado ...

cuando estoy muy saturado de as , dejo de programar un par de dias ... , despues vuelves fresco ... , haz otras cosas q no requierra concentracion logica ...

Y el cansacio no te deja ver claro y ya es todo en cadena , te bloqueas por tonterias , te vas cabreando y llega la furia (recomiendo a la gente cercana alejarse)

Busca ayudad para mantener la web , creo q hay gente deseosa de ayudarte , responde solo a los post q puedas , afloja el ritmo ...

haz una agenda (de gente normal... ) y cumplela !

Si no acabaras petando un plomo

Por buho29

510 de clabLevel

1 tutorial

7 ejemplos

 

unknown

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.