Criando um site Portfolio em Flash Postado em 22. Julho de 2008 por Web Design em flash Aprenda a criar um site Portfolio Usando Adobe Flash Para dar uma olhada rápida no que você estará criando, vá parawww.jwright.info | Arquivos Source Download Introdução: Configurar o nosso Projeto Antes de começar - para aqueles de vocês que querem uma maneira fácil para fora deste tutorial, você pode criar um site em flash grátis com Wix que será semelhante a um site muito profissional. Agora, para aqueles que ainda estão interessados em passar com o tutorial, vou continuar. Abra Adobe Flash CS3 e crie um projeto novo flash. File-> New-> Flash Project. Clique em OK. Nome do seu jwright.info.flp projeto. Dica: Eu gosto de criar uma pasta como um local central (por exemplo, para todos os meus arquivos uma pasta chamada jwright.info) para manter tudo junto. Arquivo-> e selecionar a opção New-> Flash File (ActionScript 3.0). Clique em OK. É uma boa idéia de ir em frente e salvar o seu projeto. Vamos fazê-lo. File-> Save (ou Ctrl + S). O nome do novo arquivojwright.info.fla Flash. Agora nós podemos adicionar o nosso arquivo Flash para nosso projeto. Clique direito sobre o arquivo de projeto e clique em Adicionar arquivo ... como mostrado abaixo. Se você não vê você Painel de projeto, abra -lo, selecionando Janela-> Project (ou Shift + F8) a partir da barra de ferramentas principal. Adicione o jwright.info.fla arquivo para o projeto.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Criando um site Portfolio em FlashPostado em 22. Julho de 2008 por Web Design em flash
Aprenda a criar um site Portfolio Usando Adobe FlashPara dar uma olhada rápida no que você estará criando, vá parawww.jwright.info | Arquivos Source
Download
Introdução: Configurar o nosso Projeto
Antes de começar - para aqueles de vocês que querem uma maneira fácil para fora deste tutorial, você
pode criar um site em flash grátis com Wix que será semelhante a um site muito profissional. Agora, para
aqueles que ainda estão interessados em passar com o tutorial, vou continuar.
Abra Adobe Flash CS3 e crie um projeto novo flash. File-> New-> Flash Project.
Clique em OK. Nome do seu jwright.info.flp projeto.
Dica: Eu gosto de criar uma pasta como um local central (por exemplo, para todos os meus arquivos
uma pasta chamada jwright.info) para manter tudo junto.
Arquivo-> e selecionar a opção New-> Flash File (ActionScript 3.0). Clique em OK.
É uma boa idéia de ir em frente e salvar o seu projeto. Vamos fazê-lo. File-> Save (ou Ctrl + S). O nome
do novo arquivojwright.info.fla Flash.
Agora nós podemos adicionar o nosso arquivo Flash para nosso projeto. Clique direito sobre o arquivo de
projeto e
clique em Adicionar arquivo ... como mostrado abaixo. Se você não vê você Painel de projeto, abra
-lo, selecionando Janela-> Project (ou Shift + F8) a partir da barra de ferramentas principal.
Adicione o jwright.info.fla arquivo para o projeto.
Criação de linha do tempo
Vamos começar por criar as camadas que compõem o nosso site. Clique na camada Insert
Botão de pasta para o cronograma. Renomeie esta pasta Páginas por direito
clicar na pasta e escolha Propriedades ou clicando duas vezes a pasta.
Siga o mesmo procedimento para adicionar uma nova pasta para cada página que vai precisar de: Start,
Home, perfil, resumo, Contato, Portfolio, e Respeito. Além disso,
criar uma pasta chamada Master.
Aqui está uma olhada no que você já deve ter em seu cronograma. Garantir que cada página
pasta é uma subpasta de páginas. Você pode fazer isso arrastando a camada em
o lugar apropriado. (Você pode apagar o Layer1 camada padrão, se ainda é
listados.)
Oh boy, estamos rockin 'agora! Vamos inserir uma nova camada na pasta Master.
Clique no botão Inserir camada encontrado perto do botão Pasta Inser Layer.
Nome o Splash nova camada. Novamente, certifique-se que a camada Splash é
dentro da pasta Master.
Siga os mesmos passos para adicionar o resto das camadas nosso Mestre: Menu Principal, House,
Logo, Arrows, direitos autorais, e de Splash curso.
Aqui está uma vista deslumbrante da nossa linha do tempo até agora.
Ok, agora em cada pasta página (excluindo Master) inserir duas camadas
chamado Conteúdo e Ações como isso.
Agora, queremos adicionar os keyframes para o nosso site. Essencialmente, cada página tem um
quadro-chave usada para exibir a página que precisamos. Então, podemos navegar para cada pedido
página através de frames.
Inserir um quadro-chave em cada camada página em seqüência. Exemplo: A página inicial do
keyframe vai no frame 1; A página inicial do quadro-chave continua frame 2, etc
Como assim. Para inserir um clique, keyframe direito sobre o quadro desejado e escolha Inserir
Keyframe (ou selecionar o quadro e aperte F6).
Mais algumas coisas antes de a verdadeira diversão começa.
Crie mais duas camadas (não em qualquer pasta) rótulos de quadro nomeado e Ações.
Vamos colocar um monte de nossos ActionScript para o site na camada Ações tarde
em. Nós vamos usar Labels as camadas de quadros para a nossa navegação pelo site. Assim,
vamos configurar o nosso Labels Frame.
Na verdade, vamos primeiro definir um rótulo de quadro. Simples, simples. Um rótulo de quadro é
realmente
apenas uma maneira que podemos usar um identificador para a nossa página em vez de sempre
acessando uma página
pelo seu número de quadros. Fará mais sentido em um minuto urso comigo.
Selecione os primeiros sete quadros sobre a camada de rótulos de quadro. Então, convertê-los
para keyframes (F6). Aqui está uma olhada.
Precisamos dar a esses rótulos de quadros um nome. Selecione o primeiro quadro (frame 1) e dar
um nome no painel Propriedades. Vamos chamá-lo start_frm. Esta nomeação
convenção é consistente com os nossos nomes camada página.
Você deve ver agora bandeirinha no primeiro quadro. Repita essas etapas para o nome do
resto de nossas etiquetas Frame. Aqui está uma olhada no que você deve ter quando todos são
chamados.
Bem feito Senhoras e Senhores Deputados. Seguindo em frente ...
Criar o layout principal
No painel Properties, Janela-> Properties-> Properties (ou Ctrl + F3), clique em
o botão de tamanho. Isto irá exibir o documento de formulário Propriedades.
Definir a largura de 885,15 Dimensões px ea altura para 578 px. Definir o fundo
cor branca (# FFFFFF), a taxa de quadros a 32 fps (frames por segundo),
e as unidades Régua para Pixels.
Pronto para o nosso primeiro gráfico? Eu também. Primeiro, vamos bloquear todas as camadas, mas a
precisamos de uma camada-Splash.
Em segundo lugar, a partir da barra de ferramentas, Janela-> Ferramentas (ou Ctrl + F2), selecione
a ferramenta Rectangle Primitive (ou R). Alterar a cor do traço para # EBEBEB, e
definir a cor de preenchimento para # FFFFFF via os catadores de cores no painel
Propriedades. Conjunto
os cantos arredondados para 18.
Aqui está uma foto do painel de propriedades para alguma ajuda.
Agora, desenhe um retângulo primi 787,1 (largura) por 468,4 (altura) no palco. Nota: Certifique-se
a camada Splash é selecionado.
É hora Clipe de filme. Selecione seu primi e pressione F8. Isto irá abrir o Convert
para formar Symbol. Nomeá-lo de clipe de filme SplashMc e selecione como o tipo. Clique em OK.
Este Mc parece muito triste. Vamos spice it up! Selecione Janela-> Propriedades-> Filter.
Selecione nossos SplashMc e aperte o botão Adicionar filtro no painel Filters
e selecione Drop Shadow.
Em seguida defina as propriedades da sombra projetada é mostrado abaixo.
Vamos alinhar este menino mau! Abra o painel de alinhar-Window> Align (ou Ctrl + K).
Selecione seu Mc e clique em Alinhar ao centro horizontal e depois Alinhar ao centro vertical.
Agora que está centrada lindamente, vamos movê-lo um pouco. Cerca de seis visitas
na seta para baixo no teclado. Meu X, Y coords para este Mc é agora 442.6,307.2;
No entanto, tenho visto esses X, Y variam um pouco de computador para computador. Não tenho certeza
por isso, mas é a vida, eu acho.
Os direitos autorais. Primeiro, bloqueie a camada Splash e desbloquear a camada de Direitos
Este próximo lote de AS (o corpo do navigationClicked função) é um
pouco tempo, no entanto, não é muito complicado. Vou tentar explicá-lo bem à medida que avançamos.
Precisamos determinar qual página ir para com base no que botão foi clicado. Lembre-se do quadro
Etiquetas que discutimos anteriormente? Aqui é onde nós estamos indo para usá-los. Bascially, vamos
de associar cada botão com um rótulo de quadro através de um comum switch comunicado. function navigationClicked(Event:MouseEvent):void { //We'll use this to store the Frame Label's name. var frmLabel:String = ''; //Determine what Frame Label to use based on which //button was clicked. switch (Event.target) { case mainMenu_mc.profile_btn : frmLabel = "profile_frm"; break; case mainMenu_mc.resume_btn : frmLabel = "resume_frm"; break; case mainMenu_mc.contact_btn : frmLabel = "contact_frm"; break; case mainMenu_mc.portfolio_btn : frmLabel = "portfolio_frm"; break; case mainMenu_mc.respect_btn : frmLabel = "respect_frm"; break; case logo_btn : frmLabel = frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break; } }
Ok, então agora nós sabemos o rótulo de quadro, precisamos usar. (Você pode estar perguntando o que
acontece com o nosso
LogoBtn e HouseBtn. Nós vamos chegar a isso em um minuto.)
, A fim de exibir a página, vamos usar o built-in AS função gotoAndPlay(frame:Number) . Temos
um rótulo de quadro que é uma string , no entanto, é preciso o número do quadro. Vamos escrever
uma função pouco
para recuperar esse número. Aqui vamos nós. ///////////////////////////////////////////////////////////////////// // Helper Functions. ///////////////////////////////////////////////////////////////////// function getFrame(frameName:String):Number { var
frame:Number = 1; //Loop through all Frame Labels to find our requested frame. for (var i = 0; i < currentLabels.length; i++) { if (currentLabels[i].name == frameName) { frame = currentLabels[i].frame; break; } } return frame; }
Tudo o que estamos fazendo aqui é looping através de todos os nossos rótulos Frame (através do built-
in currentLabelspropriedade)
e comparando o nome que encontramos em nosso switch bloco para o rótulo que estamos atualmente
em looping.
Podemos agora adicionar as duas linhas seguintes para o fundo do
nosso navigationClicked função. var frmGoto:Number = this.getFrame(frmLabel); gotoAndPlay(frmGoto);
Aqui está a nossa função até o momento. function navigationClicked(Event:MouseEvent):void { //We'll use this to store the Frame Label's name. var frmLabel:String = ''; //Determine what Frame Label to use based on which //button was clicked. switch (Event.target) { case mainMenu_mc.profile_btn : frmLabel = "profile_frm"; break; case mainMenu_mc.resume_btn : frmLabel = "resume_frm"; break; case mainMenu_mc.contact_btn : frmLabel = "contact_frm"; break; case mainMenu_mc.portfolio_btn : frmLabel = "portfolio_frm"; break; case mainMenu_mc.respect_btn : frmLabel = "respect_frm"; break; case logo_btn : frmLabel = frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break; } //Find the frame number based on our Frame Label. var frmGoto:Number = this.getFrame(frmLabel); //Go to the requested page. gotoAndPlay(frmGoto); }
Bem, vamos testar o que temos até agora. Selecione Debug-> Depurar filme (Ctrl + Shift + Enter) de
Menu principal do Flash CS3. Isto irá compilar e executar o arquivo Flash. Se você perdeu alguma coisa,
o
compilador irá mostrar-lhe um erro.
Aqui está o que você deve ver.
Sinta-se livre para clicar em alguns botões, mas você realmente não será capaz de ver as páginas em
mudança uma vez que todos
de nossas páginas estão em branco. Vamos pular um pouco e mudar isso. Dessa forma saberemos o
nosso menu
está trabalhando.
Primeiro, selecione o quadro na sua camada de conteúdo sob a página inicial.
Em segundo lugar, coloque uma caixa de texto, com texto alinhado à direita, pelo
símbolo HouseBtn, assim.
Em seguida, siga os mesmos passos para colocar uma etiqueta (no mesmo lugar) nas camadas de
conteúdo de cada página.
Em seguida, altere o texto para representar cada página.
Dica: Você pode selecionar a caixa de texto que acabou de fazer na sua página inicial, selecione o quadro
para a camada deconteúdo em
na página inicial, e selecione Editar-> Colar no Lugar (ou Ctrl + Shift + V). Isso vai colar a caixa de texto
no lugar exatamente como sua página inicial.
Você também vai precisar adicionar a linha seguinte de um AS para cada uma das camadas Ações para
cada página, exceto o Início
página. stop();
Isso irá garantir que o seu filme do Flash vai parar no frame solicitado. Se não, estaríamos batendo o
solicitado
quadro e, em seguida, o filme iria continuar a jogar fora o resto do filme.
Como para a página inicial, é preciso adicionar a seguinte linha de AS. Estamos indo para bascially
simplesmente ignorar a página inicial. A razão é simples. Eu posso querer, em um momento posterior,
mudar a minha home page para algo
diferentes e fazer a home page atual de uma página de boas vindas. Mas, por enquanto, só teremos que
usar nossa home page como o nosso bem-vindos.
Basicamente, nós estamos apenas tentando manter o nosso site como manutenção possível. gotoAndPlay(2);
Novamente, observe o pouco 'a' em cada quadro contendo AS código.
Antes de depurar novamente, vamos adicionar um par de linhas de AS para a
nossa navigationClicked função.
Vamos colocar o nosso gotoAndPlay(frmGoto); linha de AS dentro de um if comunicado.
Aqui está a função agora. function navigationClicked(Event:MouseEvent):void { //We'll use this to store the Frame Label's name. var frmLabel:String = ''; //Determine what Frame Label to use based on which //button was clicked. switch (Event.target) { case mainMenu_mc.profile_btn : frmLabel = "profile_frm"; break; case mainMenu_mc.resume_btn : frmLabel = "resume_frm"; break; case mainMenu_mc.contact_btn : frmLabel = "contact_frm"; break; case mainMenu_mc.portfolio_btn : frmLabel = "portfolio_frm"; break; case mainMenu_mc.respect_btn : frmLabel = "respect_frm"; break; case logo_btn : frmLabel = frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break; } //Find the frame number based on our Frame Label. var frmGoto:Number = this.getFrame(frmLabel); //Don't do anything if we are already on the requested page. if (currentFrame != frmGoto) { //Go to the requested page. gotoAndPlay(frmGoto); } }
Vá em frente e agora debug para ver as alterações em ação. Observe como o rótulo de página
pelas mudanças símbolo HouseBtn que você vá de página em página.
Em seguida, vamos montar o nosso LogoBtn e botões HouseBtn. Depois de atribuir
um nome de instância
para os seus botões, tudo que você precisa fazer é anexar o evento clique dos botões para o
nosso navigationClicked
função. Esquecer como? Isso é legal. Aqui está uma
Então, agora nós precisamos adicionar esses caras para a nossa switch comunicado. Depois que você
fizer isso, sinta-se livre
depurar novamente para verificá-la. case logo_btn : frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break;
Que tal esse menu voar? É hora de colocá-lo para o trabalho! Lembre-se essas duas funções que
fizemos, goHome();
e leaveHome(); ? É assim que nós vamos controlar o menu do
nosso navigationClicked função.
Vamos ter um olhar como.
Tudo o que precisamos fazer para implementar o nosso menu voar é fazer um par de modificaitons para o
nosso ifdeclaração
em nosso navigationClicked função. Abaixo estão as mudanças. Não deixe de ler as linhas
comentadas para
entender o que estamos tentando realizar. //Don't do anything if we are already on the requested page. if (currentFrame != frmGoto) { //Get and remember the Home page's frame number. var frmHome:Number = this.getFrame("home_frm"); //If our requested page is the Home page, the flying menu //needs to go home. if(frmGoto == frmHome) { mainMenu_mc.goHome(); } //Else, if we are on the Home page and are leaving, then //leave home. else if(currentFrame == frmHome) { mainMenu_mc.leaveHome(); } //Go to the requested page. gotoAndPlay(frmGoto); }
Nós só temos dois botões para ir. Nosso ForwardBtn e botões BackwardBtn.
Para começar com aqueles caras, atribuir-lhes s Nome da Instância e conectá-los ao nosso
navigationClicked funcionar como temos feito várias vezes anteriormente.
É um pouco complicado para chegar a nossa forward_btn e botões backward_btn para o ciclo de
páginas de forma adequada. Acho que vai ser muito mais clara, se eu apenas dar-lhe o código e você
ler através de comentários em vez dissecando a linha de funções por linha.
A principal função aqui é getSequencedFrame(forward:Boolean) . Esta função aceita um
Boolean valor que indica se a página seguinte é solicitado ou a anterior. Então, a função
vai determinar o rótulo de quadro da página solicitada.
Aqui está a duas funções que você precisa. Basta copiar e colá-los em sua seção Funções Helper. function getFrameLabel(frame:Number):String { var frmLabel:String = ''; //Loop through all Frame Labels to find the requested Frame Label. for (var i = 0; i < currentLabels.length; i++) { if (currentLabels[i].frame == frame) { frmLabel = currentLabels[i].name; break; } } return frmLabel; } function getSequencedFrame(forward:Boolean):String { //Used to remember the Frame Label of our page. var frmSequence:String = ''; //If we're looking for the next page in sequence... if(forward) { //If our current page is that last page... if(currentFrame == this.getFrame("respect_frm")) { //...then, we need to go Home. frmSequence = "home_frm"; } else { //...else, we just need to go to the next frame. frmSequence = this.getFrameLabel((currentFrame + 1)); } } //...else, we're looking for the previous page in sequence. else { //If we're on the first page (remember, we skipped our Start page)... if(currentFrame == this.getFrame("home_frm") || currentFrame
== this.getFrame("start_frm")) { //...then, we need to go to the last page. frmSequence = "respect_frm"; } else { //...else, we just need to go to the the previous frame. frmSequence = this.getFrameLabel((currentFrame - 1)); } } return frmSequence; }
Quase lá! Basta adicionar este código para o seu switch declaração e está feito. case backward_btn : frmLabel = this.getSequencedFrame(false); reak; case forward_btn : frmLabel = this.getSequencedFrame(true); break;
Parabéns pessoal! Você acabou de completar a parte mais difícil
jwright.info .
De agora em diante, vamos fazer cada página sua própria seção. Dessa forma será mais fácil para você
para parar e pegar novamente mais tarde se for necessário.
Home Page
As primeiras coisas primeiro. Spice vamos até nossa home page! Certifique-se que os seguintes símbolos
ir no
Camada de conteúdo da nossa camada de página inicial.
Criar uma nova caixa de texto e digite JAMESWRIGHT ou usar seu próprio nome para chutes. Use Arial,
fonte 28pt e
espaçamento de letras de 33. Agora, converter esta caixa de texto a um clipe de filme
chamado NameMc. Além disso, enquanto nós estamos lá,
dar-lhe um nome de instância de name_mc.
Você pode usar o meu logotipo se você quiser ou o seu próprio-enquanto menos é um clipe de filme com
um nome de instância de logo_mc.
Solte-o na página inicial também.
Também fiz uma pequena chamada de rodapé DetDriDetMc com um nome de instância de ddd_mc.
Aqui está uma olhada em nossa home page.
Vá em frente e testá-lo! Você pode depurar como antes, ou pressione Ctrl + Enter para executar o modo
de teste.
Muito legal, hein? Bem, isso está prestes a ficar melhor. Vamos adicionar algumas transições fade. Desde
que nós vamos ser
usando as transições mesmo em várias páginas e outros clipes de filme, é preciso colocar o código de
transição
em sua própria classe. Veja como.
Selecione Arquivo-> Novo Arquivo-> ActionScript. Clique em OK. Salve o arquivo no mesmo diretório
como seu
Arquivos flash chamado utils.Fader. Duas coisas são fundamentais aqui. A localização do arquivo e da
nomeação de
o arquivo. Deve ser no mesmo diretório, porque esta é a forma como o seu código AS irá referenciar este
arquivo. Além disso, o
nome significa o pacote (aka namespace) para ser usado.
Adicione o seguinte código ao seu arquivo utils.Fader.as novo. package utils { //Import the needed packages. import fl.transitions.Transition; import fl.transitions.TransitionManager; import fl.transitions.Fade; import fl.transitions.easing.*; import flash.display.MovieClip; //Fader class definition. public class Fader { //This function will apply a "fade in" effect for any given Movie Clip. public static function fadeIn(mc:MovieClip):void { //Use the TransitionManager to fade in the movie clip. TransitionManager.start(mc, {type:Fade, direction:Transition.IN, duration:1, easing:Strong.easeIn}); } //This function will apply a "fade out" effect for any given Movie Clip. public static function fadeOut(mc:MovieClip):void { //Use the TransitionManager to fade in the movie clip. TransitionManager.start(mc, {type:Fade, direction:Transition.OUT, duration:1, easing:Strong.easeOut}); } } }
Clique aqui para ler mais sobre o TransitionManager.
Agora, vá em frente e adicione este AS arquivo ao seu projeto Flash como fizemos no início do tutorial.
Em seguida, adicione este código a sua camada Ações principal. Isto irá permitir que você seja capaz de
usar seu Fader
class na linha do tempo principal. ///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import utils.Fader;
Para implementar sua classe Fader, basta adicionar essas linha de AS para a sua camada de Ações para
a sua páginainicial. utils.Fader.fadeIn(logo_mc); utils.Fader.fadeIn(name_mc); utils.Fader.fadeIn(ddd_mc);
Great! Agora você pode testá-lo e verificar o efeito de fade cool! Isso é tudo para a página inicial!
A página de perfil
A primeira coisa que precisamos fazer é criar um novo clipe de filme (Lembre-se, você pode fazer isso a
partir do painel Library). Então nós queremos
para colocar um gráfico sobre o MC, que meio que parece um guia de um documento com guias. Coloque
a guia em sua própria camada chamada
Guia. Novamente, você pode encontrar este gráfico e outros no pacote fornecido com o tutorial.
Em segundo lugar, precisamos criar alguns botões-apenas alguns botões simples que dizer aos nossos
leitores um pouco sobre nós.
Tudo que você precisa fazer é criar um novo botão, como você fez antes, e coloque algum texto
nele. Nada de novo aqui.
Aqui está um instantâneo pouco de um dos meus botões.
Você pode criar o que quiser aqui, mas se você quiser ficar comigo aqui, criar um botão para cada Quem,
que,
Quando, onde e por que a secção que se parece com o seguinte. Estes botões devem ser colocados em
seus próprios
camada, botões nomeado.
Vá em frente e dar a cada botão de um nome de instância. Por exemplo, eu nomeei meu botão WhoBtn
whoCap_btn-uma vez que estes botões são como legendas.
Agora, para alguns efeitos muito legal! Vamos criar alguns "popups" para cada botão que acabou de
fazer. Para isso, crie primeiro
um clipe de filme novo chamado WhoPopupMc. Estes são reais simples de fazer. Essencialmente, tudo
que você precisa é de duas camadas:
Texto e Janela.
Sobre a camada de texto, basta colocar o WhoBtn você acabou de fazer da Biblioteca. Em seguida,
na Janela
lugar camada de um retângulo, cor de preenchimento # 333333 e # FFFFFF cor do traço, que é um pouco
maior do que o seu botão. Você
também vai precisar criar outro pequeno botão utilizado para fechar o popup. Sinta-se livre para fazer o
que quer que esse botão
você gosta. Eu apenas usei um pequeno círculo. Aqui está uma olhada!
Certifique-se de dar o seu CloseBtn um nome de instância chamada close_btn.
Agora que você sabe como fazer isso, criar um "popup" para cada botão.
Depois de ter criado todas as suas pop-ups, coloque cada pop-up em sua própria camada no
seu ProfileTabMc
símbolo e atribuir Instance Name s para o seu pop-ups. Aqui está o que eu acabei com.
Em seguida, você precisa inserir outra camada chamada Actions para o seu símbolo ProfileTabMc. Sobre
esta camada
vamos adicionar alguns AS manipuladores de eventos para os nossos botões. Aqui estão eles para
Antes de definirmos nossas funções manipulador de eventos, precisamos adicionar algum AS para nos
ajudar a controlar os pop-up é
mostrando atualmente. Então, como fazemos isso? Novamente, nada de novo aqui. Nós apenas estamos
indo para escrever um simples
switch instrução para definir uma variável chamada currentPopup .
Tudo o que está acontecendo aqui é que está determinando qual botão foi clicado e, em seguida, definir
uma variável Clipe de filme
para o pop-up que precisamos para mostrar. Aqui está o código. ///////////////////////////////////////////////////////////////////// // Variables. ///////////////////////////////////////////////////////////////////// var currentPup:MovieClip = null; ///////////////////////////////////////////////////////////////////// // Helper Functions. ///////////////////////////////////////////////////////////////////// function setCurrentPopup(e:Event):void { //Set the current popup based on which caption was clicked. switch(e.target) { case whoCap_btn: currentPopup = whoPopup_mc; break; case whatCap_btn: currentPopup = whatPopup_mc; break; case whenCap_btn: currentPopup = whenPopup_mc; break; case whereCap_btn: currentPopup = wherePopup_mc; break; case whyCap_btn: currentPopup = whyPopup_mc; break; } }
Em seguida, precisamos definir o nosso manipulador de eventos funções showPopup e closePopup .
Sei que dizer isso muito, mas, este não deve ser muito complicado. Apenas um par básico manipuladores
de eventos.Vamos
também querer adicionar alguns efeitos interessantes fading aqui também, então nós vamos importar
o utils.Fader
classe. ///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import utils.Fader; ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function closePopup(Event:MouseEvent):void { //If the current popup has been set, fade it out. if(this.currentPopup != null) utils.Fader.fadeOut(currentPopup); } function showPopup(Event:MouseEvent):void { //Set the current popup. this.setCurrentPopup(Event); //If the current popup has been set, fade it in. if(this.currentPopup != null) utils.Fader.fadeIn(currentPopup); }
Para ver suas alterações, você precisa voltar para a timeline principal e adicionar seu novo
símbolo ProfileTabMc
para a sua camada de conteúdo na seção Perfil. Você pode usar a ferramenta Free Transform (Q) para
fazer
se encaixa ao seu estágio de acordo, se o tamanho de seu símbolo não é apenas direito.
Você pode visualizar página de perfil que você agora se você quiser (Ctrl + Enter).
Você provavelmente vai perceber que o seu pop-ups começam a ser visíveis. Para corrigir esse
problema, vamos adicionar mais alguns AS para
o ProfileTabMc 's camada Ações. Este AS bloco vai contar a popups para não ser visíveis na
inicialização.
Depois de adicionar este código para o seu MC, testá-lo e ver os efeitos interessantes! ///////////////////////////////////////////////////////////////////// // Startup. ///////////////////////////////////////////////////////////////////// whoPopup_mc.visible = false; whatPopup_mc.visible = false;
Você gosta? Cool. Bem, apenas mais um tweak antes de passarmos para a próxima página. Se você
perceber, quando você clica em qualquer
dos seus botões, os ecrãs correspondentes popup. Isso é o que deve fazer, no entanto, mesmo depois de
um pop-up exibe
você ainda pode clicar em outro botão. Este não é um comportamento desejado. Vamos chegar a uma
maneira de parar isto. Aqui está
o que eu tenho.
Minha proposta é fazer uma camada que vai encobrir os outros botões ao mesmo tempo um popup está
sendo exibido.Então, volte
em seu símbolo ProfileTabMc e cópia da guia-apenas uma parte da guia, não os botões. Em seguida,
cole guia que em
um novo símbolo. Chamá-lo TabCoverMc. Um pequeno toque, alterar a propriedade do gráfico Alpha para
80% em cor de preenchimento
selecionador.
Depois de criar esse símbolo, arraste-a para o seu símbolo ProfileTabMc em um novo chamado
laber TabCover. Seja
certeza de que a camada está acima da camada de Botões e abaixo da camada de Popups. Aqui está o
resultado.
Agora você pode dar o símbolo TabCoverMc um nome de instância de tabCover_mc. Queremos também
que este símbolo
para ser escondida na inicialização. Então, vamos escondê-la apenas como botões de nossa legenda. tabCover_mc.visible = false;
Quando o usuário clica em um botão de legenda para ver um pop-up, agora podemos encobrir os outros
botões com a novaTabCoverMc
símbolo em nossa showPopup e closePopup funções. Aqui estão as funções modificadas. ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function closePopup(Event:MouseEvent):void { //Fade out the tab cover. utils.Fader.fadeOut(tabCover_mc); //If the current popup has been set, fade it out. if(this.currentPopup != null) utils.Fader.fadeOut(currentPopup); } function showPopup(Event:MouseEvent):void { //Set the current popup. this.setCurrentPopup(Event); //Fade in the tab cover. utils.Fader.fadeIn(tabCover_mc); //If the current popup has been set, fade it in. if(this.currentPopup != null) utils.Fader.fadeIn(currentPopup); }
Para terminar esta seção, adicione um efeito de fade para o símbolo ProfileMc em sua camada
de Ações. Este
vai desaparecer em seu símbolo ProfileMc quando a página é exibida.
Dê uma olhada na página do perfil agora. É uma beleza! Ótimo trabalho!
A Página Résumé
A página Résumé não vai demorar muito a todos. Primeiro crie um novo filme chamado ResumeMc Clip.
Dentro do MC, você precisa copiar e colar o meu currículo ou usar o seu próprio. Uma pequena coisa,
certifique-se de verificar a caixa de seleção marcada Exportar para ActionScript.
Bem, isso foi bastante simples. Agora, vamos usá-lo. Em seguida, você vai precisar criar outro clipe de
filme chamado
ResumeScollerMc. Dentro deste MC você precisará de um ScrollPane do painel Componentes. Você
pode achar que em Janela-> Components (ou Ctrl + F7). Depois de localizar o ScrollPane, arraste um
em seu ResumeScrollPaneMc.
Este é um controle realmente puro. Desde o nosso currículo é demasiado longo para caber em splashy, o
componente ScrollPane vai
rolar nosso símbolo ResumeMc cima e para baixo. Tudo o que precisamos fazer é ajustar um par das do
ScrollPane
parâmetros para dizer-lhe que MC queremos que ele vá.
Para ver os parâmetros do ScrollPane, selecione Window-> Propriedades-> Parameters. Em seguida,
selecione o seu ScrollPane
e você deve ver seus parâmetros listados no painel de parâmetros.
O único parâmetro que deve precisar configurar é o parâmetro de origem. Conjunto que o símbolo que
queremos
deslocar-ResumeMc. Esta é a razão que você precisava para verificar Exportar para ActionScript ao fazer
a
ResumeMc símbolo. Em poucas palavras, uma vez que não está adicionando este diretamente ao nosso
estágio, o compilador AS necessidades
saber o MC para rolar.
Agora você pode arrastar o ResumeScrollerMc para a timeline principal sobre a camada
de Conteúdo do Currículo
página. Além disso, adicionar um efeito de fade para o símbolo ResumeScrollerMc em sua camada
de Ações. Você pode fazer isso
da mesma maneira exata que você fez efeito de fade o símbolo do ProfileMc.
Mais do que provavelmente, você vai notar que sua barra de rolagem não se parece com o meu. Se for
esse o caso, você pode
realmente editar o componente ScrollPane-apenas como um clipe de filme. Muito legal, hein? Basta
localizar o ScrollPane
Em sua biblioteca (provavelmente sob Ativos Componente), clique direito e escolha Editar.
Você deve ver algo como o seguinte. Dê um duplo clique no símbolo Skins ScrollBar.
Agora, você pode editar qualquer um dos skins que você vê antes de você. Aqui está o que o meu olhar
como depois que eu tweaked-los.
Isso é tudo para a página de resumo! Para a página de contato.
A página de contato
A página de contato realmente não precisa de muita explicação. Você já fez isso várias vezes.
Mas, apenas por diversão, aqui você vai. Tudo que você precisa fazer é criar um novo clipe de filme
chamado ContactMc
que contém suas informações de contato. Coisas realmente simples. Depois, você pode dar-lhe
um nome de instância
e usar o utils.Fader classe a desvanecer-se na MC quando enquadrar a página de Contato é hit.
É isso aí!
A página Portfolio
Minha página Portfolio definitivamente precisa de algum trabalho. Mas vamos passar por aquilo que
temos de qualquer maneira. É
basicamente usando apenas dois botões que irá abrir uma nova janela.
Tudo o que fiz para criar meus botões foi tirar uma foto da tela de um casal sites eu estive
trabalhando. Então eu importados
-los em minha biblioteca e deixou-os cair em um botão. Em seguida, no quadro Sobre do botão, eu fiz o
imagem um pouco maior e adicionada uma legenda na parte inferior. Aqui está o primeiro botão para
referência.
Depois de criar seus dois botões, simplesmente deixá-los em seu palco principal.
Em seguida, você pode adicionar um pouco de posição, se quiser.
Selecionar seus três itens, títulos e os dois botões. Em seguida, pressione F8 e converter esses
três coisas em um clipe de filme por isso vamos ser capaz de adicionar nosso efeito fade. Liguei para o
meu novo MCPortfolioMc.
Estamos quase terminando! Vamos adicionar um pouco de AS para abrir uma nova janela do navegador
quando um botão é clicado. Dê um duplo clique
seu símbolo PortfolioMc para levá-lo em modo de edição. Em seguida, adicione uma nova camada
chamada Actions. Em que a camada
cole o seguinte código. css_btn.addEventListener(MouseEvent.CLICK, cssClicked); mlt_btn.addEventListener(MouseEvent.CLICK, mltClicked); function cssClicked(event:MouseEvent):void { //Create a new URL request. var url:URLRequest = new URLRequest("http://www.clixsoftwaresolutions.com/"); //Open up the URL in a new window. navigateToURL(url, "_blank"); } function mltClicked(event:MouseEvent):void { //Create a new URL request. var url:URLRequest = new URLRequest("http://www.mylooptracker.com/"); //Open up the URL in a new window. navigateToURL(url, "_blank"); }
Eu sei o que você está pensando. Sim, nós poderíamos ter usado outro switch declaração, mas por
apenas dois botões
Optei por usar apenas duas funções. Bom prendedor embora!
Finalmente, basta adicionar o seu utils.Fade.fadeIn(portfolio_mc) chamada de função
em Carteira de páginas do
Camada de ação na linha do tempo principal, e está feito!
Nota: Se você depurar seu filme agora e tentar clicar em um de seus botões na página Portfolio, você vai
provavelmente verá o seguinte aviso. Não se preocupe, que é suposto fazer isso. Se você testar seu filme
(Ctrl + Enter) ou
implantar seu filme-que deve funcionar como um encanto!
A Página de Respeito
Ahhhhhh, finalmente. A página final. Bem, na minha opinião, eu tenho o melhor para o passado. Eu amo
este scroller pouco,
ea melhor parte é que não é muito difícil conseguir este efeito fantástico.
Comece por fazer um novo clipe de filme chamado RespectStageMc. Sobre a primeira camada em nosso
MC queremos introduzir
algo novo para jwright.info-mascaramento. Você vai ver o poder de mascarar em breve.
Em segundo lugar, coloque um retângulo centralizado na página em uma camada chamada área de
rolagem. Defina sua cor de preenchimento para # 999999
sem derrame. Não se preocupe com o tamanho bastante ainda. Em seguida, volte para sua timeline
principal e adicionar o MC para o Conteúdo
camada em sua página de Respeito.
Agora, você pode ir para trás em seu MC e ajustar o tamanho de seu retângulo para ser a largura exata
de splashy.
(Lembre-se dele?) Certifique-se que o seu MC está centrado com seu botões de seta de navegação antes
de redimensionar qualquer coisa.
Vamos adicionar um pouco mais para o nosso MC. Vamos colocar um mais escuro retângulo (# 333333)
acima e abaixo nossa camada área de rolagem.
Em seguida, adicione um título.
Para as miniaturas! Novamente, sinta-se livre para usar os botões de miniatura eu já fiz, ou você pode
fazer o seu próprio. O conceito
é muito parecido com o que você fez sobre o Portfolio páginas um pouco menores. Aqui está o que um
dos meus parece.
Depois de obter todas as suas miniaturas feitas, colocá-los todos centrados, e espaçados de maneira
uniforme, em uma única camada chamada
Polegares na sua MC.
Em seguida, você precisa voltar para que a MC e cole este código. Não real necessidade de explicar
aqui. Estamos apenas surgindo um novo
janela do navegador e carregar o site que foi clicado.
///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import flash.net.navigateToURL; import flash.net.URLRequest; ///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// advanced_btn.addEventListener(MouseEvent.CLICK, gotoSite); henz_btn.addEventListener(MouseEvent.CLICK, gotoSite); kalou_btn.addEventListener(MouseEvent.CLICK, gotoSite); studio_btn.addEventListener(MouseEvent.CLICK, gotoSite); crystal_btn.addEventListener(MouseEvent.CLICK, gotoSite); deepBlue_btn.addEventListener(MouseEvent.CLICK, gotoSite); wolf_btn.addEventListener(MouseEvent.CLICK, gotoSite); freedom_btn.addEventListener(MouseEvent.CLICK, gotoSite); ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function gotoSite(Event:MouseEvent):void { var url:URLRequest = null; switch (Event.target) { case advanced_btn : url = new URLRequest("http://www.2advanced.com/"); break; case henz_btn : url = new URLRequest("http://www.henzstudio.com/"); break; case kalou_btn : url = new URLRequest("http://www.kalou.ch/fr/"); break; case studio_btn : url = new URLRequest("http://www.studiopiro.com/index2.htm"); break; case crystal_btn : url = new URLRequest("http://www.crystalmedia.co.yu/"); break; case deepBlue_btn : url = new URLRequest("http://www.deepblue.com/"); break; case wolf_btn : url = new URLRequest("http://www.wolfpeak.net/"); break; case freedom_btn : url = new URLRequest("http://www.freedomoftheseas.com/"); break; } if (url != null) { navigateToURL(url, "_blank"); } }
Depois de ter feito isso, selecione todos os seus polegares e convertê-los em um único clipe de filme
chamadoThumbsScrollerMc.
Você verá porque em apenas um minuto.
Como você pode ver agora, as miniaturas são correndo do palco para a esquerda. Se você testar seu
filme você
vê-los lá também. Este não é o que queremos. Queremos as miniaturas a desaparecer à medida que se
mover para fora de splashy.
Para conseguir esse efeito, precisamos usar uma técnica chamada de máscara. Para mascarar as
miniaturas, insira uma nova camada
Polegares acima de sua camada chamada máscara de deslocamento. Clique direito na nova camada e
selecione Mask.
Sobre esta camada você vai precisar para criar um retângulo do mesmo tamanho exato como a um em
sua camada área de rolagem. Posso sugerir que
basta copiar e colar lugar-em-que retângulo da camada área de rolagem. Você terá que mudar sua
preencher o valor cor alfa para 10%. Este é apenas para que você possa ver o que está por trás da
máscara.
Se você testar seu filme agora, você vai perceber como as miniaturas apenas que mostrar são os que
estão diretamente por trás da máscara.
Agora, a parte legal. Para ser capaz de deslocar para a esquerda e direita, você vai precisar de uma seta
para a esquerda e direita. Eu usei apenas as teclas de seta
usamos em nossa linha de tempo principal e os colocou em uma nova camada. Eu também adicionei uma
borda branca pequena em torno do flechas.
Aqui está o código que você precisa para percorrer o seu thumbs_mc ThumbScrollerMc nomeado. ///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import fl.transitions.Tween; import fl.transitions.easing.Regular; ///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// left_btn.addEventListener(MouseEvent.CLICK, scrollLeft) right_btn.addEventListener(MouseEvent.CLICK, scrollRight) ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function scrollLeft(Event:MouseEvent):void { //Shift the MC left 150 units. var myTween:Tween = new Tween(thumbs_mc, "x", Regular.easeOut, thumbs_mc.x, (thumbs_mc.x - 150), 1, true); } function scrollRight(Event:MouseEvent):void { //Shift the MC right 150 units. var myTween:Tween = new Tween(thumbs_mc, "x", Regular.easeOut, thumbs_mc.x, (thumbs_mc.x + 150), 1, true); }
Essentiall, estamos apenas mudando a esquerda e direita ThumbsScrollerMc quando o usuário clica em
um
botão de seta. Testá-lo!
A única coisa que resta a fazer é adicionar o efeito de fade in na linha do tempo principal para
o RespectStageMc
símbolo. Grande trabalho!
ConclusãoBem parabéns Flashians companheiro! Você concluiu com êxito todo o
jwright.info site!
Sinta-se livre para olhar também para o arquivo HTML incluído no pacote para ver como o arquivo. Swf é
exibido na
browser.
Eu sei que este tutorial foi um pouco longo, talvez o mais longo que você já fez. Mas o conteúdo abordado
neste
percorrer deve dar-lhe uma grande base para o desenvolvimento de seu site próprio Flash. Continuem o
bom trabalho! By the way, se você sente como este é muito trabalho, você pode criar um site em flash
livre profissional com Wix .
Tags: Criação de Websites , Flash carteira , de flash tutorial , de flash web design , site em flash
Flash Tutorial - Como criar um site em flash
Flash Tutorial Site
Fazer uma Splash Page em Adobe Flash
Importando imagens para o Adobe Flash
Criação de uma desfocagem da imagem em Adobe Flash
98 Responses to "Criando um site Portfolio Flash"
1.
david
05. Maio, 2009
btw eu gosto do seu tutorialResponder a este comentário
2.
denton
31. Maio, 2009
Tutorial Grande Michael!
Eu também tive problemas para obter o menu principal para tween corretamente no início assim que eu
deletei MainMenuMc e começou de novo - funciona muito bem agora.
Algumas pessoas podem também ter problemas se eles estão usando CS4. O tutorial acima foi escrito fro
CS2/CS3 eu acho, e para fazer o mesmo tipo de interpolação, você tem que usar o Classic Tween (não
Tween Motion).
Se tudo mais falhar, ter um olhar para os arquivos de origem no topo da página.Responder a este comentário