How to create a Draggable item using Simple Class Generator for AS3 (video)

Simple Class Generator for Actionscript 3.0

This application allows you to create Actionscript 3.0 bound movie clip classes or document classes in an wizard-like way.

• Create Actionscript 3.0 classes that extend from MovieClip or Sprite.
• Create public and private variables.
• Create setter and getters for private variables.
• Create public and private methods.
• Create event functions.
• Add custom actionscript code to your constructor, methods, event handlers and setters.
• Add helpful code snippets.
• Inspectable tags for component classes.
• ASDoc tags for constructor and public methods.
• Copy classes to your clipboard and save them in actionscript files (.as) for further editing in the Flash IDE.

Example of generated code:

package{
 import flash.text.*;
 import flash.display.*;
 import flash.events.*;
 /**
 * This class was authored using Simple Class Generator
 * by Emmanuel Ulloa (http://emmanuelulloa.blogspot.com/)
 * @author Your Name Here
 */
 public class Window extends MovieClip {
  public var isOpen:Boolean = false;
  private var titleTextField:TextField = new TextField();
  public function Window(){
   super();
   trace("New Window Instance");
   addChild(titleTextField);
   close();
   close_btn.addEventListener(MouseEvent.CLICK, close_btn_clickListener);
   background_mc.addEventListener(MouseEvent.MOUSE_DOWN, background_mc_mouseDownListener);
   background_mc.addEventListener(MouseEvent.MOUSE_UP, background_mc_mouseUpListener);
  }
  /**
  * close(): description
  * @return void
  */
  public function close():void{
   this.visible = false;
   isOpen = false;
  }
  /**
  * open(): description
  * @return void
  */
  public function open():void{
   this.visible = true;
   isOpen = true;
  }
  private function close_btn_clickListener(e:MouseEvent):void{
   close();
   
  }
  private function background_mc_mouseDownListener(e:MouseEvent):void{
   parent.addChild(this);
   this.startDrag();
   
  }
  private function background_mc_mouseUpListener(e:MouseEvent):void{
   this.stopDrag();
   
  }
  private var _titleText:String = "untitled";
  [Inspectable( name="titleText", type="String", defaultValue="untitled")]
  public function get titleText():String{ return _titleText; }
  public function set titleText(value:String):void{ 
    _titleText = value;
   titleTextField.text = _titleText;
  }
 }
}

Screenshot

Click here to open the application

---

Como crear una imagen de perfil para su página en Facebook

Ahora vamos a empezar a cambiar el diseño de nuestra página. El primer cambio gráfico será la imagen de perfil (conocida también como ícono o avatar). Actualmente luce así:

Es un símbolo de interrogación. Cambiar la imagen de su página es tan simple como hacerlo en su perfil de Facebook. Vaya a su página y posiciónese sobre la imagen del símbolo de interrogación. Aparecerá un botón que dice "Change Picture".

Al presionarlo saldrán las siguientes opciones:

Como puede observar a partir de ahí puede subir una imagen de su disco duro, tomar una foto utilizando una webcam, o escoger una foto de un album.

Consideraciones

A la hora de escojer una imagen para su página tenga en cuenta las siguientes consideraciones de contenido:

1. ¿Qué es lo primero en lo que piensa la gente cuando escucha su nombre comercial? ¿Un logotipo, una mascota, la fachada de un edificio?
2. ¿Cómo se verá la imagen en tamaño pequeño?
3. ¿Que percepciones puede tener un extranjero sobre su imagen? Si su página fuera sobre un restaurante llamado "Gallo Pinto", ¿será clara la foto de un plato de arroz y frijoles o es mejor una imagen de un gallo? ¿Quizás sea mejor una foto de la fachada del restaurante?
4. Los colores son lo suficientemente atractivos para diferenciarse del esquema general de Facebook?

Las siguientes son consideraciones técnicas:

1. El tamaño máximo es de 200 pixeles de ancho por 600 pixeles de alto
2. No se pueden usar png's o gif's transparentes (sin embargo veremos un metodo para jugar con el diseño de Facebook).

Si sube una imagen del tamaño máximo, para un visitante a su página, esta luciría así:

En cualquier otro tab se vería así:

Usted puede editar el "thumbnail" o versión pequeña de su imagen de perfil a través de la opción "Change Picture">"Edit Thumbnail"

Usando las imágenes de perfil de forma creativa

Si utiliza una imagen como la siguiente de base para sus diseños:

Guardar imagen

Podrá crear un diseño como el siguiente:

Cómo puede observar, la imagen parece transparente y con el efecto de sombra, parece que flota. Además la parte superior de la imagen es cuadrada, por lo cual se presta para un excelente "thumbnail":

Aquí puede observar el diseño final de la página: Cursos certificados por Emmanuel Ulloa

---