What Does Marsellus Wallace Look Like?

Não deu pra não postar, muito bom o vídeo!



O original...

Logomarca NetRP

Criação da logomarca, padronização de cores e conceito. Job freelance.

Usando Path no Flex 4

Olá, hoje vou mostrar como usar um novo componente primitivo do Flex SDK 4, o Path:

"The Path class is a filled graphic element that draws a series of path segments. In vector graphics, a path is a series of points connected by straight or curved line segments. Together the lines form an image. In Flex, you use the Path class to define a complex vector shape constructed from a set of line segments."

(http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/primitives/Path.html)

Não vou arriscar uma tradução, mas basicamente fala que o Path é um elemento gráfico de preenchimento que desenha uma série de formas. Em vetores gráficos, o Path é uma série de pontos conectados por linhas retas e curvas. Juntas formando uma imagem. No Flex, você pode usar a classe Path para definir a construção de um vetor complexo a partir de um conjunto de linhas.

Bom, pelo menos viram que o curso de inglês está rendendo alguma coisa!

Continuado, fiz um exemplo bem simples usando o máximo que o framework possível, para mostrar também algumas outras facilidades que o novo SDK tráz:

No exemplo, eu fiz um Path com o data contendo váriaveis Bindable, e o preenchimento, borda e filtro, todos por MXML.
A animação, eu usei o framework TweenMax, vale a pena estudá-lo. É parecido com a Tweener do Zeh Fernando, mas com várias funcionalidades que fazem diferença.
Não usei nenhuma fórmula para o Path parecer elástico, o foco é como ficou fácil desenhar e animar vetores complexos.

Path.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               width="400"
               height="400"
               applicationComplete="applicationCompleteHandler()"
               viewSourceURL="srcview/index.html">
    <fx:Script>
        <![CDATA[
            import com.greensock.TimelineMax;
            import com.greensock.TweenMax;
            import com.greensock.easing.Bounce;
            import com.greensock.easing.Elastic;
            
            [Bindable]
            private var _timelineMax:TimelineMax;
            
            [Bindable]
            public var pathY:Number = 10;
            
            [Bindable]
            public var pathWidth:Number = 200;
            
            [Bindable]
            public var pathHeight:Number = pathWidth + pathY;
            
            private function applicationCompleteHandler():void
            {
                _timelineMax = new TimelineMax();
                
                _timelineMax.addChild( new TweenMax( this, 12, { pathY:height - myPath.height, ease:Elastic.easeOut } ) );
                _timelineMax.addChild( new TweenMax( this, 2, { pathHeight:height, ease:Bounce.easeOut } ) );
                
                _timelineMax.pause();
            }
            
            private function playClickHandler():void
            {
                _timelineMax.play();
            }
            
            protected function stopClickHandler():void
            {
                _timelineMax.currentTime = 0;
                _timelineMax.stop();
            }
            
            protected function labelClickHandler():void
            {
                navigateToURL( new URLRequest( 'http://www.idemax.net/' ), '_blank' );
            }
        ]]>
    </fx:Script>
    <s:Rect width="100%"
            height="100%">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#ffffff" />
                <s:GradientEntry color="#cccccc" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <mx:Image horizontalCenter="0"
              verticalCenter="0"
              source="@Embed('/assets/images/idemax.jpg')">
        <mx:filters>
            <mx:BlurFilter quality="3" />
        </mx:filters>
    </mx:Image>
    <s:VGroup top="10"
              left="10">
        <s:Button label="play"
                  click="playClickHandler()" />
        <s:Button label="stop"
                  click="stopClickHandler()" />
    </s:VGroup>
    <s:Path id="myPath"
            data="m 0 {pathY}
         q {pathWidth/2} {-((pathHeight-pathY)-pathWidth)} {pathWidth} 0
      Q {pathWidth+((pathHeight-pathY)-pathWidth)} {(pathHeight-(pathWidth/2))-((pathHeight-pathY)-pathWidth)} {pathWidth} {pathHeight}
         h {-pathWidth}
         Q {-((pathHeight-pathY)-pathWidth)} {(pathHeight-(pathWidth/2))-((pathHeight-pathY)-pathWidth)} 0 {pathY}
         z"
            horizontalCenter="0">
        <s:stroke>
            <s:SolidColorStroke color="#333333"
                                weight="1" />
        </s:stroke>
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#a8d848" />
                <s:GradientEntry color="#63802a"
                                 alpha=".5" />
            </s:LinearGradient>
        </s:fill>
        <s:filters>
            <s:DropShadowFilter angle="90"
                                distance="20"
                                quality="3"
                                blurX="20"
                                blurY="20" />
        </s:filters>
    </s:Path>
    <s:Label right="10"
             bottom="10"
             text="www.idemax.net"
             fontWeight="bold"
             alpha=".25"
             click="labelClickHandler()"
             buttonMode="true" />
</s:Application>

O ver ou baixar o projeto / código-fonte, clique com o botão direito na aplicação e depois em "View Source", ou clique aqui.

Qualquer dúvida, enviem para idemax@gmail.com.

FlashCamp Brasil - 15 e 16 de Janeiro / 2010 em Maceió - AL - Brasil

Na alta temporada do nordeste brasileiro, ocorrerá um evento que muitos (se não todos) os desenvolvedores de plataformas Flash estavam esperando.

O primeiro FlashCamp Brasil, nos dias 15 e 16 de Janeiro de 2010, em Maceió, Alagoas. Com palestras confirmadas de Sam Rivello (Adobe Flash Platform Consultant) e Lee Brimelow (Adobe Platform Evangelist).

Vejam mais no site: http://www.flashcampbrasil.com.br/

Vejo vocês lá!

Micro RP Informática - Login de Usuário no Wi-Fi

Esse foi do tipo "fast-freela", em menos de 4 horas foi concebido o layout!

TwitterFeed

Olá pessoal, estou testando um novo aplicativo para o Twitter, é o TwitterFeed.

E sobre novos posts e tutoriais... Estou analisando alguns bons assuntos. Em breve terão novidades...

Se tiverem idéias, enviem para idemax@gmail.com.

Bortolot Sistemas Elétricos

Participação: Criação do conceito e layout inicial (duas propostas).
Agência: CiaClique.

Seguindo o Mouse com Trigonometria

Olá, esse poste de hoje foi baseado na dúvida do leitor Jefferson A. Pereira. Espero que gostem...

Se não leu meu post sobre Trigonometria em Actionscript, leia-o antes clicando aqui.

Vou ensinar hoje como usar a trigonometria em actionscript para fazer o olhos seguirem o ponteiro do mouse. Assim...

No método construtor, vamos adicionar o listener MouseEvent.MOUSE_MOVE no STAGE:

public function Main() 
{
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}

No método listener, vamos limpar os riscos antigos dos triângulos que usamos para testar e executar a função que rotaciona o olho. Também forço o updateAfterEvent para que fique mais suave.

private function onMouseMoveHandler($event:MouseEvent):void 
{
    graphics.clear();
    
    rotateEye(eye1);
    rotateEye(eye2);
    
    $event.updateAfterEvent();
}

No método rotateEye é onde faço os cálculos para que o olho seja rotacionado de forma que "siga" o mouse do usuário. Primeiro eu encontro os catetos adjacente e oposto para que possa encontrar a hipotenusa:

var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));

Com isso posso calcular o ângulo de abertura do triângulo em radianos:

var radians:Number = Math.asin(catOp / hipot);

E transformar em graus:

var degree:Number = radians * (180 / Math.PI);

Ok, até essa parte tudo bem. Mas como o actionscript trabalha com graus de forma diferente, temos que verificar se o mouse está a direita ou esquerda do nosso olho. Fazemos isso comparando se o cateto adjacente está positivo ou negativo:

if (catAdj >= 0)
{
    $eye.rotation = degree;
}
else
{
    $eye.rotation = 180 - degree;
}

Se for negativo, subtraimos o valor de 180º. Por exemplo: 180º - (-90º) = 180º + 90º = 270º. Ou seja, está apontando na direção norte.

E depois adicionamos as linhas de teste e o log:

log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);

graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);

O método rotateEye ficou assim:

private function rotateEye($eye:MovieClip):void
{
    var catAdj:Number = mouseX - $eye.x;
    var catOp:Number = mouseY - $eye.y;
    var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));
    
    var radians:Number = Math.asin(catOp / hipot);
    var degree:Number = radians * (180 / Math.PI);
    
    if (catAdj >= 0)
    {
        $eye.rotation = degree;
    }
    else
    {
        $eye.rotation = 180 - degree;
    }
    
    log.text = 'catAdj: ' + catAdj;
    log.appendText('\ncatOp: ' + catOp);
    log.appendText('\nhipot: ' + hipot);
    log.appendText('\nradians: ' + radians);
    log.appendText('\ndegree: ' + degree);
    
    graphics.lineStyle(1, 0xff0000);
    graphics.moveTo($eye.x, $eye.y);
    graphics.lineTo(mouseX, mouseY);
    graphics.lineStyle(1, 0xcccccc);
    graphics.lineTo(mouseX, $eye.y);
    graphics.lineTo($eye.x, $eye.y);
}

Pronto!!!

Abaixo a classe Main inteira:

package  
{
    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    
    /**
     * ...
     * @author www.idemax.net
     */
    public class Main extends MovieClip
    {
        public var eye1:MovieClip;
        public var eye2:MovieClip;
        public var log:TextField;
        
        public function Main() 
        {
            stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
        }
        
        private function onMouseMoveHandler($event:MouseEvent):void 
        {
            graphics.clear();
            
            rotateEye(eye1);
            rotateEye(eye2);
            
            $event.updateAfterEvent();
        }
        
        private function rotateEye($eye:MovieClip):void
        {
            var catAdj:Number = mouseX - $eye.x;
            var catOp:Number = mouseY - $eye.y;
            var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));
            
            var radians:Number = Math.asin(catOp / hipot);
            var degree:Number = radians * (180 / Math.PI);
            
            if (catAdj >= 0)
            {
                $eye.rotation = degree;
            }
            else
            {
                $eye.rotation = 180 - degree;
            }
            
            log.text = 'catAdj: ' + catAdj;
            log.appendText('\ncatOp: ' + catOp);
            log.appendText('\nhipot: ' + hipot);
            log.appendText('\nradians: ' + radians);
            log.appendText('\ndegree: ' + degree);
            
            graphics.lineStyle(1, 0xff0000);
            graphics.moveTo($eye.x, $eye.y);
            graphics.lineTo(mouseX, mouseY);
            graphics.lineStyle(1, 0xcccccc);
            graphics.lineTo(mouseX, $eye.y);
            graphics.lineTo($eye.x, $eye.y);
        }
        
    }
    
}

Clique abaixo para fazer o download dos arquivos:

OlhosSeguindoMouse.rar (20.43 KB)

Você conhece QR-Code?

Você é capaz de entender o que está escrito na imagem acima?!

Twitter do Alessandro Maraca

Arte para o background do Twitter. Como ele é vereador pelo PSDB, fiz uma analogia com as aves.

http://twitter.com/alessandromarac

Rotação 3D no Flash Player 10

Olá, quem me segue no Twitter, está lendo ultimamente que estou fazendo um Coverflow usando a rotação 3D nativa do Flash Player 10. Então resolvi fazer um post antes de dormir para mostrar como é fácil usar essa nova classe.

Abaixo é o teste simples que fiz no Flash:

Obs.: Caso não funcione, instale o Flash Player 10 clicando aqui.

E a classe Main:

package  
{
    import fl.controls.Slider;
    import fl.events.SliderEvent;
    import flash.display.MovieClip;
    
    /**
     * ...
     * @author www.idemax.net
     */
    public class Main extends MovieClip
    {
        public var avatar:MovieClip;
        public var xAxis:Slider;
        public var yAxis:Slider;
        public var zAxis:Slider;
        
        public function Main() 
        {
            xAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
            yAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
            zAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
        }
        
        private function onSliderChange(event:SliderEvent):void 
        {
            var slider:Slider = event.target as Slider;
            
            switch(slider)
            {
                case xAxis:
                    avatar.rotationX = slider.value;
                break;
                case yAxis:
                    avatar.rotationY = slider.value;
                break;
                case zAxis:
                    avatar.rotationZ = slider.value;
                break;
            }
        }
        
    }
    
}

Clique abaixo para fazer o download dos arquivos:

3D.zip (504.56 KB)

Excellent OSH

Artes para uma apresentação de slides em cd-card.