FLASHGURU (155 pts)

ZEBEDIAH (35 pts)

SÁVIO PONTE (39 pts)

ÉMERSON ROCHA (85 pts)

SASHA GUDEY (235 pts)

ILVA RUDEV (90 pts)

BÁRBARA TOSTES (64 pts)

AUTOR DESCONHECIDO (100 pts)

JONAS GALVEZ (521 pts)

MARCOS JOSÉ PINTO (44 pts)

PANDOGO (82 pts)

DENIS CARAVALHO (85 pts)
Treinamento PontoFlash de Flash e ActionScript

Existe um jeito de fazer um movieclip aparecer em locais aleatórios da tela?

Como atualizar o texto de um filme Flash sem precisar editá-lo? Como funciona esse objeto loadVars?

Novo software une animação em 3D ao Flash

Dicas sobre os métodos Slice e Splice do objeto Array.

Como fazer um movieclip andar na diagonal?

Como importar frases de um TXT e mostrar uma randomicamente?

Como fazer um preloader móvel, que corre atrás do mouse?

Quero uma seqüência de fotos passando continuamente sem intervalos.

Alguém conhece integração flash no access. Não como acesso web, e sim como desing gráfico para formulários de access.

Eu queria por a minha página na net, mas em FullScreen. Mas não sei fazer isso no flash.

Dá pra fazer um menu popup usando a propriedade _currentFrame?

Como posso fazer uma validação de CPF?

Para que serve "umMovieClip.onMouseMove = updateAfterEvent;"?

Como trabalhar com o onLoad em arquivos externos no MX?
Salvando alterações feitas no layout (shared Objects).

Carregamento dinâmico de JPG e máscara por AS

Motion Blur.

Criação de um CD híbrido

3D Wireframe.

LOAD vs XMLConnector, vantagens e diferenças no carregamento do XML

O desenho animado abrindo sites.

Efeito de Fogo no Photoshop

Jogo da Forca

Atenuação (easing).

A história do Flash.

Load Movie into level (nível)
Lensflare

Menu Silverado

Envelhecimento

Alphacolor

Abrirefecharjanelas

MovieClip.onCollision

Troca cor de fundo

Multi text load

Drag MC 2

Corrente

3d FlashClub

Bola de vidro
HOME | TUTORIAIS
Gerando pop up's com conteúdo html dinâmico usando script client-side
por Eduardo Walmott

PontoFlash - Professisonal Resources (http://www.pontoflash.com.br)

Gerar conteúdo html dinamicamente usando linguagens como ASP e PHP (server-side) juntamente com um banco de dados é relativamente fácil, mas muitas vezes pode ser dispensada, como no caso do site da Courovale (www.courovale.com.br) onde há uma quantidade relativamente grande de imagens a serem ampliadas, mas que um banco de dados só traria mais trabalho para o desenvolvimento, então optou-se por uma solução rápida e prática: JavaScript.

   No exemplo do site mencionado há dois tipos de janelas distintas, uma na seção Empresa e outra na seção Produtos. Neste tutorial, vou usar um exemplo baseado no script da seção Empresa por este ser mais simples e flexível, pois as janelas da outra seção são mais específicas e tem um tamanho de imagem fixo, o que não ocorre com a maioria dos projetos onde as imagens tem tamanhos variados.

   O primeiro passo é gerar um arquivo html que será o Master, ou seja, definir o layout da janela pop up, temos que ter todas a imagens que serão inseridas e uma imagem de exemplo para a janela. colocaremos também uma função javascript para fechar a janela, a tabela abaixo será o conteúdo deste arquivo-exemplo:

   Agora vamos entrar no código Javascript. Criaremos um arquivo texto em branco e nele colocamos o código abaixo, atentando apenas para a parte que está em negrito/itálico. Esta parte do código marcada é o conteúdo do arquivo "master" apenas modificado em algumas partes colocando-se variáveis nos lugares onde se faz necessário.

   Observe também que está se usando aspas duplas e simples. Este detalhe é importantíssimo para o javascript poder rodar. O que antes era aspas duplas no html fica com aspas simples e as strings no javascript devem ser com aspas duplas. Coloquei vários comentários para deixar bem claro o código:

function centrar(foto,largura,altura,secao,descricao) {
// largura = largura da imagem passada por parâmetro mais 4 (2+2)
// pixel de borda da tabela horizontalmente

largura = largura + 4
// largcel = largura menos largura do logotipo usado
largcel = largura - 84
// altura = altura mais altura do logotipo mais altura das
// bordas (4*2) da tabela verticalmente

altura = altura + 42 + 25 + 8
// posiciona a nova janela centralizada na tela independentemente
// da resolução do usuário e do tamanho da janela

posx = (screen.width/2)-(largura/2)
posy = (screen.height/2)-(altura/2)
// configurações da janela
features="width=" + largura + " height=" + altura + " top=" + posy + " left=" + posx
newin = window.open("","janela",features)
newin.blur()
// início da geração do conteúdo html
var arquivo = ""+
"<html>" +
"<head>" +
"<title>" + secao + " - " + descricao + "</title>" +
"</head>" +
"<body text='#000000' leftmargin='0' topmargin='0' bgcolor='#FFFFFF'>" +
"<table width=" + largura + " border='0' cellspacing='2' cellpadding='0' bordercolor='#FFFFFF'>" +
" <tr> " +
" <td width='80'><img src='logo_pf.gif' width='80' height='42'></td>" +
" <td bgcolor='#FFA824' width=" + largcel + ">" +
" <div align='center'><img src='" + secao + ".gif' width='150' height='42'>" +
" </td>" +
" </tr>" +
" <tr> " +
" <td colspan='2'><img src='" + foto + ".jpg'></td>" +
" </tr>" +
" <tr> " +
" <td colspan='2' bgcolor='#FFA824'>" +
" <div align='right'><a href='javascript:window.close()'>" +
"<img src='btn_fechar.gif' border='0'></a></div>" +
" </td>" +
" </tr>" +
"</table>" +
"</body>" +
"</html>"

// fim da geração do conteúdo html
newin.document.open()
// imprime conteúdo gerado
newin.document.write(arquivo)
newin.document.close()
newin.focus()
}

   Bom vamos agora salvar este arquivo texto com o nome melhor convier, apenas vamos cuidar para salvar com a extensão .js, eu vou salvar como "popup_dinamico.js", na tag HEAD do html que vai conter os links para abrir as pop up é necessário inserir o link relativo a este arquivo .js, no meu caso ficaria assim:

<script language="javaScript" type="text/javascript" SRC="popup_dinamico.js"></script>

Veja agora um exemplo de como usar o script:

javascript:centrar('popup_dinamico3',280,358,'popup_dinamico2','foto01')


clique na imagem para ampliar

Baixe aqui esse exemplo



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário