Resaltar Fila al pasar el puntero del Mouse by codigo caxa

Fuente : http://www.codigocaxa.net78.net/?p=13Resalta fila al pasar el puntero

Pues bien, la idea es resaltar(aplicar una regla de estilo CSS) toda una fila de una tabla al situar el mouse en dicha fila, tal y como se puede apreciar en la figura del costado.

La regla CSS a aplicar en nuestro ejemplo se llamará: resaltar, cuyo código es el siguiente:

tr.resaltar {
    background-color: #F5FFD7;
    cursor: pointer;
}

Veamos brevemente lo que contiene nuestra regla CSS. Primeramente con tr. estamos diciendo que solo es aplicable a las filas(<tr>)de una tabla. La propiedad background-color establece como color de fondo de la fila al valor hexadecimal #F5FFD7 (parecido al verde agua). Finalmente la propiedad cursor: pointer indica que el cursor se tiene que cambiar por la del icono de la manito.

Bueno, La forma clásica y usual de hacer el RESALTE es colocando manualmente en el evento onmouseover de la fila(<tr>) el estilo css que deseamos que obtenga al situarnos encima de dicha fila y en el evento onmouseout donde indicaremos que no se aplicará regla css alguna cuando el puntero del mouse salga de la fila. El Código sería el siguiente:

<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
    <td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;amp;oacute;n</td>
</tr>
<tr onmouseover="this.className = 'resaltar'" onmouseout="this.className = null">
    <td>Per&amp;amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td>
</tr>

Esto es aceptable siempre y cuando la tabla conste de pocas filas, pero ¿Qué sucedería si la tabla consta de 20, 500 ó 1000 e incluso más filas?, ¿demasiado tedioso verdad?, pues la idóneo,en estos casos, es utilizar DHTML (HTML Dinámico) para hacerlo realidad con tan solo unas cuantas líneas de código.

¿Qué es DHTML?

DHTML (HTML Dinámico): No es un lenguaje de programacion nuevo; es más bien el uso combinado de HTML, Hojas de estilos CSS y JavaScript que me permitirá,luego de cargada la página, acceder a cada una de las etiquetas html y poder modificar sus atributos. Para aplicar DHTML necesitamos obligatoriamente conocer el DOM (Document Object Model).

¿Qué es DOM?

DOM (Document Object Model): Es el Modelo en Objetos para la representación de Documentos, es sobretodo otra forma de ver el contenido HTML de una Página Web. Este modelo es altamente gerarquizado y a través de él podemos acceder al contenido y estilo de cada etiqueta html del documento y modificarla de acuerdo a algún evento. DOM permite entonces insertar, borrar o modificar las etiquetas HTML y sobretodo sin recargar la pagína.

Pues bien, luego de estos conocimeintos previos ya podemos realizar la función JavaScript que permitirá realizar el resalte del manera rápida. El Código necesario es el siguiente:

function ResaltarFila(id_tabla){
    if (id_tabla == undefined)      // si no se le pasa parametro
        // recupera todas las filas de todas las tablas
        var filas = document.getElementsByTagName("tr");
    else{
        // recupera todas las filas de la tabla indicada en el parametro
        var tabla = document.getElementById(id_tabla);
        var filas = tabla.getElementsByTagName("tr");
    }
    // recorre cada una de las filas
    for(var i in filas) {
    	// si el puntero esta encima de la fila asigna la regla css: resaltar
        filas[i].onmouseover = function() {
            this.className = "resaltar";
        }
        // si el puntero salga de la fila asigna ninguna regla
        filas[i].onmouseout = function() {
            this.className = null;
        }
    }
}

Línea 04, Se utiliza la función: getElementsByTagName que provee DOM a través del objeto document retornando la referencia a todas las etiquetas(TagName) <tr>(filas de una tabla).

Línea 07: Si es que le he pasado el nombre de la tabla, recupera la referencia a la tabla cuyo nombre(id) sea igual al parámetro id_tabla mediante la función getElementsById y lo almcaenda en la variable tabla.

Linea 08: a diferencia de la línea 04 se almacena en la variable fila todas las referencia de todas las filas pero tan solo de la tabla almacenada en la variable tabla.

Linea 13,14: Agrega a la fila actual,observen que con el for de la linea 11 se recorre una a una las filas, el evento onmouseover e indica que cuando suceda esto le asigne a la fila la regla de estilo CSS llamada “resaltar“(this.className =”resaltar”;).

Línea 17,18: Agrega a la fila actual el evento onmouseout e indica que cuando suceda esto le asigne a la fila ninguna regla de estilo CSS (this.className =”null”;)”.

Listo!!!, eso es todo, lo que nos queda es llamar a la función luego que la carga de pagina haya sido completada (importante). el código sería el siguiente:

// resaltar fila de tabla cuyo nombre sea tabla_paises
ResaltarFila('tabla_paises');
// si queremos resaltar todas las tablas,
// no le pasamos parametro
ResaltarFila();

Les dejo ahora todo el codigo perteniente al archivo: resalta_fila.html.

<html>
<head>
    <title>Resaltar fila de una Tabla al pasar el Mouse</title>
    <script language="JavaScript" type="text/javascript">
    function ResaltarFila(id_tabla){
            if (id_tabla == undefined)      // si no se le pasa parametro
            // recupera todas las filas de todas las tablas
            var filas = document.getElementsByTagName("tr");
        else{
            // recupera todas las filas de la tabla indicada en el parametro
            var tabla = document.getElementById(id_tabla);
            var filas = tabla.getElementsByTagName("tr");
        }
        // recorre cada una de las filas
        for(var i in filas) {
            // cuando el puntero esta encima de la fila asigna la regla css: resaltar
            filas[i].onmouseover = function() {
                this.className = "resaltar";
            }
            // cuando el puntero salga de la fila asigna ninguna regla
            filas[i].onmouseout = function() {
                this.className = null;
            }
        }
    }
    </script>
    <style type="text/css">
    tr.resaltar {
        background-color: #F5FFD7;
        cursor: pointer;
    }
    </style>
</head>

<body>
<table id="tabla_paises">
<caption>Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;ses Sudamericanos</caption>
<tr>
    <th width="180">Pa&amp;amp;amp;amp;amp;amp;amp;amp;iacute;s</th>
    <th width="120">Capital</th>
</tr>
<tr><td>Argentina</td><td>Buenos Aires</td></tr>
<tr><td>Bolivia</td><td>La Paz</td></tr>
<tr><td>Brasil</td><td>Brasilia</td></tr>
<tr><td>Chile</td><td>Santiago de Chile</td></tr>
<tr><td>Colombia</td><td>Bogot&amp;amp;amp;amp;amp;amp;amp;amp;aacute;</td></tr>
<tr><td>Ecuador</td><td>Quito</td></tr>
<tr><td>Guyana</td><td>Georgetown</td></tr>
<tr><td>Paraguay</td><td>Asunci&amp;amp;amp;amp;amp;amp;amp;amp;oacute;n</td></tr>
<tr><td>Per&amp;amp;amp;amp;amp;amp;amp;amp;uacute;</td><td>Lima</td></tr>
<tr><td>Surinam</td><td>Paramaribo</td></tr>
<tr><td>Trinidad y Tobago</td><td>Puerto Espa&amp;amp;amp;amp;amp;amp;amp;amp;ntilde;a</td></tr>
<tr><td>Uruguay</td><td>Montevideo</td></tr>
<tr><td>Venezuela</td><td>Caracas</td></tr>
</table>
<br /><br />

<table id="tabla_libros">
<caption>Libros Programación</caption>
<tr>
    <th width="220">Nombre</th>
    <th width="80">P&amp;amp;amp;amp;amp;amp;amp;amp;aacute;ginas</th>
</tr>
<tr><td>PHP</td><td>650</td></tr>
<tr><td>JavaScrip</td><td>420</td></tr>
<tr><td>CSS</td><td>345</td></tr>
</table>

<script language="JavaScript" type="text/javascript">
    // resaltar fila de tabla cuyo nombre sea tabla_paises
    ResaltarFila('tabla_paises');
    // si queremos resaltar todas las tablas,
    // no le pasamos parametro
    ResaltarFila();
</script>
</body>
</html>

