Juegos Flash para chicos


flash

Adobe Flash es una plataforma multimedia que a veces se utiliza para hacer juegos basados en Internet, mucho de los cuales son para chicos. Muchos juegos Flash son gratuitos, con los sitios generando ingresos debido a la publicidad. Otros sitios requieren una cuota de suscripción. Tanto los sitios gratuitos como los de suscripción pueden permitir que registres una cuenta, dejándote guardar el progreso y puntuaciones.

Flash es una plataforma para el enriquecimiento de los sitios web que cuenta con incrustaciones para animaciones y películas. Los usos más comunes para Flash en Internet son los anuncios y los juegos. Anteriormente conocido como “Macromedia Flash” cambió al nombre “Adobe Flash” tras la adquisición de Macromedia en 2005. En 2011, los diseñadores utilizaron “Adobe Flash CS5” para crear proyectos Flash. Las versiones anteriores a Flash comparten una estructura básica similar a CS5 pero la nueva versión cuenta con una mejor funcionalidad y mejores características. Hay cuatro partes básicas del área de trabajo de Flash Player.

Se utiliza para crear aplicaciones interactivas, animaciones independientes y en la web. Utilizado de diferentes formas y en una serie de dispositivos, incluyendo teléfonos móviles el lenguaje de scripts ActionScript, puedes manipular el contenido Flash.

Fuente: clare Edwards
http://www.ehowenespanol.com/juegos-flash-chicos-info_336372/

Experiencias educativas


a1

                    

Este artículo presenta todas las experiencias  del curso Flash para la enseñanza. A  continuación puedes ver algunos de los trabajos realizados por los profesores participantes en el curso.
CARACTERÍSTICAS DEL CURSO

El programa Macromedia Flash se ha convertido en una herramienta clásica en el diseño de páginas web y de presentaciones multimedia interactivas.
Las principales características de los documentos realizados con esta tecnología son:

  • Velocidad y economía de espacio.
  • Compatibilidad con todos los      sistemas.
  • Alta interactividad.

Flash para la enseñanza es un curso destinado al profesorado de Educación Infantil, Primaria y Secundaria de cualquier área educativa.

En el ámbito académico esta herramienta potencia:

  • El diseño de la web del centro,      proyecto, grupo de trabajo, etc.
  • El desarrollo de materiales en      soporte digital.
  • La mejora del diseño de los      materiales didácticos: favoreciendo su estética, animación e interactividad.

 

[Ir… Curso Flash para la enseñanza]

http://formacionprofesorado.educacion.es/index.php/es/experiencias/155-flash-para-la-enseñanza

 

Armado de la precarga (preload) en FLASH


En esta entrada se  mostrará la forma de hacer por medio de ActionScript una animación de precarga funcional, mostrando porcentaje de carga, barra de avance de carga y calculo de otros datos utiles como cantidad de bytes cargados y cantidad completa de bytes que componene la pelicula.

http://descargas.abcdatos.com/tutorial/descargarL1533.html

Construímos nuestra galería de productos con movies externas. Ahora puedes hacer galerías de imágenes y otras presentaciones utilizando y combinando las herramientas de las clases anteriores. Sin embargo, en el sitio de ejemplo de la clase pasaba las movies tardaban en cargar y no había forma de darse cuenta si los productos se estaban cargando o no y cuánto faltaba para que la finalice carga.

Para evitar marear al usuario de nuestro sitio tenemos que agregar preloaders o precargas. Hoy voy a enseñar a hacer precargas fáciles.
La idea de una precarga es:

  1. Anunciar que algo se está cargando
  2. Dar una idea de cuánto falta para que se termine de cargar

El segundo punto no es absolutamente necesario, pero por una cuestión de respeto a nuestro usuario es mejor calmar su ansiedad y decirle cuánto falta. ¿Es realmente muy difícil hacerlo?

La forma que vamos a utilizar para orientarlo es a través de un porcentaje numérico o un elemento que se vaya completando a medida que se efectúa la carga. Con el tiempo y más experiencia en Flash podrás hacer cosas verdaderamente increíbles con las precargas. De momento…

¿Te acuerdas de la línea de tiempo? Bueno, la precarga va a estar siempre en el primer frame. Va a ser lo primero en cargarse y, al finalizar va a mostrar inmediatamente la movie que queremos ver.

Armado de la precarga: fase diseño

Abre el archivo FLA del primer detalle de la clase pasada, detalle1.fla (por si no lo tienes, haz clic aquí para descargar). En la línea tiempo podrás ver un solo frame con una imagen y texto. Como la precarga se muestra antes que la imagen (en el primer frame), debemos agregar un frame antes del que ya tenemos. Así nos queda el frame 1 vacío y el frame 2 con la imagen.

En el frame 1 voy a diseñar mi precarga. En este caso quiero que se vea, por un lado una línea que se vaya completando a medida que se cargue la movie y por otro lado un porcentaje que llegue a 100 en el momento también en que se termine de cargar esta película.

Por una cuestión de diseño, recuerda ubicar el diseño de la precarga en el centro de la imagen que se va a ver al cargar la movie completa.

¿Que quiero decir con esto? En este caso la imagen que quiero cargar no está en el centro de la página, sino a un costado. Por eso la precarga debe verse sobre ese costado, preferentemente en el centro, como en la imagen de arriba.

Mi diseño en el frame 1 es muy sencillo y se ve similar a la imagen de la derecha. Sólo un fondo, con un texto que dice “Cargando”. Tú puedes hacer lo que quieras…

Ahora vamos a crear una nueva capa a la que llamaremos “Precarga”. Debes ubicarla por encima de la capa “Detalle” que ya teníamos.

Línea de carga

En el primer frame de la capa “Precarga” (sólo en el primero) comenzaremos con la línea que se completa a medida que se carga la movie:

  1. Crea un rectángulo      pequeño, que será el comienzo de la línea      en un 1%.
  2. Convierte el rectángulo en gráfico y luego en movie (F8).
  3. Entra en esa movie, selecciona el      gráfico y mueve el centro hacia el      costado izquierdo del rectángulo. Esto es para que luego      podamos agrandarlo únicamente hacia la derecha.
  4. Crea un nuevo fotograma clave en      el frame 100.
  5. Dentro del frame 100 agranda el rectángulo      cuando quieras, teniendo en cuenta que así se verá cuando alcance el 100%      de carga.
  6. Sal de la movie (yendo a la escena      original) y nombra esta movie      como “linea_carga”.

No es necesario que completes exactamente estos pasos. Tampoco que hagas una “línea”, sino cualquier animación contenida en 100 frames. La idea es que el usuario de nuestro sitio no se aburra mientras se carga la pantalla… Créeme, con estas herramientas y un poco de imaginación se pueden hacer cosas sorprendentes. Sino échale un vistazo a los sitios de ejemplo que te propongo al final del artículo.

Porcentaje de carga

De nuevo en el primer frame de la capa “Precarga” vamos a generar el texto de porcentaje que aumenta de numeración a medida que se carga la movie, hasta llegar a 100%:

  1.                  Crea un campo      de texto en el lugar donde quieras que se muestre el      porcentaje.
  2. Selecciona el campo de texto y en      la barra de propiedades, conviértelo      en Dynamic Text. Esto nos permite que cambie de acuerdo al      código ActionScript que agreguemos después.
  3. Nombra a este campo de texto como “porcentaje_texto”.

Para varias la tipografía, el color y el tamaño, basta con seleccionar el cuadro y darle las especificaciones correspondientes.

Código ActionScript para que todo funcione

Es el momento de meternos con el código. Para eso vamos a crear una nueva capa donde únicamente introduciremos código. Por eso la llamaremos… sí: “Código”

La única forma de que todo funcione es que a través de ActionScript, con el siguiente código:

function cargando() {
var total, cargados, porcentaje;
total=_root.getBytesTotal();
cargados=_root.getBytesLoaded();
porcentaje=Math.floor((cargados*100)/total);
porcentaje_texto.text=porcentaje+”%”;
linea_carga.gotoAndStop(porcentaje);
if(cargados==total){
clearInterval(hiloPrecarga);
play();
}
}
var hiloPrecarga=setInterval(cargando,1);
stop();

Quizás tengas que arreglar el indentado o escribirlo nuevamente a mano, pero es exactamente esto lo que debes copiar en el frame 1 de la capa Código.

Ahora voy a explicarlo:

function cargando()
Declaro una nueva función: “precarga”, que va a ejecutarse hasta que se termine de cargar la movie.

var total, cargados, porcentaje;
Declaro las variables que voy a manejar: la cantidad total de bytes de la movie, los cargados hasta el momento y el porcentaje de bytes cargados al momento.

total=_root.getBytesTotal();
A nuestra variable “total” le asignamos el valor total de bytes que tiene la movie.

cargados=_root.getBytesLoaded();
A la variable “cargados” le asignamos el valor total de los bytes de la película que fueron cargados hasta el momento.

porcentaje=Math.floor((cargados*100)/total);
Ahora hacemos una regla de tres simple para asignarle a la “variable” porcentaje el valor que debería tener.

porcentaje_texto.text=porcentaje+"%";
Le decimos que el porcentaje me lo muestre en el campo dinámico de texto “porcentaje_texto”.

linea_carga.gotoAndStop(porcentaje);
Esto es para relacionar la línea que habíamos hecho con el número de porcentaje al momento. Así reproduce la movie “linea_carga” hasta el número de frame igual al número de porcentaje cargado.

if(cargados==total){
Si la cantidad de bytes cargados es igual a la cantidad total de bytes de la película…

clearInterval(hiloPrecarga);
…dejar de ejecutar la función Precarga…

play();
…e iniciar la movie (o sea, ir al frame 2)

var hiloPrecarga=setInterval(cargando,1);
La función setInterval le dice a la función “cargando” que se ejecute cada 1 milisegundo. De esta manera se muestra información actualizada.

stop();
Evita que la movie se inicie.

Otra cosa que debes tener en cuenta es que debes incluir un stop(); en el segundo frame, de lo contrario se reproduciría la función constantemente.

Ahora lo único que falta es pegar el primer frame de cada capa y pegarlos en todas las movies, para que todas tengan su precarga…

Haz clic aquí para ver la movie detalle1.SWF con la precarga

Haz clic para descargar el archivo original comprimido detalle1.FLA (100 kb)

Colegio Secundario IT : FLASH


Ingrese (dando doble click) a Flash.  Seleccione Flash Document y le aparecerá la siguiente pantalla:

Vaya a la parte superior (Menú) y seleccione Window / Workspace Layout/ Default. Aquí tiene la configuración básica para empezar con Flash. Este es el Entorno de Trabajo. A los documentos de Flash se les llama películas porque tienen elementos similares a un largometraje.

La línea de tiempo (timeline) está en la parte superior de la pantalla. Muestra dos dimensiones de la “película”: el tiempo (horizontalmente a través de frames y la profundidad (verticalmente en Layers o capas).

La intersección de un layer y un frame, es un fotograma. Allí comienza la animación. Tomen el layer 1 y el frame 1 e inserten(clic derecho) un Keyframe.

Ingresen al link  http://www.aulaclic.es/flash8/t_1_1.htm

¿ Porqué y para qué usar Flash ?.  Se puede usar con APPLE? Ingresen un comentario al respecto.

Educación IT: videojuegos en Flash


Acá reconocerán la pantalla principal de Flash, donde diseñamos la animación.

Este archivo se guarda como juego.fla. Siga este link y haga click en el cartel EMPEZAR:

http://www.redribera.es/formacion/tutoriales/tutorial_crear-un-juego-flash-de-tipo-arcade_158

Cuando hacemos doble clic en MENU/ Test Movie, el archivo es ahora juego.swf y se “reproduce” la animación:

Educación secundarios : animación en Macromedia Flash


Adobe Flash es una herramienta con la que diseñadores y desarrolladores pueden crear presentaciones, aplicaciones y contenidos de video con interacciones del usuario. Los más complejos sitios web están construídos con animaciones de Flash.

Utiliza gráficos vectoriales que requieren mucha menos memoria que las imáges de mapas de bits( bitmap).

El entorno de trabajo se compone de seis paneles principales que se pueden mostrar/ ocultar con: Menú/Window. Mencione esos paneles que puede ver al abrir (doble clic) Flash.

Educación IT : Macromedia Flash


Este personaje tan violento, en realidad es inofensivo. Son simples imágenes que se insertan en la pantalla(screen) y la vamos copiando y pegando en la línea de tiempo (timeline).

El programa Macromedia Flash se ha convertido en una herramienta clásica en el diseño de páginas web y de presentaciones multimedia interactivas.

Las principales características de los documentos realizados con esta tecnología son:

  • Velocidad y economía de espacio
  • Compatibilidad con todos los sistemas
  • Alta interactividad

En el ámbito académico esta herramienta potencia:

  • El diseño de la web del centro, proyecto, grupo de trabajo, etc.
  • El desarrollo de materiales en soporte digital.
  • La mejora del diseño de los materiales didácticos: favoreciendo su estética, animación e interactividad.

“ (…) el movimiento es el mensaje y antes de mover algo por la pantalla debo pensar lo que va a comunicar ese movimiento”.

http://formacionprofesorado.educacion.es/index.php/es/materiales/materiales/52-flash-para-la-ensenanza

videojuego en Flash


Adobe Flash es una herramienta de edición con las que los diseñadores y desarrolladores pueden crear presentaciones, aplicaciones y contenido, permitiendo que el usuario interactúe. Incluyen desde simples diseños hasta complejos sitios Web, con animaciones, contenido de videos e interacciones complejas (videojuegos).

Dado el pequeño tamaño de sus archivos, Flash es ideal para distribuirlo en la Web.

Utiliza gráficos vectoriales en vez de mapa de bits. Explique las diferencias de éstos últimos

http://www.strille.net/works/misc/platform_demo/