Top 10: mis sitios favoritos de junio

23 07 2007

Deberan perdonar el retraso de esta lista, pero he estado bastante ocupado en la publicación de otros artículos. Sin embargo aquí les dejo el listado de los sitios que he encontrado en la red, este pasado mes de junio.

Artículos Relacionados





Top 10: mis sitios favoritos de mayo

2 07 2007

Como si nada, hemos terminado el mes de Mayo. En muchos países de América L átina, el mes de mayo representa el mes de celebración para nuestras madres. Y aquí, en Dot Press, el mes de mayo termina con un nuevo listado de los mejores sitios de Internet:

Artículos Relacionados





Top 10: mis sitios favoritos de abril

7 05 2007

Al igual que la lista pasada, donde comenté acerca de los mejores sitios que había encontrado en la red, en el mes de marzo, nuevamente realizo esta lista, ahora con mis stios favoritos de abril. En este artículo, nuevamente incluyo vínculos de diversas áreas:

Artículos Relacionados





Menu dinámico en Flash con ActionScript y XPath (parte II)

3 05 2007

En la primera parte de este tutorial, me centre en la manipulación de un archivo XML a través de la API de XPath. En esta segunda parte, hablaré sobre las funciones de manipulación de objetos dinámicos en Flash, através de ActionScript.

ActionScript es el lenguaje de programación que viene junto con Flash; con el que podemos manipular casi cualquier comportamiento y objeto de la película en tiempo de ejecución. A mi parecer, la estructura de programación del lenguaje ActionScript es muy parecida a la de Java y JavaScript. De hecho, ActionScript es un lenguaje derivado de una especificación de ECMAScript.

Pues bien, después de la reseña histórica, centremonos en describir algunas de las funciones utilizadas para generar el menú dinámico en Flash.

Creación y programación de un objeto MovieClip: Para poder crear un objeto MovieClip con ActionScript, debemos especificar en sus propiedades que va a ser exportado para ActionScript, definiendo, además, un identificador para ello.

/**
 * La función attachMovie crea una nueva instancia de un objeto
 * MovieClip. El atributo _depth, indica profundidad. La variable que
 * tendrá la referencia del objeto será _hwnd.
 */

_hwnd    = _root.attachMovie("_movieclip", "_instance_name", _depth);
_hwnd._x = _xleft;
_hwnd._y = _ytop;

/**
 * Después de creado el objeto MovieClip y asignado los valores de
 * sus propiedades básicas, también podemos asignarle valores a los
 * elementos dentro, otras propiedades y funciones.
 */

_hwnd.caption.text = "I’m a caption text";
_hwnd.onRelease = function() {
    trace(this.caption.text);
}

/**
 * Y al igual que JavaScript, podemos crear funciones prototype, para
 * extender las funciones de objetos de una misma clase.
 */

MovieClip.prototype._function = function(_param:Number):Void {
    _arrayObjects[_index].removeMovieClip();
}

En términos generales, la manipulación de objetos a nivel de ActionScript es realmente fácil. Solo se necesita un poco de ingenio y saber como exactamente se desea que se represente el menú que queremos realizar. Como les comenté desde el principio del tutorial: el script del que me basé para realizar este artículo, creaba un menú dinámico estilo acordeón. Para otros tipos de menú, la programación sin duda, varía de acuerdo a la complejidad del mismo. Lo que traté de presentarles aquí, fué una guía general de funciones y procedimientos comunes para cualquier tipo de estructura.

Por último, les dejo con las definiciones de otras funciones utilizadas en el script original:

// Elimina la referencia del objeto
delete _object;

// Motion Tween con ActionScript
function tween(mc, begin, end) {
    _easeType = mx.transitions.easing.Back.easeOut;
    var _time = 0.5;
    _tweener = new mx.transitions.Tween(mc, "_x", _easeType, begin,
                                        end, _time, true);
}

Adicionalmente, en la modificación que hice del menú original, agregue más programación, dado que, como sabemos, cuando ponemos un OBJECT dentro de nuestra página, definimos un ancho y un alto. Pues bien, como el menú es dinámico y puede crecer por el efecto, había que programar una función que cambiase el tamaño del control OBJECT. Pero bueno, eso es material para otro artículo.

Articulos Relacionados:





Menu dinámico en Flash con ActionScript y XPath

3 05 2007

Hace algunos días, modifique un script realizado en Macromedia Flash de un menú estilo acordeón, desarrollado por un experto en Flash y publicado en un sitio dedicado a proveer imagenes, videos y animaciones Flash. Por razones de derechos de autor, no publicaré dicho script. Sin embargo, si me atrevo a estudiar su funcionamiento y a publicar los resultados a la comunidad.

Este tutorial, describirá la administración de archivos XML y algunas propiedades interesantes que el autor del script original utilizó para generar una estructura dinámica. A continuación describo los pasos en el código:

System.useCodepage = true;
import mx.xpath.XPathAPI;

xmlDocument = "dotpress.xml";

var xmlParser:XML = new XML();
    xmlParser.load(xmlDocument);
xmlParser.ignoreWhite = true;

La primera línea indica que el modo de codificación de caracteres será UTF-8. La segunda, importa la API de manejo XPath. XPath es una descripción de lenguaje XML, aprobada por la W3C para el manejo de archivos XML. La particularidad de XPath es que, como su nombre lo indica, el parseo de los elementos es parecido a la estructura de archivos (paths), en donde los nodos pasan a ser una especie de carpetas.

