Rogério Lino

Web development and tips

Flash: SWF Com Fundo Transparente

Mesmo sendo fácil ainda há gente que não conhece. Através de um parâmetro () dentro da tag object podemos especificar se o arquivo terá o fundo transparente.

<param name="wmode" value="transparent" />

Para muitos que aindam usam a tag embed para funcionar em todos os browsers tem que colocar o atributo wmode nela também:

<embed wmode="transparent" ... />

Então o código validado do SWF com fundo transparente ficaria assim:

<object type="application/x-shockwave-flash" data="filme.swf" width="550" height="400" >
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="filme.swf" />
    <param name="wmode" value="transparent" />
</object>

Uma coisa que acontece também que pode gerar bastante dor de cabeça é quando algum elemento do HTML que deveria ficar por cima do SWF e acaba acontecendo o contrário. E mesmo alterando o z-index não resolve. Sendo a solução apenas deixar o SWF com o fundo transparente.

Flash: Tag Object

Depois do swf gerado é hora de colocá-lo no HTML. No próprio Flash ao apertar o F12 ele publica o filme e já cria um HTML. Tudo muito bom, se não fosse pelo código gerado, muito sujo e não é validado pela W3C.

O código gerado é igual a este:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://..." width="550" height="400">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="filme.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="filme.swf" quality="high" bgcolor="#ffffff" width="550" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://..." />
</object>

O problema em sí não está na tag object e sim na embed que não é reconhecida pela W3C. Beleza, então eu tiro a tag embed e está tudo certo? Errado.

Primeiramente vamos conhecer mais sobre a tag Object.

A tag object serve para anexar à página algum dos três tipos de dados (objects, images and applets), mas para alguns existe uma tag mais adequada, como por exemplo uma imagem.

The [ OBJECT](http://www.w3.org/TR/html4/struct/objects.html#edef-OBJECT) element allows authors to specify all three types of data, but authors may not have to specify all three at once. For example, some objects may not require data (e.g., a self-contained applet that performs a small animation). Others may not require run-time initialization. Still others may not require additional implementation information, i.e., the user agent itself may already know how to render that type of data (e.g., GIF images). link: [http://www.w3.org/TR/html4/struct/objects.html#edef-OBJECT ](http://www.w3.org/TR/html4/struct/objects.html#edef-OBJECT)

Então respondendo a pergunta acima a tag object sem a embed não irá funcionar, a não ser que o atributo type (que no código acima você percebe que ele está na embed) esteja definido adequadamente. E também seja colocado o atributo data (que funciona igual ao href).

Resulmindo o código acima ficaria assim:

<object type="application/x-shockwave-flash" data="filme.swf" width="550" height="400">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="filme.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
</object>

Pois então com o exemplo acima, além de validar sua página o código fica mais limpo e enxuto.

Mais sobre:

http://www.maujor.com/tutorial/adeus-embed.php

Flash: startDrag() E stopDrag()

Aproveitando o post anterior sobre uma div arrastável usando Javascript. Vamos ver agora como seria feito uma janela também arrastável só que no Flash.

Primeiro de tudo é desenharmos nossa janela, ela será divida da seguinte maneira:

**janela** (MovieClip Principal) |– **barra**; |– **minimax**; |– **fechar**; -- **conteudo**.

Use as ferramentas de desenho para construir a janela, mas deixe os desenhos separados como mostrado acima. Se você ainda não está familiarizado leia este post primeiro.

A minha janela ficou assim:

Desenho da Janela

Aonde cada parte (desenho) é um MovieClip diferente, para transformar o seu desenho em MovieClip selecione ele aperte F8 coloque o nome do MC e verifique se o radiobutton MovieClip realmente está marcado.

Após criado o Movie devemos instanciâ-lo, para isso clique nele e vá na aba Propriedades (CTRL+F3), preencha o campo instância (siga os nomes definidos acima).

Com os quatros MovieClips prontos (barra, minimax, fechar e conteudo) selecione-os e aperte novamente F8 para transformá-los no nosso MC janela.

Caso você queira editar algum movie ou apenas posicionar melhor, dê um duplo clique nele e poderá navegar através dos demais que estão contidos nele.

Agora com os MCs criados e instanciados, vamos às actions:

Clique no frame principal (o primeiro frame da timeline) e aperte F9. Cole o código abaixo:

this.janela.barra.onPress = function() {
    this._parent.startDrag();
}

this.janela.barra.onRelease = function() {
    this._parent.stopDrag();
}

this.janela.fechar.onRelease = function() {
    this._parent._visible = false;
}

this.abrir.onRelease = function() {
    this._parent.janela._visible = true;
}

this.janela.minimax.onRelease = function() {
    this._parent.conteudo._visible = !this._parent.conteudo._visible;
}

Ao contrário do Javascript e das versões bem mais antigas (até a 5) do Flash não é necessário um método para pegar um alvo. Você mostra o caminha para se chegar nele a partir do palco (_root sempre para raiz, ou this este filme - isso ficará mais claro quando aprendermos sobre carregar filme externo).

Por exemplo o movie fechar está no dentro do MC janela que por sua vez está no palco, então: this.janela.fechar. E se você estiver em um MC (fehcar por exemplo) e queira acessar o seu pai (janela), fica assim: this._parent.

Repare no código que a lógica é a mesma, porém no Flash tem um método nativo para realiza esse arrastar (startDrag()) e um para parar esse arrastar (stopDrag()). O que no HTML temos que fazer na mão mesmo.

O que reduz e muito o código final. Agora é só testar (CTRL+ENTER).

Para ver o exemplo clique aqui.

Javascript: Draggable Window

Tem algum tempo já que estava de bobeira e acabei fazendo um exemplo de uma div (janela) arrastável.

Simulei uma janela padrão em alguns Sistemas Operacionais, tem a barra superior com o título da janela, o espaço ao centro para o conteúdo e uma barra no final, a statusbar (essa só para incrementar mesmo).

Há nela também três opções: “minimizar/maximizar”, “esconder” e “fechar”.

Na opção “minimizar” é alterado a propriedade display do CSS da parte do conteúdo para none. Voltando para block com “maximizar”.

O “esconder” além de aproveitar a função para “minimizar” também altera o display da statusbar para none. E seta a posição da janela para a origem da tela (left:0 e top: 0).

E o “fechar” por sua vez altera a propriedade do visibility do CSS da janela toda para hidden. E no palco tem uma opção para (re)abrir a janela, que altera o visibility para visible.

O porquê de usar visibility para “fechar” a janela é porque não queremos mudar o comportamento da janela, como ela é vista, e sim só sumir, torná-la invisível. O mesmo não funcionaria muito bem com o conteúdo porque fazendo ele só sumir ainda ficaria o seu “espaço guardado” fazendo apenas o conteúdo ficar invisível ao invéz da janela realmente minimizar.

Ao arrastar a janela também é alterado o cursor, mudando para move. O que caracteriza melhor a janela sendo arrastada.

Qualquer dúvida é só deixar no comentário.

Exemplo: Draggable Window

Source: Draggable Window

CSS: Position Fixed IE

Um atributo muito interessante quem tem na propriedade position é o fixed.

Com ele você pode posicionar um objeto no palco (como se fosse absolute) só que ele sempre estará na “mesma posição”, mesmo rolando a tela.

Infelizmente o IE (até o 6) não reconhece esse atributo, mas antes de sairmos tentando bolar um código em javascript para ficar posicionando a janela quando o usuário rolar a tela. Vamos usar só o CSS.

Pensando: Poderíamos usar como position o absolute já que com ele a gente tem uma liberdade maior para posicionar o objeto. Mas ainda temos o problema com a rolagem.

Mas tem o overflow, podemos colocar como auto para criar uma barra de rolagem para o que ultrapassar o limite, e o nosso objeto continuará sempre no mesmo lugar. Pronto!

Nos browser espertos (smarts) fica assim:

#menu {
    top: 15%;
    left: 50px;
    width: 200px;
    padding: 20px 0px;
    border: 2px solid #CCCCCC;
    position: fixed;
}

Dá para notar que é como estivéssemos colocando como absolute mesmo (left, top). Só isso basta.

Agora para o IE vamos colocar o CSS dentro de um comentário do HTML (que por sua vez só ele mesmo para ler como código o comentário):

<!--[if IE]>
<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
#menu {
    position: absolute;
}
</style>
<![endif]-->

Colocamos o body e o html com overflow auto e altura 100% para confirmar que sua altura é toda a janela (a visão do usuário). E definimos o objeto com postion absolute, não precisamos colocar left nem top, porque já foram passados acima, e só estamos sobrescrevendo (position).

Veja esse exemplo funcionando. Dê uma olhada no código-fonte.

Na internet podemos encontrar outros métodos para isto. Vi um que continha expressões javascript no CSS (coisa do IE) e outro que usava javascript puro para posicionar.

Para mais exemplos, resultado da busca:

Powered Google

Javascript: Classe Math

Assim como a classe Date() uma outra classe nativa em várias linguagens que quebra um galho legal é a Math (Mathematical).

Além de contar com algumas funções ela também fornece valores de constantes ou valores matemáticos, como por exemplo PI e raiz quadrada de 2.

Funções:

Math.round() : Arredonda um valor real para inteiro. Se o valor da casa depois do ponto for maior ou igual a 5 é arredondado para cima, caso contrário para baixo;

Math.round(4.5); // retorna 5
Math.round(3.49); // retorna 3

Math.random() : Retorna um valor real e aleatório entre 0 e 1.

Math.random(); // ex 0.56766776... (até 17 números depois do ponto)

Math.max() : Retorna o número de maior valor entre dois.

Math.max(4,7); // retorna 7

Math.min() : Retorna o número de menor valor entre dois.

Math.min(4,7); // retorna 4

Constantes Matemáticas:

Math.E // valor de Euler (Oiler)
Math.PI // valor de PI
Math.SQRT2 // valor da raiz quadrada de 2
Math.SQRT1_2 // valor da raiz quadrada de 0.5 (1/2)
Math.LN2 // valor do Logaritmo Natural de 2 (ln 2)
Math.LN10 // valor do Logaritmo Natural de 10 (ln 10)
Math.LOG2E // valor do Logaritmo de E (Math.E) na base 2
Math.LOG10E // valor do Logaritmo de E na base 10.

Veja em ação:

Clique aqui para ver esses exemplos funcionando.

CSS: Centralizar Horizontal E Vertical

Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade de sua altura e metade de sua largura na margem. Por exemplo se um elemento tem 500px de largura e 400px de altura na margem vai ter um valor negativo (para top e left) igual a metade destes valores:

#minhaDiv {
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    position: absolute;
    border: 1px solid black;
}

Ou resumindo: _margin: -200px auto auto -250px; _

Pronto sua div vai ficar centralizada na janela. Mas temos um problema com isso.

Nesse caso sabemos o valor da altura do objeto, então tiramos a diferença na margem. Mas e se tivessemos um objeto em que sua altura pode variar (ou seja não sabemos o valor da altura) ?

Podemos solucionar isso usando o vertical-align, mas para ele funcionar temos que definir o display da div como table. A má notícia é que o nosso amigo IE não reconhece essa propriedade (e nem o valor table como display). A boa notícia que usando um hack para o IE dá pra acertar isso.

A estrutura para simular uma tabela fica assim:

<div id="tabela">
    <div id="cell">
        <div id="conteudo">
            <p>parágrafo</p>
        </div>
    </div>
</div>

E definimos no CSS o display da div tabela como table e da div cell como table-cell. Mas antes temos que acertar o html, body e a tabela para 100% (largura e altura).

html, body {
    width: 100%;
    height: 100%;
    margin: 0px; /* retirando a margem padrão */
    padding: 0px; /* retirando o padding padrão */
}

#table {
    width: 100%;
    height: 100%;
    display: table;
}

#cell { 
    display: table-cell; 
}

Com as divs já funcionando como tabela vamos definir a vertical-align como middle, isso na div cell.

#cell {
    vertical-align: middle;
    display: table-cell;
}

Falta agora setar a margin do conteudo como auto. E colocar um valor para largura, senão vai ficar 100%.

#conteudo {
    width: 500px;
    margin: auto;
}

Pronto, a div já vai aparecer centralizada no browser. Mas ainda está faltando o nosso amigo IE.

A idéia é quase a mesma da primeira situação. Como antes do conteudo temos uma div (cell), a gente defini seu position como absolute, e top como 50%. E na conteudo com position como relative, e top como -50%.

Lembrando que para não atrapalhar a definição correta, usaremos um hack que só influenciará no Internet Explorer.

Ficando o CSS final assim:

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    background: #f1f1f1;
}

#cell {
    vertical-align: middle;
    display: table-cell;
    _position: absolute;
    _top: 50%;
}

#conteudo {
    width: 500px;
    margin: auto;
    padding: 20px;
    border: 1px solid black;
    _position: relative;
    _top: -50%;
}

E o HTML:

<div id="table">
    <div id="cell">
        <div id="conteudo">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
</div>

Mais sobre:

Exemplo com a primeira situação

Maujor - Centralizar Vertical

[update testado=“IE6, IE7, FIREFOX 2 e OPERA 9”]

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

[/update]

Flash: AS2 “Hello World!”

Vamos nos familiarizar com a ActionScript 2, nesse exemplo veremos como exibir uma mensagem no meio do palco sem usar a ferramenta de texto, apenas por AS.

Após abrir o Flash (na versão 6 ou superior) escolha novo arquivo (New/Novo > Flash Document) .

Clique no primeiro frame da Timeline e aperte F9 (atalho para abrir a janela das Actions).

Criando então o campo de texto aonde aparecerá a mensagem.

this.createTextField("meuCampo", _root.getNextHighestDepth(), 0, 0, 0, 0);
meuCampo.autoSize = true;
meuCampo.html = true;
meuCampo.text = "Hello World!";

É passado como parâmetro no método createTextField() o nome de instância do campo de texto (text field), a profundidade (o que define o que fica em cima do que - nesse caso usamos um método para retornar um valor para seu objeto ficar por cima de todos), o valor da posição em x, em y, largura e altura.

Não precisa se preocupar porque todos valores estão zerados, que como pode ver logo embaixo definimos que o nosso campo de texto pode auto ajustar o seu tamanho (autoSize). Logo aumentará de acordo com o tamanho do texto.

Mais abaixo pertimimos o campo de texto aceitar tags, ele aceita html.

E por fim o nosso texto, a mensagem que queremos que apareça - “Hello World!”. Como nosso campo de texto tá definido como html poderiamos passar o texto assim:

meuCampo.htmlText = "Hello World!";

Assim o campo de texto irá tratar as tags e mostrará só o texto. Isso é muito bom porque você pode passar um texto todo e ele ficará já pré-definido pelas tags. E também nos possibilita utilizar CSS para formatar o texto, mas isso não veremos agora.

Se você executar agora o arquivo verá a mensagem aparecer na parte superior esquerda, e com a formatação padrão.

Vamos então criar o objeto que formatará o nosso texto (textFormat).

var style:TextFormat = new TextFormat();
style.align = "center";
style.bold = true;
style.italic = true;
style.color = 0x000099;
style.font = "Verdana";
style.size = 30;
style.url = "http://rogeriolino.com"

Para poder conhecer melhor as propriedades vamos deixar o texto bem “emperequetado”. Alinhamento central (pode escolher: “justify”, “center”, “left”, “right”), negrito (bold), italico (italic), a cor é representada de uma forma diferente do CSS ao invéz da “#” na frente usa-se “0x” (zero e xis) mais o código hexadecimal, a font (poderia ser “Arial” por exemplo), o tamanho (size) e por graça um link (url) passando o destino dele. Para este último funcionar tem que definir o campo como html.

Agora só falta adicionar esse estilo ao campo:

meuCampo.setTextFormat(style);

E colocar o ele centralizado no palco:

meuCampo._x = (Stage.width-meuCampo._width)/2;
meuCampo._y = (Stage.height-meuCampo._height)/2;

Posição x recebe a largura do palco menos a largura do texto dividido por 2; Posição y recebe a altura do palco menos a altura do texto dividido por 2;

Para funcionar corretamente temos que alinhar por último já que o tamanho do campo de texto irá mudar ao aplicar o estilo.

Agora é só executar. Abaixo o código completo:

this.createTextField("meuCampo", _root.getNextHighestDepth(), 0, 0, 0, 0);
meuCampo.autoSize = true;
meuCampo.html = true;
meuCampo.text = "Hello World!";

var style:TextFormat = new TextFormat();
style.align = "center";
style.bold = true;
style.italic = true;
style.color = 0x000099;
style.font = "Verdana";
style.size = 30;
style.url = "http://rogeriolino.com";

meuCampo.setTextFormat(style);
meuCampo._x = (Stage.width-meuCampo._width)/2;
meuCampo._y = (Stage.height-meuCampo._height)/2;

Javascript: Classe Date()

Uma classe muito funcional do Javascript e em muitas outras linguagens é a Date().

Definindo um objeto como Date podemos pegar a hora, minutos, segundos, dia, mês, …, local ou do horário universal.

Usando:

var minhaData = new Date();
var hora = minhaData.getHours();
window.alert( hora);

Será mostrado na janela de aviso a hora local.

Podemos então aproveitar isso para mostrar uma mensagem (bom dia, boa tarde ou boa noite) para o usuário.

var minhaData = new Date();
var hora = minhaData.getHours();
var msg = "Boa noite";
if ((hora >= 6) && (hora < 12)) {
    msg = "Bom dia";
} else if ((hora >= 12) && (hora < 18)) {
    msg = "Boa tarde";
}
window.alert(msg);

Define uma variável como Date(), e pegamos a hora local. O porquê da variavél msg receber “Boa noite” já vai dar para entender.

Perguntamos então se o valor de hora é maior ou igual a 6 e menor que 12 (6 a 11), então ainda é dia. Caso contrário pode ser noite ou tarde, por isso perguntamos se esse valor é maior igual a 12 ou menor que 18 (12 a 17), então é tarde.

Se não estiver entre os valores acima então é noite. Por isso já setamos a variável como “Boa noite”, só para economizar um else. =]

Brincando um pouco mais com a Classe Date fiz um simples relógio, e mostrar a data formatada no site (na página também há um link para explicação de cada função da classe). Para conferir segue o link: Classe Date().

Mais sobre:

http://www.w3schools.com/jsref/jsref_obj_date.asp

CSS Gallery

Sempre é bom estarmos observando, conhecendo, novos layouts e aprendendo com eles.

Já existem inúmeros sites indexadores de sites Tableless (CSS Layout).

Abaixo segue uma listagem de alguns deles:

http://www.cssdrive.com/ http://cssvault.com/ http://www.cssbeauty.com/gallery/ http://www.cssimport.com/ http://www.stylecrunch.com/ http://www.csselite.com/ http://www.unmatchedstyle.com/ http://cssmania.com/ http://www.cssreboot.com/gallery/ http://www.css-website.com/ http://www.cssbloom.com/ http://www.css-design-yorkshire.com/ http://cssbrain.hu/ http://screenfluent.com/ http://www.isquare.it/ http://www.webdigity.com/cssGallery/ http://www.creative-pakistan.com/

Quer mais? CSS Galleries