Diferencias entre Actionscript 2 y Actionscript 3

27 jul 2010 Autor: admin En: GENERAL

Todos sabemos que los cambios en versiones de lenguajes de programación a veces acarrean modificaciones importantes y distintas formas de programar.

Es el caso precisamente de Adobe Flash, cambiando su forma de programar desde su versión AS2 hasta su última versión AS3. Ahora mismo estoy afrontando un proyecto web en el que tengo que escribir código AS3, por cierto bastante distinto a como lo hacia en As2, y la verdad es que me ha costado lo mio encontrar según que cosa, por eso, quiero hacer una pequeña recopilación de diferencias entre AS2 y AS3:

Acceder al root o main del contenido

Actionscript 2

PLAIN TEXT
Actionscript:
  1. //function on main timeline
  2. function foo():Void
  3. {
  4. trace("foo");
  5. }
  6. //called from anywhere in content
  7. _root.foo();

Actionscript 3

PLAIN TEXT
Actionscript:
  1. //function on main timeline
  2. function foo():void
  3. {
  4. trace("foo");
  5. }
  6. //called from anywhere in SWF
  7. MovieClip(root).foo();

Interactuar con botones

Actionscript 2

PLAIN TEXT
Actionscript:
  1. function onButtonRelease():Void
  2. {
  3. trace("button was clicked");
  4. }
  5. function onButtonRollOver():Void
  6. {
  7. trace("button was moused over");
  8. }
  9. my_button.onRelease = onButtonRelease;
  10. my_button.onRollOver = onButtonRollOver;

Actionscript 3

PLAIN TEXT
Actionscript:
  1. function onButtonClick(event:MouseEvent):void
  2. {
  3. trace("button was clicked");
  4. }
  5. function onMouseOver(event:MouseEvent):void
  6. {
  7. trace("button was moused over");
  8. }
  9. my_button.addEventListener(MouseEvent.CLICK, onButtonClick);
  10. my_button.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);

Abris una URL

Actionscript 2

PLAIN TEXT
Actionscript:
  1. getURL("http://www.adobe.com", "_blank");

Actionscript 3

PLAIN TEXT
Actionscript:
  1. var url:URLRequest = new URLRequest("http://www.adobe.com");
  2. navigateToURL(url, "_blank");

Escuchador para hacer algo cuando se presiona una tecla

Actionscript 2

PLAIN TEXT
Actionscript:
  1. function onKeyDown():Void
  2. {
  3. var code:Number = Key.getCode();
  4. var char:String = String.fromCharCode(code);
  5. trace("Key Down : code : " + code + " char : " + char);
  6. }
  7. Key.addListener(this);

Actionscript 3

PLAIN TEXT
Actionscript:
  1. function onKeyDownHandler(event:KeyboardEvent):void
  2. {
  3. var code:uint = event.keyCode;
  4. var char:String = String.fromCharCode(code);
  5. trace("Key Down : code : " + code + " char : " + char);
  6. }
  7. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyDownHandler);

Instanciar (Attach) un MovieClip de la librería

Actionscript 2

PLAIN TEXT
Actionscript:
  1. attachMovie("my_clip", "clip", 10);
  2. clip._x = 100;
  3. clip._y = 100;
  4. clip._alpha = 50;

Actionscript 3

PLAIN TEXT
Actionscript:
  1. var clip:MovieClip = new my_clip();
  2. clip.x = 100;
  3. clip.y = 100;
  4. clip.alpha = .5;
  5. addChild(clip);

Crear y pintar un MovieClip dinámicamente

Actionscript 2

PLAIN TEXT
Actionscript:
  1. function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number)
  2. {
  3. var x:Number = radius;
  4. var y:Number = radius;
  5. with (target_mc)
  6. {
  7. beginFill(fillColor, fillAlpha);
  8. moveTo(x + radius, y);
  9. curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) *
  10. radius + x, Math.sin(Math.PI / 4) * radius + y);
  11. curveTo(Math.tan(Math.PI / 8) * radius + x, radius + y, x, radius + y);
  12. curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) *
  13. radius + x, Math.sin(Math.PI / 4) * radius + y);
  14. curveTo(-radius + x, Math.tan(Math.PI / 8) * radius + y, -radius + x, y);
  15. curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) *
  16. radius + x, -Math.sin(Math.PI / 4) * radius + y);
  17. curveTo(-Math.tan(Math.PI / 8) * radius + x, -radius + y, x, -radius + y);
  18. curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) *
  19. radius + x, -Math.sin(Math.PI / 4) * radius + y);
  20. curveTo(radius + x, -Math.tan(Math.PI / 8) * radius + y, radius + x, y);
  21. endFill();
  22. }
  23. }
  24. createEmptyMovieClip("circle_mc", 10);
  25. circle_mc._x = 250;
  26. circle_mc._y = 250;
  27. drawCircle(circle_mc, 250, 0xFFe0AC, 50);

