Cómo insertar flash en Blogger o en una página web

Escribo este post porque he leído en muchos sitios cosas sobre cómo insertar flash en Blogger, y la verdad, no me funcionaba casi ninguna, así que he pensado en hacer un "tuto rápido" de cómo hacerlo.

Para insertar un archivo Flash (.swf) en Blogger o en una página web, lo único que necesitamos es tener subido a un hosting nuestro .swf.

Podemos usar por ejemplo imageshack, photobucket ...etc

Yo recomiendo este último.





Subimos nuestro .swf a photobucket (tenemos que saber cuanto mide de ancho y de alto) y copiamos el "Direct Link" que nos dan. Ahora hacemos lo siguiente:

1- Creamos una entrada nueva.
2- Nos vamos a la pestaña "Edición de HTML"
3- Escribimos lo siguiente:


<object height="AltoSWF" width="AnchoSWF"><param name="movie" value="Enlace que copiamos de photobucket"><param name="wmode" value="transparent"><embed src="Enlace que copiamos de photobucket" type="application/x-shockwave-flash" wmode="transparent" height="AltoSWF" width="AnchoSWF"></embed></object>


4- Sustituimos las medidas en negrita y los enlaces en negrita por los verdaderos, y ya está.

Ejemplo:



Código fuente:


<center><object height="100" width="200"><param name="movie" value="http://i117.photobucket.com/albums/o75/burflip/Sinttulo-1.swf"><param name="wmode" value="transparent"><embed src="http://i117.photobucket.com/albums/o75/burflip/Sinttulo-1.swf" type="application/x-shockwave-flash" wmode="transparent" height="100" width="200"></embed></object></center>


Un Saludo

Tutorial Batch desde 0 (Bueno para programadores principiantes)

He hecho este tutorial porque he pensado que los que seáis nuevos en esto de la programación, este será el lenguaje de programación medio serio más fácil que podreís encontrar por ahí, y, como se parece un poco a los demás, supongo que es una buena base.
Los requisitos para programar en batch son:

-cmd.exe o emulador.
-Bloc de notas simple.
-Ganas de empezar.

C1

Bueno, pues voy a empezar por aquí. Un archivo batch (o bat) es un archivo de procesamiento por lotes: se trata de archivos de texto sin formato, guardados con la extensión *.bat que contienen un conjunto de comandos DOS.
Cuando se ejecuta este archivo bat, los comandos contenidos son ejecutados en grupo, de forma secuencial, permitiendo automatizar diversas tareas.

Cualquier comando DOS puede ser utilizado en un archivo batch.

Para que os vayais familiarizando con batch y sus codigos, podeis iros a Inicio>Accesorios>Simbolo de Sistema (los que tengáis windows, los que no usad un emulador o algo por el estilo) y ahí escribis "help". Esos son todos los comandos que puedes escribir con bat. (ademas de esos estan las modificaciones, los atributos a estos, las expresiones alternativas... etc.

Nosotros vamos a programar en un bloc de notas, a palo seco. Para guardarlo simplemente le ponemos como nombre "nombredelarchivo.bat"
quitandole el .txt. Para abrilo nos vamos al bloc de notas y le damos a Abrir. Dentro de la pantallita de abrir, en Tipo, seleccionamos "Todos los archivo", pinchamos en el documento y se abre, o simplemente le damos click derecho al documento>Editar.

Bien, pues vamos con nuestro primer código, este es el tipo de códig que genera un Hola Mundo.

Código:

@echo off echo Hola Mundo! pause exit

Bien, voy a ir explicando. El @echo off sirve para quitar el eco del programa. Si no sabeis lo que es el eco, probad a poner @echo on.
El echo sirve para escribir cosas en la pantalla.
El pause inserta una pausa que continua al pulsar una tecla.
El exit nos hace salir del programa.

Ahora voy a explicar un par de modificaciones.
Cuando insertamos un pause, sale: "pulse una tecla para continuar . . . "
Imaginemonos que por un casual necesitamos poner en vez de eso, " pulse una tecla para acceder al menu" o "pulse una tecla para salir".
¿Cómo lo haríamos? Pues bien, se hace con "pause>nul". Con pause>nul
lo que hacemos es insertar una pausa pero sin que salga nada en la pantalla, con lo que podriamos poner un echo antes para que pareciese que hay un comando para acceder al menu, otro para salir, otro para cotinuar... ect:

Código:

@echo off echo Hola Mundo! echo Pulse una tecla para salir pause>nul exit

Otro comando importante puede ser el "echo." Con el echo. podemos insertar una linea e blanco en nuestra pantalla:

Código:

@echo off echo. echo. echo Hola Mundo! echo. echo Pulse una tecla para salir pause>nul exit

El ultimo (o eso creo) de los codes que os voy a enseñar hoy es el "cls". Con el cls borramos todo lo que haya ahora mismo en la patalla.

Código:

@echo off echo. echo. echo Hola Mundo! echo. pause cls echo. echo Pulse una tecla para salir pause>nul exit

Bien, eso ha sido todo por hoy, si veo que esto tiene medio éxito, os iré poniendo ejercicios, el que los haga se llevará puntos... y cosas así ;). Por lo pronto, quiero que me comentéis un poquito que os parece todo esto, que lo probéis y que escribáis los resultados.

Un Saludo.

Tutorial de manejo de profundidades en Flash

Lo que queremos llegar a obtener con este tutorial es esto:

http://img503.imageshack.us/my.php?image=profundidadesyn9.swf

Lo haré de la forma mas fácil y sencilla posible.
Lo primero es abrir un documento nuevo.
Propiedades del documento:

-550x400 pixeles.
-30 fps.

Creamos un gráfico que sea un escalon de nuestras 2 escaleras.

Imagen

Otro grafico que sea un cuadrado de fondo blanco.
Con todo esto creamos un movieClip que tenga mas o menos esta forma:

Imagen

y lo colocamos en nuestro escenario.
Creamos otro movie clip con el cuadrado de fondo blanco que usamos antes y colocamos 3 instancias en nuestro escenario cambiandoles el tamaño a nuestro gusto de tal forma que quede algo como esto:

Imagen

le damos nombre de instancia a los estos tres que acabamos de crear. En mi caso los llame "floor1", "floor2", y "floor3".

Ahora creamos un boton, en el que no ponemos nada salvo en la ultima parte, donde pone zona activa, en la que dibujamos cualquier cosa, (da igual lo que dibujemos ya que mas adelante lo volveremos a cambiar).
Nos llevamos una instancia del botón al escenario, y le damos click derexo>editar en contexto. Y ahi dibujamos (en el frame que pone zona activa) un cuadradito que coincida con las escaleras, quedandonos algo asi:

Imagen

yle damos nombre de instancia "boton".
Ahora creamos otro boton de la misma forma que el anterior, solo que ahora en vez de dibujar cuadrados en las escaleras los dibujamos en el controno, quedandonos algo asi:

Imagen

Y le damos nombre de instancia "boton2".
Ahora creamos una bolita, de nombre de instancia "ball", y la ponemos donde más nos guste de nuestro escenario.

Por ultimo agregamos el siguiente código que ahora os explicaré:

Código:

this.floor1.swapDepths(2); this.floor2.swapDepths(3); this.floor3.swapDepths(4); boton.onRollOver = function() { ball.swapDepths(5); }; boton2.onRollOver = function() { ball.swapDepths(1); }; _root.onEnterFrame = function() { ball._x = _xmouse; ball._y = _ymouse; };

Imagen

Con:

this.floor1.swapDepths(2);
this.floor2.swapDepths(3);
this.floor3.swapDepths(4);

Lo que hacemos es establecer la profundidad que tienen los cuadrados más altos, por lo tanto todo lo que tenga profundidad menor de 2 quedará debajo de los cuadrados (nuestra "ball" tiene la profundidad por defecto de flash, que es 0).
Con:

boton.onRollOver = function() {
ball.swapDepths(5);
};

Queremos decir cuando pasemos por las escaleras (que es donde se supone que colocamos éste boton) la profundidad de nuestra "ball" será de 5, osea que es como si hubiesemos subido al piso de arriba.
Con:

boton2.onRollOver = function() {
ball.swapDepths(1);
};

decimos que cada vez que se salga del piso de arriba, la profundidad sea de 1, por lo tanto que quede debajo de los otros.
Con:

_root.onEnterFrame = function() {
ball._x = _xmouse;
ball._y = _ymouse;
};

