Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje26-07-2010, 01:06 (UTC)    
Título del mensaje: Hacer un cuadro de noticias flash

Hola quiero hacer un cuadro de noticias como el del siguiente link:

http://www.wwe.com/touts/ep/

Pero no se como me darian un codigo html o un tutorial de como hacerlo?


Ultima edición por xtremewrestling619 el Dom Jul 25, 2010 9:07 pm; editado 2 veces
Mensaje26-07-2010, 01:21 (UTC)    
Título del mensaje:

Aqui hay una parecida.... lo que le faltaria seria el menu que tiene a un lado

http://www.paginawebgratis.es/forum/viewtopic.php?t=43099

de todas maneras revisa el tema para ver si te gusta... le puedes poner una descripcion y un link a cada foto
______________
Mensaje26-07-2010, 01:33 (UTC)    
Título del mensaje:

wolfknightsfansub escribió:
Aqui hay una parecida.... lo que le faltaria seria el menu que tiene a un lado

http://www.paginawebgratis.es/forum/viewtopic.php?t=43099

de todas maneras revisa el tema para ver si te gusta... le puedes poner una descripcion y un link a cada foto


Y por debajo inserta una tabla con las noticias
______________
By PedroAlcazar
Mensaje26-07-2010, 02:43 (UTC)    
Título del mensaje:

Hola, puedo enseñarte a crear un sencillo visualizador de noticias flash haciendo uso de un documento xml e imágenes jpg, para lo cual utilizaremos del objeto XML.
Requerimientos

* Software: Macromedia Flash MX 2004 o una versión superior.
* Conocimientos: Conocimientos previos de programación, nociones de documentos xml y DOM y conceptos básicos de programación ActionScript 2.0.
* Archivos base: para este tutorial se utilizaran los siguientes archivos:
El archivo xml (noticias.xml): Este documento se utiliza para almacenar la información de las noticias (titulo, resumen y nombre de la imagen a mostrarse por cada noticia).
Imágenes jpg: Estas son las imágenes que se van a mostrar por cada noticia.

Interfaz en flash

Crear la interfase de usuario en una capa llamada “elementos”: (dos botones, un clip de película y una cuadro de texto):


A) Botones de navegación: son utilizados para navegar por las noticias cargadas desde el documento xml (son dos copias de una instancia y una de ellas reflejada). Es importante asignar a ambos elementos el nombre de instancia: anterior_btn y siguiente_btn




B) Clip de película: es utilizado como soporte para mostrar o cargar en el la imagen correspondiente a cada noticia. (nombre de instancia pantalla_mc)

Propiedades de instancia:


C) Cuadro de Texto dinámico: es utilizado para mostrar el titulo y resumen de la noticia previamente formateada:

Propiedades de instancia:


Nota: Para este tutorial es importante guardar todos los archivos en una misma carpeta así también como verificar los nombres de instancias de cada elemento.

Código

Colocar el código ActionScript en una capa llamada “codigo” o "Acciones". Pon atención a los comentarios, ahi está la explicación del código:
Código:
//Permite caracteres tradicionales como letras con tilde la ñ, etc.
System.useCodepage = true;
//Se declara la variable indice de tipo número (utilizada para referencia la noticia a mostrar)
var indice:Number;
//Se declara la variable noticias_xml de tipo XML (utilizada para almacenar el documento xml)
var noticias_xml:XML;
/*
Funcion cargarDatos (utilizada para cargar y cambiar las noticias en el documento)
Esta función recibe un parámetro "_indice" que corresponde al elemento noticia  a mostrar
*/
function cargarDatos(_indice:Number) {
        //Se inicializan variables utilizadas para almenar los datos de una noticia
        var fecha:String;
        var titulo:String;
        var mensaje:String;
        var imagen:String;
        //Recuperando datos del objeto xml
        //Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha]
        fecha = noticias_xml.firstChild.childNodes[_indice].attributes.fecha;
        //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo]
        titulo = noticias_xml.firstChild.childNodes[_indice].firstChild.firstChild.nodeValue;
        //Se accede al segundo hijo de elemento [noticia] y se recupera el valor del primer elemento de [mensaje]
        mensaje = noticias_xml.firstChild.childNodes[_indice].firstChild.nextSibling.firstChild.nodeValue;
        //Se accede al último hijo de elemento [noticia] y se recupera el valor del primer elemento de [imagen]
        imagen = noticias_xml.firstChild.childNodes[_indice].lastChild.firstChild.nodeValue;
        //Mostrando los datos recuperados en el cuado de texto mensaje_txt y cargando la imagen en pantalla_mc
        _root.mensaje_txt.htmlText = "";
        _root.mensaje_txt.htmlText += "<p align='center'><font color='#006633' size='12'><b>"+titulo+"</b></font></p>";
        _root.mensaje_txt.htmlText += "<p><font size='10'>"+mensaje+"</font>";
        _root.mensaje_txt.htmlText += "<font color='#666666' size='10'>Publicado: "+fecha+"</font></p>";
        //Cargado la imagen JPG externa en el clip pantalla_mc con el valor recuperado del objeto xml
        _root.pantalla_mc.loadMovie(imagen);
}
//Función que permite avanzar a la [noticia] siguiente almacenada en el objeto xml
siguiente_btn.onPress = function() {
        //comprobando si existe el siguiente elemento [noticia]
        if (noticias_xml.firstChild.childNodes[indice+1] != null) {
                //retringue  a avanzar solo si hay una [noticia] siguiente
                indice++;
                //incrementado en uno el indice
                cargarDatos(indice);
                //recuprando y mostrando los datos y la imagen en la pantalla
        }
};
//Función que permite retroceder a la noticia anterior almacenada en el objeto xml     
anterior_btn.onPress = function() {
        //comprobando si existe una elemento [noticia] anterior
        if (noticias_xml.firstChild.childNodes[indice-1] != null) {
                //retringue  a avanzar solo si hay una [noticia] anterior
                indice--;
                //reducciendo en uno el indice
                cargarDatos(indice);
                //recuprando y mostrando los datos y la imagen en la pantalla
        }
};
//Inicializaciones
indice = 0;
//inicializando indice en 0 para mostrar la primera noticia
//creando el objeto noticias_xml de typo XML
noticias_xml = new XML();
//Permite que el objeto XML ignore los espacios en blanco entre marca y marca del documento XML
noticias_xml.ignoreWhite = true;
//El método load() permite cargar el documento xml "noticias.xml"
noticias_xml.load("noticias.xml");
//El evento onLoad de activa cuado se haya cargado el documento noticias.xml
noticias_xml.onLoad = function() {
        //Se llama a la funcion cragarDatos para mostar la primera noticia (esto por la variable indice en 0)
        cargarDatos(indice);
};


Una vez terminado y con los archivos arriba mencionados (XML e Imagenes) en la misma carpeta de nuestra pelicula .FLA, ejecutamos usando CTRL+ENTER y podemos verlo en funcionamiento.

¿Cómo mejorarlo?

Como se comento al inicio este es un ejemplo sencillo, lo ideal sería que a partir de este ejemplo podamos adicionar mejoras, como por ejemplo: un pre cargador para las imágenes, hacer que las noticias e imágenes cambien de forma automática pasado un tiempo, etc.

Espero que te sea de utilidad, por dudas comunicame.
______________
firma modificada pwg

la medida maxima es 450x100


Ultima edición por carloslroldan el Dom Jul 25, 2010 10:44 pm; editado 1 vez
Mensaje01-08-2010, 01:41 (UTC)    
Título del mensaje:

carloslroldan escribió:
Hola, puedo enseñarte a crear un sencillo visualizador de noticias flash haciendo uso de un documento xml e imágenes jpg, para lo cual utilizaremos del objeto XML.
Requerimientos

* Software: Macromedia Flash MX 2004 o una versión superior.
* Conocimientos: Conocimientos previos de programación, nociones de documentos xml y DOM y conceptos básicos de programación ActionScript 2.0.
* Archivos base: para este tutorial se utilizaran los siguientes archivos:
El archivo xml (noticias.xml): Este documento se utiliza para almacenar la información de las noticias (titulo, resumen y nombre de la imagen a mostrarse por cada noticia).
Imágenes jpg: Estas son las imágenes que se van a mostrar por cada noticia.

Interfaz en flash

Crear la interfase de usuario en una capa llamada “elementos”: (dos botones, un clip de película y una cuadro de texto):


A) Botones de navegación: son utilizados para navegar por las noticias cargadas desde el documento xml (son dos copias de una instancia y una de ellas reflejada). Es importante asignar a ambos elementos el nombre de instancia: anterior_btn y siguiente_btn




B) Clip de película: es utilizado como soporte para mostrar o cargar en el la imagen correspondiente a cada noticia. (nombre de instancia pantalla_mc)

Propiedades de instancia:


C) Cuadro de Texto dinámico: es utilizado para mostrar el titulo y resumen de la noticia previamente formateada:

Propiedades de instancia:


Nota: Para este tutorial es importante guardar todos los archivos en una misma carpeta así también como verificar los nombres de instancias de cada elemento.

