Adobe mata a Flash y lanza Adobe Edge, su plataforma de animaciones HTML5, Javascript y CSS3

No he podido creer la noticia, después de haber invertido millones de dólares en el desarrollo de Flash, de haber escrito y reescrito ActionScript; Adobe se "echa" ante lo nuevo y reemplaza a Flash por HTML5, JavaScript y CSS3.

Lo hace mediante Edge, la herramienta por ahora gratuita que genera animaciones e interaccion del usuario.

Adobe Edge

La herramienta la puedes usar gratis por sólo 152 días desde su instalación.

Probando un poco he visto que para las animaciones usan jQuery y otras herramientas propias de Adobe. La interfaz recuerda a Lightroom pero el uso del timeline es igual a Flash. El código resultante es limpio y fácil de editar. Personalmente le veo mucho futuro.

HTML:

<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Untitled-1_edge.js"></script>
    <link rel="stylesheet" href="Untitled-1_edge.css"/>
 

Javascript que se usa en un ejemplo

Las características que más me llaman la atención las pongo en negrita:

  • Crea nuevas composiciones con las herramientas de dibujo y texto.
  • Importa los tipos de imágenes SVG, PNG, JPG or GIF files.
  • Crea animaciones con un editor de línea de tiempo. Anima posición, tamaño, color, fondo, rotación y más.
  • Añade archivos HTML existentes con animación, mientras se preserva la integridad de los layouts.
  • Copia y pega transiciones, las invierte y se puede escoger entre más de 25 efectos existentes.

Otras características se añadirán poco a poco, si quieres estar informado puedes seguir la página en Facebook o la cuenta en Twitter.

Enlace: Adobe Edge Preview

css3.me: Otro generador de CSS3

css3.me te permite generar código CSS3 y mostrarte los resultados en vivo.

Css3.me

Para poder obtener los resultados lo único que tienes que hacer es arrastrar las barras, o si deseas resultados más personalizados puedes dar click al ícono (+) y cambiar los valores a tu gusto. Podemos elegir las siguientes propiedades:

  • border-radius.
  • box-shadow.
  • background-gradient.
  • opacity.

También puedes obtener código que funcione en IE7 e IE8.

Enlace: css3.me.

Visto en: Veerle.

Crea prefijos de CSS3 fácilmente con -prefix-my-css

Ahora que el CSS3 no está aun soportado por la mayoría de navegadores, muchas veces tenemos que crear prefijos para ciertas reglas de CSS3 en nuestra hoja de estilos.

-prefix-my-css

Esto podría ser un trabajo tedioso, sin embargo –prefix-my-css permite crear los prefijos rápidamente y nos permite elegir como tendremos nuestro producto final.

Por ejemplo, si le damos:

CSS:

/* Just a sample code */
#menu{
width:200px;
height:400px;
border-radius:15px;
box-shadow:0 0 5px black;
background:#1D1D1D;
}

nos devuelve:

CSS:

/* Just a sample code */
#menu{
width:200px;
height:400px;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;
/*box-shadow*/
-webkit-box-shadow:0 0 5px black;
   -moz-box-shadow:0 0 5px black;
        box-shadow:0 0 5px black;
background:#1D1D1D;
}

Sin duda una gran herramienta

Enlace: prefixMyCSS