Estamos diciendo que cada vez que entre en el frame (en nuestro caso 30 veces por segundo) el eje x de "ball" sea igual al eje x del mouse, y el eje y de "ball" sea igual al eje y del mouse, oséase, que esté debajo del mouse (o, si ponemos este código:

Código:

Mouse.hide(); _root.onEnterFrame = function() { ball._x = _xmouse; ball._y = _ymouse; };

Imagen

el mouse queda oculto y tenemos a la bolita como mouse).

Muchas gracias por vuestra atención y por haber llegado hasta aquí leyendo.


Un Saludo.

Buscador Interno en tu blog tipo Blogger

Lo que os voy a explicar es un problema que he tenido hace poco puesto que no quiero mostrar la navbar de blogger pero al mismo tiempo quiero tener un botón de buscar en la web. Que el navbar no aparezca fue fácil:

Plantilla>Edición HTML>/* Headings */>>

Al final del todo, salto de línea y escriben esto:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


En mi blog, con la plantilla que tengo, funciona de la siguiente forma:


/* headings
----------------------------------------------- */

#header h1 {
margin: 0;
padding: 24px 0 0 84px;
background: url(http://img338.imageshack.us/img338/9140/flechaaw6.gif) no-repeat 25px 12px;
}

h2.date-header {
margin: 0;
padding: 0 0 0 29px;
text-transform: uppercase;
color: $dateHeaderColor;
background: url(http://img474.imageshack.us/img474/8308/fechayj8.gif) no-repeat 11px 0;
font-size: 80%;
font-weight: normal;
}

.date-header span {
margin: 0 0 0 5px;
padding: 0 25px 0 25px;
background: url(http://www.blogblog.com/thisaway/bg_date.gif) no-repeat 0 0;
}

.sidebar h2 {
padding: 1px 0 0 36px;
color: $sidebarHeaderColor;
background: url(http://img404.imageshack.us/img404/9373/lateralh2yb1.gif) no-repeat 13px 4px;
font: $headerFont;
font-weight: bold;
}

.sidebar .Profile h2 {
color: #333;
background: url(http://img251.imageshack.us/img251/9157/lateralh2rz5.gif) no-repeat 0 45%;
}

.post h3 {
margin: 13px 0 13px 0;
padding: 0;
color: $postTitleColor;
font-size: 140%;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
}

#comments h4 {
margin-top: 0;
font-size: 120%;
color: #333;
}

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

/* text
----------------------------------------------- */



Después de esto, el problema viene con el buscador, pero no os preocupeis, porque es muy fácil.
Lo que tenemos que hacer es crear en nuestro sidebar lateral un widget de HTML/JavaScript.
En el widget copias el código siguiente y lo pegaís en el widget.


<br/>

<center><form id="searchobject" action="/search" style="display:inline;" method="get">

<input value="Buscar" type="submit"/>

<input maxlength="255" name="q" size="15" type="text"/>

</form>

<br/><br/>

<a href="http://burflip.blogspot.com" title="Burflip's Blog"><img alt="Burflip Style" src="http://img106.imageshack.us/img106/6930/allpromotions2ie4.png" border="0" /></a></center>


Ejemplo:

ó


<br/>

<center><form id="searchobject" action="/search" style="display:inline;" method="get">

<input value="Buscar" type="submit"/>

<input maxlength="255" name="question" size="15" type="text"/>

</form>

<br/><br/>

<a href="http://burflip.blogspot.com" title="Burflip's Blog"><img alt="Burflip Style" src="http://img508.imageshack.us/img508/810/allpromotions3sb5.png" border="0" /></a></center>


Ejemplo:

Un Saludo a todos.

Tutorial hitTest en Flash

En este tutorial, intentaremos hacer dos cosas:

Cosa1 (12 fps)

http://img444.imageshack.us/my.php?image=p4nb1.swf

Cosa2 (20 fps)

http://img388.imageshack.us/my.php?image=p5ck4.swf



Todo esto se hace por medio de un comando llamado hitTest.
Hay 2 formas de evaluarlo. Una, es mas fácil, y la otra mas precisa.
Vamos a ver la fácil, que para que sea mas precisa y bonita lo único que tienes que hacer es subir de 12 fps (frames por segundo) a unos 20-25 fps.

Bien, el problema que todos tendréis con hitTest, es que os evaluará la figura que tenemos y la figura que queremos evaluar como si fuesen cuadrados. Por lo tanto, de un circulo, flash trazará un cuadrado invisible a su alrededor y parecerá que nuestra figura se choca con el aire.
Primero veremos ese tipo de hitTest.

Tenemos una linea recta en el escenario, nombre de instancia "fondo" y un
cuadrado, nombre de instancia "miClip". Tambien tenemos un campo de texto dinámico llamado "hitting".

El AS seria este:

Código:

_root.onEnterFrame = function () { var velocidad:Number = 5; if (Key.isDown (Key.DOWN)) { miClip._y += velocidad; } if (Key.isDown (Key.UP)) { miClip._y -= velocidad; } if (Key.isDown (Key.LEFT)) { miClip._x -= velocidad; } if (Key.isDown (Key.RIGHT)) { miClip._x += velocidad; } if (miClip.hitTest (this.fondo)) { hitting.text = "Lo estas tocando"; } else { hitting.text = "Ahora no tocas nada"; } };

Bien, explico el código:

Empezamos con un _root.onEnterFrame = function() lo que significa que la acción entre { y } se realizará 12 veces por segundo, ya que mi película va a 12 fps. Si poneis a 20 fps, parecerá mas real.

Después, creo la velocidad con la que se moverá mi cuadrado:
var velocidad:Number = 5;

A continuación, pongo un análisis de todas las teclas, para que cada vez que se pulse una tecla (flecha abajo en este caso) miClip sume a su ._y la velocidad seteada antes (5) :

if (Key.isDown (Key.DOWN)) {
miClip._y += velocidad;
}
....ect

Después, coloco el hitTest:

if (miClip.hitTest (this.fondo)) {
hitting.text = "Lo estas tocando";
} else {
hitting.text = "Ahora no tocas nada";
}

Explicación paso a paso:

si (miClip.chocaContra (this*.clipConInstanceNameFondo)) hacer esto {
que hittingQueEsUnTextField.text ponga= "Lo estas tocando";
} si no choca {
que hittingQueEsUnTextField.text ponga= "Ahora no tocas nada";
} sacabó

*this -> se refiere a la raíz principal. Al _root de nuestro documento. Ponemos this.fondo, porque si pusiésemos _root.fondo no funcionaría, puesto que Flash buscaría dentro de _root otro _root, y como eso no es posible por ahora, hay que usar this. Con esto se hace el primer ejemplo.

Bien, ahora vamos con la que es mas dificililla pero que luego nos ahorra mucho trabajo, ya que podemos dibujar como mc "fondo" el contorno que queramos o la figura que queramos.:

Código:

_root.onEnterFrame = function() { var velocidad:Number = 5; if (Key.isDown(Key.DOWN)) { if ((fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMax, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMax, true))) { miClip._y -= velocidad; } else { miClip._y += velocidad } } if (Key.isDown(Key.UP)) { if ((fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMin, true))) { miClip._y += velocidad; } else { miClip._y -= velocidad } } if (Key.isDown(Key.LEFT)) { if ((fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMax, true))) { miClip._x += velocidad; } else { miClip._x -= velocidad; } } if (Key.isDown(Key.RIGHT)) { if ((fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMax, true))) { miClip._x -= velocidad; } else { miClip._x += velocidad } } }

En este esta todo comprimido. Primero metemos el _root.onEnterFrame = function() .

Luego seteamos la velocidad: var velocidad:Number = 5

Y ahora vienen el analisis de las teclas:

if (Key.isDown(Key.RIGHT)) {
if ((fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMax, true))) {
miClip._x -= velocidad;
} else {
miClip._x += velocidad
}

Explicación paso a paso:

si (unaTecla.esPulsada(laTecla.flechaDerecha)) {
/* aqui meto un if dentro de otro */
si ((elMcFondo.chocaCon( la esquina de abajo derecha del clip miClip que se encuentra en la raíz o escena principal, y/o con la esquina de arriba izquierda del clip miClip que se encuentra en la raíz o escena principal. Si no ocurre esto (|| mirar aver si elMcFondo.chocaCon a esquina de abajo derecha del clip miClip que se encuentra en la raíz o escena principal, y/o con la esquina de arriba derecha del clip miClip que se encuentra en la raíz o escena principal, el true simplemente es para que se realize la acción siempre que choque, si no, sólo se realizaría si estuviese chocando al principio.))) si esto pasara o pasase hacer lo siguiente {
que la posicion ._x de miClip baje en 5 (var velocidad)
} si no pasa, cada vez que yo pulse la flecha de direccion derecha hacer esto {
que la posición ._x de miClip suba en 5 (var velocidad)
} sacabó

Bien, con este ejemplo conseguiremos hacer el segundo ejemplo.

Un saludo.

.flas

Ejemplo1:
http://fileho.com/download/62437a192680/p4.fla.html
y tambien en:
http://www.megaupload.com/?d=OD1K459A

Ejemplo2:
http://fileho.com/download/95440d226315/p5.fla.html
y tambien en:
http://www.megaupload.com/?d=GJ1QHDTR

Tutorial de Trigonometría en Flash

Este tema es un poco difícil de explicar pero para que os vayais haciendo una idea, lo que haremos al final es algo parecido a esto:

Link a ejemplo

Bien. Empezemos por la trigonometría y luego la aplicaremos a Flash.
Os aconsejo que si no entendeís mi explicacion vayais a
esta página.

De acuerdo. Empecemos por el principio Dibujaremos un círculo y le trazaremos dos diagonales perpendiculares entre sí(como si fueran ejes):



Ahora trazamos otro radio y de ahi sacaremos 2 triángulos:



Un par de datos importantes:

-El seno se obtiene dividiendo el lado opuesto al ángulo entre la hipotenusa.
-El coseno se obtiene dividiendo el lado contiguo al ángulo entre la hipotenusa.




Por lo tanto, si tenemos el siguiente triángulo:



Fijáos como los catetos b y c son iguales a los ejes x e y en flash. Por lo tanto si queremos hallar el ángulo "α" de cualquier triángulo que dibujemos tendremos que tener en cuenta las siguientes ecuaciones:

Seno α = c/a
Coseno α = b/a
Tangente α = c/b
α = arco tangente (c/b)

Todas estas palabras (seno,coseno, tangente y arco tangente) son operaciones. Como si estuviésemos diciendo Raíz Cuadrada o Multiplicación. En flash, para hacer la unica operación que nos hará flata será el arco tangente, que se expresa así:

Código:

Math.atan2(x,y)

Donde x e y serían como en nuestro triángulo b y c.
Entonces usamos el siguiente código para hallar el ángulo:
(Tenemos un mc llamado flecha colocado en el escenario, una bolita blanca que hace de cursor con nombre de instancia "cursor" y 3 campos de textos dinámicos con nombres de instancia "Xmouse", "Ymouse" y f_rota".)

Código:

_root.onMouseMove = function() { cursor._x = _xmouse cursor._y = _ymouse Xmouse.text = _xmouse Ymouse.text = _ymouse f_rota.text = flecha._rotation updateAfterEvent(); xdif = _root._xmouse-flecha._x; ydif = _root._ymouse-flecha._y; angulo = Math.atan2(ydif, xdif); angulo = angulo*180/Math.PI; flecha._rotation = angulo; };

En este caso, en vez de usar onEnterFrame, lo que vamos a hacer es un onMouseMove con updateAfterEvent() que lo quer hace es que cada vez que el ratón se mueva ocurra ese evento sin importar nuestros fps.
Con:
cursor._x = _xmouse
cursor._y = _ymouse
lo que hacemos es que la bolita este haciendo de cursor.
Con:
Xmouse.text = _xmouse
Ymouse.text = _ymouse
f_rota.text = flecha._rotation
hacemos que nuestros campos de texto dinámicos representen el ejeX de nuestro mouse, el ejeY de nuestro mouse y la rotación de nuestra flecha.
Con:

xdif = _root._xmouse-flecha._x;
ydif = _root._ymouse-flecha._y;
angulo = Math.atan2(ydif, xdif);

Lo que hacemos es calcular el arco tangente del triágulo que creamos desde nuestro mouse hasta la flecha.
Con:
angulo = angulo*180/Math.PI;
flecha._rotation = angulo;
lo que hacemos es pasar a radianes ya que no se los podemos dar de otra forma.


Y ya está. Este es nuestro resultado:

http://img265.imageshack.us/my.php?image=ejemploypfm5.swf

Un saludo