Bueno yo recomiendo tener el código Javascript en un archivo aparte, el Código CSS también en un archivo aparte para luego hacer en nuestro archivo html la llamada a esos archivos, esto permite generar codigo más limpio y entendible. En la demo he aplicado esto.

Ver Demo Online | Descargar Código Fuente

Biliografía : DHTML Ya, DOM

Anuncios

Ejercicio práctico sobre el consumo de un archivo JSON desde una página PHP y de trabajo con el API de Panoramio

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

JSON es un formato utilizado para el intercambio de información entre sistemas. Utiliza Javascript como lenguaje y sintaxis para la definición de objetos, en archivos de texto que son transferidos fácilmente por Internet. Poco a poco se ha ido incorporando al uso habitual en el desarrollo web por su facilidad de uso y su integración en lenguajes de programación habituales, como PHP. En este artículo vamos a presentar una práctica con JSON en PHP basada en el uso del API de Panoramio.Panoramio es un popular servicio de Google, como probablemente sabremos, que permite subir imágenes localizadas geográficamente en los mapas de Google. Panoramio dispone de un API para la integración de las fotografías de su base de datos en otras aplicaciones web, de manera que cualquier persona puede presentar fotos de lugares del mundo subidas por los usuarios de Panoramio, en su propio sitio web.El API de Panoramio utiliza JSON como formato de intercambio de la información de las fotos. Por medio de este API podemos construir URL, que solicitadas al sitio de Panoramio, nos devuelven un JSON con los datos de las fotografías, es decir, su título, autor, URL del archivo gráfico, etc. Gracias a la integración de JSON en la mayoría de los lenguajes de programación de aplicaciones web, desde casi todas las plataformas de programación para el desarrollo, se pueden obtener fácilmente las fotos y presentarlas en un sitio web.

Como venimos explicando en el Manual de Trabajo con JSON en PHP, este lenguaje de programación dispone de varias funciones que sirven para consumir archivos JSON y convertirlos en objetos PHP con los que podemos trabajar. Podemos ver como es de práctico el JSON al utilizar el API de Panoramio y cómo en pocas líneas de código podemos acceder a Panoramio y consultar su base de datos de fotografías y mostrarlas en nuestra página web.

Referencia: En DesarrolloWeb.com hemos publicado anteriormente un artículo para aprender a consumir JSON del API de Panoramio con el lenguaje de programación del lado del cliente JSON: API Panoramio + ejemplo de JSON con Mootools .

Pasos del script PHP para consultar el API de Panoramio
Para crear un programa en PHP que consulte el API de Panoramio tenemos que realizar varios pasos:

  1. Conectar con una URL de Panoramio, enviando los datos sobre la localización desde donde queremos obtener fotos, para recibir un JSON con los datos de dichas fotos.
  2. Procesar el JSON, para obtener un objeto PHP con los datos de las fotografías.
  3. Hacer un bucle para recorrer las fotografías del objeto, para mostrar las fotografías obtenidas en nuestra página.

Todos estos pasos son sencillos, pero necesitaremos alguna idea sobre distintas partes de PHP, pero afortunadamente en Desarrollo web .com tenemos artículos para obtener la base de conocimientos necesaria para realizar cualquiera de estos pasos.
Conectar con una URL de Panoramio:
Esto lo tenemos que hacer con las funciones de trabajo con archivos de texto que dispone PHP, pues la lectura de ficheros se hace con las mismas funciones que la lectura de URLs, tal como explicamos en el artículo Leer ficheros con PHP.Primero tenemos que crear una URL para la consulta en el API de Panoramio, que tendrá una forma como esta:

http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium

Esto nos devolvería fotos:

  • por orden de popularidad,
  • desde la foto encontrada en posición 0 hasta la posición 5 de ese ranking por popularidad,
  • entre unas coordenadas (minx, miny) y (maxx, maxy), o lo que es lo mismo (mínima longitud y latitud) y (máxima longitud y latitud),
  • de tamaño medio

Las fotos están indicadas, como se decía, en texto con código Javascript en formato JSON. Así pues, si accedemos a esa URL obtendremos el JSON de respuesta.

Para obtener el texto que devuelve Panoramio al acceder a esa URL tenemos que leerlo con las funciones de archivos. Utilizaremos una función ya explicada en el artículo Leer ficheros con PHP