Posteriormente se crea el objeto de tipo XML y se carga el documento. El atributo ignoreWhite le indica al parser que ignore nodos con valores vacíos.

Hasta este punto todo será igual para cualquier estructura de menu. Ahora bien, para este ejemplo consideremos una variante de archivo XML, parecida al siguiente ejemplo:

<?xml version = "1.0" encoding = "iso-8859-9"?>
<dotpress>
    <section caption = "3D" />
    <section caption = "Web Development" href = "/web-development/">
        <subsection caption = "CSS" href = "css/" />
        <subsection caption = "Flash" href = "flash/" >
            <subsection caption = "ActionScript" />
        </subsection>
        <subsection caption = "HTML" href = "html/" />
    </section>
</dotpress>

Una estructura de menu, podría describir desde una estructura de un nivel hasta una estrucutura más compleja de multiniveles. Todo dependería entonces de nuestra habilidad para crear los controles desde Flash y saber manejar los eventos y objetos. Ahora, viene el momento de obtener el primer nivel de nodos del archivo XML..

xmlParser.onLoad = function(xmlLoaded) {
    if (xmlLoaded) {
        xmlDotPress = mx.xpath.XPathAPI.selectNodeList(
                      xmlParser.firstChild, "dotpress/section");
    }
}

El atributo xmlLoaded es un valor booleano que indica que el documento ha sido cargado. De ser así, el contenido de todos los nodos hijos del primer elemento (en este caso el nodo dotpress) será volcado sobre cualquier variable que nosotros queramos, através de la funcion selectNodeList que recibe dos argumentos: la referencia del nodo y la ruta XPath.

Una vez obtenido los datos, la variable a la que se volcó la información puede ser tratada como un Array de objetos, con varias propiedades y funciones que a continuación describo:

// <– Devuelve la longitud del Arreglo
xmlDotPress.length;

// <– Devuelve el valor de determinado atributo
xmlDotPress.attributes.attrib_name;

// <– Contiene la referencia del arreglo de objetos "hijos"
xmlDotPress[_index].childNodes;

Estas son las referencias principales de funciones para manipulación de objetos utilizando la API de XPath para ActionScript. En el siguiente artículo de esta serie, me centraré en las funciones de manipulación de los objetos en Flash con ActionScript.

Para más información acerca de la API de XPath para ActionScript puede ver la documentación de Flash o ver el artículo en: http://www.macromedia.com/go/xpathapi.

Articulos Relacionados:





Detectar posición del Mouse en Flash con ActionScript

9 04 2007

Muchos desarrolladores en Flash están cambiando el modo en que solían programar aplicaciones. Muchas de las nuevas tendencias tienen que ver con el concepto de las RIA (Rich Interface Application) y de la interacción del usuario con la aplicación. Sin duda, el puntero o mouse, a cambiado la forma en que el usuario utiliza su computador. En mi experiencia, cada día me topo con ejemplos cada vez más extraordinarios de las cosas que se pueden hacer con Flash y ActionScript. Aún debemos de recordar que las grandes cosas están hechas de pequeñas. Por ahí me tope con este ejemplo que sin duda es una de ellas. Este fantástico script muestra como detectar la posición del mouse en Flash con ActionScript. Se los explico a continuación:

Paso 1: Creemos dos cuadros de texto dinámico. En mi caso, crearé uno asociado a la variable mouseX y otro asociado a la variable mouseY.

Paso 2: Posteriormente, peguemos el siguiente código en la primera posición de nuestra línea de tiempo:

_root.onEnterFrame = function() {
    mouseX = _root._xmouse;
    mouseY = _root._ymouse;
}

Como, pueden darse cuenta, la simple referencia a la propiedad ._xmouse y ._ymouse nos devuleve el valor de la posición del mouse para ese objeto. Ahora bien, esto lo podemos utilizar para muchas animaciones, como por ejemplo un puntero personalizado para una página o para hacer objetos que cambien de tamaño dependiendo de la posición del puntero; como en el siguiente ejemplo:

Paso 1: Cree dos objetos movie clip. El segundo, debe ser una instancia del primero.

Paso 2: Pegue el siguiente código, en la instancia del primer objeto, dentro del segundo objeto movie clip.

onClipEvent (load) {
    baseX = _parent._x;
    baseY = _parent._y;
}
onClipEvent (enterFrame) {
    distanceX = _root._xmouse – _parent._x;
    distanceY = _root._ymouse – _parent._y;
    if (distanceX
        distanceX = -distanceX;
    }
    if (distanceY
        distanceY = -distanceY;
    }
    distance = Math.sqrt((distanceX*distanceX)+(distanceY*distanceY));
    if (distance -150) {
        _parent._xscale = distance;
        _parent._yscale = distance;
    }
}
onClipEvent (mouseMove) {
    updateAfterEvent();
}

En el anterior ejemplo, podemos observar que se utliza el valor de las propiedades _parent._x y _parent._y. Estos valores representan la posición del objeto padre, dentro del Stage. Además podemos ver la utilización de la función Math.sqrt que devuelve el valor de la raíz cuadrada y para cambiar el tamaño del objeto, las propiedades utlizadas son ._xscale y ._yscale.





Top 10: mis sitios favoritos de marzo

30 03 2007

La primera vez hago un listado como estos para Dot Press. Muchos sitios son parte de mi listado de bookmarks en del.icio.us y otros que he encontrado en mi busqueda de mejores sitios. A continuación les listo las últimas entradas en mi listado, sin ánimo de hacer favoritos.

Artículos Relacionados