Actionscript 3

PLAIN TEXT
Actionscript:
  1. var clip:MovieClip = new MovieClip();
  2. addChild(clip);
  3. clip.x = 250;
  4. clip.y = 250;
  5. clip.graphics.lineStyle(2, 0xF89950);
  6. clip.graphics.beginFill(0xFFe0AC, .5);
  7. clip.graphics.drawCircle(0, 0, 200);

Poner un color a un MovieClip dinámicamente

ActionScript 2

PLAIN TEXT
Actionscript:
  1. var clip:MovieClip = attachMovie("circle_clip", "circle_clip", 1);
  2. clip._x = 100;
  3. clip._y = 100;
  4. function onStageClick():Void
  5. {
  6. var c:Color = new Color(clip);
  7. c.setRGB(Math.random() * 0xFFFFFF);
  8. }
  9. onMouseUp = onStageClick;

ActionScript 3

PLAIN TEXT
Actionscript:
  1. var clip:MovieClip = new circle_clip();
  2. clip.x = 100;
  3. clip.y = 100;
  4. addChild(clip);
  5. function onStageClick(event:MouseEvent):void
  6. {
  7. var c:ColorTransform = new ColorTransform();
  8. c.color = (Math.random() * 0xFFFFFF);
  9. clip.transform.colorTransform = c;
  10. }
  11. stage.addEventListener(MouseEvent.CLICK, onStageClick);

Incluir sonido y que se escuche

ActionScript 2

PLAIN TEXT
Actionscript:
  1. function onSoundComplete():Void
  2. {
  3. trace("sound is completed");
  4. }
  5. var my_sound:Sound = new Sound();
  6. my_sound.attachSound("beep_id");
  7. my_sound.setVolume(50);
  8. my_sound.onSoundComplete = onSoundComplete;
  9. my_sound.start();

ActionScript 3

Para utilizar esta opción en AS3 hay que darle a propiedades del sonido (mp3) y activar "Export For ActionScript" y "Export in Frame 1" poniendole como nombre de clase "beep_id"

PLAIN TEXT
Actionscript:
  1. function onSoundComplete(event:Event):void
  2. {
  3. trace("sound is completed");
  4. }
  5. var my_sound:Sound = new beep_id();
  6. var sTransform:SoundTransform = new SoundTransform();
  7. sTransform.volume = .5;
  8. var channel:SoundChannel = my_sound.play();
  9. channel.soundTransform = sTransform;
  10. channel.addEventListener(Event.SOUND_COMPLETE, onSoundComplete);

Cargar y mostrar una imagen dinámicamente

ActionScript 2

PLAIN TEXT
Actionscript:
  1. createEmptyMovieClip("loader", 10);
  2. loader.loadMovie("image.png");
  3. loader._x = 100;
  4. loader._y = 100;
  5. loader._rotation = 20;
  6. loader._alpha = 50;

ActionScript 3

PLAIN TEXT
Actionscript:
  1. var loader:Loader = new Loader();
  2. loader.load(request);
  3. loader.x = 100;
  4. loader.y = 100;
  5. loader.rotation = 20;
  6. loader.alpha = .5;
  7. addChild(loader);

Fontfonter – Ver sitios web con otras tipografías

27 jul 2010 Autor: admin En: DESARROLLO, DISEÑO, recursos

A la hora de crear un sitio web siempre existe la duda del tipo de fuente que quedaría mejor y claro, tiramos de nuestro repositorio local de tipografías. Pero hay una nueva forma de probar otros tipos de fuentes de una manera muy sencilla y sobre todo ágil sin tener que recurrir a nuestras fuentes locales.

FontFonder es un servicio online que nos permite cambiar temporalmente la fuente usada en una web por otra que indiquemos dentro de una lista desplegable que nos proporciona. Sólo nos hace falta una URL del sitio web para ponerla en el campo correspondiente y en el siguiente paso elegir el tipo de fuente.

Fontfonter - Ver sitios web con otras tipografías

La verdad es que puede ser de utilidad para ver como quedaría cada tipografía en tu sitio web, pero en la mayoría de los casos no regalan nada, es decir, que hay algo detrás de lo gratuito. En este caso se trata de una tienda online de tipografías cuyo propósito es captar clientes y en el caso de que la tipografía usada sea de tu gusto la web te enviará a esta tienda online para comprarla y como bien dicen en Wwwhat's New, son bastante caras.

De todas maneras es una buena forma de ver como quedaría y en caso de tener el suficiente presupuesto y ganas de gastarse dinero en esa fuente no es mala opción.

En la página principal hay ejemplos de webs conocidas como Gmail, Twitter y Digg con tipografías cambiadas.

Vía: Wwwhat's New

Cómo insertar videos de youtube con tecnología HTML5

26 jul 2010 Autor: admin En: flash, html5

Youtube fue uno de los primeros que se puso manos a la obra con la tecnología HTML5, apostando por el futuro y dejando atrás sistemas, en ocasiones vulnerables, como Flash. De hecho, hay una beta limitada que permite ver sus videos en esta estupenda tecnología, aunque para eso el usuario tiene que disponer de Chrome o Safari y estar suscrito a la versión beta.

A través de Techtástico, blog de Carlos Leopoldo, nos informa de una menera de insertar videos de youtube con HTML5 en lugar de Flash.

A día de hoy no está disponible en la web de Youtube un enlace con el que directamente podamos incrusar un video en nuestro sitio, pero si hay una manera de insertar videos de youtube en HTML5, modificando un pequeño dato:

El código original para incrustar un video en Youtube es el siguiente:

PLAIN TEXT
HTML:
  1. <iframe type="text/html" width="640" height="385" src="http://www.youtube.com/watch?v=pRpeEdMmmQ0" frameborder="0"></iframe>

Para poder incrustar ese mismo video pero con tecnología HTML5, tan sólo tendremos que modificar esas lineas de códigos por esta:

PLAIN TEXT
HTML:
  1. <iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/pRpeEdMmmQ0" frameborder="0"></iframe>

Si os fijais, se ha quitado dondep onia watch?v=ID, y se ha puesto embed/

Una menera fácil de cambiar de tecnología.

Vía: Techtastico

Tarjeta de visita con realidad aumentada

23 jul 2010 Autor: admin En: CURIOSIDADES, DESARROLLO, DISEÑO, flash

Muy chulo, disfrutad con esta realidad aumentada.

Vía: Clipdepelicula.com

CloudCanvas – Suite de edicion de imágenes online creado en HTML5

23 jul 2010 Autor: admin En: DISEÑO, PHOTOSHOP

Si no tienes Photoshop y quieres editar imágenes online con un excelente detalle, CloudCanvas es la solución que estabas buscando.

Aunque lo que he dicho hasta ahora no es algo novedoso, ya que existen multitud de páginas para tal fin, lo que si resulta atractivo es la tecnología que utilizan para dar servicio.

CloudCanvas - Edición de imágenes online creado con HTML5

CloudCanvas es una aplicación gratuita creada en HTML5, siendo lo que le distingue de la mayoría de estos sercicios, ademas de:

  • Integración con Google Images y DevianArt para importar imágenes
  • Soporta imágenes vectoriales y mapa de bits
  • Cuenta con 500 tipos fuentes
  • Tiene 30.000 plantillas

Para promocionarse, han creado un concurso en el que a las 3 imágenes más creativas creadas con su servicio web serán premiadas con 500$.

Vía: TechCrunch

Posteado: 1:29 pm

Post similares:

Pages (252): 1 2 3 4 » ... Last »

Sobre Colordeu

Colordeu creado a partir de la ambicion de gente joven, esta constituido por personal con experiencia, creativa y motivada, Respaldado por un equipo competente y colaboradores con proyectos importantes en el sector, ofrecemos a nuestros clientes un abanico de posibilidades en cuanto a las nuevas tecnologias. Este blog sobre de diseño, tecnologia, programacion, internet y curiosidades es nuestro caramelito y queremos compartirlo con todos vosotros.

Suscríbete por e-mail:


Sponsors

 

agosto 2010
L M X J V S D
« jul    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Copyright © 2007 - colorate - is proudly powered by WordPress
Dilectio Theme ha sido creado por: Design Disease descargado de Smashingmagazine.com