function leer_contenido_completo($url){
$fichero_url = fopen ($url, “r”);
$texto = “”;
while ($trozo = fgets($fichero_url, 1024)){
$texto .= $trozo;
}
return $texto;
}

Así pues, con una llamada a esta función, enviando la URL que deseamos consultar, podríamos obtener el JSON con las fotos.

$URL_API_PANORAMIO = “http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium&#8221;;

$contenido_url = leer_contenido_completo($URL_API_PANORAMIO);
Procesar el JSON:
Como ya vimos en el artículo Consumir un JSON desde PHP, PHP dispone de la función json_decode() que devuelve un objeto PHP resultante de procesar el JSON enviado como un string por parámetro. En nuestro ejemplo podríamos hacer lo siguiente:$JSON_PANORAMIO_PHP = json_decode($contenido_url);

En la variable $JSON_PANORAMIO_PHP tendremos el objeto PHP resultante de la decodificación del JSON recibido en el contenido de la URL.
Hacer un bucle para recorrer las fotografías del objeto
Ahora nos queda el paso más sencillo para los que ya tienen cierta experiencia con PHP, hacer un recorrido de todas las fotos que hayamos recibido. Ese recorrido deberá tener en cuenta el formato del objeto que se recibe en el JSON. Ese objeto tiene los siguientes atributos:

  • count (con el número de fotos encontradas en todo panoramio entre las coordenadas dadas, que no tiene por qué corresponder con el subconjunto de fotos recibidas.
  • photos (que es un array con todas las fotos recibidas. Cada foto es otro objeto, que tiene los datos de esa foto en particular)
  • has_more (con un boleano que indica si hay o no otras fotos disponibles para este punto)
Nota: En realidad podemos obtener la información completa sobre el formato de este objeto en la propiadocumentación del API de Panoramio.

Entonces nuestro bucle PHP tiene que hacer un recorrido al array de fotografías que hay en el atributo “photos” del objeto PHP. Podría tener esta forma:for ($i=0; $i<count($JSON_PANORAMIO_PHP->photos); $i++){
$foto_actual = $JSON_PANORAMIO_PHP->photos[$i];
echo “<p>”;
echo “<img src='” . $foto_actual->photo_file_url . “‘ width='” . $foto_actual->width . “‘ height='” . $foto_actual->height . “‘>”;
echo “<br>”;
echo “<small>” . $foto_actual->photo_title . “, por ” . $foto_actual->owner_name . “</small>”;
echo “</p>”;
}

Este recorrido se podría haber hecho de otra forma, pero nos sirve perfectamente un bucle for. Además, quizás vosotros colocaríais las fotos con otro estilo, para adaptarlas al diseño de vuestra página.

Si se desea, podemos ver las fotos de Panoramio que hay en esa localización, que corresponde con la Ciudad de las Ciencias y las Artes de Valencia.
Código PHP completo
A continuación para una referencia más completa, podemos ver el código completo de la página PHP que hemos creado para hacer este ejemplo de trabajo con JSON en PHP.<html>
<head>
<title>Consumir JSON del API de Panoramio desde PHP</title>
</head>

<body>

<?

function leer_contenido_completo($url){
$fichero_url = fopen ($url, “r”);
$texto = “”;
while ($trozo = fgets($fichero_url, 1024)){
$texto .= $trozo;
}
return $texto;
}
$URL_API_PANORAMIO = “http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium&#8221;;

$contenido_url = leer_contenido_completo($URL_API_PANORAMIO);

echo $contenido_url;

$JSON_PANORAMIO_PHP = json_decode($contenido_url);

echo “<hr>”;

//echo $JSON_PANORAMIO_PHP->count; //esto muestra el número de fotos totales que existen en Panoramio en esa localización
for ($i=0; $i<count($JSON_PANORAMIO_PHP->photos); $i++){
$foto_actual = $JSON_PANORAMIO_PHP->photos[$i];
echo “<p>”;
echo “<img src='” . $foto_actual->photo_file_url . “‘ width='” . $foto_actual->width . “‘ height='” . $foto_actual->height . “‘>”;
echo “<br>”;
echo “<small>” . $foto_actual->photo_title . “, por ” . $foto_actual->owner_name . “</small>”;
echo “</p>”;
}
?>
</body>
</html>

Podemos ver el script en marcha en una página aparte.

Mostrar sólo un InfoWindow y cerrarlo automáticamente GMaps API v3 by Alex Franco

Fuente: http://jafrancov.com/2010/09/single-infowindow/

Si no tienes mucha experiencia o tienes dudas con respecto a algo que usemos en este post,puedes consultar los demás ejemplos que se han realizado anteriormente aquí.

En algunas ocasiones existe la necesidad de tener varios marcadores dentro de un mapa, cada uno de ellos con un Listener que está a la espera de que en cuanto hagamos ‘click’ en ellos, despliegue una InfoWindow que le hayamos asignado, pero, existe una desventaja (o ventaja depende del punto de vista) en la API v3 de GMaps, en comparación a la API v2 de GMaps, ésta es que al tener cada marcador con una ventana de información asignada, al momento de hacer click en un marcador se abre, pero si hacemos click en cualquier otro lugar del mapa (que no sea la ‘X’) no se cierra.

Lo que vamos a realizar es un cierre “automático”, esto quiere decir que al tener una InfoWindow abierta y hacer click en cualquier otro lado del mapa, se cierre en automático la ventana abierta en ese momento, de esta manera, siempre quedaría solamente una o ninguna InfoWindow en el mapa, librándonos de tener que estar cerrando manualmente cada una de las ventanas que aparezcan.

Ver Demo Single InfoWindow

En la v2 de la API de GMaps se hacía así:

1
2
3
4
5
// Listener para generar y gestionar el InfoWindow
// marker es un objeto tipo Marker
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml("mensaje que quisieras que apareciera");
    });

Con eso era suficiente para que apareciera y desapareciera cuando perdiera el ‘foco‘, ahora para la v3 de la API de GMaps se crearon funciones para abrir (.open()) y cerrar (.close()) la InfoWindow, esto significo tener que especificar un evento para la apertura o cierre de la ventana. Esto no es problema, aunque la situación principal radica cuando tienes muchos marcadores, hacer esto para cada uno de ellos.

Solo es un poco de usar y re-usar funciones para facilitarnos la vida. Vamos a crear 2 variables globales una para el mapa y otra para una única instancia del InfoWindow, no es necesario crear más, con ella podremos crear tantas ventanas como nosotros queramos, por el momento no se les asignará el tipo de objeto, así que quedarán como null.

1
2
var map = null;
var infoWindow = null;

Vamos a crear dos funciones que son las que van a hacer el ejercicio de abrir y cerrar la ventana, para el ejercicio se requerirá que se declaren como sigue. La función para cerrar no recibirá ningún parámetro, simplemente ejecutará el proceso de cerrar del objeto InfoWindow. La función para abrir, recibirá 2 parámetros, el primero tendrá que ser un objeto tipo Marker y el segundo un String (cadena de caracteres); el marcador previamente debe ser creado con los parámetros mínimos para su uso, es decir su posición y en qué mapa se dibujará; el string será para asignarle el contenido específico del marcador en cuestión, igual si así lo deseas, puedes agregar contenido general.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function closeInfoWindow() {
    infoWindow.close();
}
function openInfoWindow(marker, content) {
    var markerLatLng = marker.getPosition();
    infoWindow.setContent([
        '<div style="text-align:center;">',
        'Las coordenadas del <b>',
        content,
        '</b> son:<br/>',
        markerLatLng.lat(),
        ', ',
        markerLatLng.lng(),
        '<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
        '<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
        '</div>'
    ].join(''));
    infoWindow.open(map, marker);
}

Antes de llegar al código completo, vamos a tener en cuenta una pequeña instrucción, un listener que se le va a agregar al mapa, que es el que va a hacer que al momento de hacer click en cualquier parte del mapa que no sea la el infoWindow, lo cierre, independientemente de cuál sea el que esté abierto.

1
2
3
google.maps.event.addListener(map, 'click', function(){
    closeInfoWindow();
});

