asd

19

Dic

Tutorial de CSS

Publicado por: LeoBaraldi

Excelente curso, tutorial de css totalmente en español, muy recomendable para aquellos que recién comienzan o también para aquellos que quieran saciar algunas dudas básicas y otras más avanzadas.

Les dejo un detalle de los contenidos:
CAPITULO 1
Hojas de estilo con CSS1

CAPITULO 2
Estructura de una hoja de estilo CSS

CAPITULO 3
Usar hojas de estilo en documentos HTML

CAPITULO 4
La cascada de CSS

CAPITULO 5
Unidades de medida

CAPITULO 6
Propiedades de CSS1

3

Feb

Desencadenar eventos en flash, uso de botones y movieClip

Publicado por: LeoBaraldi

Entre las tantas cosas que pueden desencadenar eventos en flash como por ejemplo si movemos el Mouse, si abrimos una película, si presionamos una tecla, también tenemos los botones.
Los botones en flash tienen la particularidad (entre tantas) de cuando le hacemos clic pueden realizar algo (evento), este evento tiene una manera y un ámbito de donde se desarrolla.
Ejemplo 1:

Actionscript:
  1. mi_boton_btn.onRelease = function (){
  2. //aquí la acción a realizar
  3. }

 

Ejemplo 2:

Actionscript:
  1. onRelease(){
  2. //aquí la acción a realizar
  3. }

En ambos ejemplos  usamos el detector (onRelease) que significa que el evento se va a desencadenar cuando el usuario presione y suelte el botón.
La diferencia de ambos ejemplos son que de la primera forma debemos indicar el nombre de instancia del botón que queremos detectar el evento y dicha porción de código será escrita sobre un frame.
En el segundo caso la acción esta incluida en el botón mismo.
En mi caso particular trato de evitar los botones como símbolo, y utilizo en su reemplazo clip de película, que estos pueden recibir las mismas propiedades de un botón mas los comportamientos típicos de un clip de película.

Como ya vimos un boton o clip de pelicula puede recibir o detectar el evento onRelease (cuando se presiono y se soltó el botón del Mouse) pero no es el único evento estos pueden recibir.

Sigamos con el caso de que tengamos una película y esta la usamos como si fuese un botón, los eventos entre tantos que este detectaría seria los siguientes.
Observen por ustedes mismos que el nombre de instancia usa el subfilo “_mc” al tipear un punto “.” Automáticamente flash nos desplegara todas las propiedades y eventos disponibles. Por supuesto que esta manera de escribir el codigo es para colocarlo en un frame de nuestra linea de tiempo.

Actionscript:
  1. miPelicula_mc.onRelease = function (){
  2. //accion al hacer clic y soltar el mouse
  3. }
  4.  
  5. miPelicula_mc.onRollOver = function (){
  6. //accion al pasar el Mouse por arriba
  7. }
  8.  
  9. miPelicula_mc.onRollOut = function (){
  10. //accion al salir el mause sobre la pelicula
  11. }
  12.  
  13. miPelicula_mc.onMouseMove= function (){
  14. //accion al mover el cursor del mouse
  15. }
  16.  
  17. miPelicula_mc.onPress= function (){
  18. //accion al presionar el mouse
  19. }

Prueben ustedes mismo mas opciones, pero un ejemplo practico y sencillo seria tener un objeto en nuestro escenario y al presionarlo es se arrastre (Drag) y al soltar el Mouse este deje de arrastrarse.

Actionscript:
  1. miPelicula_mc.onPress= function (){
  2. this.startDrag ()
  3. }
  4.  
  5. miPelicula_mc.onRelease= function (){
  6. this.stopDrag ()
  7. }

Nuestro primer evento indica que mientras este presionado el mouse esta (this) pelicula se arrastre.
El segundo evento se desencadenara cuando soltemos el Mouse, por lo tanto esta (this) pelicula dejara de arrastrarse.

NOTA: Como pueden ver usamos la particula (this) que hace referencia directamente a mi mismo, seria lo mismo escribirlo de esta manera:

Actionscript:
  1. miPelicula_mc.onPress= function (){
  2. miPelicula_mc.startDrag ()
  3. }
  4.  
  5. miPelicula_mc.onRelease= function (){
  6. miPelicula_mc.stopDrag ()
  7. }

Pero de esta manera queda poco prolijo y en un tiempo fututo les puede traer algunos problemas, asi que siempre cuando nos refiramos a nosotros mismos podemos reemplazar nuestro nombre de instancia o lo que sea por “this

21

Ene

Nombres de instancias

Publicado por: LeoBaraldi

