JONAS GALVEZ (521 pts)

MARCELO SIQUEIRA (96 pts)

ZEBEDIAH (35 pts)

ALEXANDRE PORTO (1281 pts)

RICARDO FIGUEIRA (33 pts)

DEMIS BUCCI (50 pts)

GÉRIO (93 pts)

PANDOGO (82 pts)

LEANDRO AMANO (83 pts)

EDUARDO PERROUD (52 pts)

DANIELA PIRES (86 pts)

RODRIGO AMARAL (56 pts)
Treinamento PontoFlash de Flash e ActionScript

Usando o método split para criar uma array de uma string?

Como fazer um movieclip andar na diagonal?

Como posso arrastar um movieclip de forma que ele mude a sua instância conforme a área de target em que cair?

Como fazer um cursor assim que o mouse entra numa área?

Problemas com relógios no Flash5

Alguém aí tem um efeito de neve caindo

Como faço para inserir um contador em uma cena do flash?

Qual o comando (e qual linguagem) eu utilizo para tirar as informações que aparecem na barra de status?

Método sendAndLoad do objeto LoadVars mais fácil.

Tem como fazer uma barra de rolagem (scroll bar) colorida?

Como faço para um moviclip mostrar as coordenadas do mouse e para que um movieclip movimente-se de acordo com o mouse, mas no sentido contrário.

Aumento da velocidade de loops.

Como fazer o FSCommand executar um outro arquivo no FlashMX?

Quero alterar as cores de um movieclip dinamicamente através de actions.
Flash Communication Server MX - Primeira Parte

0wn3d Again BY Destution Team

Entendendo como funciona um preloader - Segunda parte

Controlando alpha via actionscript

Guias de movimento (motion guide)

Alternando janelas no Flash.

Menu dinâmico a partir de um xml.

Integração Flash + Fireworks

Jogo da Forca (terceira parte)

Como fatiar um site modelo portal no Fireworks

Aspectos Básicos das Ferramentas de Desenho.

Sistema de newsletter utilizando Flash + ASP.
Sistema de notícias Flash+PHP

Balls 3f

Digit light

Collision gravity

Easy preloader

Enquete

Color Pick

Bspline1

Following

Abrir e fechar fundo

Slide desk

Mulher
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