FlashFrameLess - Porque ActionScript é melhor e mais leve

StageVideo

2010-11-28T00:09:00.007-02:00

Foi apresentado no Max Sneaks 2010 pelo saudoso Tinic Uro, um dos muitos melhoramentos de performances que estão sendo implementados no Flash Player. Vale a pena dar uma olhada e ficar impressionado. Isso vai melhorar e muito nossa vida na hora de criar um site com BG em vídeo, coisa que tem se tornado bastante comum.

Operações binárias

2009-06-07T22:41:00.004-03:00

Ultimamente tenho me deparado com muitos trechos de códigos que utilizam operações binárias, como chaveamento de multiplexador, extração de RGB a partir de um inteiro ou hexadecimal, bitshift para controlar LED Matrix, etc... E finalmente dei aquela estuda, agora vai ai um post sobre o que resultou o estudo.

Obs.: Os trechos de códigos deste post foram escritos em ActionScript, mas pode ser aplicado a C, C++, Java, Processing, PHP, entre outras linguagens.

• Introdução
• Bit Shift
   • Operador >> (bitwise right shift)
   • Operador << (bitwise left shift)
• Operações Bitwise
   • Operador & (bitwise AND)
   • Operador | (bitwise OR)
   • Operador ^ (bitwise XOR)
   • Operador ~ (bitwise NOT)
• Exemplos
   • Extraindo o RGB de uma cor
   • Chaveando multiplexador 4051

Introdução
Um operador binário, como o nome sugere, é um operador que trabalha com a representação binária do número, e como normalmente não sabemos a representação binária dos números de cabeça, vamos utilizar a tabela abaixo:

 -----------------------
|      BIN |  DEC | HEX |
|-----------------------|
|        1 |    1 |   1 |
|       10 |    2 |   2 |
|       11 |    3 |   3 |
|      100 |    4 |   4 |
|      101 |    5 |   5 |
|      110 |    6 |   6 |
|      111 |    7 |   7 |
|     1000 |    8 |   8 |
|     1001 |    9 |   9 |
|     1010 |   10 |   A |
|     1011 |   11 |   B |
|     1100 |   12 |   C |
|     1101 |   13 |   D |
|     1110 |   14 |   E |
|     1111 |   15 |   F |
|    10000 |   16 |  10 |
|    10001 |   17 |  11 |
|    10010 |   18 |  12 |
|    10011 |   19 |  13 |
|    10100 |   20 |  14 |
|-----------------------|
| 11111111 |  255 |  FF |
 -----------------------

A tabela lista os números de 1 à 20 e 255 em três bases diferentes:
• Binário (BIN)
• Decimal (DEC)
• Hexadecimal (HEX)

Analisando a tabela podemos concluir que 3d = 11b, 19d = 10011b (as letras d e b significam decimal e binário respectivamente). Lembrando que pode ser utilizada uma calculadora que opere em binário (como a do windows) ou uma alternativa de conversão de bases on-line como está: "Conversão de número binário".

Então vamos deslocar, escorregar, escovar alguns bits para entender melhor.

Operador >>
Deslocamento de bits para a direita (bitwise right shift)

trace(8 >> 1); // 4
trace(8 >> 2); // 2
trace(8 >> 3); // 1
trace(8 >> 4); // 0

Olhando os números na base decimal faz pouco sentido, ou talvez nenhum sentido, então passamos os números corretos para a base binária e tudo fica mais claro:
8d = 1000b (8 decimal é igual a 1000 em binário), então:
1000b >> 1 (deslocando uma casa para direita) temos o número:
100b que em decimal é 4(dê uma olhada na tabela).

Agora ficou fácil não? Vamos deslocar o número 13:
trace(13 >> 1); // 6
13 em binário é 1101, deslocando uma casa para a direita (ou removendo 1 bit), fica 110, e 110 é igual a 6 em decimal.

Operador <<
Deslocamento de bits para a esquerda (bitwise left shift)

trace(2 << 1); // 4
trace(2 << 2); // 8
trace(2 << 3); // 16

Agora é só seguir o mesmo raciocino já utilizando anteriormente.
Se 2 em base binária é igual a 10 e deslocarmos um bit para esquerda, vamos ganhar mais um zero, ficando com 100 que é igual a 4 em decimal.

Operador &
AND binário (bitwise AND)
O operador & compara bit a bit os números a sua direita e esquerda, por exemplo o resultado de 10 & 11 é 10:


  1010
& 1011
------
  1010

A comparação bit-a-bit somente retorna True (1) quando os bits comparados são iguais a 1, caso contrário retorna False (0). Formando assim um novo número.
Mais alguns exemplos para fortalecer:


|14 &  9|13 & 11|20 &  9|14 & 10|89 &  112|45  &  77|255  &  13|112 &  255|
|       |       |       |       |         |         |          |          |
|  1110 |  1101 |  10100|  1110 |  1011001|   101101|  11111111|   1110000|
|& 1001 |& 1011 |&  1001|& 1010 |& 1110000|& 1001101|&     1101|& 11111111|
|  ---- |  ---- |  -----|  ---- |  -------|  -------|  --------|  --------|
|  1000 |  1001 |      0|  1010 |  1010000|     1101|      1101|   1110000|
|    8d |    9d |     0d|   10d |      80d|      13d|       13d|      112d|

Operador |
OR binário (bitwise OR)
O operador | tem a mesma função do operador OR comum (||) só que atua bit-a-bit, assim como os outros operadores binários. Vejamos um exemplo:


  1010
| 1011
------
  1011

Se um dos bits comparados forem iguais a 1 a expressão retornará 1, caso os dois bits comparados forem iguais a 0, a expressão retorna 0. Agora vamos refazer o exemplo anterior trocando apenas o operador & (and binário) por | (or binário):


|14 |  9|13 | 11|20 |  9|14 | 10|89 |  112|45  |  77|255  |  13|112 |  255|
|       |       |       |       |         |         |          |          |
|  1110 |  1101 |  10100|  1110 |  1011001|   101101|  11111111|   1110000|
|| 1001 || 1011 ||  1001|| 1010 || 1110000|| 1001101||     1101|| 11111111|
|  ---- |  ---- |  -----|  ---- |  -------|  -------|  --------|  --------|
|  1111 |  1111 |  11101|  1110 |  1111001|  1101101|  11111111|  11111111|
|   15d |   15d |    29d|   14d |     121d|     109d|      255d|      255d|

Operador ^
OU exclusivo (bitwise XOR)
A letra X na frente do OR significa Exclusive (Exclusive OR). Isso quer dizer que este operador faz a comparação binária de dois números e resulta os bits que são diferentes. Por exemplos, quais são os bits diferentes entre os números 10 e 11?


  1010
^ 1011
------
     1

Vamos novamente trocar o operador do exemplo anterior para analisar os resultados:


|14 ^  9|13 ^ 11|20 ^  9|14 ^ 10|89 ^  112|45  ^  77|255  ^  13|112 ^  255|
|       |       |       |       |         |         |          |          |
|  1110 |  1101 |  10100|  1110 |  1011001|   101101|  11111111|   1110000|
|^ 1001 |^ 1011 |^  1001|^ 1010 |^ 1110000|^ 1001101|^     1101|^ 11111111|
|  ---- |  ---- |  -----|  ---- |  -------|  -------|  --------|  --------|
|   111 |   110 |  11101|   100 |   101001|  1100000|  11110010|  10001111|
|    7d |    6d |    29d|    4d |      41d|      96d|      242d|      143d|

Operador ~
Negação (bitwise NOT)
O operador NOT inverte o sinal e complementa em um.
Negando o número 168 (~168) teremos -169.

Alguns exemplos:
trace(~7); // -8 trace(~-7); // 6 trace(~14); // -15 trace(~13); // -14 trace(~255); // -256 trace(~112); // -113

Extraindo o RGB de uma cor
Sabendo que uma cor no formato RGB utiliza dois dígitos hexadecimais para definir quanto existe de Vermelho, Verde e Azul (respectivamente), formando cores como: Vermelho (FF0000), Cinza (C0C0C0), Laranja (FF9900), etc. Temos ai a possibilidade de gerar 16.581.375 de cores com este código, é só fazer a conta para conferir: 255 * 255 * 255 ou FF * FF * FF.
Vamos desmembrar um tom de azul (#347BB7) para saber quanto esta cor tem de Vermelho, Verde e Azul (o valor dos canais RGB).

// DEC: 3439543
// BIN: 1101000111101110110111
var color:uint = 0x347BB7;

var r:uint = (color >> 16) & 0xFF;
var g:uint = (color >>  8) & 0xFF;
var b:uint =  color        & 0xFF;

trace("Red:", r, "Green:", g, "Blue:", b);
// Red: 52 Green: 123 Blue: 183

Linha 5) Deslocando 16 bits para a direita temos:


  1101000111101110110111 >> 16
=                 110100 (DEC: 52)

Para o caso do vermelho não precisamos continuar a expressão (& 0xFF),
pois deslocando 16 bits para a direita já temos o resultado do vermelho,
mas se a cor estivesse no formato ARGB (Alpha Red Green Blue), seria necessário.

Linha 6) Deslocando 8 bits para conseguir o verde:


  1101000111101110110111 >> 8
=         11010001111011 (DEC: 13435)

Só com o valor do deslocamentos não vamos conseguir a cor verde, então utilizamos o
operador & (AND) com o valor 255 (0xFF) para extrair a parte binária que nos interessa:


  11010001111011 (DEC: 13435)
&       11111111 (DEC: 255, HEX: 0xFF)
  --------------
        01111011 (DEC: 123)

Linha 7) Para extrair o azul não precisamos deslocar bits e sim pegar os últimos 8 bits:


  1101000111101110110111
&               11111111 (DEC: 255, HEX: 0xFF)
  ----------------------
                10110111 (DEC: 183)

Agora voltando para o hexadecimal:

var r:uint = 52;
var g:uint = 123;
var b:uint = 183;
var color:uint = (r << 16) | (g << 8) | b;

trace(color.toString(16));
// 347bb7

Linha 4) Deslocando 16 bits para a esquerda do número 52 (Vermelho):


  110100 << 16
= 1101000000000000000000

Deslocando 8 bits para a esquerda do número 123 (Verde):


  1111011 << 8
= 111101100000000

Efetuando o OR (|) com o resultado das duas operações ((r << 16) | (g << 8)):


  1101000000000000000000
|        111101100000000
  ----------------------
  1101000111101100000000

Efetuando a última operação, o OR com o Azul (183)


  1101000111101100000000
| 0000000000000010110111
  ----------------------
  1101000111101110110111

O resultado agora ficou claro. O número 1101000111101110110111 (binário) é igual a 3439543 (decimal) e 347BB7 (hexadecimal).

Chaveando multiplexador 4051
A tarefa de chavear um Multiplexador / Demultiplexador (MUX / DEMUX) 4051 é muito parecida com a extração dos canais RGB de uma cor. Você só precisa Ligar ou Desligar três pinos de seleção (select pins) para que o circuito interprete o valor gerado e transmita a voltagem da entrada desejada.
Existe um gif animado do RogerCom muito didático que demonstra o funcionamento do CI 4051, gif animado CI 4051 aqui.
Por exemplo, para ler a entrada 3, precisamos desligar o pino de seleção 0, ligar o 1 e o 2, formando assim o número 011 (binário) que é igual a 3 em decimal. Veja no código (Escrito em Arduino / C++):

// Entrada desejada
int count = 3;

// Extração dos bits ativos
byte s0 =  count       & 0x1;
byte s1 = (count >> 1) & 0x1;
byte s2 = (count >> 2) & 0x1;

// Ligando ou desligando os pinos de seleção
digitalWrite(2, s0);
digitalWrite(3, s1);
digitalWrite(4, s2);

Conteúdo relacionado:
• Post original: http://blog.bsoares.com.br/flash/operacoes-binarias
• Bitwise operation on Wikipedia

Boas práticas.

2009-04-24T15:17:00.014-03:00

Estou ensaiando de postar aqui algo sobre boas prática a tempos, foi uma das primeiras ideias que tive, pois odeio quando pego um código de algum dev que nem identar o código identa. Enfim, até hoje, NADA. Eu com minha correria diária nunca consegui juntar tudo e postar aqui, hoje falando com o BSoares, ele mencionou um link de boas práticas, imensooo e muito útil, em 5 min vi que tenho mais a aprender sobre boas práticas do que imaginava, isso por que eu idento meu código hein! haha!

Divirtam-se:

http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

E aqui, para quem não sabe o que é identar ;-)

http://pt.wikipedia.org/wiki/Indenta%C3%A7%C3%A3o

Update:
Conversando com o Cássio, acabei conhecendo o blog dele e vendo que ele também postou algo sobre boas práticas. :)

http://blog.devlab.com.br/post/85041607/desenvolvimento-flash-voc-est-fazendo-tudo-errado

Aproveite e conheça o Blog dele, tem muita coisa boa! :D

Se você também souber de algum post ou materia online sobre boas práticas, deixa ai o link nos comentários para outros devs também terem acesso.

[]s!

Twitter Hardware (Arduino)

2009-04-24T15:13:00.002-03:00

Twitter Hardware é um projeto que utiliza a placa Arduino e um Display LCD para exibir as mensagens do Twitter. Para que a Arduino tenha as mensagens escrevi um software em Adobe AIR / Flex, que se conecta ao Serial Proxy enviando o conteúdo para a Arduino.

Arduino:

/**
 * Twitter Hardware
 * 
 * @author   Bruno Soares
 * @link     http://www.bsoares.com.br
 * @language Arduino / C++
 */

// Includes
#include 

// Defines
#define DEBUG_PIN                 13

#define COMMAND_RIGHT             0
#define COMMAND_LEFT              1
#define QUANTITY_COMMANDS         2

#define ANALOG_PIN_COMMAND_RIGHT  0
#define ANALOG_PIN_COMMAND_LEFT   1
#define ANALOG_PIN_SPEED          2

#define MESSAGE_START             94  //  94 = ^
#define MESSAGE_END               126 // 126 = ~

#define SERIAL_BOUND              9600

#define LCD_LINES                 2
#define LCD_COLUMNS               16

#define ANIMATE_CMD_WIDTH         4

// Global variables
unsigned long time;

// LiquidCrystal display with:
// rs on pin 12
// rw on pin 11
// enable on pin 2
// dbs 3, 4, 5, 6, 7, 8, 9, 10
LiquidCrystal lcd(12, 11, 2, 3, 4, 5, 6, 7, 8, 9, 10);

// Analog configuration
unsigned int analogCmd[QUANTITY_COMMANDS];
unsigned int analogSpeed = 0;

// Control commands
boolean changingSpeed = true;
boolean readingSerial = false;
boolean pressedCmd[QUANTITY_COMMANDS];
unsigned int lastSpeed = 0;

// Massages
char currentMessage[400] = "No messages.";
unsigned int currentMessageLenght;

// ------------------------------------------------------------------------ \\
// Program
void setup() {
  Serial.begin(SERIAL_BOUND);
  pinMode(DEBUG_PIN, OUTPUT);
  
  smartDelay(10);
  lastSpeed = analogSpeed;
  
  presentation();
  changingSpeed = false;
}

void loop() {
  
  // Show current message
  clearLcd();
  writeLongTextInLcd(currentMessage);
  smartDelay(applySpeed(7000));
  
}

void presentation() {
  lcd.clear();
  writeLongTextInLcd("Twitter Hardwareby Bruno Soares");
  smartDelay(3000);
}

void refreshAnalogVars() {
  analogCmd[COMMAND_RIGHT] = analogRead(ANALOG_PIN_COMMAND_RIGHT);
  analogCmd[COMMAND_LEFT]  = analogRead(ANALOG_PIN_COMMAND_LEFT);
  analogSpeed              = analogRead(ANALOG_PIN_SPEED);
}

// ------------------------------------------------------------------------ \\
// [INI] Commands
void detectCommand() {
  unsigned int i = 0;
  while (i < QUANTITY_COMMANDS) {
    if (analogCmd[i] > 500 && !pressedCmd[i]) {
      executeCommand(i);
    }
    i++;
  }
}

void executeCommand(int command) {
  pressedCmd[command] = true;
  digitalWrite(DEBUG_PIN, 1);
  
  if (command == 0) {
    animateNext();
  } else {
    animatePrevious();
  }
  
  currentMessage[0] = 'L';
  currentMessage[1] = 'o';
  currentMessage[2] = 'a';
  currentMessage[3] = 'd';
  currentMessage[4] = 'i';
  currentMessage[5] = 'n';
  currentMessage[6] = 'g';
  currentMessage[7] = '\0';
  currentMessageLenght = 7;
  
  Serial.print(command);
  
  while (analogCmd[command] > 500) {
    smartDelay(4);
  }
  
  pressedCmd[command] = false;
  digitalWrite(DEBUG_PIN, 0);
}

void animateNext()  {
  for (unsigned int i = 0; i < LCD_COLUMNS + ANIMATE_CMD_WIDTH; i++) {
    if (i < LCD_COLUMNS) {
      lcd.setCursor(i, 0);
      lcd.print(">");
      lcd.setCursor(i, 1);
      lcd.print(">");
    }
    delay(5);
    if (i - ANIMATE_CMD_WIDTH >= 0) {
      lcd.setCursor(i - ANIMATE_CMD_WIDTH, 0);
      lcd.print(" ");
      lcd.setCursor(i - ANIMATE_CMD_WIDTH, 1);
      lcd.print(" ");
    }
    delay(30);
  }
}

void animatePrevious() {
  for (int i = LCD_COLUMNS; i >= -ANIMATE_CMD_WIDTH; i--) {
    if (i >= 0 && i < LCD_COLUMNS) {
      lcd.setCursor(i, 0);
      lcd.print("<");
      lcd.setCursor(i, 1);
      lcd.print("<");
    }
    delay(5);
    if (i + ANIMATE_CMD_WIDTH < LCD_COLUMNS && i + ANIMATE_CMD_WIDTH >= 0) {
      lcd.setCursor(i + ANIMATE_CMD_WIDTH, 0);
      lcd.print(" ");
      lcd.setCursor(i + ANIMATE_CMD_WIDTH, 1);
      lcd.print(" ");
    }
    delay(30);
  }
}
// [END] Commands

// ------------------------------------------------------------------------ \\
// [INI] Messages
void detectSerialMessage() {
  if (Serial.available() > 0 && !readingSerial) {
    if (Serial.read() == MESSAGE_START) {
      serialReadMessage();
    }
  }
}

void serialReadMessage() {
  digitalWrite(DEBUG_PIN, 1);
  readingSerial = true;
  currentMessageLenght = 0;
  
  iniReading:
  if (Serial.available() > 0) {
    unsigned int _char = Serial.read();
    if (_char == MESSAGE_END) {
      goto endReading;
    } else {
      currentMessage[currentMessageLenght++] = _char;
      delay(2);
      goto iniReading;
    }
  }
  goto iniReading;
  
  endReading:
  currentMessage[currentMessageLenght] = '\0';
  digitalWrite(DEBUG_PIN, 0);
  readingSerial = false;
}
// [END] Messages

// ------------------------------------------------------------------------ \\
// [INI] LCD manipulation
void writeLongTextInLcd(char text[]) {
  writeInit:
  clearLcd();
  unsigned int cml = currentMessageLenght;
  int loops = -1;
  unsigned int chars = 1;
  while (text[loops++ + 1] != 0) {
    if (chars == 17) {
      lcd.setCursor(0, 1);
      smartDelay(applySpeed(600));
      if (cml != currentMessageLenght) goto writeInit;
    } else if (chars == 33) {
      smartDelay(applySpeed(3000));
      clearLcd();
      if (cml != currentMessageLenght) goto writeInit;
      chars = 1;
    }
    lcd.print(text[loops]);
    smartDelay(applySpeed(60));
    if (cml != currentMessageLenght) goto writeInit;
    chars++;
  }
  Serial.print(2);
}

void writeInLcd(char text[], int quantity) {
  for (unsigned int i = 0; i < quantity; i++) {
    if (text[i] == 0) {
      do {
        lcd.print(" ");
      } while (i++ < quantity);
      break;
    } else {
      lcd.print(text[i]);
    }
  }
  delay(2);
  //smartDelay(5);
}

void clearLcd() {
  lcd.setCursor(0, 0);
  smartDelay(5);
  lcd.print("                ");
  smartDelay(applySpeed(400));
  lcd.setCursor(0, 1);
  smartDelay(5);
  lcd.print("                ");
  lcd.setCursor(0, 0);
  smartDelay(applySpeed(0));
}
// [END] LCD manipulation

// ------------------------------------------------------------------------ \\
// [INI] Speed
void detectChangeSpeed() {
  if (changingSpeed) return;
  if (!(lastSpeed < analogSpeed + 6 && lastSpeed > analogSpeed - 6)) {
    showGraderSpeed();
  }
}

void showGraderSpeed() {
  changingSpeed = true;
  digitalWrite(DEBUG_PIN, 1);
  lcd.clear();
  writeInLcd("Speed:", LCD_COLUMNS);
  
  // Create display velocity
  showSpeed:
  for (unsigned int i = 0; i < 10; i++) {
    int charsSpeed = map(analogSpeed, 0, 1023, 0, LCD_COLUMNS);
    int percentSpeed = map(analogSpeed, 0, 1023, 0, 100);
    char* percentString;
    itoa(100 - percentSpeed, percentString, 10);
    percentString = strcat(percentString, "%");
    lcd.setCursor(7, 0);
    writeInLcd(percentString, 4);
    charsSpeed = LCD_COLUMNS - charsSpeed;
    lcd.setCursor(0, 1);
    for (unsigned int x = 1; x < LCD_COLUMNS + 1; x++) {
      if (x <= charsSpeed) {
        lcd.print(">");
      } else {
        lcd.print(" ");
      }
    }
    lastSpeed = analogSpeed;
    smartDelay(40);
  }
  
  // Verify
  for (unsigned int i = 0; i < 10; i++) {
    if (!(lastSpeed < analogSpeed + 6 && lastSpeed > analogSpeed - 6)) {
      goto showSpeed;
    }
    smartDelay(40);
  }
  
  // Finalize
  lcd.clear();
  changingSpeed = false;
  digitalWrite(DEBUG_PIN, 0);
}

long applySpeed (unsigned int value) {
  return map(analogSpeed, 0, 1023, 0, value);
}

// [END] Speed

// ------------------------------------------------------------------------ \\
// [INI] Milliseconds controller
void smartDelay(int milliseconds) {
  if (milliseconds < 2) {
    noDelayFunctions();
    delay(milliseconds);
    return;
  }
  do {
    delay(1);
    milliseconds -= noDelayFunctions();
    milliseconds -= 1;
  } while (milliseconds > 0);
}

int noDelayFunctions() {
  time = millis();
  
  // [INI] No delay functions here
  refreshAnalogVars();
  detectChangeSpeed();
  detectCommand();
  detectSerialMessage();
  // [END] No delay functions here
  
  return millis() - time;
}
// [END] Milliseconds controller

ActionScript (usando Serialproxy):

package br.com.bsoares.air.airtwitterhardware
{
 import flash.events.Event;
 import flash.events.EventDispatcher;
 import flash.events.IOErrorEvent;
 import flash.events.ProgressEvent;
 import flash.net.Socket;
 
 /**
  * Message Control
  * Control messages between the Arduino and in AIR
  * Application using Serial Proxy.
  * 
  * @author Bruno Soares
  * @link   http://www.bsoares.com.br
  */
 public class MessageControl extends EventDispatcher
 {
  // Properties
  private var _host:String;
  private var _port:uint;
  private var _socket:Socket;
  private var _messages:Array; 
  private var _currentMessage:uint;
  private static var _instance:MessageControl;
  private static var _allowInstantiation:Boolean = false;
  
  // Constructor
  public function MessageControl()
  {
   if (!_allowInstantiation)
    throw new Error("Use instance property (this is a Singleton Class).");
   init();
  }
  
  // Logic
  private function init():void
  {
   _host = "127.0.0.1";
   // COM2
   _port = 5332;
   _messages = [ ];
   _currentMessage = 0;
   socketConnect();
  }
  
  private function socketConnect():void
  {
   _socket = new Socket();
   _socket.addEventListener(ProgressEvent.SOCKET_DATA, onSocketData);
   _socket.addEventListener(Event.CLOSE, onSocketClose);
   _socket.addEventListener(IOErrorEvent.IO_ERROR, onSocketIoError);
   _socket.connect(_host, _port);
  }
  
  private function processData(data:String):void
  {
   trace("Arduino command:", data);
   switch (true)
   {
    // Send next message
    case data == "2" || data == "0":
    {
     sendNextMessage();
     break;
    }
    // Send previous message
    case data == "1":
    {
     sendPreviousMessage();
     break;
    }
   }
  }
  
  private function sendMessage(message:String):void
  {
   if (message == null || message == "")
    return;
   
   trace("Message:", message);
   
   // MESSAGE_START
   _socket.writeUTFBytes("^");
   _socket.flush();
   
   // MESSAGE
   for (var i:uint = 0; i < message.length; i++)
   {
    _socket.writeUTFBytes(message.charAt(i));
   }
   _socket.flush();
   
   // MESSAGE_END
   _socket.writeUTFBytes("~");
   _socket.flush();
   
   dispatchEvent(new Event(Event.CHANGE));
  }
  
  private function sendNextMessage():void
  {
   _currentMessage = _currentMessage == _messages.length - 1 ? 0 : _currentMessage + 1;
   sendMessage(_messages[_currentMessage]);
  }
  
  private function sendPreviousMessage():void
  {
   _currentMessage = _currentMessage == 0 ? _messages.length - 1 : _currentMessage - 1;
   sendMessage(_messages[_currentMessage]);
  }
  
  // Events
  private function onSocketData(event:ProgressEvent):void
  {
   while (_socket.bytesAvailable > 0)
    processData(_socket.readUTFBytes(1));
  }
  
  private function onSocketClose(event:Event):void
  {
   socketConnect();
  }
  
  private function onSocketIoError(event:IOErrorEvent):void
  {
   trace(event.text);
  }
  
  // Getters and Setters
  public static function get instance():MessageControl
  {
   if (_instance == null) {
    _allowInstantiation = true;
    _instance = new MessageControl();
    _allowInstantiation = false;
   }
   return _instance;
  }
  
  public function set messages(value:Array):void
  {
   _currentMessage = 0;
   _messages = value;
   if (_messages.length > 0)
    sendMessage(_messages[0]);
  }
  
  public function get messages():Array
  {
   return _messages;
  }
  
  public function get currentMessage():uint
  {
   return _currentMessage;
  }
 }
}

Esquemático:

Baixe o código fonte aqui.

Conteúdo relacionado:
Post original: http://blog.bsoares.com.br/arduino/twitter-hardware
Mais fotos: http://www.flickr.com/photos/bsoares/sets/72157616923436133/
Arduino: http://arduino.cc/
Adobe AIR: http://www.adobe.com/products/air/
Adobe Flex: http://www.adobe.com/products/flex/
LiquidCrystal Library: http://arduino.cc/en/Reference/LiquidCrystal?from=Tutorial.LCDLibrary
Twitter: http://twitter.com/

JPGEncoder (AS3) com AMFPHP

2009-04-24T15:04:00.002-03:00

Tenho notado pelo Google Analytics que pessoas chegam ao blog procurando por AMFPHP, encode de imagens criadas no flash, salvar imagem com Flash + AMFPHP e outros critérios de busca. E por isso me sinto na obrigação de escrever algo sobre isto.

Exemplo:

Vou demonstrar exatamente o que o título do post propõe (Criar imagens no Flash com ActionScript 3, encodar essas imagens com a classe JPGEncoder presente na biblioteca as3corelib e salvar como um arquivo .jpg utilizando o AMFPHP). Já escrevi aqui como fazer isso em FluorineFx (ASP.NET Flash Remoting Gateway).

Suponho que quem esteja interessado em rodar o que está descrito neste tutorial tenha o Apache com PHP instalado, ou algum servidor com suporte. Caso você não tenha recomendo a instalação do XAMPP (é de fácil instalação e tem tudo que um programador precisa).

Configuração do AMFPHP:
A versão que utilizo neste tutorial é a 1.9 beta, mas versões posteriores devem funcionar perfeitamente.
• Baixe o AMFPHP do seguinte link: http://www.amfphp.org/
• Copie o conteúdo do ZIP para o diretório onde você está criando o projeto, recomendo a estrutura de diretórios como mostrada na imagem abaixo:

• Para testar o funcionamento é só acessar o diretório browser do navegador (http://127.0.0.1/www/amf/browser/).

Fique entendido que a responsabilidade de gerar a imagem é do Flash, e o servidor deve apenas receber os binários para gravar em disco. Para gerarmos o código da imagem (binário), vamos utilizar a classe JPGEncoder.
Exemplo:

import flash.display.BitmapData;
import flash.utils.ByteArray;
import com.adobe.images.JPGEncoder;

var bmpData:BitmapData = new BitmapData(width, height);
bmpData.draw(MEU_MOVIECLIP);
var objJPGEncoder:JPGEncoder = new JPGEncoder(QUALIDADE);
var dadosEncode:ByteArray = objJPGEncoder.encode(bmpData);

Muito simples não? O método draw da classe BitmapData obtém a imagem atual do clip, criamos uma instância da JPGEncoder já passando a qualidade (0 à 100) e por fim “encodamos” o BitmapData utilizando o método encode da nossa instância da JPGEncoder, ele nos retorna um Array de Bytes (flash.utils.ByteArray).

Vamos a parte do actionscript que interessa:

private function encode():void
{
 lblMessage.text = "Codificando dados (JPGEncoder.encode)";
 
 var bmpData:BitmapData = new BitmapData(hit.width, hit.height);
 bmpData.draw(target);
 var objJPGEncoder:JPGEncoder = new JPGEncoder(sliderQuality.value);
 var dadosEncode:ByteArray = objJPGEncoder.encode(bmpData);
 
 sendToAmf(dadosEncode);
}

private function sendToAmf(data:ByteArray):void
{
 lblMessage.text = "Enviando dados para o AMF...";
 
 _objService = new NetConnection();
 _objResponder = new Responder(onResultEvent, onStatusEvent);
 _objService.connect(_amfGateway);
 _objService.call("br.com.bsoares.Image.saveDataToFile", _objResponder, data);
}

private function onResultEvent(result:Object):void
{
 lblMessage.text = "Abrindo imagem";
 navigateToURL(new URLRequest("http://blog.bsoares.com.br/articles/jpgencoder_amfphp/generated_images/image.jpg"), "_blank");
}

private function onStatusEvent(event:Event):void
{
 lblMessage.text = "Erro";
}

Agora a classe Image do PHP:

<?php
class Image
{
 var $imagePath;
 
 public function __construct ()
 {
  $this->imagePath = "../../../../../generated_images/image.jpg";
 }

 function saveDataToFile($byteArray)
    {
        file_put_contents($this->imagePath, $byteArray->data);
        return $this->imagePath;
    }
}
?>

O PHP só precisa pegar o ByteArray e salvar em um arquivo.

Dica: Para verificar os request usem o Charles Web Debugging Proxy.

É isso ai, qualquer dúvida só postar um comentário.

Conteúdo relacionado:
Post original: http://blog.bsoares.com.br/remoting/jpgencoder-as3-with-amfphp
Código fonte do exemplo: http://blog.bsoares.com.br/articles/jpgencoder_amfphp/jpgencoder-amfphp.zip
AMFPHP: http://www.amfphp.org/
AS3CoreLib: http://code.google.com/p/as3corelib/
Charles: http://www.charlesproxy.com/

Enjoy

Flickr - Buscar fotos por Tag com ActionScript 3.0

2009-04-24T14:31:00.003-03:00

Vamos a um exemplo de uso da API do Flickr, bem simples pois a API do Flickr é realmente simples (isso não quer dizer que ela não é poderoza).

Aqui está o resultado de pouco código:

Em primeiro lugar você vai precisar de uma api_key e pode conseguir neste link "Solicitar uma nova chave API". Com sua KEY em mão vamos chamar a api buscando uma tag:
http://api.flickr.com/services/rest/?api_key=[SUA-API-KEY]&method=flickr.photos.search&tags=[TAG]

O resultado esperado é este:

<rsp stat="ok">
<photos page="1" pages="10" perpage="100" total="1000">
 <photo id="3411384625" owner="23534352@N07" secret="74167a8895" server="3374" farm="4" title="_MG_0611" ispublic="1" isfriend="0" isfamily="0" />
 <photo id="3411401933" owner="23534352@N07" secret="46c095f827" server="3585" farm="4" title="_MG_0641" ispublic="1" isfriend="0" isfamily="0" />
 ...
</photos>
</rsp>

Vamos entender o link, rest é o formato que você deseja receber a resposta, atualmente o Flickr suporta 5 formatos (REST, XML-RPC, SOAP, JSON e PHP), usamos o rest porque o ActionScript trabalha muito bem com ele (XML). api_key é a chave que você solicitou acima. method, é o método de busca (você pode encontrar muitos no link da API, http://www.flickr.com/services/api/). E por fim tags que é um parâmetro pelo qual você busca.

Agora que temos o XML de resposta podemos construir links para as fotos, para a página de galeria do usuário encontrado, para o perfil do usuário entro outros. O link que eu acho mais importante é o da imagem e para consegui-lo basta concatenar alguns dados presentes no XML dessa forma:

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

O que é mstb?
s) quadrado pequeno 75x75.
t) miniatura, 100 no lado mais longo.
m) pequeno, 240 no lado mais longo.
-) médio, 500 no lado mais longo.
b) grande, 1.024 no lado mais longo (existe apenas para imagens originais muito grandes).
o) imagem original, jpg, gif ou png, dependendo do formato de origem.
Na página URLs da origem da foto você encontra tudo bem explicado.

Veja no exemplo abaixo o link (do primeio nó 'photo') para a imagem:
http://farm4.static.flickr.com/3374/3411384625_74167a8895.jpg

Agora tudo isso com ActionScript (Load do XML e parse para gerar o link):

var apiKey:String = "[SUA-API-KEY]";
var tag:String = "arduino";

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, onComplete);
var url:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + apiKey + "&tags=" + tag;
trace("URL: ", url);
xmlLoader.load(new URLRequest(url));

function onComplete(event:Event):void
{
 var xmlData:XML = new XML(event.target.data);
 if (xmlData.@stat != "ok")
 {
  trace("ERROR: " + xmlData.err.@msg);
  return;
 }
 
 for (var i:uint = 0; i < xmlData.photos.photo.length(); i++)
 {
  var photo:Object = {
   id:xmlData.photos.photo[i].@id,
   owner:xmlData.photos.photo[i].@owner,
   secret:xmlData.photos.photo[i].@secret,
   server:xmlData.photos.photo[i].@server,
   farm:xmlData.photos.photo[i].@farm,
   title:xmlData.photos.photo[i].@title
  };
  photo.url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg";
  trace("Imagem: ", photo.url);
 }
}

Repare que você pode adicionar dois parâmetros no link para controlar a paginação das fotos (page e perpage).

Conteúdo relacionado:
Post original: http://blog.bsoares.com.br/flash/flickr-search-photos-by-tag-with-actionscript
Flickr API: http://www.flickr.com/services/api/
XML ActionScript 3.0: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/XML.html

Convertendo PNG para SWF com PHP 5

2009-04-24T13:59:00.003-03:00

Bom para quem não sabe o Adobe Flash consegue uma compressão incrível com arquivos do tipo PNG, mantendo a sua qualidade e transparência. Vou deixar um exemplo de código PHP para fazer essa conversão sem a ajuda de softwares como o png2swf.exe pois a realidade é que muitos servidores (hosts) não permitem que o script PHP rode softwares.

Classe:

<?php
/**
 * SwfConvertion
 * 
 * @author Bruno Soares
 * @link   http://www.bsoares.com.br
 */
class SwfConvertion
{
 public function __construct () { }
 
 /**
  * image2swf
  * 
  * @param  $imagePath String
  * @return void
  */
 public static function image2swf($imagePath, $outputPath = '')
 {
  if ($outputPath == '')
  {
   $outputPath = SwfConvertion::resolveOutputPath($imagePath);
  }
  
  $bitmap = new SWFBitmap(file_get_contents($imagePath));
  
  $shape = new SWFShape();
  $shape->setRightFill($shape->addFill($bitmap));
  $shape->drawLine($bitmap->getWidth(), 0);
  $shape->drawLine(0, $bitmap->getHeight());
  $shape->drawLine(-$bitmap->getWidth(), 0);
  $shape->drawLine(0, -$bitmap->getHeight());
  
  $movie = new SWFMovie();
  $movie->setDimension($bitmap->getWidth(), $bitmap->getHeight());
  $movie->add($shape);
  $movie->save($outputPath);
 }
 
 /**
  * 
  * 
  * @param $imagePath Object
  * @return String
  */
 private static function resolveOutputPath($imagePath)
 {
  return preg_replace('/^(.+)\.([A-Za-z]{3,4})$/i', '${1}.swf', $imagePath);
 }
}
?>

Exemplo de uso:

<?php SwfConvertion::image2swf('imagem_branco.png', 'imagem_branco_2.swf'); ?>

1º Teste:
PNG: imagem_branco.png 167KB
SWF: imagem_branco_2.swf 98KB
41,31% de compressão (menos 69KB)

2º Teste:
PNG: imagem_vermelho.png 309KB
SWF: imagem_vermelho_2.swf 264KB
14,56% de compressão (menos 45KB)

Obs.: É importante que você escolha bem as conversões que deseja fazer, pois em alguns casos o SWF pode ficar mais pesado que o PNG ou seja, se você vai utilizar este script para otimizar suas imagens compare os pesos antes de escolher a definitiva.

Conteúdo relacionado:
Post original: http://blog.bsoares.com.br/flash/converting-png-to-swf-with-php-5
PHP Shockwave Flash: http://br2.php.net/manual/pt_BR/book.swf.php
Funções para SWF: http://br2.php.net/manual/pt_BR/ref.swf.php

Enjoy

AIR Install Badge com Google Analytics

2009-04-23T19:49:00.003-03:00

Já a algum tempo procurei um Air Install Badge com o Google Analytics integrado e acabei encontrando o do Marc's Musings, mas me pareceu meio "travado" uma vez que é necessário compilar o flash com as informações do seu aplicativo AIR. Sendo assim modifiquei o original para receber via FlashVars o nome da aplicação, versão, endereço do .air, e é claro o código AnalyticsTracker.

O Google Translation Plus (uma aplicação que estou desenvolvendo) já está utilizando o Install Badge modificado, verifique.

Como é mostrado o relatório no Google Analytics:

Principal trecho de código do Install Badge alterado:

// Google Analytics Tracking
if (tracker != null) {
   tracker.trackPageview("/" + appName + "/" + action);
}

Atenção:
Existem muitas variáreis para serem alteradas no arquivo AirAppPage.html, como por exemplo: analyticstracker, airversion, appname, appurl, appid, appversion, etc...

Download do AIR Install Badge com Google Analytics.

Conteúdo relacionado:
Post original: http://blog.bsoares.com.br/as3/air-install-badge-with-google-analytics
AIR Install Badge: http://www.adobe.com/devnet/air/articles/badge_for_air.html
gaforflash: Google Analytics Tracking For Adobe Flash
swfobject: http://code.google.com/p/swfobject/

aM Tone Matrix

2009-04-17T21:40:00.002-03:00

Checando os novos projetos do insano André Michelle, vi este ultimo e agora não consigo mais parar de me divertir nele.
Ultimamente o André tem montado bastante coisa baseada em som e musica, tudo por que ele está juntamente com uma equipe trabalhando arduamente no desenvolvimento da Hobnox, ferramenta que tem feito um barulho enorme pela net.

Para quem não conhece o André e seu trabalho, vale muuuuuuito a pena uma visita em seu site, ele além de Físico, maluco, insano e desenvolvedor, também é músico. Fica ai a dica. []s

http://void.andre-michelle.com/

Regra de três simplificada (Map do Processing)

2009-03-31T23:24:00.006-03:00

Se tem uma coisa que programador Flash faz muito é regra de três, esta pequena formula matemática é executada diversas vezes dentro de um projeto, e ela é usada para transferir um valor dentro de um intervalo de números para o valor equivalente em um outro intervalo de números. Pro exemplo, no loading de uma imagem você sabe quantos bytes tem a imagem e quantos bytes já foram carregados, agora como calcular o percentual de carregamento? Vamos supor que a imagem tenha 300 bytes e já foram carregados 150 então temos 50% carregado, para chegar a este resultado de uma forma fácil e padronizada:

trace(NumberUtils.map(150, 0, 300, 0, 100));

Converti o script escrito originalmente em Processing e Arduino para ActionScript 3.0, agora é só usar.

Mais exemplos de uso:

import br.com.bsoares.utils.NumberUtils;

trace(NumberUtils.map(50, 0, 100, 0, 10));
// 5

trace(NumberUtils.map(90, 0, 100, 0, 10));
// 9

trace(NumberUtils.map(90, 100, 0, 0, 10));
// 1

trace(NumberUtils.map(-90, -100, 100, 0, 10));
// 0.5

Classe completa:

/**
* NumberUtils
*
* @author Bruno Soares
* @link http://www.bsoares.com.br
*/

package br.com.bsoares.utils
{
public class NumberUtils
{
 public function NumberUtils() { }

 /**
  * Transfere um valor de um intervalo para outro.
  * Versão original escrita em Processing (http://processing.org/reference/map_.html).
  *
  * @param value Valor a ser transferido
  * @param inMin Menor valor do primeiro intervalo
  * @param inMax Maior valor do primeiro intervalo
  * @param outMin Menor valor do segundo intervalo
  * @param outMax Maior valor do segundo intervalo
  *
  * @return Valor calculado
  */
 public static function map(value:Number, inMin:Number, inMax:Number, outMin:Number, outMax:Number):Number
 {
  return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
 }
}
}

Links relacionados:
Post original: http://blog.bsoares.com.br/technology/regra-de-tres-simplificada-map-do-processing
Processing: http://processing.org/reference/map_.html
Arduino: http://arduino.cc/en/Reference/Map
Regra de Três: http://pt.wikipedia.org/wiki/Regra_de_tr%C3%AAs, http://www.somatematica.com.br/fundam/regra3s.php

Enjoy

OFF POST!!! Nick from DD is blundering with his viral on Web.

2008-12-16T17:40:00.005-02:00

In order to help my friend Nick from Digital Drops, FFL Team shows you this very impressive presentation!

Take a look and... laugh

For more informations: Desafio LG

Removendo acentos com AS3 e RegEx

2008-11-14T20:45:00.007-02:00

Nós da equipe #flashFrameLess, estamos desenvolvendo nosso primeiro projeto Flash/Arduino, neste projeto estamos utilizando um display digital de 16x2 que não suporta acentos, por isso acabamos escrevendo um método onde os caracteres são retirados da string, antes de ser enviado para a Arduino, achei por bem compartilhar isso com vocês, já que é uma coisa bem útil e pelo que vi, muita gente anda procurando. Para quem não sabe oque é RegEx, vale uma olhada rápida aqui.

Vamos aos codes:

Primeiro criamos um Array, para guardarmos os nossos patterns e o seu respectivo caracter de substituição:

var arrPatterns:Array = new Array();

Logo em seguida abastecemos o array com um objeto contendo o pattern e o caractere


arrPatterns.push( { pattern:/[äáàâãª]/g,  char:'a' } );
arrPatterns.push( { pattern:/[ÄÁÀÂÃ]/g,  char:'A' } );
arrPatterns.push( { pattern:/[ëéèê]/g,   char:'e' } );
arrPatterns.push( { pattern:/[ËÉÈÊ]/g,   char:'E' } );
arrPatterns.push( { pattern:/[íîïì]/g,   char:'i' } );
arrPatterns.push( { pattern:/[ÍÎÏÌ]/g,   char:'I' } );
arrPatterns.push( { pattern:/[öóòôõº]/g,  char:'o' } );
arrPatterns.push( { pattern:/[ÖÓÒÔÕ]/g,  char:'O' } );
arrPatterns.push( { pattern:/[üúùû]/g,   char:'u' } );
arrPatterns.push( { pattern:/[ÜÚÙÛ]/g,   char:'U' } );
arrPatterns.push( { pattern:/[ç]/g,   char:'c' } );
arrPatterns.push( { pattern:/[Ç]/g,   char:'C' } );
arrPatterns.push( { pattern:/[ñ]/g,   char:'n' } );
arrPatterns.push( { pattern:/[Ñ]/g,   char:'N' } );

Criamos o método de acesso


function removeAccents( str:String ):String{
 
 for( var i:uint = 0; i < arrPatterns.length; i++ ){
  
  str = str.replace( arrPatterns[i].pattern, arrPatterns[i].char );
  
 }
 
 return str;
 
}

E por ultimo, é só usar!! :-)


var strTeste:String = 'Éstá Frásé têm tódàs vôgáîs ácêñtûãdás';

trace( strTeste );

trace( removeAccents( strTeste ) ); //Esta Frase tem todas vogais acentuadas

Fim!!! Espero que seja útil! []s galera!

Aproveito para indicar um ótimo livro de RegEx: Expressões Regulares – Uma Abordagem Divertida!

Adobe Suite CS4, disponível para download.

2008-11-12T15:25:00.004-02:00

Finalmente a Adobe liberou as versões trial dos softwares que compõem a nova suite CS4.
Mas não se anime tanto, com isso, milhões estão baixando e o server fica indisponível constantemente, bom pelo menos comigo aconteceu isso.

Abraços galera!

Adobe lança o Flash Player 10 Final - agora sim CS4!

2008-10-15T08:06:00.005-03:00

Fala galera! Boas noticias para os que já estão criando projetos em FP10!
Agora não só os outros developer vão ter acesso ao seu novo invento, finalmente a Adobe lançou a versão final do FP10 e já está disponível aqui o link de sempre!

Bom é isso pessoal!!
Abração!

Flash CS4 e não Actionscript 4 - Diesel

2008-09-27T01:44:00.006-03:00

Fala galera!

Para os desavisados, no dia 23/10 a adobe lançou oficialmente a suite CS4. Da suite inteira, eu até agora só vi o Flash e na real é ele quem importa aqui para o blog.

Muito se esperava para o lançamento dessa nova versão do Flash, o famoso Diesel, por conta de seus novos recursos, mudanças na linguagem etc etc. Felizmente a Adobe não fez feio e o Flash veio bombando de novidades, claro que eu não vou conseguir colocar tudo aqui, estou somente a 2 dias usando o CS4 e não devo ter visto nem 1/10 das novidades.

Vamos lá:

Logo de cara, digo de cara mesmo, já começam aparecer as novidades.

A Splash screen já te da o aviso, prepare-se para se impressionar, assim que o flash monta a workspace é normal que você tome um grande susto, acontece que quase tudo mudou de cara e lugar. Da uma olhada:

Timeline em baixo, ferramentas no canto direito, Flash sem barra do Windows ( ótimo ), propriedades no canto, abas e ferramentas nunca antes vistas, etc e etc...olha ai na imagem e tire suas conclusões!

Na tela de welcome eu já fiquei empolgado, onde vem Create New, você tem as opções: Adobe AIR e Mobile! Yeah já está tudo ae, Air 1.1 e Lite 3.0.

Se você achou tudo muito bizarro e fora do lugar, não se preocupe, da pra deixar do jeito que você quiser, inclusive tem um preset ‘classic’ para vc ter o CS3 de volta! Rs

Não vou falar das coisas que já existiam, pois tudo está funcionando do mesmo jeito, tirando alguns atalhos tipo o Zoom que agora está na tecla M :-P.

Com o novo método de animação implementado na Flash, agora existe um painel chamado Motion Editor, que não tem muito a ver com o método antigo de se animar as coisa, mas não se assuste, ainda existe o ClassicTween :-P.

Ao clicar em Create Motion Tween o ícone da Layer muda e indica que é uma Layer para animação! Só para animação, sem aquela mistureba de coisas que alguns fazem e o painel de motion fica disponível. Olha o tamanho do menino:

E acredite, ele fica maior ainda.

Para quem já usou o AE, percebe-se uma semelhança e o fato da timeline estar em baixo começa a ter mais sentido.

Existe também, um painel “Motion Presets” que te da algumas opções de anima pronta e que em um simples clique está tudo lá aplicado, em timeline ( nhé ), claro que eu não sou a favor disso, mas os animadores podem gostar.

Olha ae como fica:

Outro cara interessante é o IK ( inverse kinematics ), bones, ossos e por ai vai.

Muito úteis e demoraram pacas para sair, eu particularmente achei que eles nasceriam na versão 8, já que um tal de MOHO estava na versão 5 e já possuía essa feature.

Para quem não conhece IK são ossos propriamente ditos, da uma olhada aqui e entenda melhor: http://br.youtube.com/watch?v=wDjewbDF4bo

Ele também altera a timeline e não é nada complicado de se manipular, tanto via código, quanto via timeline.

A Publish Settings, continua praticamente igual, existem algumas opções de Aceleração de hardware, compressão e metadata. Como se pode ver no snap, podemos exportar desde flash player 1 / actionscript 1 até o atual FP10/AS3, incluindo FlashLite e Air também.

Agora vamos a parte que estava toooodo mundo esperando! O 3D!

Na real esse 3D do FP10 é beeem, mas beeeem fraco, nem é um 3D, tá mais para um controle melhorado de distorções automáticas. Claro que ajuda, sim, é útil e tals, mas não é 3D.

O que acontece, você só consegue manipular Planes, você não consegue por exemplo criar um cubo e sair manipulando ele como em um 3D studio da vida. Mas é legal e promete ajudar bastante em coisas simples. Mas aquele negócio de que PPV, Sandy e afins estavam com dias contados pfff...pura lenda, pelo menos por enquanto.

Enfim, para animadores e designers, tem muuuuita coisa nova e que se não usada com devida moderação vai acabar ferrando com a vida dos Dev´s. Já para os dev´s as novidades não são muitas, ao contrario do que muita gente estava pensando, a linguagem ainda não mudou para o tão esperado AS4, não ainda, isso provavelmente só vai rolar lá para o ano que vem. Para quem quiser ver mais ou menos como vai ser a AS4, tem um post aqui falando sobre a ECMA4.

Nesta versão continuamos ainda com a AS3, porém com esses plus de 3D, IK e etc. Teoricamente é uma AS 3 turbinada.

Tem muita coisa ainda para falar, mas como eu ainda estou fuçando o menino, prefiro parar por aqui...se eu descobrir alguma coisa muuuuito legal e venho aqui e faço um post especifico.

E chega por hoje que eu já estou com sono!!

Abs galera!!

Links:

Animators: http://flashthusiast.com/2008/09/22/the-new-way-of-tweening-in-flash-cs4-or-new-motion-in-flash-cs4-makes-your-animations-better-faster-stronger/

Developers: http://help.adobe.com/en_US/AS3LCR/Flash_10.0/index.html

Geral: http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7beca.html

http://www.adobe.com/products/flash/

http://www.adobe.com/products/flash/features/?view=topnew&promoid=DRHWS

AS3CoreLib

2008-06-20T22:02:00.007-03:00

Hoje foi o dia de discutir sobre vários assuntos aqui no studio, banda larga, covardia, celular, etc etc! rs No final do dia ficou eu mais 3 amigos ( Anaya, Flávio e Rick ) discutindo algumas coisas sobre Flash e seus métodos nativos e ai rolou a indignação geral de o replace do AS ser tão ruim. Foi ai que lembrei de uma biblioteca que venho usando e não passei para os amigos ( mui amigo eu rs ) e para me redimir geral resolvi escrever este post falando sobre a tal AS3 CoreLib.

A AS3CoreLib é uma biblioteca com várias classes com utilidades super corriqueiras, exemplo o replace, quem nunca precisou de um replace em AS? Altos malabarismos para o fazer e sempre na hora você nunca lembra em que projeto você usou e tem que fazer o método todinho do 0.

Pensando nisso essa galera montou essa biblioteca que é uma super mão na roda.
As classes disponíveis são:

Utils ( Array, Date, Dictionary, Int, NumberFormatter, String e XML )
Crypto( MD5, SHA e WSS )
Validators( Address, Email, Phone, VCard )
Images( BitString, JPG-Encoder e PNG-Encoder )
Net( Socket RFC2817, URI e MimeTypeMap )
Serialization( JSON - Encoder, Decoder etc etc )
WebApis( Flickr, YouTube e outros ) - Custom

Deu pra ver que as classes vão desde um simples replace, com o método disponível na StringUtils até trabalhar com objetos serializados JSON, criptografia e Encoding de Imagens.

O melhor de tudo isso é na hora de usar, separei uns exemplos interessantes.


//Substitui uma determinada string dentro de outra string.
replace(input:String, replace:String, replaceWith:String):String
//

//Compara duas Strings:
stringsAreEqual(s1:String, s2:String, caseSensitive:Boolean):Boolean
//

//Verifica se um objeto existe em um Array
arrayContainsValue(arr:Array, value:Object):Boolean
//

//Remove um objeto de dentro de um Array
removeValueFromArray(arr:Array, value:Object):void
//

//Compara dois arrays
arraysAreEqual(arr1:Array, arr2:Array):Boolean
//

//Converte um Int em um Hexa
toHex( n:int, bigEndian:Boolean = false ):String
//

//Corrige o 0 à esquerda de numeros menores que 10
addLeadingZero(n:Number):String
//

//Retorna um Hash MD5
hash( s:String ):String
//

//Retorna um Hash Base64 SHA
hashToBase64( s:String ):String
//

//Retorna um ByteArray - JPG/PNG a partir de um BitmapData
encode(image:BitmapData):ByteArray
//

//Retorna o MimeType de uma determinada extensão
etMimeType(extension:String):String
//

//Retorna um Obj JSON
encode( o:Object ):String

Chega!

O GoogleCode do Projeto é este aqui.

Como o projeto está em constante atualização é legal baixar a biblioteca pelo SVN

Bom é isso!

Abraços e bom final de semana!

Open Screen Project

2008-05-22T23:15:00.003-03:00

Recentemente a Adobe anunciou o "Open Screen Project", liberou o SWF, FLV/FV4 e apartir de então, qualquer empresa que quiser colocar suporte a tais formatos em algum dispositivo, poderá faze-lo sem pagar nada por isso, o que provavelmente vai aumentar a gama de mobiles equipados com Flash Player, porém o projeto não para por ai, juntamente com a Adobe estão grandes empresas como: ARM, Cisco, Intel, LGE, Marvell, Motorola, Nokia, Qualcomm, Samsung, Sony Ericsson, Toshiba dentre outras.

Com isso não só mobiles estão no jogo, mas qualquer dispositivo que possa "pedir" interatividade, como por exemplo as Tvs, o que vai ser muito bom por sinal, assim esses menus lerdos e cheios de limites hoje usados em TV interativa provavelmente vão ficar bem melhores. Daqui a pouco até sua geladeira poderá estar rodando o Flash Player :-)

Acredita que ainda tem mais?
Juntamente com o Flash Player foi liberado também o AMF, dando assim mais uma carta, o Flash-Remoting.

Para quem quiser ler mais sobre o assunto, link oficial da Adobe e seu incrivel projeto.

ActionScript 4!

2008-05-19T11:57:00.006-03:00

A versão 4 do ECMAScript já tem decumentos oficiais na web, mostrando algumas melhorias e outros pontos da nova versão da linguagem, que pelo que parece vai ganhar ainda mais velocidade.

Neste Link temos 40 paginas falando sobre o projeto, não li todas ainda, mas logo no inicio e em uma paginada rápida da pra ver que muita coisa boa está sendo aplicada.

Neste outro ( já ) temos alguns tutorias sobre a nova versão.

Bastante coisa já é encontrada do Google buscando ActionScript 4, a grande maioria em Inglês, deem uma Googlada e vejam alguns posts e artigos espalhados por ai, vale total a pena.

Fonte: OAXOA / Moock

Um novo começo está chegando

2008-04-24T23:19:00.004-03:00

De fato nunca escrevi no Frameless, e meu primeiro post será meta, desculpem. A questão é que o Fábio me chamou pro Frameless pra dar uma força com o blogger porque eu tinha mais experiência. O tempo passou, eu adicionei umas bobaginhas e ficou por isso mesmo.

Passou mais tempo e comecei a perceber o grande potencial que o FFL tem. E ao mesmo tempo descobri as maravilhas do WordPress. Então comecei a pilhar meus companheiros Framelezeiros a fazer a mudança. Passou mais tempo, e o Frameless está começando a ser elogiado e reconhecido por algumas pessoas, o que é um grande orgulho para todos nós e ainda estamos de cara velha.

Portanto aguardem, estamos trabalhando com afinco sempre que sobra um tempinho para trazer a versão 2.0 do Frameless, mais bonito, mais organizado e mais eficiente, tudo o que Frameless deve ser.

E além de pilhar para trocarmos de ferramenta, farei-me mais presente nos posts. Estou cozinhando alguns que espero ser úteis para aqueles que ainda tem medo de Frameless.

Loop perfeito usando fonte MP3

2008-03-27T21:36:00.015-03:00

Fala galera...depois de muuuito tempo mais um post.
Hoje a tarde no Studio um colega de trabalho ( Cauê ) perguntou aos Devs presentes se alguém já havia arranjado uma solução para fazer loop com MP3, para quem já tentou fazer isso com certeza se frustou com os paddings iniciais e finais que o MP3 sempre fica e acabou optando pelo WAV.
Neste post, mostro como contornar esse tipo de problema, podendo assim ter um loop perfeito em MP3, que é beeeeem mais leve que WAV, fazendo assim você ganhar uns Kb no seu filme.

Primeiramente peguei uma musica do rapper Xzbit e cortei o inicio para fazer o nosso Loop, na imagem eu mostro o arquivo em WAV, observe que o spectro é perfeito ( sem paddings ):

Porém assim que salvamos o mesmo arquivo como MP3 os paddings aparecem:

Para solucionar isso, precisamos primeiramente de 2 informações.

O padding inicial:

E o padding final:

Com base na seleção podemos ver que o MP3 em questão tem 26ms de padding inicial e 12ms de padding final. Com esses dois valores na mão podemos começar nosso código.

Neste tutorial estou utilizando AS2 ( ainda ).

As primeiras linhas como sempre são as variaveis que utilizaremos:


//--------------------------------------------------------------------//
// 1 -  Variáveis do Filme
//
var skipEnd:Number = 12; //Padding Final
var skipIni:Number = 26; //Padding Inicial

var soundFile:String = "loopXzbit.mp3"; //Arquivo MP3

var mySound:Sound = new Sound();

var stopPoint:Number; //Variavel que indicará o ponto final do som.

var interval:Number;//SetInterval que será utilizado para verificar a posição do som.

Depois disso, criamos as funções necessárias para executar o Loop.


//
//--------------------------------------------------------------------//
// 2 -  Funções Gerais
//

//Função que iniciao som e abastece as variaveis.
mySound.onLoad = function(){
//Declara o ponto final do Som.
stopPoint = mySound.duration - skipEnd;
//Inicia o Som com o padding inicial.
mySound.start( skipIni/1000 );
//Intervalo que verifica a posição do Som.
interval = setInterval( loopSound, 1 );
}

//Função de Loop
function loopSound(){
//Verifica se o som já chegou a final.
if( mySound.position > stopPoint ){
mySound.stop();
//Reinicia o som.
mySound.start( skipIni/1000 );
}
}

//Função que inicia o Loop.
function init(){
mySound.loadSound( soundFile );
}

E no final de tudo, chamamos a função inicial.


//
//--------------------------------------------------------------------//
// 3 -  Chamadas das Funções
//

init();

Pronto, nosso loop está ai funcionando perfeitamente.

Exemplo:
Clique para iniciar o Loop.

Codigo Completo:


//------------------------------------------//
// FlashFrameLess / Blog        //
// AS desenvolvida por Fábio Lima. 2008/03 //
// fabio@fabiotnt.com      //
//------------------------------------------//
//
//  Ordem de procedência da ActionScript
//
//  1)  Variáveis do Filme
//  2)  Funções Gerais
//         • Script das Funções
//   • Chamada de outras Funções
//  3) Chamadas das Funções
//
//--------------------------------------------------------------------//
// 1 -  Variáveis do Filme
//

var skipEnd  : Number  = 12;
var skipIni  : Number  = 26;
var soundFile  : String  = "loopXzbit.mp3";
var mySound  : Sound  = new Sound();
var stopPoint : Number;
var interval : Number;

//
//--------------------------------------------------------------------//
// 2 -  Funções Gerais
//

//Função que iniciao som e abastece as variaveis.
mySound.onLoad = function(){
//Declara o ponto final do Som.
stopPoint = mySound.duration - skipEnd;
//Inicia o Som com o padding inicial.
mySound.start( skipIni/1000 );
//Intervalo que verifica a posição do Som.
interval = setInterval( loopSound, 1 );
}

//Função de Loop
function loopSound(){
//Verifica se o som já chegou a final.
if( mySound.position > stopPoint ){
mySound.stop();
//Reinicia o som.
mySound.start( skipIni/1000 );
}
}

//Função que inicia o Loop.
function init(){
mySound.loadSound( soundFile );
}

//
//--------------------------------------------------------------------//
// 3 -  Chamadas das Funções
//

init();

Baixe o projeto aqui.

Bom é isso galera, espero ter ajudado.

JPEG Encoder (AS3) + FluorineFx .NET Flash Remoting Gateway

2008-02-19T09:40:00.003-03:00

Vamos entender neste post como o flash cria um jpeg e o envia através do FluorineFx para o servidor para que o servidor possa trabalhar o dado binário e salvar como um arquivo .JPG.

Veja aqui um Exemplo

Não vamos entrar em detalhes da instalação e nem da configuração básica de um site com FluorineFx, pois no próprio site do FluorineFx existe um ótimo tutorial para esta configuração inicial (FluorineFx Visual Studio 2005 Wizard).

Em primeiro lugar, que fique entendido que a responsabilidade de gerar a imagem é do Flash, e o servidor deve apenas receber os binários para gravar em disco. Para gerarmos o código da imagem (binário), vamos utilizar a classe JPEGEncoder.
Exemplo:

import flash.display.BitmapData;
import flash.utils.ByteArray;
import JPEGEncoder;

var bmpData : BitmapData = new BitmapData(width, height);
bmpData.draw(MEU_MOVIECLIP);
var objJPEGEncoder : JPEGEncoder = new JPEGEncoder(QUALIDADE);
var dadosEncode : ByteArray = objJPEGEncoder.encode(bmpData);

Muito simples não? O método draw da classe BitmapData obtém a imagem atual do clip, criamos uma instância da JPEGEncoder já passando a qualidade (0 à 100) e por fim “encodamos” o BitmapData utilizando o método encode da nossa instância da JPEGEncoder, ele nos retorna um Array de Bytes (flash.utils.ByteArray).

Agora ficou simples, temos em mãos o array de bytes, podemos enviar ele para o servidor para que o mesmo possa fazer sua parte, que nada mais é que salvar estes bytes em um arquivo. Utilizando o FluorineFx fica fácil, veja o código abaixo:

using System;
using System.Web;
using System.Drawing;
using System.IO;
using FluorineFx;
using FluorineFx.AMF3;

namespace ServiceLibrary.Imagem
{
    [RemotingService("Comentário da classe")]
    public class JpegEncoder
    {
        public void Salvar(ByteArray byteArray)
        {
            // Transfere de ByteArray para MemoryStream
            uint length = byteArray.Length;
            byte[] bytes = new byte[length];
            byteArray.ReadBytes(bytes, 0, length);
            MemoryStream stream = new MemoryStream(bytes);

            // Cria a imagem
            Image image = Bitmap.FromStream(stream);

            // Salva a imagem
            image.Save(
            HttpContext.Current.Server.MapPath("_upload/JpegEncoder.jpg"));

            // Libera o espaço na memória
            stream.Dispose();
            image.Dispose();
        }
    }
}

Este código deve ser inserido dentro da ServiceLibrary que você criou para a sua Solution.

Repare na classe ByteArray, é uma implementação do ByteArray do Flash no servidor, provida pelo FluorineFx.AMF3.

Sua Solution Explorer deve se parecer um pouco com esta:

Deixei selecionadas as referências para System.Drawing e Web propositalmente, pois são referências necessárias para o funcionamento da nossa classe.

Agora vamos a parte do envio do ByteArray criado no Flash apartir da JPEGEncoder para a nossa classe la no FluorineFx, a ServiceLibrary.Imagem.JpegEncoder. No exemplo anexo ao post (mais ao fim do post tem um link para download) utilizei uma classe que criei a pouco tempo para trabalhar com AMF no geral (br.com.bsoares.net.Amf), ela vai tomar muito espaço no post, portanto vou demonstrar somente a utilização dela:

/**
 * Função de callback para JpegEncoder.Salvar
 * @param resposta
 */
private function baixarSusseco (resposta : Object) : void {
    UtilNet.navegar(Config.URL_UPLOAD + "JpegEncoder.jpg", "_blank");
}

/**
 * Função de callback para JpegEncoder.Salvar
 * @param resposta
 */
private function baixarErro (resposta : Object) : void {
    trace("--< ERRO >----------------------");
    for each (var o : Object in resposta) {
        trace(o);
    }
    trace("--------------------------------");
}

/**
 * Retorna o ByteArray gerado pela JPEGEncoder
 * @return Byte Array
 */
private function obterByteArray () : ByteArray {
    var bmpData : BitmapData = new BitmapData(_flvPlayer.msk.width, _flvPlayer.msk.height);
    bmpData.draw(_alvoCaptura);
    var objJPEGEncoder : JPEGEncoder = new JPEGEncoder(_qualidade.value);
    var dadosEncode : ByteArray = objJPEGEncoder.encode(bmpData);
    return dadosEncode;
}

/**
 * Chama o método Salvar da Classe JpegEncoder utilizando o FluorineFx.
 * Neste exemplo, criei uma classe chamada AMF para tratar a comunicação
 * com o FluorineFx (serve também para AMFPHP)
 * @param Evento
 */
private function onBaixarClick (e : MouseEvent) : void {
    var objAmf : Amf = new Amf();
    objAmf.URL = Config.URL_AMF_GATEWAY;
    objAmf.onSusseco = baixarSusseco;
    objAmf.onErro = baixarErro;
    objAmf.executar("ServiceLibrary.Imagem.JpegEncoder.Salvar", obterByteArray());
}

Pelo comentário de cada método já podemos perceber como funciona o envio do Array de bytes.

Dicas:
• Neste projeto utilizei o FlashDevelop, que na minha opinião é um ótimo editor de Action Script.
• Observe a estrutura de classes, para quem ainda não entende muito de POO (Programação Orientada a Objetos) este post é um bom exemplo de organização de Packages e Nomenclatura de Variáveis, Classes e Métodos. Vou tentar em um próximo post escrever mais sobre Programação Orientada a Objetos (POO) de uma forma mais avançada abrangendo Encapsulamento, Herança e Polimorfismo, o qual não é o objetivo deste post).

Observações de Configuração:
Observe na imagem abaixo o projeto aberto no FlashDevelop:

Clique com o botão direito do mouse sobre JPEG_Encoder (AS3), vá em Properties, repare que na área Project Classpaths deve ser adicionado os dois diretórios (_Biblioteca_ e Classes).

Conclusão:
Vimos como é possível o Flash gerar uma imagem (JPEG) utilizando a classe JPEGEncoder, como enviamos os binários do JPEG para o ASP.NET utilizando o FluorineFx e como o FluorineFx salva os binários em disco.

Por hoje é isso pessoal.
Vocês podem fazer o download do projeto aqui.

Links relacionados:
• Exemplo: http://fluorinefx-jpegencoder.bsoares.com.br/
• FluorineFx: http://www.fluorinefx.com/
• FluorineFx download: http://www.fluorinefx.com/download.html
• FluorineFx Visual Studio: http://www.fluorinefx.com/docs/fluorine/vswizardnet20.html
• Live JPEG Encoder: http://www.bytearray.org/?p=26
• PNG Encoder in AS3: http://www.kaourantin.net/2005/10/png-encoder-in-as3.html
• FlashDevelop: http://osflash.org/flashdevelop

Fluorine, uma alternativa de Flash Remoting com ASP.NET

2008-02-02T03:25:00.001-02:00

Primeiramente gostaria de agradecer o nosso amigo (dono do blog) Fábio Lima, pelo convite para postar no Flash Frameless, valew Fabones!!! Agora, vamos ao nosso artigo.

Nos tempos em que o Flash ainda era da Macromedia, foi criada a especificação AMF (ActionScript Message Format), para facilitar a comunicação entre o ActionScript e as demais linguagens Server-side (Gateway, mais a diante vamos ver que o que controla a comunicação entre o ActionScript e o ASP.NET é com.TheSilentGroup.Fluorine.FluorineGateway). Temos hoje várias linguagem com alguma biblioteca que implemente AMF como por exemplo o PHP, Java, ColdFusion e também o ASP.NET. Existe uma alternativa de remoting muito boa para quem trabalha com PHP que é o AMFPHP, para quem o conhece será fácil entender o funcionamento do Fluorine. E para quem não o conhece tenho certeza de que vão encontrar muito material sobre ele na Internet.

Hoje em dia já estamos na versão 3 da AMF e a Fluorine também implementa bibliotecas para uso desta versão de AMF.

Vamos ao tutorial.

Nosso primeiro passo será o download do Fluorine no link a seguir: http://fluorine.thesilentgroup.com/fluorine/download.html
Não vou dar detalhes da instalação porque é sempre a mesma coisa de Next, Next e Finish.

Após realizada a instalação do Fluorine, vamos abrir o Visual Studio e criar uma nova aplicação web। File -> New -> Web Site, selecione Fluorine ASP.NET Web Application, como mostrado na figura seguinte:

Sua Solution Explorer deve se parecer com esta imagem:

Abra o arquivo Sample.cs (dentro de App_Code), vamos utiliza-lo em nosso primeiro teste do Fluorine.
Observe que a classe Sample está dentro do namespace www e que possui um método chamado Echo que retorna uma string e precisa de um parâmetro. O método pega a string do parâmetro (text), concatena com "Gateway echo: " e retorna.

using System;
using com.TheSilentGroup.Fluorine;

namespace www
{
[RemotingService("Fluorine sample service")]
public class Sample
{
 public Sample() { }

 public string Echo(string text)
 {
  return "Gateway echo: " + text;
 }
}
}

Pressione F5 para rodar a aplicação, clique sob o arquivo Console.aspx, note que você foi redirecionado para Fluorine.aspx, o Service Browser do Fluorine, deve se parecer com a imagem seguinte:

Você pode clicar no link “• www.Sample” para ver a especificação dos métodos e também obter um exemplo de código em ActionScript 1 e 2 que já roda os métodos da classes Sample.

Para dizer ao Fluorine que você quer que determinada classe seja acessada por Flash é só você importar “com.TheSilentGroup.Fluorine” (using com.TheSilentGroup.Fluorine;), e colocar o atributo “[RemotingService("Descrição")]” na classe. Fique atento que feito isso, o Fluorine só vai mostrar no Service Browser os métodos publicos da classe, é claro que sem contar o construtor.
Veja como o Service Browser detalha os métodos das classes e já deixa um exemplo de Script para utilizarmos no Flash:

Visto que o Service Browser já gera o código correspondente em ActionScript 1 e 2, vamos deixar o nosso tutorial mais interessante e mostrar uma forma de fazer as devidas chamadas em ActionScript 3.0. Abra o Flash, e cria um arquivo novo, no primeiro frame do Flash insira o código a seguir:

import flash.net.*;

function onResult(responds : Object) : void {
trace ("onResult: " + responds)
}

function onFault(responds : Object) : void {
trace("fault " + responds.toString());
}

var responder : Responder = new Responder(onResult, onFault);

var gateway : NetConnection = new NetConnection();
gateway.connect("http://localhost:2471/www/Gateway.aspx");
gateway.call("www.Sample.Echo", responder, "Primeiro teste do Fluorine!");

Fique atento quanto ao endereço do Gateway.aspx, pois no nosso exemplo estou utilizando o endereço que o próprio Visual Studio cria quando rodamos a aplicação, por isto que temos esta portar “maluca” (http://localhost:2471).

Depois que você rodar a aplicação no Visual Studio, pegar o endereço gerado por ele, colar o endereço dentro de ‘gateway.connect("ENDEREÇO");’ e exportar o flash, você deve receber a mensagem “onResult: Gateway echo: Primeiro teste do Fluorine!”. Se foi exatamente isso que aconteceu, uueebá! Você acabou de fazer o seu primeiro teste de Flash Remoting com ASP.NET utilizando Fluorine!!! Fácil não?

Agora vamos entender cada linha de código desse nosso ActionScript 3.0:
1ª – Importamos todas as classes que nos ajudam a efetuar conexões do Flash com o “Mundo Externo”.
3ª à 9ª – Criamos as funções de callback que vão receber as respostas da nossa requisição.
11ª – Criamos um Responder para armazenar as nossas funções de respostas (onResult e onFault).
13ª – Criamos o nosso gateway, responsável pela comunicação com o Fluorine.
14ª – Conectamos o nosso gateway ao Serviço do Fluorine.
15ª – Efetuamos a chamada para o método Echo da classe Sample que se encontra no namespace www, passamos como segundo parâmetro o Responder (criado na linha 11) e como 3º parâmetro passamos o uma string, pois o método Echo precisa de uma string para funcionar.

É isso ai pessoal, espero ter ajudado aqueles que precisam da combinação Flash + ASP.NET, como foi o meu caso, pois já conhecia o AMFPHP mas no meu trabalho atual utilizamos ASP.NET.

No próximo post vou mostrar como transferir um bitmap do Flash para o Fluorine, agora a coisa vai ficar boa :)

Link para download do projeto:
http://blog.bsoares.com.br/downloads/Fluorine.NET/20080202_Projeto.zip

Links relacionados:
• Fluorine: http://fluorine.thesilentgroup.com/fluorine
• Fluorine download: http://fluorine.thesilentgroup.com/fluorine/download.html
• Flash Remoting: http://www.adobe.com/devnet/flashremoting/
• AMF3: http://osflash.org/documentation/amf3
• AMFPHP: http://www.amfphp.org
• Gateway: http://pt.wikipedia.org/wiki/Gateway

Usando Caurina

2008-01-21T15:51:00.001-02:00

Fala galera....primeira postagem do ano. Ano novo, vida nova, trampo novo ( é me mudei do Studio anterior ) e por fim Classe nova, rs.

Logo quando comecei a usar essas classes de Tween, experimentei a caurina, porém não curti muito ( coisa de quem não sabe usar ) e pra mim ela fazia a mesma coisa que o tween do Flash, nunca me passou pela cabeça testar desempenho, consumo de memória, flexibilidade e etc, foi então que um dia por necessidade acabei adotando a GreenSock Lite.Tweener como classe de tween padrão, dai pra frente, só GS no code....não tenho nada a reclamar sobre ela, muito pelo contrario, é uma classe muito boa e me serviu e me serve ainda, porém neste novo Studio a galera só usa Caurina e fui praticamente obrigado a usar...é muito mais facil eu unico mudar para Caurina do que todos eles para a GS e por algum motivo eles usam a Caurina, enfim fui em busca de respostas e descobri muita coisa que nem imaginava, a flexibilidade da Caurina é absurdamente grande e por sua popularidade, cade vez mais é empregada em projetos insanos, caso do paper vision. Lembro-me que uma vez um amigo meu ( Mafra ), precisou andar com uma timeLine ao contrario e ai eu fui lá e fiz uma função que fazia isso pra ele, porém mal sabia eu que a Caurina fazia isso....e muuuito mais...ela controla até o Ease da timeLine, velocidade e até o tempo final da coisa, claaaaro que isso não é uma pratica legal, fazer timeLine correr pra traz só em casos extremos, pois em um projeto FrameLess isso seria feito em code mesmo.
Claro que isso é só uma das coisas que a Caurina faz, existem inumeros métodos, atributos, listeners e propiedades para serem usados como quiser...fica ai a dica para quem quiser conhecer melhor seguem os links da Documentação e do GoogleCode.

Abraços e até a proxima.

SilverLite

2007-12-04T09:12:00.001-02:00

Sempre é bom estarmos por dentro das novas tecnologias, por isso deem uma olhada no novo "concorrente" do Flash. rs

http://www.microsoft.com/silverlight/

Instale o Player e depois abra o mesmo site....

Minhas observações:

Lento, O menu carrossel da home, consome uma quantidade consideravel de processamento, Bug no loading dos filmes e o mais interessante de todos, a grande maioria dos filmes foram feitos em MAC.

:-)

E se você chamasse "xyzasd da silva kdsf"?

2007-11-28T22:22:00.001-02:00

Acho que não né?
Pois é, esse é só um dos motivos para se nomear corretamente os elementos de seu trabalho.

Nome do FLA.

É sempre bom começar as coisas pelo começo né?! Pois é, a primeira coisa a fazer é criar um nome para seu FLA, nada de ficar trabalhando com untitled-1.fla, dê logo um nome para o arquivo antes de criar qualquer coisa no FLA e seguindo o post anterior, tenho bom senso, se você está fazendo um teste de gravidade ou qualquer outro teste, não nomeio o arquivo como teste.FLA, pois logo mais você mesmo pode precisar do FLA e não vai encontrar, então trate de colocar um nome do tipo testeDeGravidade.fla. Eu particulamente tenho mania de nomear tudo com lowerCammelCase , mas você pode usar "_" também: teste_de_gravidade.fla.
Costumo também usar um sufixo para identificar a versão do FLA: testeDeGravidade_x01.fla e assim muda-se o nome para x02, x03...

Ordem no código.

Em um projeto, sempre é bom colocar um tipo de índice no começo do códio, para que tudo esteja em seu devido lugar, crie algo como:


//AS criada por Fulano de tal
//11/2007 - Teste de Gravidade
//
// 1 - Imports e Includes
// 2 - Configurações de elementos do Filme
// 3 - Variaveis do Clip
// 4 - Funções
// 5 - Chamada das Funções
//
//----------------------------------------------------//
//
// 1 - Imports e Includes
//
// Restante do código

Com isso, tudo que você criar em seu código, será facilmente localizado. Isso economiza tempo, ( Ctrl - F ) e ainda de quebra deixa seu código mais bonito.

Funções e Variaveis

Me diga qual a lógica de uma função que troca uma sessão de um site se chamar "trocaMeio" ou até mesmo "asdasd"?

Ou mesmo que tenha o nome do elemento na função, do tipo: "interna". Isso lá é nome de função!? Isso está mais para nome de movieClip.

Você está programando certo?
Você programa em uma maquina certo?
Que tal pensar um pouco como maquinas?

Para executar um programa em seu computador, você simplesmente digita o nome do programa? Acho que não né?
No caso do windows, ou você abre o executar e ai digita o programa, ou você vai pelo caminho normal: Iniciar -> Programas -> Etc etc. Faça a mesma coisa em seu código, quando uma função for trocar a sessão do site, crie ela como "trocarSessao". Isso ajuda um bocado, porém mais uma vez usa-se o bom senso, imagina uma função chamada "trocaImagemDoThumbDoMenuAmareloDaDireita". Pelo amor né?!

Outra regrinha legal é se sua função usa parametros, dê tipos a eles:


function trocarSessao( sessao:String ){
trace( sessao );
}

Praticamente a mesma regra deve ser usada para as variaveis, se você tem uma variavel que indica a sessao, não chame ela de "asdasd" chame-a de "sessao" e na hora de declara-la use a forma correta, não jogue sua var de qualquer jeito no codigo tipo:


sessao = "Home"

Faça do jeito correto:


var sessao:String = "Home";

Layers

Simples, coloque nome nas layers, inclusive a layer AS ( Onde só entra código ), Label( Onde vai o nome dos poucos Frames ) e se quiser a layer COMENT( Onde você faz qualquer comentário ). Novamente, use o bom senso e aqui você pode usar e abusar de espaços, simbolos, acentos e tudo que te vier a cabeça.

Livraria

Nomeie tudo, tudo mesmo e nada de Graficos na livraria, somente movieClips, estamos falando em AS2 e em AS2 Graficos não fazem praticamente nada, em AS3 as coisas mudaram bastante e ai sim Graficos são uteis, então sua Lib pode ter tudo, menos graficos ( típicos tweens ).
Se possivel separe as coisas por pastas. Ajuda na hora de achar alguma coisa.

Movie Clips e Botões

Esse monte de regrinhas, não serve apenas para deixar tudo mais Clean, aqui por exemplo, você ganha em produtividade.

Se voce coloca a instância de um botão de "botãoHome" e outro de "botãoHome_btn", na hora chamar um método as coisas mudam. No caso do botão com sufixo, assim que colocar um "." depois da instância, aparecerão todos os métodos e propriedades do mesmo, já no botão sem sufixo, nada aparece. A mesma coisa acontece com o movieClip_mc.

Bom acho que é isso, qualquer coisa que tiver um nome em seu projeto, nomeie-o com nomes coerentes.

Abraços.

Aplicar ou Não Aplicar.

2007-11-24T00:46:00.001-02:00

Eu sou da seguinte opinião. Tudo na vida deve ser usado com moderação. Se não estraga, o mesmo acontece com Classes, Includes, Funções, TIMELINE e também com FrameLess, logo antes de treinar códigos até a morte, treine também um pouco de Noção e Bom Senso. Não tem porque eu criar um quadrado que não vai fazer nada no palco, com lineTo se é bem mais simples cria-lo com a "Retangle Tool". Só para dizer que é FrameLess!? rs. Ai acaba ficando "HeavyAS". A mesma coisa para TimeLine e os outros. Minha opinião é que tudo seja usado junto, da melhor forma possível, para que um ajude o outro. Mas uma coisa é certa, um site com muita TimeLine é absurdamente mais complicado de se programar do que um "FrameLess". Bom é isso. Abraços a todos. Logo postarei uns exemplos.

Frameless?!?!

2007-11-24T00:27:00.001-02:00

Bom, como primeiro post de todos seria interessante explicar a todos a origem do ( Blog ) FrameLess.

Trabalho em uma agência web em São Paulo, onde a equipe é composta de Dev´s, Designers e Hibridos rs! Né Paulão!? Comecei a programar em AS e em outras linguagens com a ajuda do grande Dev. Bruno Soares e por ser um grande Dev ele também é ultra chato com padrões, performance, economia de linhas, recursos e etc. Não deu outra, segui o mesmo caminho e sempre estou querendo mais e mais deixar as coisas leves, praticas e como diz o Mafra, "Aero". Hoje o Bruno não está mais na agência e eu fiquei com a parte de Dev AS ( Demaaais! ). Um dia estavamos montando um hot site e o Marcel(Designer) estava passando o layout para o Flash, dei uma olhada e vi aquele monte de tween em timeline e mais um monte de coisa no palco...huummm Falei...nossa pra que tudo isso. Mostrei a classe de Tween e plim, tudo se tornou muito limpo e claro. Começamos então a brincar com o trocadilho TimeLineLess por causa de TableLess e logo depois o Marcel sugeriu que chamassemos de FrameLess, por ser mais curto e de mais facil pronuncia. Dai pra frente adotamos como regra no momento de criar um Flash, que ele seria o mais FrameLess Possivel. No almoço criei o logo e deu na telha de montar esse Blog. Espero que seja útil para a galera! Abraços!