Finalmente la función que se encargará de echar todo a andar, crear los marcadores y asignarles su Listener, indicar el objeto correspondiente a las variables del Map y del InfoWindow, todo este código ya lo hemos visto, así que todo el código quedaría así

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var map = null;
    var infoWindow = null;
    function closeInfoWindow() {
        infoWindow.close();
    }
    function openInfoWindow(marker, content) {
        var markerLatLng = marker.getPosition();
        infoWindow.setContent([
            '<div style="text-align:center;">',
            'Las coordenadas del <b>',
            content,
            '</b> son:<br/>',
            markerLatLng.lat(),
            ', ',
            markerLatLng.lng(),
            '<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
            '<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
            '</div>'
        ].join(''));
        infoWindow.open(map, marker);
    }
    function initialize() {
        var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
        var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map($("#map_canvas").get(0), myOptions);
        infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(map, 'click', function(){
            closeInfoWindow();
        });
        var marker1 = new google.maps.Marker({
            position: myLatlng,
            draggable: true,
            map: map
        });
        google.maps.event.addListener(marker1, 'click', function(){
            openInfoWindow(marker1, "Marcador 1");
        });
        var marker2 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(20.66057, -101.37325),
            draggable: true
        });
        google.maps.event.addListener(marker2, 'click', function() {
            openInfoWindow(marker2, "Marcador 2");
        });
        var marker3 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(20.67133, -101.32999),
            draggable: true
        });
        google.maps.event.addListener(marker3, 'click', function() {
            openInfoWindow(marker3, "Marcador 3");
        });
    }
    $(document).ready(function() {
        initialize();
    });

Ver Demo Single InfoWindow

Listo, ahora puedes traspolar este método a algo más dinámico como la consulta de APIs con Geolocalización por ejemplo… prueba, disfruta y practica… si tienes dudas, ya sabes dónde preguntarme :-D .

Crear scrollbar en flash/actionscript más efecto de easing by CristaLab

Fuente: CristaLab

Muchas veces al visitar otros sitios y al usar un scroll de estos sitios, uno ve el efecto de easing en el scroll y nos da una sensación a suavidad muy buena, es agradable que las cosas “scrolleen” con ese suavizado tan particular, bueno asi que me puse mano a la obra para poder tener el mio, pero quise hacerlo de tal manera de que lo pueda reutilizar SIEMPRE, que ejecute una función determinada en cualquier nivel de mi película.

Para lograrlo a esta función debemos de pasarle un par de parámetros, veamos…

Primero vamos a hacer un include de un ActionScript (este archivo es necesario para que funcione el scroll porque tiene todo el código necesario), se lo pueden bajar de aquí y ponen ese archivo en la misma carpeta del .FLA.
Hacemos por única vez un INCLUDE en nuestro fla en el _ROOT

#include “scroll_easyn.as”

Luego en nuestro fla cada vez que quisieramos generar éste scroll solo vamos a convocar a una función que se encuentra dentro del archivo que incluimos … de ésta manera:

_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado);

Bueno la función requiere un par de parámetros:

nivel: Es en donde vamos a generar el scroll por ejemplo: “_root.”, _root.mcCont, etc.

clip: Este parametro es la ruta del CLIP CONTENEDOR, o sea el nombre de instancia del clip en donde dentro del que tenemos nuestro contenido que queremos scrollar. (Es importante que en nivel, y clip quede algo como por ejemplo: Nivel: “_root.mc” Clip: “_root.mc.contenedor”)

anchoScroll: Es un valor numérico en el cual le seteamos el ancho que va a tener la barrita de scroll, si el valor es menor a 3, el valor va a ser por default 3.

Suavizado (Opcional) Valor numérico en donde seteamos la velocidad del suavizado cuando frenamos el scroll, si obviamos éste parámetro el valor por default es 10.

Bueno eso es todo pueden ver una prueba, acá de como funciona.
Los sources se los pueden descargar desde aquí.

Entonces cada vez que quisieramos usar el scroll solo escribimos ésto:

var nivel = _root.mc
var clip = _root.mc.contenedor
var anchoScroll= 8
var suavizado = 3
_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado );
O bien directamente:
_root.generarScrollEasyn(_root.mc, _root.mc.contenedor, 8, 3);

El scroll funciona tanto para texto, enmascarado con “SETMASK” o bien para texto e imágenes.

Saludos y espero que les sirva
dQ (Digital Designer)

Descargar Archivo desde CristaLab