El nombre de instancia es un nombre único que vamos a tener para identificar un elemento en nuestro escenario. Este nombre debe hacer una correcta referencia directa y concreta con el elemento representado. Este nombre lo colocamos en la parte inferior izquierda en la barra de propiedades.

Por ejemplo si tenemos un cuadrado y este es un clip de película lo adecuado seria que su nombre de instancia sea cuadrado_mc.Nombre de instancias

Un elemento dibujado en el escritorio de nuestro flash no puede tener un nombre de instancia, hasta que este no se convierta en un “símbolo”. Si dibujamos un cuadrado en nuestro escritorio para convertirlo en símbolo debemos presionar la tecla F8 y en el cuadro de dialogo elegimos que tipo de símbolo queremos (clip de película, botón o gráfico).Nombre de instancias

Los únicos elementos que pueden recibir nombre de instancia son los clip de películas y los botones o aquellos que hereden dichas cualidades.

7

Ene

Operando con Numbers primera parte

Publicado por: LeoBaraldi

Como siempre los datos de tipo Numbers o numéricos son aquellos que están compuesto por un valor numérico y no literal.
Ejemplo:

Actionscript:
  1. <span id="gtbmisp_31" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">var</span> edad:<span id="gtbmisp_32" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">Number</span> = 30 //correcto
  2. <span id="gtbmisp_33" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">var</span> edad:<span id="gtbmisp_34" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">Number</span> = "30" //incorrecto

Como podemos observar a simple vista los datos de tipos números carecen de comillas dobles o simples, pueden ser un entero o decimal y siempre el Flash player nos va a devolver como máximo 15 dígitos en pantalla, pero en el podrá operar con mas dígitos.

En el caso de que una variable que debe almacenar un dato de tipo numérico o una operación nos deba devolver un resultado y este no es un numero, el Flash player no dará como resultante NaN (not a number), digamos que el resultado o el tipo de dato no es un numero.

Como todos sabemos con los números no solo podemos representar cantidades sino la posibilidad mas grande es realizar operaciones entre diferentes valores, sean sumas restas a cosas mas complejas como seno y cosenos de un numero. Flash cuenta con todas las herramientas para ello ya que cuenta con una clase nativa para los datos de tipo Number (clases veremos mas adelante).

Es importante recordar algunas cositas básicas para aquellos como yo que hace bastante tiempo nos alejamos de los libros del secundario o nivel medio, así que las reglas que rigen en Flash para las operaciones de suma, resta, multiplicacion y división son las mismas que las tradicionales así que recordemos que los signos + y - separan términos y los () agrupan las operaciones a evaluar.
Ejemplo:

Actionscript:
  1. <span id="gtbmisp_47" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">var</span> a:<span id="gtbmisp_48" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">Number</span> = 56;
  2. <span id="gtbmisp_49" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">var</span> b:<span id="gtbmisp_50" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">Number</span> = 4;
  3. suma = a+b; //el resultado es la suma de ambos números (60)
  4.  
  5. <span id="gtbmisp_51" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">var</span> a:<span id="gtbmisp_52" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">Number</span> = 56;
  6. <span id="gtbmisp_53" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">var</span> b:<span id="gtbmisp_54" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: red; text-decoration: underline; cursor: pointer;">Number</span> = 4;
  7. suma = (a+b)/2; //el resultado es la suma de ambos números divididos por 2 (30), como podemos ver agrupamos la suma usando <span id="gtbmisp_55" style="border: 0pt none; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0% 0%; font-family: serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; position: static; text-align: left; text-indent: 0pt; text-transform: none; color: green; text-decoration: underline; cursor: pointer;">paréntesis</span> y luego dividimos por 2

7

Ene

Operando con String primera parte

Publicado por: LeoBaraldi

Ya en otros artículos anteriores vimos diferentes tipos de datos que pueden almacenar nuestras variables en flash (string, number, Boolean, movieclips, array, objetos, ect).
En esta nueva sección nos vamos a detener un poco mas en los de tipo String “cadenas” porque es fundamentar saber operar con ellas dada las posibilidades y la constante necesidad de usar fragmentos de textos.
Como ya sabemos un string es una cadena de texto delimitada por comillas, simples o dobles nunca ambas
Ejemplo: var mivariable:String = “hola” también var mivariable:String = ‘hola’
Ya sabiendo esa definición ya podemos operar con nuestras variables. Por ejemplo si tenemos una variable que almacena un nombre y otra el apellido en una tercera variable podemos almacenar la resultante de ambas.
Ejemplo:

Actionscript:
  1. var nombre:String = “leo”
  2. var apellido:String = “baraldi”
  3. var nombre_completo:String = nombre+apellido

Des esta ultima línea lo que resulta es “leobaraldi”, lo que sucedió es llamado o conocido como concatenación de cadenas o variables, se suman los valores de las variables y nos devuelve un nuevo resultado.
Claro que esta que el nombre y el apellido están todo juntos, si queremos separarlos tan solo en una de las variables deberíamos agregar un espacio “leo ”.

Muchas veces nuestras variables deberán almacenar datos con caracteres especiales como las “ñ” o letras acentuadas “á,é,í,ó,ú” y en muchos de los casos estas letras no son interpretadas bien en nuestro código.
Para resolver este problema solo debemos incluir la siguiente línea de código en nuestro primer frame de ActionScrip y en lo posible al principio u en la primera línea cosa que quede antes de que una variable deba leer o escribir una cadena.

Actionscript:
  1. System.useCodepage = true

Con esta línea de código le indicamos al Flash player que use la codificación de caracteres de donde se este reproduciendo y evitando que nuestras cadenas de textos se coma o muestre mal los caracteres.

Por supuesto que contamos con una clase nativa (después veremos clases), que administra las cadenas de texto y cuenta con propiedades útiles como cuantos caracteres tenemos, si hay una letra u no en una cadena, el tipo de dato que leemos, si están en mayúsculas o no y muchas cosas mas que veremos mas adelante.

10

Dic

Consejos al comenzar escribir código

Publicado por: LeoBaraldi

Como ya nos vamos a ir sumergiendo en ejemplos a partir de esta sección es recomendable que sigamos ciertas reglas a la hora de escribir nuestro código, por una razón de facilitar la búsqueda de errores o también para cuando nuestro trabajo debe ser continuado por otros.

Usar nombres acordes para variables, funciones o instancias.
Al momento de inicializar una variable es recomendable no solo obviar el uso de las palabras reservadas o también nunca inicializarlas con número. Es recomendable utilizar nombres que las identifique bien, porque de esa manera con solo leerla en pantalla sabremos que función cumple en nuestro proyecto o que datos almacena.

Ejemplo: incorrecta: a=”mi casa” / correcta: var lugares:String = “mi casa”

Usar la primera letra mayúscula para el nombre de las clases. Las clases que veremos mas adelante son aquellas propiedades de cada elemento que usemos en flash. Un ejemplo seria cuando usamos un campo de texto en nuestro proyecto estamos usando un elemento que con el lleva muchas propiedades de la clase TextField

Usar solo una capa de nuestra línea de tiempo separada de todos los elementos para escribir nuestro código, tratando siempre en lo posible agrupar en ella todas las funciones y variables o cualquier segmento de nuestro ActionScript. También en lo posible usemos 1 solo frame para nuestro ActionScript.

Usar la menor cantidad de fotogramas posible, esto nos ayudara a mejorar nuestro código exprimiendo al máximo y mejorar notable mente el peso de nuestros archivos finales.

Usar comentarios para nuestro código mientras escribimos, así nos ayudara a encontrar mas rápidamente los elementos a la hora de retomar un proyecto

Ejemplo:
Incorrecta: a=”mi casa”
Correcta: var lugares:String = “mi casa” //mi comentario

Usar los sufijos correspondientes para cada uno de los elementos que vallan surgiendo en nuestro proyecto flash. El uso de sufijos nos permitirá trabajar de una manera muy rápida y con un contacto mas directo con las clases de cada elemento accediendo directamente a sus propiedades a medida que vallamos escribiendo nuestro código.

Ejemplo usando un nombre de instancia:
Incorrecta: mimodulo
Correcta: mimodulo_mc
Como pueden ver en el ejemplo agregamos a esta instancia el sufijo _mc que a la hora de programar flash nos desplegara automáticamente todas las propiedades para este elemento sin necesidad de que nosotros tengamos que recurrir a nuestra memoria humana.
La mayoría de los elementos que utilicemos tienen su sufijo:


Array: _array
Button: _btn
Camera: _cam
Color: _color
ContextMenu: _cm
ContextMenuItem: _cmi
Date: _date
Error: _err
LoadVars: _lv
LocalConnection: _lc
Microphone: _mic
MovieClip: _mc
MovieClipLoader: _mcl
NetConnection: _nc
NetStream: _ns
PrintJob: _pj
SharedObject: _so
Sound: _sound
String: _str
TextField: _txt
TextFormat: _fmt
Video: _video
XML: _xml
XMLNode: _xmlnode
XMLSocket: _xmlsocket

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi