Por Fin el callejero

Bueno Korsarios, habiendo solucionado los problemas técnicos del proyecto en cuestión, atiendo a tantas y tantas peticiones sobre el callejero en flash.

Aquí teneís tanto el swf cómo el archivo fuente en .fla. Quizá este algo complicado, pero lo hice con sintaxis de flash 5, aunque estoy seguro de que si sois buenos flasheros no tendreís problemas para descifrarlo. De todas formas si teneís algún tipo de problema no dudeís en consultarme a Alvaro(+)korsarios.net.

Solo me queda decir que procureís no comerciar con el callejero, ya que desde Korsarios abogamos por el software libre y el código abierto.

Saludos Korsarios y que los vientos os conduzcan a buen puerto.

Korsarios Board

Paseando por ahí, nos hemos fijado que muchos de los blogs tienen Boards, es decir, una especie de pizarra donde poder dejar mensajes cortos, así que decidimos ponernos manos a la obra.
Y aquí teneis una primera versión beta del Kboard. No he tenido tiempo de ponerle smileys y otras elementos que he observado por ahí.

Saludos Korsarios.

Optimizacion, la potencia

Hace un tiempo hice un callejero de Málaga en flash, que partía como reto el mejorar los que había visto por ahí. Me encontré con el callejero de Málaga Wireless(desarrollado por el tan apreciado Juan Miguel Taboada...), pero lo descarte por ser en JPG,lo que no permite zoom sin pérdida de calidad y por tener un motor bastante malo. También encontré el de callejeando, pero aunque utiliza el mapa vectorial y tiene un gran motor de búsqueda, no permite arrastre y tarda bastante en moverse por el mapa. Y por fin, encontré el de LaNetro que me pareció casi imposible de mejorar. Pero si había algo que podría hacer, y era mejorar el rendimiento, así que corte el plano en un total de 16 trozos:
¿¿Que ventajas tenía esto??
Pues, básicamente tiene 2 finalidades importantes, Los tiempos de carga y el rendimiento del microprocesador.

· Los tiempos de carga:

El plano de LaNetro es un archivo de 121Kb, todo ello en vectores, por lo que a la hora de acceder al plano has de bajarte el plano completo(esto va totalmente en contra de mi filosofía LWF), por lo que puede llegar a aburrir la carga.
Para solucionar esto, hice que en vez de cargar el archivo completo, cargara el primer trozo visible por el usuario nada mas abrir la aplicación. Mientras este se familiarizaba con el sistema de control del mapa, o simplemente se fijaba en que parte del mapa le interesaba, con una pequeña función iba cargando y descargando los clips de la pantalla, de la siguiente manera:

onClipEvent(load){
if(_root.c<20){
this.loadMovie("mapas/mp"+(101+_root.c)+".swf");
if(this.getBytesLoaded()==this.getBytesTotal()){
_root.c++;
}
}
else{
this.unloadMovie();
}
}
De esta forma se irían cargando en cache, cada uno de los trozos de planos, pero de manera transparente para el usuario, por lo que no se percibirían los tiempos de carga.
Este tipo de métodos se denominan "metodologia de distracción del usuarios".

· El rendimiento del Microprocesador

Otra de las cosas que podría mejorar, era el rendimiento del microprocesador, ya que el arrastre, en el callejero de LaNetro se hace duro, por la cantidad de recursos que necesita para mover 121Kb de vectores. La solución fue, cargar solo los trozos de mapas que se fueran a mostrar, es decir, que a la hora de arrastrar los mapas que necesitaran verse se fueran cargando y los que se ocultaran se fueran descargando.
De esta forma, el número de vectores a arrastrar sería de entre 1/4 y 1/20 de lo que lo haría con el plano completo. También añadí que cuando hicieras el dragueo,pasara a calidad baja, con lo que mejoraba aun más el rendimiento.

Callejero:

El Callejero

Aunque gráficamente esta aún por hacer, el tema del motor del callejero, considero que cumple con las espectativas de mejorar el de LaNetro. CONSEGUIDO!!!!

PD: pruebas realizadas con equipos a 166Mhz, 333Mhz, 700Mhz, 900Mhz y 1400Mhz <--- Esto va por el incrédulo de David

Experiments

Por todos es conocido que flash no trabaja en 3d, pero como yo no creo que swift 3d ni programillas asi, he intentao currarme algo, solo con flash para intentar darle un toquecito 3d.
No es 3d 3d, pero tiene cierto aire bastante fiable.

Presentacion

Saludos Camaradas. He empezao en las practicas una nueva pagina, la de Alcasur, una empresa de instalaciones electricas y me han encargado la presentacion, haber que os parece.

Es cortita pero me ha servido para poner en practicas algunos efectos bastante esteticos como la transicion en cuña,la transicion desgarrando la pagina o el texto movil. Estos efectos quedan mas espectaculares y el numero de fotogramas por segundo lo aumentamos a 40, ya q requieren velocidad para que el ojo no perciba los saltos de fotograma.

PD: Todo en 20K(la metodologia LWF arrasa de nuevo)

Efecto MotionText
Para ello debes coger el texto que vaya a moverse y realizar un cuadro sin linea y con relleno, tal que el texto quede contenido dentro de el y tengan un tamaño parecido, seguido has de borrar el texto. El color de fondo del cuadro debera ser el un degradado desde blanco a transparente hacia la derecha e izquierda. Ahora establece la interpolacion de movimiento, pero en el destino eliminar el recuadro y volver a colocar el texto.
Efecto Cuña
Realizas un triangulo y lo situas fuera del escenario. Realizamos la interpolacion y como destino colocamos el triangulo de manera q sobre por el principio y por el fin del escenario. Insertamos un fotograma clave, y en este caso el triangulo hara la interpolacion de movimiento o forma, creciente hasta tapar toda la escena.
Efecto Rasgar
Para el efecto rasgar lo que utilizo es una mascara que muestra poco a poco el corte en la pantalla.
Para que se abra, quiza se pudiera hacer con una interpolacion de forma, pero se ve q no funciona bien, asi que yo lo he hecho fotograma por fotograma, ir tirando con la herramienta Flecha de las esquinas de la cruz hasta tapar todo el escenario. Aunque parece una tarea dura es unos pocos minutos esta listo.

Una Carta Para Flash

Querido Flash MX, hace tiempo que no te veo, que tal te va? que tal ese extraño selector de degradados? aun te quedas piyao cuando te conectas al centro de control de macromedia y ve que eres pirata?? jeje, seguro que si. Me acuerdo cuando nos conocimos, yo estaba en primero de el ciclo superior y tu eras aun la 5 beta. Tenias un monton de limitaciones, con los graficos y cascabas muchas veces, pero aun asi me enamore de ti y comence a usarte.
Mas adelante te convertiste en version Full, recuerdas??ohh, que emocion senti cuando pude insertar mi primer grafico, Realizar mi primer motion y mi primer shape(aunque tu sabes que no soy muy partidario de ellos). Aquellos si eran buenos tiempos. Contigo hice muchas cosas, mi primer juego, mi primera pagina, hasta me ayudaste a regalarle a mi novia una bonita animacion.
Despues, estariamos en segundo no? cuando te convertiste en MX. La verdad es que no cambiaste mucho, tenias unos aires de grandeza que no me gustaban. Comprendelo, me habias cambiao los paneles de sitio y de sistema de eventos. Me costo acostumbrarme pero lo hice y acepte tu nuevo look.
Se que hace tiempo que no te llamo y que no quedo contigo y se que sabes que he conocido a otro, se llama C++, pero es algo circustancial y te juro que es solo una cosa temporal, hasta que acabe el curso, despues todo sera como antes.
Tu eres el unico que ocupa mi corazon y pronto estare contigo. No dejo de pensar en ti, en tus onClipEvent y tus loadMovie y sueño con volver a esa programacion orientada a objetos en tu panel de acciones que tantas alegrias nos ha dado. A mi me queda el consuelo de que cuando nos volvamos a ver, ambos seremos mas maduros y podremos compartir mas cosas y realizar juntos proyectos mucho mas grandes y espectaculares.
Un enorme beso de quien te quiere y te ama.

Alvaro/Sothem - korsarios.net

La Recursividad

Despues del comentario de mi amigo paco me pregunto si la recursividad es entendida de manera correcta, asi que planteare el ejemplo de buscaminas, pero el que hice en flash, no sea que David Bueno se enfada y me cruje la nota, pero que quede claro que es una aproximacion a la hecha con flash, ya que existen algunas limitaciones que se suplen con otros metodos.
En primer lugar establecemos cual es la condicion para que al destapar una casilla se vayan abriendo todas y seria:

Pulsamos la casilla y comprobamos si el numero de minas cercanas es cero.
si lo es, llamamos a la funcion buscaCeros.

function buscaCeros(posx, posy) {
for (i=-1; i<=1; i++) {
for (j=-1; j<=1; j++) {
if (_root.matriz[posx+i-100][posy+j-100].nmina== 0 && matriz[posx+i-100][posy+j-100].estado!="levantado") {
buscaCeros(posx+i,posy+j);
}
_root["cuadro"+(posx+i)+"i"+(posy+j)].estado="levantado";
}
}
}

Analicemoslo mas profundamente:

al llamar a la funcion hacemos un barrido de las casillas que hay alrededor de la que hemos pulsado, con los dos for anidados, las levantamos y comprobamos cada una de las casillas con las siguientes condiciones:

Miro si la casilla tampoco tiene minas alrededor.
_root.matriz[posx+i-100][posy+j-100].nmina== 0

Los for hacen el barrido de las casillas de alrededor, pero cuando i=0 y j=0 la casilla q esta comprobando es la del centro, osea, la que comenzo todo el proceso, por lo tanto debo decirle que esa casilla no cuenta puesto que ya ha sido levantada. Si no hicieramos esto se produciria un bucle infinito que acabaria con el desbordamiento de la pila(Pakito, seguro que te pasa eso).

matriz[posx+i-100][posy+j-100].estado!="levantado"

Una vez comprobado que cumple estas 2 condiciones vuelvo a llamar a la funcion, pero ahora con la nueva casilla que acabo de descubrir que es un cero.

buscaCeros(posx+i,posy+j);

Y asi se haria la funcion recursiva. Ahora extrapola un poco y transformala a C++ que es practicamente lo mismo.

Nota solo para aquellos interesados en la version real en flash.

Flash solo te permite una pila de 256 posiciones, cantidad que se sobrepasa con facilidad. Para solucionar esto se usa otro metodo, que es el siguiente:
function buscac(posx, posy) {
for (i=-1; i<=1; i++) {
for (j=-1; j<=1; j++) {
_root["cuadro"+(posx+i)+"i"+(posy+j)].gotoAndStop(FtgEjecutor);
}
}
}

Y en fotograma ejecutor hago lo siguiente:

if(_root.matriz[this.px][this.py].nmina==0){
buscaC(px,py);
}

Con ello consigo evitar que la funcion se quede abierta hasta que las sucesivas llamadas recursivas le devuelvan el control, ya que la funcion acaba y ya fuera se vuelve a llamar, teneiendo en la pila solo 1 procedimiento ejecutandose.

Selector de colores

Ultimamente no ando bien de tiempo, por eso es que apenas posteo, pero tranquilos que volvere a estar plenamente activo en breve. Hoy he tenido un ratito libre y al leer al genial articulo de Álvaro se me ocurrió este Selector de colores. Como no tengo tiempo de realizar un tutorial he comentado el código fuente y espero que con eso os baste para entender como funciona. Como vereis no es nada del otro mundo. Para Álvaro dejo el trabajo de integrarlo con su Paint que supongo que será sencillo. Bueno esto es todo por hoy, me voy a la facultad, que el IRPF me reclama ;)

Flash Paint

En este tutorial explicaremos paso a paso como realizar una aplicacion de al estilo MSPaint con las api de dibujo de flash.

ELEMENTOS EN PANTALLA
Para empezar crearemos un movieClip que sera el area de dibujo con instancia "pantalla" y otro que hara de cursor para la aplicacion, yo he elegido el del MSPAINT y que instaciaremos como "brocha".
Y para acabar crearemos sendos botones para seleccionar el color y el grosor de la brocha, asi como uno para la herramienta goma y otro borrar todo. Esto tambien se puede hacer con los componentes predefinidos ComboBox.

ACCIONES
Antes de comenzar con las acciones explicare el funcionamiento del "lineTo(x,y)":
El Api de dibujo establece la posicion de un cursor que ira realizando el trazado desde esa posicion hasta un X y un Y, siendo ese X y ese Y el nuevo valor del cursor del Api.

- Inicializacion:
Dos variables que tendremos que tener muy encuenta seran las que detecten cuando se hace click para comenzar el trazado con la variable "ClickOk" y detectar cuando el puntero del raton esta encima del area de dibujo.

ClickOk = false;
EnPantalla = false;

Los trazos no los realizaremos en el clip Pantalla, sino que los realizaremos en un nuevo MovieClip "dibujo" que crearemos con "createEmptyMovieClip(instancia,profundidad)".

createEmptyMovieClip("dibujo",200);

Para realizar los trazos utilizaremos el Api "lineTo(x,y)", al cual hay que definirle los paremetros de Grosor, Color y Transparencia:

ActualGrosor = 6;
ActualColor = 0x000000;
ActualAlfa = 100;
dibujo.lineStyle(ActualGrosor,ActualColor,ActualAlfa);
brocha.swapDepths(300);

- Eventos:
Utilizaremos los eventos "onRollOver" y "onRollOut" para detectar cuando del raton esta sobre "pantalla" en cuyo caso ocultaremos el puntero normal del raton y lo sustituiremos por el Clip "brocha" y la variable "EnPantalla" la pondremos a true. En el caso contrario, mostraremos de nuevo el puntero del raton, la brocha la sacaremos fuera de la pantalla visible ("brocha._x=-100") y la variable "EnPantalla" la pondremos a false.

pantalla.onRollOver = function() {
Mouse.hide();
EnPantalla = true;
brocha._x=_xmouse;
brocha._y=_ymouse;
}

pantalla.onRollOut = function() {
Mouse.show();
brocha._x = -100;
EnPantalla = false;
}
El evento "onMouseDown" detecta si el puntero se encuentra en la "pantalla"Si es asi pone "ClickOk" a true, establece el estilo de la linea mueve el cursor del Api a la posicion X e Y del raton, en otro caso ClickOk lo pone a false

pantalla.onMouseDown = function() {
if (pantalla.hitTest(_level0._xmouse,_level0._ymouse)) {
ClickOk = true;
dibujo.lineStyle(ActualGrosor,ActualColor,ActualAlfa);
cX = Math.round(_level0._xmouse);
cY = Math.round(_level0._ymouse);
dibujo.moveTo(cX,cY);
} else {
ClickOk = false;
}
}

El evento "onMouseUp" pone "ClickOk" a false y establece la posicion del cursor como la ultima tomada por el raton.

pantalla.onMouseUp = function() {
ClickOk = false;
cX = Math.round(_level0._xmouse);
cY = Math.round(_level0._ymouse);
dibujo.moveTo(cX,cY);
if (!pantalla.hitTest(_level0._xmouse,_level0._ymouse)) {
brocha._x=-100;
EnPantalla=false;
mouse.show();
}
}

El Evento "onMouseMove" realiza dos acciones:
Establece el arrastre del Clip "brocha" si el raton se encuentra "EnPantalla".
Comprueba que se haya pulsado el boton del raton (ClickOk=true) en cuyo caso va trazando una linea desde la posicion anterior del cursor del Api hasta la posicion actual del raton. De esta forma se van dibujando las formas. Una vez hecho todas las acciones se actualiza el clip mediante updateAfterEvent();.
pantalla.onMouseMove = function() {
if (EnPantalla) {
brocha._x = _level0._xmouse;
brocha._y = _level0._ymouse;
}
if (ClickOk) {
if (pantalla.hitTest(_level0._xmouse,_level0._ymouse)) {
cX = Math.round(_level0._xmouse);
cY = Math.round(_level0._ymouse);
dibujo.lineTo(cX,cY);
}
}
updateAfterEvent();
}

- Funciones:
Las Funciones que establecemos acontinuacion serviran para establecer estilos y para desarrollar las herramientas del programa de dibujo y que seran llamadas desde los botones que definimos al principio.

Para Borrar todo el dibujo y empezar uno nuevo utilizamos la funcion clear();.

function NuevoDibujo() {
dibujo.clear();
}

Para cambiar el grosor del trazo:

function CambiarGrosor(grosor) {
ActualGrosor = grosor;
}

Para seleccionar el color del trazo utilizamo un switch en la que sustituimos el color escrito por el formato 0x000000 en la que sustituiremos las 6 ultimas cifras por el color que deseemos en hexadecimal:

function SeleccionarColor(ColorElegido) {
switch(ColorElegido) {
case "Negro":
ActualColor = 0x000000;
break;
case "Blanco":
ActualColor = 0xffffff;
break;
case "Rojo":
ActualColor = 0xCC0000;
break;
case "Amarillo":
ActualColor = 0xFFCC00;
break;
case "Verde":
ActualColor = 0x66CC66;
break;
case "Azul":
ActualColor = 0x33CCFF;
break;
}
}

Space Lancer

¿Creias que despues de Avido Flash Web, todo habia acabado? Pues que sepas que estabas muy equivocado, porque ahora llega SPACE LANCER, un autentico juego de naves en el que pilotaras un pequeño vehiculo al estilo sputnik estraviado por la tierra y q acaba colandonse en una casa.¿Conseguira salir de alla con vida? Intenta que asi sea, pero que sepas que tendras que enfrentarte con peligrosas lamparas, inodoros asesinos, niños sadicos e incluso con Electrodomesticos de la mas baja calaña.
Cada pantalla tiene codigos de para que no tengas que empezar desde el principio, ademas cuentas con 3 vidas y alguna extra que hay por la pantalla.

Disfruta ya de este juegazo mientras quizá prepare el siguiente, quien sabe.¿quiza un tipo "Street Fighter"?

ActionScript Motions

Una de las problematicas que encontramos a la hora de observar las animaciones y aplicaciones en flash, el elevado peso de los archivos, que hacen muy tediosa la espera para la carga.
Para esto existen tecnicas y metodos que reducen el tamaño del swf.
En esta primera parte veremos como transformar las animaciones creadas con las herramientas del editor, por animaciones creadas en Action Script, con lo que conseguiremos reducir el peso del archivo,aunque ganará en complejidad.

Articulo 1- Movimientos de Clips

Si queremos hacer una interpolacion de movimiento en linea recta desde X=0-Y=0 hasta X=200-Y=100. Podemos tomar dos caminos.

Con Interpolacion:
En el primer fotograma seleccionamos el MovieClip y lo situamos en las coordenadas X=0-Y=0, selecionamos el fotograma final y creamos alli un fotograma clave, ahora asignamos al MovieClip la posicion X=200-Y=150. Finalmente selecionamos el fotograma inicial y creamos la interpolacion de Movimiento. Si quisieramos aceleracion deberiamos modificar el control extrañamente traducido “borrado” en el panel de propiedades de la interpolacion.

Con Action Script:
Seleccionamos el movieclip y en el panel de acciones le asignamos El siguiente codigo:

onClipEvent(Load){
_x=Xinicial=0;
_y=Yinicial=0;
Xfinal=200;
Yfinal=150;
pasos=50;
}
onClipEvent(enterFrame){
if(_x<Xfinal || _y<Yfinal){
_x+=(Xfinal-Xinicial)/pasos;
_y+=(Yfinal-Yinicial)/pasos;
}
}

Siendo Xinicial e Yinicial la posicion inicial de MovieClip, Xfinal e Yfinal las posiciones finales y pasos el numero de Movimientos hasta llegar al final del recorrido.
Si quisieramos aceleración el codigo seria este:

onClipEvent(Load){
_x=Xinicial=0;
_y=Yinicial=0;
Xfinal=200;
Yfinal=150;
Deceleracion=8;
}
onClipEvent(enterFrame){
_x+=(_x-Xfinal)/deceleracion;
_y+=(_y-Yfinal)/deceleracion;
}

Siendo deceleracion el factor de frenado del MovieClip.
Este metodo es extensible, no solo para un recorrido rectilineo, sino q es extensible para cualquier recorrido representable por una funcion.
Por ejemplo un recorrido senoidal podriamos representarlo como:

_y=(Math.sin(inc)*amp)+Yinicial;
inc+=0.01;

Siendo inc una variable que se incrementa y amp la amplitud del seno.
En el caso de querer realizar un recorrido complejo no representable con una funcion simple es preferible el uso de Interpolaciones con guias, pero si el recorrido no resulta ser demasiado complejo se puede realizar mediante la representacion de una funcion por partes combinando distintas funciones, por ejempo:

onClipEvent(Load){
_x=Xinicial=0;
_y=Yinicial=0;
Xfinal=300;
Xfinal2=400;
Yfinal=450;
inc=0;
}
onClipEvent(enterFrame){
if(_x<Xfinal){
_x+=5;
_y=(Math.sin(inc)*70)+Yinicial;
inc+=0.2;
}else{
_x+=5;
_y+=_x/2;
}

}

Esta Funcion esta compuesta por 2 funciones pues esta definida por partes. Asi pues para X<Xfinal es una funcion senoidal _y=70*Math.sin(inc), y para X>=Xfinal es una recta _y=_x/2.

Avido Is Working

Hola, de nuevo aqui para presentarles la web de Avido, la fructifera union de Sothem&fly q por fin sale a flote.

La pagina es integramente en Flash, con animaciones y efectos sonoros, y solo por 54kB de peso, a pesar de su complejidad.
Es una web donde podreis encontrar las secciones:

Enlaces: Enlaces a las paginas mas interesantes de diseño.

Nosotros: Aqui podres encontrarnos Pixelados para q sepais quienes somos.

Experimentos: Aqui encontrareis todo lo que vamos haciendo en Flash y PhotoShop.

Noticias: Aqui os informaremos de nuestros proyectos, citas importantes, etc.

Hablanos: Y aqui la gran seccion, un libro de visita creado en PHP-XML-FLASH donde podreis postear vuestras recomendaciones, criticas, insultos, halagos, e incluso las mujeres vuestros numeros de telefono :p.

The Fruits

AND THE WINNER IS.....prrrrrrrrr(redoble) PEEEDROOOOO. Te suena esa escena, pues este año os podeis ir preparando, porque ni pedro ni benigni ni na, este año nos llevamos el premio nosotros con "THE FRIUTS".
The Fruits es un video musical con ambientacion de los años 60 y tematica de fruta.

Kaleido

Aqui comienza la andadura en experimentacion visual por parte del Grupo S&F.
Con este Caleidoscopio Virtual nos extrenamos, pero habra mas.

Caballo de Ajedrez

Como estoy enfrascao en un proyectito en flash q aun le queda un tiempo para salir aqui muestro otro jueguecito en flash.
se trata del comunmente llamado por mi juego del caballo. Es un juego de habilidad mental.
Estas son las reglas:
-Pantalla: La pantalla se divide en 25 casillas
-Comienzo: puedes empezar por la casilla que quieras
-Objetivo: moviendote de una casilla a otra como el caballo de ajedrez debes conseguir marcar todas las casillas sin pasar 2 veces por la misma.
Pos ala ala, a disfrutar y que dios reparta suerte.

Buscaminas

Se dice se cuenta y se Rumorea que Hay otro juego de esos que te cagas made in sothem.
Pues si El buscaminas, ya sabeis ese juego que todo el mundo tiene inicio\programas\accesorios\juegos\buscaminas, por ahora tambien lo teneis en buscaminas, similar al original, salvo q para marcar minas has de tener pulsado control, disfruta de el y si te convence, cambialo por el de windows que apesta. :)

TTanKK

Gran lanzamiento!!!
Muy pronto todos podreis disfrutar del juego del año "CAÑONES 2", un trepidante juego de dos jugadores estilo worms cuyo objetivo es aplastar a tu oponenente a base de cañonazos.
Con 6 escenarios distintos y 6 personajes a elegir,Cañones 2 promete convertirse en una referencia en el mundo de los juegos Flash que creara un antes y un despues.