martes, octubre 25, 2005

(PHP) Automatic Rotator

Descargar el código fuente

Descargar la últma versión del script y descomprimir el archivo (debe de descomprimirse en un archivo llamado rotator.php).

Subir el Script

Para empezar a usar el Rotaror, sóló baja el script a tu servidor y pónlo en el mismo folder donde están las imágenes que desees rotar.

Nota: Si deseas poner el archivo en otro folder, es necesario modificar la variable $folder del script.

Vincúlalo

Ahora puedes ligar el archivo como normalmente se liga una imágen:

    

Cada vez que la página se vuelva a cargar, se cambiará la imagen.

jueves, octubre 20, 2005

(CSS) Layout multi-column

Para hacer 2, 3, 4 o más columnas SOLO CON ESTILOS, me he encontrado una script fabuloso en csscripting.com.


Cómo usarlo:



  1. Descargar el script al sitio(TIENE QUE ESTAR EN EL SITIO SI NO NO JALA).

  2. Agregar el script DESPUÉS del vínculo a la hoja de estilos:



    <link rel="stylesheet" type="text/css" href="stylesheet.css" />

    <script type="text/javascript" src="css3-multi-column.js"></script>

  3. Se pueden usar estas propiedades:





























Propiedad CSS Tipo Ejemplo
column-count un número 3
column-width valor en pixeles 200px
column-gap valor en pixeles 10px
column-rule definición del borde 1px solid #000

(HTML) Validadores

Para validar un documento html:

Validación W3C

Para validar CSS:

Validación CSS W3C

O descargar el validador de CSS:
Style Studio CSS Editor

(HTML)Metadatos

Metadatos en html


Si hay algo en lo que el W3C siempre insiste es en el significado del documento. Desde el punto de vista del W3C, internet debe ser información estructurada, y el html debe ser la herramienta para lograr esa estructuración.



Una página web debe ser un conjunto de datos organizado con sentido. Las etiquetas html deben insertarse con este fin organizativo (dejando la presentación para otros lenguajes, CSS). La sola lectura del código debería ofrecer información relevante sobre el documento. Se trata en definitiva de organizar internet, escribiendo páginas que contengan información sobre si mismas, de forma que pueda mecanizarse su clasificación y catalogación. El futuro de la metainformación pasa por la web semántica y por XML, pero mientras tanto podemos avanzar por ese camino con los metadatos.



Los metadatos (información sobre la información) no se visualizan, pero estan integrados en el documento ofreciendo información variada: desde el tipo de formato utilizado (html, xml ...) hasta el autor, editor con el que se ha confeccionado, información para los buscadores, etc.


La etiqueta meta


La forma usual de insertar metadatos en el documento es por medio de la etiqueta <META> en la sección <HEAD> de la página.



Esta etiqueta es de aquellas de las que llamabamos "elementos vacios" porque no lleva etiqueta de cierre. Su estructura es la de una declaración propiedad:valor. Por ejemplo:


<meta name="generator" content="HTML-Kit" />

etiqueta que contiene la metainformación de que el documento ha sido escrito usando dicho editor.



No existe ninguna regla acerca de la informacion que puedes o no puedes incluir en las metatags. El standard html define la estructura de una etiqueta META, pero no sus valores. Es perfectamente válido que inventes tus propias etiquetas META; sin embargo dado que no se visualizan en el navegador, y que realmente solo se aprovechan por los buscadores y otras herramientas informáticas (que lógicamente solo entienden las etiquetas META mas difundidas) tampoco tiene mucho sentido crear tu propia metainformación, salvo para uso propio.


Etiquetas META mas usuales


description


<meta name="description" content="Esta es la mejor pagina del mundo mundial" />

Mediante esta etiqueta podemos incluir como metadato una descripción de nuestra página. Esta descripción puede ser leida y utilizada por algunos buscadores

La etiqueta <meta> admite el atributo lang, que nos permite ofrecer información sobre el idioma:

<meta name="description" content="Esta es la mejor pagina del mundo mundial" lang="ES" />


keywords


<meta name="keywords" content="mp3, free, FREE, download, britney, spears" /> 

Las palabras clave son aquellas que resumen de forma significativa el contenido de la pagina. Por ejemplo keywords adecuadas para ignside.net podrían ser "noticias, internet, manuales, html"



Las dos etiquetas META que acabas de ver son las mas importantes. Como los buscadores leen estas etiquetas y pueden juzgar acerca de la importancia de la pagina segun ellas, existe una auténtica industria montada sobre estas dos sencillas lineas. Una buena selección de descripción y keywords puede suponer que tu página aparezca muy arriba en las búsquedas, y eso supone mucho dinero para las páginas comerciales.



Naturalmente no es tan sencillo ... a cualquiera se le ocurriria que unas keywords como las del ejemplo atraerian visitantes como moscas ... por eso mucha gente, en lugar de hacer páginas atractivas, se conforma con incluir keywords atractivas, pensando que actuarán de cebo, y los buscadores incluyen filtros para evitarlo. Por ejemplo, el filtro mas sencillo es comprobar si en el texto del documento aparecen las palabras usadas como keywords.


HTTP-EQUIV


Las páginas web se distribuyen por internet mediante el protocolo http, que viene a regular el diálogo entre el servidor y el navegador. Pues bien, con estas etiquetas, el autor de la página puede predeterminar aspectos de este diálogo.



Su sintaxis general es:


<meta http-equiv="" content="" /> 

content-type


<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"/>

Con esta etiqueta META indicamos al navegador el tipo de documento que es nuestra página: si es un documento html, o un documento de texto plano, o cualquier otra cosa:



En el ejemplo, significaria que es un documento texto-html y que usa un juego de carácteres ISO-8859-1 (esto es, que no usa letras chinas, ni cirílicas, ni nada raro). Esta información es útil para que el navegador de nuestros visitantes sepa que juego de carácteres debe emplear.


refresh


<meta http-equiv="refresh" content="5" />
<meta http-equiv="refresh" content="5;url=http://www.ignside.net/otra.htm/" />

Mediante esta etiqueta y el valor refresh podemos indicar al navegador que debe recargar la página una vez transcurridos el tiempo de segundos especificado. En la primera linea se ve un refresh simple, con orden de recarga a los cinco segundos. En la segunda línea, un refresh con redirección. El navegador debe refrescar la página a los cinco segundos, recargando en su lugar la especificada.



Advierte como las comillas abarcan todo el contenido, incluyendo segundos y url.


expires


<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 2000 21:29:02 GMT">

Mediante la orden expires informamos de la vigencia del documento. Su utilidad principal es la de evitar que el navegador guarde indefinidamente en caché una página forzandole a cargar las nuevas versiones.


La fecha debe estar necesariamente en formato RFC840 (GMT), es decir:

dia_de_Semana, DD-Mon-YY HH:MM:SS TIMEZONE(Greenwich) todo ello en inglés



Por ejemplo Fri, 01 Jan 2003 07:20:55 GMT



Si la fecha está expresada en un formato distinto, el valor de expires será interpretado como now, es decir, se fija una caducidad inmediata.


pragma


Ordena al navegador que no almacene una copia cache de la página. Util cuando se trata de páginas dinamicas cuyo contenido cambia frecuentemente. Su unico valor aceptable es no-cache


<meta http-equiv="pragma" content="no-cache" />

set-cookie


Mediante esta metatag podemos enviar una cookie al navegador del usuario. Si contiene fecha de expiración, el navegador la conservará en el disco duro hasta dicha fecha; en caso contrario, se borrará al terminar la sesión de navegación.


<META HTTP-EQUIV="Set-Cookie"
CONTENT="nombre_cookie=valor_cookie;expires=fecha_valor;
path=/"
/>

Window-target


Sirve para especificar el nombre de la frame donde la página ha de ser cargada. Por ejemplo:


<META HTTP-EQUIV="Window-target" CONTENT="_top"> 

En fin, estas son las mas corrientes de entre las destinadas a tratar con los servidores; menos usadas son


<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> 
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

que informan respectivamente del tipo de lenguaje script utilizado, y del uso de CSS


Mas etiquetas, por favor


robots


Podemos dar instrucciones a los robots de los buscadores acerca de que páginas pueden incluir en sus bases de datos y cuales deben saltarse. Sus valores son index que indica que la página debe ser indexada; noindex es justo lo contrario, el robot debe saltarse esa página; follow pide al robot que siga los links que existan en la página e indexe las páginas resultantes; nofollow lo contrario. Los valores por defecto se entiende que son index, follow (separados por coma).


<META NAME="robots" CONTENT="noindex,follow">

Hay otras formas supuestamente mejores de tener tratos con los robots. Puedes enterarte como aqui.


PICS


Nada que ver con fotografias aqui (o si, indirectamente).



La etiqueta PICS se usa para facilitar la labor de filtrado de la página con arreglo a su contenido, advirtiendo de que puede tener, por ejemplo, contenido sexual, violencia o lenguaje ofensivo. Por ejempo:


<META http-equiv="PICS-Label" content='(PICS-1.1
"http://vancouver-webpages.com/VWP1.0/" l gen true comment "VWP1.0"
by "webmaster@ignside.net" on "2002.11.10T07:34-0800"
for "http://www.ignside.net" r (MC -1 Gam -1 Com 0 SF 0 Edu -2 S 0
Can 0 V 0 Env 0 P 0 Tol 0 ))'
/>

De utilidad dudosa (ya que la metatag por definicion la escribe el autor de la página), si tienes interés puedes probar este generador.


anti smart-tags


Las smart-tags fueron un invento de microsoft que sencillamente permitía alterar el contenido de una página web, insertando, insertandose enlaces aqui y allá al libre albedrío de sus creadores. El problema es que ya no es el autor de la página quien decide donde incluye links (y sobre todo, hacia donde enlaza) sino la propia microsoft. Naturalmente se levantó un clamor contra la idea, que de momento está aparcada.


<meta name="MSSmartTagsPreventParsing" content="TRUE">

(HTML) DOCTYPE

La declaración DOCTYPE


Si has leido estos apuntes desde el principio recordarás que una de las primeras cosas que se decian era que ninguna etiqueta precedia a la etiqueta html al comienzo del documento.



Tambien decíamos que la excepción era la declaración DOCTYPE. Es el momento de ocuparnos de ella.


DOCTYPE se refiere, obviamente, al tipo de documento. Mas técnicamente, podemos decir que un documento HTML válido debe declarar cual de las versiones de HTML está siguiendo, y puede además señalar la DTD (Document Type Definition) correspondiente.



Aunque luego los veremos con mas detalle, fíjate en la declaración de DOCTYPE html estricto, es decir, el que sigue con mas rigor el standard html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
... resto de la página ...

Donde vemos que en definitiva se trata de declarar al principio del documento cual es su contenido: en este caso, que se trata de un documento escrito en html, version 4.01, en inglés (Advierte que lo que se identifica como inglés no es el contenido del documento, sino el lenguaje de marcas utilizado. Los documentos HTML siempre deben estar marcados como EN); a continuación en la línea siguiente se incluye una URI (concepto similar a URL, pero mas amplio) donde el navegador puede obtener la DTD y descargarla si la precisa.


versiones de DOCTYPE en html


Limitándonos ahora al html, podemos decir que la version 4.01 (que va a ser la última, ya no hay mas, las siguientes serán xhtml y familia) admite tres tipos de documento:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

El primero es el que ya conocemos, html estricto, es decir, el mas ajustado al estandard. Un documento que se ajuste a esta declaración NO puede tener frames, ni elementos html que se hayan declarado en desuso. Para entendernos: en los documentos estrictos no puedes usar etiquetas html relacionadas con la presentación del texto, como el elemento font o el atributo align. Para esta finalidad debes usar solo CSS. Ajustarse plenamente a la sintaxis html puede ofrecer alguna dificultad, y por ello aunque es el modo recomendado por el W3C, en la práctica suelen usarse DOCTYPES mas tolerantes



El html transicional incluye todo lo que incluye el DTD estricto más los elementos y atributos declarados en desuso. Digamos que este es el tipo de declaración mas flexible, y la que se usa con mas frecuencia.



Por ultimo la tercera declaración se emplea para documentos html con frames, y es idéntica a la declaración de html transicional, solo que con dicho soporte para frames.


Utilidad práctica. Quirk mode v. standard mode


Las actuales versiones de mozilla 1+ (netscape 6+) y iexplorer (6+) cambian la forma en la que visualizan documentos html dependiendo de la DOCTYPE utilizada en el documento. En algunos caso lo visualizan ajustandose todo lo que son capaces a los standards oficiales ("Standard Mode"), mientras que en otro caso emulan la visualización (no ajustada a estos estandards) de los navegadores antiguos. Por ejemplo, Mozilla y Netscape tienen lo que llaman Quirk Mode que interpreta la página como lo haría la antigua version de netscape 4.x.



La razón de esto es que los diseñadores de navegadores son conscientes de que hay millones de páginas en internet que no están "bien escritas" desde el punto de vista del standard oficial, y que nunca van a ser corregidas. Estas páginas se solían ver razonablemente bien en los navegadores antiguos, mucho mas tolerantes (y a la vez imprecisos) en la interpretación de las etiquetas html. Para evitar que este legado de páginas no pudiera verse en los nuevos (e indudablemente mejores) navegadores, estos intentan determinar que a tipo de documento se enfrentan a traves del doctype, ajustando su visualización.


Mozilla


Mozilla tiene tres modos, que son standard, casi standard, y quirk mode.



El Quirk Mode, Mozilla se comporta como lo haría el Navigator 4, es decir, que ignorará cualquier irregularidad de código que encuentre, intentando mostrar el contenido a toda costa.



el modo casi standard emula al navigator en menor medida, y el modo standard se ajusta a las prescripciones del w3c.


Las siguientes DOCTYPE lanzan el modo standard:



  • Cualquier documento que llegue al navegador como XML

  • Cualquier documento que tenga un doctype correcto correspondiente a las versiones html 4.01, 4.0 o xhtml 1.0

  • Cualquier documento con DOCTYPE fijada como "DOCTYPE HTML SYSTEM"

  • Cualquier Doctype que no indique su DTD


El modo "casi standard" (solo existente en las versiones siguientes a Mozilla 1.0) se lanza:



  • Con los DOCTYPE correspondientes a XHTML transicional y frameset

  • Con los DOCTYPE correspondientes al HTML 4.01 transicional y frameset.


Y finalmente en quirk mode:

  • Cuando el documento carece de DOCTYPE

  • Cuando tiene una declaración DOCTYPE que no puede ser entendida (mal escrita, etc)

  • Cuando el DOCTYPE hace referencia a una versión de html anterior a la 4.0


Puedes ver con mas detalle el tema del quirk mode aqui.


iexplorer


Microsoft tambien tiene un modo de visualización "ajustado a los standard" que se lanza siempre que hay al comienzo del documento una declaración DOCTYPE valida, necesitandose además en algun caso incluir la URI de la DTD. (es decir, el DOCTYPE completo como mostramos al principio de esta pagina).



Este modo ajustado es desactivado cuando no existe declaración DOCTYPE, o si existe, pero no se refiere a ninguna versión concreta de HTML, o se refiere a una versión anterior a 4.0. (ojo, solo si esta version anterior es la 3.2, la 2.0 o la 2)



Si el DOCTYPE se refiere a HTML transicional o con soporte de frames, solo se lanza el modo estricto si ademas del DOCTYPE se adjunta la URI de la DTD.



También se lanza el modo estricto si la DOCTYPE se refiere a la version HTML 4.0strict o en general cuando se refiere a la versión 4.0 sin mas especificación.



Finalmente tambien se lanza el modo estricto si existe un DOCTYPE no reconocido, o si se refiere a las versiones HTML 1.0 o HTML 3.22.



Puedes ver una tabla completa aqui.


Opera


A partir de la versión 7.0 el navegador Opera tambien tiene dos modos de visualización, standard y quirk mode. Opera determina que modo utilizar en cada página siguiendo el mismo criterio que internet explorer 6.0 para windows. He aqui una tabla comparativa entre los tres navegadores.


Y encontrado por ahi en la red, un bookmarklet para comprobar en que modo se visualiza cada página: simplemente arrastra este link a la barra de enlaces de tu navegador y pulsalo cuando estes visualizando la página que deseas comprobar: Render Mode


Aparecerá un popup con alguno de los siguientes valores:



  • BackCompat: quirk mode (no standard)

  • CSS1Compat: standard mode

miércoles, octubre 19, 2005

(JAVASCRIPT) Corregir "bug" de IE para mostrar transparencia en PNG's

Para que el IE pueda mostrar “correctamente” nuestros PNGs con transparencias tenemos que añadir las siguientes líneas en las cabeceras HTML de nuestra web:



<!-- This solves the Internet Explorer PNG-transparency bug, but only for IE 5.5 and higher -->

<!--[if gte IE 5.5000]>

<script src="pngfix.js" type="text/javascript">

</script>

<![endif]-->



y copiar en nuestro servidor web el fichero pngfix.js:


function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.

{

for(var i=0; i<document.images.length; i++)

{

var img = document.images[i]

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

{

var imgID = (img.id) ? "id='" + img.id + "' " : ""

var imgClass = (img.className) ? "class='" + img.className + "' " : ""

var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

var imgStyle = "display:inline-block;" + img.style.cssText

var imgAttribs = img.attributes;

for (var j=0; j<imgAttribs.length; j++)

{

var imgAttrib = imgAttribs[j];

if (imgAttrib.nodeName == "align")

{

if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle

if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle

break

}

}

var strNewHTML = "<span " + imgID + imgClass + imgTitle

strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

img.outerHTML = strNewHTML

i = i-1

}

}

}

window.attachEvent("onload", correctPNG);

jueves, octubre 13, 2005

(OTROS)Menú CSS con li

Código en el CSS:
#header {
   float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
background:url("norm_right.gif") no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("norm_left.gif") no-repeat left top;
padding:5px 15px;
}
Código en el Body:

<div id="header">
  <ul>
<li><a href="#">Home$extension = ".zip"; // EXTENSION DE ARCHIVOS

if (file_exists("$archivo$extension")) {
header("location: $archivo$extension");
$file = fopen("contador/$archivo.txt","r"); // contador de downloads
$count = fread($file, 100);
$countplus = ($count + 1);
fclose($file);
$fileb = fopen("contador/$archivo.txt","w");
fwrite($fileb, $countplus, 100);
fclose($fileb);
}

else { echo "El archivo $archivo$extension no existe"; }

?>


2.- Seguidamente debeis crear en vuestro ftp una carpeta que se llame contador y le dais CHMOD 777

El download.php tiene que estar en el mismo directorio o carpeta donde esté el archivo a descargar. Para que el contador funcione correctamente debemos colocar todo en el mismo sitio.
* EJEMPLO:
Si tenemos un archivo para descargar llamado cancion.zip, pues download.php y el archivo cancion.zip lo meteremos en el mismo lugar, y la carpeta "contador" también. Y colocaremos la siguiente url para descargar el archivo:

http://tupagina.com/download.php?archivo=cancion

Para mostrar en cualquier lugar de tu página el número de descargas realizadas debereis colocar el siguiente código:



Debes saber que para cada archivo debes crear un .txt con su respectivo nombre, tantos archivos txt como archivos a descargar tengas o quieras saber sus estadisticas de descarga, que los subirás en la carpeta "contador", y les darás CHMOD 666.

(PHP) Contador básico


$counterFile = "visitas.txt";

function displayCounter($counterFile) {
$fp = fopen($counterFile,rw);
$num = fgets($fp,5);
$num = 1;
echo "$num";
exec( "rm -rf $counterFile");
exec( "echo $num > $counterFile");
}

if (!file_exists($counterFile)) {
exec( "echo 1 > $counterFile");
}

displayCounter($counterFile);
?>

miércoles, agosto 17, 2005

(FLASH) Para la certificación de Flash Designer

En donde se puede hacer el examen:

Testing Center Locator

Macromedia Testing Test Centers in Distrito Federal, Mexico
Test Centers - Sorted by CityPhone #AddressDirections
Centro de Transferencia de Tecnologia S.A. C.V.52-55-5687-5959
Insurgentes Sur 586 int 601
Colonia Del Valle, Delg. Benito Juárez
RFC CTT-001016-FL8
Ciudad de Mexico,Distrito Federal03100
directions
Centro Netec SA de C.V.52 5 488 32 35 -8012
World Trade Center P.9 Montecito No. 38
Col. Napoles
RFC-CNE-021015-IM2
Ciudad de Mexico,Distrito Federal03810
directions
Net Capacitaciones S.A. DE C.V.52-5515-3060
NCA030206-B58
Av. Revolución 374 Desp 202, Col.
San Pedro de los Pinos Del. Benito Juare
Ciudad de Mexico,Distrito Federal03800
directions
Uny-II Mexico5601-4424
San Lorenzo 1009 4° piso
Colonia del Valle
Ciudad de México,Distrito Federal03100
directions
Afina Sistemas52 55 5062-4600
Insurgentes Sur No. 617 piso 10
Col. Nápoles
México,Distrito Federal03810
directions
CompuEducacion011-5255- 52838260
Jaime Balmes No. 11 Edificio B piso 7
Colonia Los Morales Polanco
Mexico,Distrito Federal11510
directions
ITESM Campus Ciudad de Mexico52-55-5483-2020
Calle del Puente 222
Col. Ejidos de Huipulco; Tlalpan
Mexico,Distrito Federal14380
directions
SICAP52-5985-8585
Bosque de Duraznos 65 Despacho 601A
Col. Bosques de las Lomas
Mexico City,Distrito Federal11700
directions

(FLASH) Galería de fotos con XML

(FLASH) Galería de imágenes sin XML

Lee directamente del directorio.

(FLASH) Contador de páginas con PHPObject

viernes, agosto 12, 2005

(FLASH) Escalar con función Prototype

  1. Tenemos un movie clip que contiene un cuadro de texto dinámico llamado "título", sacamos 3 copias del clip al escenario y les ponemos nombre de instancia que terminen en número empezando de 0: let0, let1, let2, tenemos 3 clips con nombres.
  2. Escribir en el primer fotograma:

    var textos=["Opción 1", "Opción 2", "Opción 3"]
    for(i=0; i<=textos.length; i++){

    _root["let"+i].titulo=textos[i]
    }
  3. Función prototipo:
    Movieclip.prototype.cambiomas=function(){
    _xscale+=(200-_xscale)/5
    _yscale+=(200-_yscale)/5
    }
    Acabamos de crear una funcion "cambiomas" para aumentar el tamaño del clip, explico los cálculos: la idea es que el clip crezca no de un tirón sino como proceso...paso a paso, que se vea que crece, entonces usamos matemáticas: si 100 es el tamaño del clip (100%) el doble es 200, para simular un cambio a paso lento le restamos a 200 el valor del tamaño actual del clip y lo dividimos entre 5 (5, 6, 7 o lo que quieras, a menos cantidad más rápido) esto se debe a cositas sencillas: si dividimos: 100/10, sería 10, pero si es 100/20 sería 5...el cambio sería más lento (de 5 en 5) si se pone números más altos. El clip para al llegar a 200 ¿porque? porque su cálculo llegaría a un total de 200+=0.0...(léase 200-200).Mucho ojo con la supremacía en las operaciones en Flash: la suma es al último, primero va lo de entre parentesis, luego la división, luego la suma. Ve el diccionario de AS para más detalles "Precedencia de Operadores".
  4. La función de disminución tiene el mismo estilo:
    Movieclip.prototype.cambiomenos=function(){
    _xscale+=(100-_xscale)/5
    _yscale+=(100-_yscale)/5
    }
    Es decir el límite de disminución es el tamaño original: 100.
  5. Una vez que tenemos esto en el frame inicial pongamos falta invocar estas funciones desde los clips, dentro de cada clip va el mismo script:

onClipEvent(enterFrame){
/*Si el mouse se coloca sobre el clip pues se invoca a la
función de aumento*/
if(this.hitTest(_root._xmouse,_root._ymouse,true)){
this.cambiomas()
/*SINO (es decir si no está sobre el clip) se aplica la de
desaumento*/
}else{
this.cambiomenos()
}
}

(FLASH) Usos de la clase Tween

En inglés

(FLASH) Algunos extensiones

Algunas extensiones para Flash. Incluida la classe Tween

jueves, agosto 11, 2005

(FLASH) Clases Tween y Transition

(DISEÑO) Software de Diseño Libre

Software para diseño y además es libre:




Una página con algunos ejemplos:
InkPipe

(FLASH) Ecuaciones de Easing y transiciones

(FLASH) Efectos con actionscript

Exelentes, animaciones de mover objetos y otros.

(FLASH) Movie Clip Tweening prototypes

Librerías para mover Movie Clips:
http://laco.wz.cz/tween/
Otras librerías:
http://laco.wz.cz/tween/?page=benchmark

(FLASH) Arrastre y pegado de Movie Clips


  1. Crear 2 clips de película con los nombres clip1 y clip2.clip2 debe estar debajo de clip1.
  2. En el frame 1 de la película principal, escribir:

    stop();

    clip1inicioX = clip1._x;
    clip1inicioY = clip1._y;
    en donde cip1inicioX y clip1inicioY son las coordenadas iniciales del clip1.
  3. Incluir las acciones para arrastrar el clip:

    on (press) {

    startDrag("_root.clip1", true);

    }

    on (release) {

    stopDrag();

    if (_root.clip1.hitTest(_root.clip2)) {

    _root.clip1._x = _root.clip2._x;

    _root.clip1._y = _root.clip2._y;

    } else {

    _root.clip1._x = _root.clip1inicioX;

    _root.clip1._y = _root.clip1inicioY; }

    }

(FLASH) Creación de ventanas flotantes usando Clases

(FLASH) Tutorial de programación orientada a objetos

Para actionscrip. Esta para revisarse.

(FLASH) Creando objetos elásticos con propiedades de ancho y algo

  1. Dibujar un objeto (un cuadrado por ejemplo) y lo convertimos en MovieClip, con nombre "cuadro"(presionar F8).
  2. Arrastrar al escenario del panel de componentes Button y NumericStepper y los borramos del escenario. Ya están en la biblioteca.
  3. En el primer frame de la película escribir este código:

//Aqui estamos creando la funcion
cambiarXY = function () {
/* Lo que hace el evento "onEnterFrame es que en cada cuadro (frame) de
tu pelicula hara las acciones indicadas*/

this.onEnterFrame = function() {
/* this.cuadro._xscale se refiere a el objeto, en este caso MovieClip y su nombre
de instancia es "cuadro" y a su propiedad _xscale. Esta es la formula del efecto
easing: objeto._propiedad += (valor+objeto._propiedad)/velocidad */

this.cuadro._xscale += (X-this.cuadro._xscale)/3;
/*Aqui hacemos que revise si el el valor de la propeidad del objeto es la misma de la
variable */

this.cuadro._yscale += (Y-this.cuadro._yscale)/3;
//Si el valor de la propiedad es igual a la variable quitamos el evento "onEnterFrame"
if (Math.abs(X-this.cuadro._xscale)<3 class="sIdentificador">Math.abs(Y-this.cuadro._yscale)<3) class="sKeyword">delete this.onEnterFrame;
}
};
};

Ahora los componentes:

/* attachamos los componentes (mandamos llamar a los componentes que estan en la libreria) y les
asignamos un nombre y un nivel (no pueden estar en el mismo nivel) */

attachMovie("Button", "btn", 1);
//attachtMovie (El nombre del objeto que esta en nuestra biblioteca, el nuevo nombre, el nivel);
attachMovie("NumericStepper", "num1", 2);
attachMovie("NumericStepper", "num2", 3);
//Aqui cambiamos sus propiedades
btn._x = 135;
btn._y = 174;
btn.setSize(54, 20);
btn.fontFamily = "_sans";
btn.fontSize = 10;
btn.label = "Cambiar!";
num1._x = 9;
num1._y = 173;
num1.setSize(55, 13);
num2._x = 74;
num2._y = 173;
num2.setSize(55, 13);
num1.maximum = 150;
num1.minimum = 0;
num1.stepSize = 1;
num1.value = 100;
num2.maximum = 150;
num2.minimum = 0;
num2.stepSize = 1;
num2.value = 100;


Y por último el listener:

//Creamos un nuevo objeto; miClick
miClick = new Object();
//Al objeto lo hacemos funcion en el evento "click" (este evento solo funciona en los componentes UI)
miClick.click = function() {
/* Tomamos el valor de los numericsteppers y se los pasamos a las variables X e Y (son las que
indicaran el valor que queremos darle a la propiedad del objeto) */

X = num1.value;
Y = num2.value;
//Aqui llamamos al a función cambiarXY
cambiarXY();
};
//Y ahora le añadimos la funcion a nuestro boton
btn.addEventListener("click", miClick);

miércoles, agosto 10, 2005

(DISEÑO) Origen de Lorem Ipsum

El texto conocido como "dummy" para los bocetos o maquetas para un diseño de una revista, página, etc, donde es necesario simular una gran cantidad de texto, esconocido por sus dos palabras iniciales "Lorem Ipsum".

Pero es por pocos sabido lo que en realidad significa; sacado de un extracto del libro "Finibus Bonorum et Malorum" (Los extremos del bien y el mal) de Marcus Tullius Cicero escrito hacia 45B.C.(el cual cabe mencionar es un tratado de teoría de ética) de la seccion 1.10.32 y 1.10.33, este texto fué escogido por un impresor en los inicios de la imprenta y desordenó el texto, dejándolo como actualmente lo conocemos, esto quiere decir que en sí este texto no significa absolutamente nada.

“Finibus Bonorum et Malorum” comenzaba diciendo: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit… No hay nadie que ame el dolor mismo, que lo busca y lo quiera tener, simplemente por que es el dolor.

Sitios como loremipsum.net ofrecen el servicio de simulación de texto que se ajusta a tus necesidades, es decir, si quieres desde un párrafo hasta n, si quieres que lleve ciertos caracteres, acentos, etc.

Una muestra de este texto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Para más referencias:

Finibus Bonorum et Malorum traducido: http://www.atomic-swerve.net/jardin/finibus/
Sitio de Lorem Ipsum: http://www.loremipsum.net/index.html