Scite + AS3 + Flex-SDK + PaperVision3D

Posted: October 18th, 2009 | Author: andre | Filed under: Flash, Geral | 4 Comments »

Scite se tornou meu editor favorito por ser altamente customizável e tornando-o um editor multilinguagem muito bom. Baseado neste aspecto do scite resolvi agora começar a estudar um pouco de AS3, o Flex e o Papervision usando o scite para editar o código ao invés de utilizar o editor embutido do Flash.

A proposta aqui é utilizar o compilador do flex para criar os arquivos SWF sem precisar do flash, deixando o flash somente para edição gráfica do projeto. Para isso é necessário que tenhamos o Flex SDK que pode ser encontrado em:

FLEX 3 SDK : http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk

Dentro do pacote nos iremos encontrar os compiladores, o framework do Flex, e os players 9 e 10 (Flex 3.4 SDK) – o pacote tem aproximadamente 200MB descompactado.
O arquivo que procuramos é o mxmlc.exe localizado dentro de “bin”, este é o arquivo que irá compilar nosso arquivo “.as” e transformá-lo em um “swf”. Se quiser comprovar o funcionamento do mesmo é só arrastar um arquivo “.as” para o executável e ele irá criar o swf baseado neste script.

O Segundo passo é preparar o SciTE, iremos necessitar o SciTE e do arquivo API e .properties para que o SciTe tenha suporte “auto-completion” para AS3.
O SciTE pode ser baixado gratuitamente em:

SciTE(2.01) : http://www.scintilla.org/SciTE.html

Os arquivos api e properties podem ser encontrados aqui:

SciTE AS3 : http://arthurdick.com/projects/as3/

Para utilizar a api AS3 pro Scite é necessário adicionar um linha no seu arquivo de configuração:

import actionscript
(supondo que o seu arquivo actionscript.properties está no mesmo diretorio que o SciTE caso contrário use: “import diretorio/actionscript” onde “diretorio” é onde seu arquivo actionscript.properties está)

Pronto neste ponto você já é capaz de utilizar autocompletion ao editar arquivos AS3.
Agora a parte importante: Fazer o SciTE utilizar o mxmlc.exe para compilar o script “.as”. No meu caso eu adicionei algumas linhas no arquivo actionscript.properties:

#location of FlashPlayers
flashplayer10=caminho_para_o_flex_sdk_3.4\runtimes\player\10\win\FlashPlayer.exe
flashplayer9=caminho_para_o_flex_sdk_3.4\runtimes\player\win\FlashPlayer.exe

#location of mxmlc
mxmlc=caminho_para_o_flex_sdk_3.4\flex_sdk_3.4\bin\mxmlc.exe

e editei algumas linhas de ações do menu:

#disable default flash commands
command.go.subsystem.*.as=1
command.compile.$(file.patterns.actionscript)=$(mxmlc) $(FileNameExt)
command.go.$(file.patterns.actionscript)=$(flashplayer10) $(FileName).swf

Pronto! Agora é só usar Crtl+F7 para compilar o arquivo e F5 para executá-lo usando o flashplayer 9 ou 10.

Depois de fazer esse “trajeto” todo eu ainda queria o papervision, o qual quero muito utilizar:

Papervision : http://code.google.com/p/papervision3d/

Neste ponto já é fácil incluir este framework junto com o Flex, só é preciso baixar o arquivo compilado .swc (Papervision3D_2.0.883.swc na data deste post) e copiá-lo para dentro do diretório frameworks\libs (que também contém o framework do flex)

So far so good…
Neste ponto o SciTE já é capaz de compilar scripts AS3 sem precisar do flash e utilizar o framework PaperVision3D. Só pra testar utilizei o mesmo script que já havia postado aqui e funcionou normalmente.


CSS Font Stacks!

Posted: October 16th, 2009 | Author: andre | Filed under: CSS, Design | No Comments »

Este é um problema muito comum ao se criar websites é manter a tipografia pelo menos com a mesma “cara” independente do sistema operacional.

Dependendo do sistema operacional os tipos de fontes instaladas – e estas serão usadas na renderização do texto do seu website, por isso é necessário criar as chamadas “Font Stacks” que são “cadeias” de fontes que serão utilizadas para renderizar o seu texto. O princípio é simples, é preciso definir a propriedade “font-family” no CSS de modo que siga uma ordem de uso. Por exemplo:

body{
font-family:Verdana,Geneva,sans-serif;
}

Neste caso, a primeira tentativa de uso seria  a “Verdana” que está presente na maioria dos sistemas, se por um acaso não houver suporte para esta fonte, é utilizada a segunda fonte Geneva, num caso raro onde não encontrada esta segunda será utilizada a ultima fonte que é o tipo de fonte genérico “Sans-serif”.

A partir dessa ideologia e após uma busca pela internet encontrei vários casos onde são mostrados font stacks interessantes, esta foi a que achei melhor:

The ‘wide’ sans serif stack

body{font-family:Verdana,Geneva,sans-serif;}

The ‘narrow’ sans serif stack

body{font-family:Tahoma,Arial,Helvetica,sans-serif;}

The ‘wide’ serif stack

body{font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;}

The ‘narrow’ serif stack

body{font-family:'Times New Roman',Times,serif;}

The monospace stack

body{font-family:'Courier New','Courier',monospace;}

Fontes:

http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks
http://www.sitepoint.com/article/eight-definitive-font-stacks/3/
http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/