Código

Colocar el código ActionScript en una capa llamada “codigo” o "Acciones". Pon atención a los comentarios, ahi está la explicación del código:
Código:
//Permite caracteres tradicionales como letras con tilde la ñ, etc.
System.useCodepage = true;
//Se declara la variable indice de tipo número (utilizada para referencia la noticia a mostrar)
var indice:Number;
//Se declara la variable noticias_xml de tipo XML (utilizada para almacenar el documento xml)
var noticias_xml:XML;
/*
Funcion cargarDatos (utilizada para cargar y cambiar las noticias en el documento)
Esta función recibe un parámetro "_indice" que corresponde al elemento noticia  a mostrar
*/
function cargarDatos(_indice:Number) {
        //Se inicializan variables utilizadas para almenar los datos de una noticia
        var fecha:String;
        var titulo:String;
        var mensaje:String;
        var imagen:String;
        //Recuperando datos del objeto xml
        //Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha]
        fecha = noticias_xml.firstChild.childNodes[_indice].attributes.fecha;
        //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo]
        titulo = noticias_xml.firstChild.childNodes[_indice].firstChild.firstChild.nodeValue;
        //Se accede al segundo hijo de elemento [noticia] y se recupera el valor del primer elemento de [mensaje]
        mensaje = noticias_xml.firstChild.childNodes[_indice].firstChild.nextSibling.firstChild.nodeValue;
        //Se accede al último hijo de elemento [noticia] y se recupera el valor del primer elemento de [imagen]
        imagen = noticias_xml.firstChild.childNodes[_indice].lastChild.firstChild.nodeValue;
        //Mostrando los datos recuperados en el cuado de texto mensaje_txt y cargando la imagen en pantalla_mc
        _root.mensaje_txt.htmlText = "";
        _root.mensaje_txt.htmlText += "<p align='center'><font color='#006633' size='12'><b>"+titulo+"</b></font></p>";
        _root.mensaje_txt.htmlText += "<p><font size='10'>"+mensaje+"</font>";
        _root.mensaje_txt.htmlText += "<font color='#666666' size='10'>Publicado: "+fecha+"</font></p>";
        //Cargado la imagen JPG externa en el clip pantalla_mc con el valor recuperado del objeto xml
        _root.pantalla_mc.loadMovie(imagen);
}
//Función que permite avanzar a la [noticia] siguiente almacenada en el objeto xml
siguiente_btn.onPress = function() {
        //comprobando si existe el siguiente elemento [noticia]
        if (noticias_xml.firstChild.childNodes[indice+1] != null) {
                //retringue  a avanzar solo si hay una [noticia] siguiente
                indice++;
                //incrementado en uno el indice
                cargarDatos(indice);
                //recuprando y mostrando los datos y la imagen en la pantalla
        }
};
//Función que permite retroceder a la noticia anterior almacenada en el objeto xml     
anterior_btn.onPress = function() {
        //comprobando si existe una elemento [noticia] anterior
        if (noticias_xml.firstChild.childNodes[indice-1] != null) {
                //retringue  a avanzar solo si hay una [noticia] anterior
                indice--;
                //reducciendo en uno el indice
                cargarDatos(indice);
                //recuprando y mostrando los datos y la imagen en la pantalla
        }
};
//Inicializaciones
indice = 0;
//inicializando indice en 0 para mostrar la primera noticia
//creando el objeto noticias_xml de typo XML
noticias_xml = new XML();
//Permite que el objeto XML ignore los espacios en blanco entre marca y marca del documento XML
noticias_xml.ignoreWhite = true;
//El método load() permite cargar el documento xml "noticias.xml"
noticias_xml.load("noticias.xml");
//El evento onLoad de activa cuado se haya cargado el documento noticias.xml
noticias_xml.onLoad = function() {
        //Se llama a la funcion cragarDatos para mostar la primera noticia (esto por la variable indice en 0)
        cargarDatos(indice);
};


Una vez terminado y con los archivos arriba mencionados (XML e Imagenes) en la misma carpeta de nuestra pelicula .FLA, ejecutamos usando CTRL+ENTER y podemos verlo en funcionamiento.

¿Cómo mejorarlo?

Como se comento al inicio este es un ejemplo sencillo, lo ideal sería que a partir de este ejemplo podamos adicionar mejoras, como por ejemplo: un pre cargador para las imágenes, hacer que las noticias e imágenes cambien de forma automática pasado un tiempo, etc.

Espero que te sea de utilidad, por dudas comunicame.


wow:D
______________

[LINK ELIMINADO]
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group