Upload
katia-e-david-lindgren
View
93
Download
4
Embed Size (px)
Citation preview
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
Autorais. Criar uma nova caixa de texto usando a ferramenta de texto (T). Digite Copyright © 2007-2008
jwright.info. Todos os direitos reservados. Nota: Você pode encontrar o símbolo de copyright em seu
menu Iniciar do Windows Iniciar> Todos os Programas-> Acessórios-Sistema>.
Ferramentas-> Mapa de Caracteres. (Isto é, se você tiver um PC com Windows.)
Mais uma vez, use a ferramenta Alinhar ao centro horizontalmente os direitos autorais e, em seguida,
alinhar na
a borda inferior. Até agora, tudo bem. Certo? Aqui é o nosso palco.
Em seguida, nosso setas de navegação. Vejamos como fazer um botão de seta. Eu não sou
indo para este negócio tão grande como eu quero focar na "programação um flash site"
em oposição a "criação de cada gráfico pouco para um site flash." Michael tem algumas
tutoriais para gráficos. Vou deixar isso para os profissionais.
Para fazer um botão, abrir a biblioteca (Ctrl + L). Você deverá ver o SplashMc que criamos
anteriormente. Clique no símbolo de Nova ... no canto inferior esquerdo da Biblioteca
painel. O nome do ForwardBtn botão e certifique-se de selecionar Button. Clique em OK.
Como uma nota lateral aqui, é uma boa idéia para criar algumas pastas na biblioteca para organizar
tudo. Um para MovieClips, um para botões, etc
De volta no palco agora, coloque sua flecha no centro do palco botão. Adicionar um novo quadro-chave
no quadro Over. Faça o botão de como você quer olhar quando você passa
sobre ele, eu só mudei de cor de preenchimento para branco. Em seguida, novamente para o quadro
de Down.
Siga os mesmos passos para o botão de volta. Certifique-se de nomeá-lo BackwardBtn.
Vamos voltar para o palco principal, clicando scene1 como mostrado abaixo.
Da Biblioteca, arraste os seus dois botões para a camada de setas. Usando o
Alinhar ferramenta, alinhar a seta para trás na borda esquerda ea seta para a frente na
borda direita.
Para alinhar as setas na vertical vamos usar Governantes. Nós não queremos apenas "Alinhar
verticalmente" porque o nosso SplashMc não está alinhado verticalmente. Lembram-se?
Nós nos mudamos para baixo um pouco? Queremos as setas para ser alinhado com as boas ol 'splashy.
Trazer os governantes, selecionando-View> Rulers (ou Ctrl + Alt + Shift + R). Selecionar
o SplashMc sobre a camada de Splash (você pode precisar desbloqueá-lo). Arrastar
uma régua de guia para baixo a partir da régua horizontal, cruzando o ponto central da splashy.
Agora selecione as duas setas e cruzam-los com o seu guia de régua, assim.
Para a logo. Usar qualquer logotipo que você gostaria. Coloque-o sobre a camada Logo.
Você pode fazer o mesmo para o botão pequena casa no canto superior direito. Coloque-o em
a camada de House.
Nosso layout principal até agora.
O Menu Voador
Embora o menu principal é definitivamente uma parte do nosso layout principal, que merece a sua
própria seção. Isto, meus amigos, é a parte mais difícil do site, no entanto,
é apenas uma terra nada tedioso bit ruptura. Vamos começar!
Para começar, crie um novo símbolo (tal como fez para os botões de seta). Nome
clipe de filme que MainMenuMc e selecione como o tipo. Clique em OK.
Em segundo lugar, vamos configurar ou cronograma de Mc. Criar uma nova pasta de itens de
menu chamado e inserir cinco novas camadas para a pasta. Nomeá-las de perfil, currículo, contato,
Portfolio, e respeito, respectivamente (sem trocadilhos).
Fale sobre a camada, coloque uma nova caixa de texto com o contato de texto.
Este texto deve ser fonte, preto 15pt, Arial, com um espaçamento de carta de 1. Veja abaixo.
Converter a caixa de texto a um botão. Selecioná-lo, pressione F8, selecione Botão do tipo,
nomeá-lo ContactBtn clique em OK. Clique duas vezes no novo símbolo para editá-lo.
Inserir um novo quadro-chave no quadro Sobre e mudar a cor do texto para # 999999.
Agora vamos configurar algumas linhas guia. Do ContactBtn 's ponto central, arraste
dois guias vertical à esquerda do botão. Um espaço de 100 unidades de distância e
o outro espaçadas de 200 unidades de distância do ponto do botão central. Faça o mesmo para o
direita do botão. Além disso, arraste uma guia horizontal de intersecção centro do botão
ponto.
Aqui está um exemplo esclarecedor.
Em seguida, crie os outros quatro botões assim como o ContactBtn que nós fizemos: ProfileBtn,
ResumeBtn, PortfolioBtn e RespectBtn. Em seguida, coloque os
botões nas guias de interseção com o seguinte. Certifique-se de colocar cada botão
na camada adequada correspondente.
Não, nós não terminamos com o menu ainda, mas precisamos de um ponto de referência para o resto da
-lo. Então, vamos em frente e colocar o nosso menu (da Biblioteca) em nosso palco principal no
Menu Principal camada centrado na vertical e centralizada horizontalmente em relação
para splashy.
Clique duas vezes no MainMenuMc para retornar ao modo de edição. Arraste uma guia horizontal
para onde você deseja que o menu voar.
Em seguida, insira uma nova camada e chamá-lo Dummy. Copie e cole todos os cinco botões
para esta camada mudo. Alinhá-los horizontalmente na guia que acabou de fazer. Confie em mim
em um presente. Aqui está uma olhada ver.
Este vai ser como montamos nosso ponto de destino para os nossos itens de menu quando
eles voam no lugar. Se você pode pensar de uma maneira melhor, impressionante. Ir para ele.
Botão de espaço cada cerca de 3 unidades pouco longe do botão à sua direita. Usar o
linhas guia para ajudar.
Agora se cruzam alguns guias no ponto cada item de menu dummy de centro. Tenha cuidado para não
confundir esses guias com os de nosso menu real.
Ok, agora ocultar a camada de manequim. Poderíamos eliminá-lo agora, já que não vai precisar mais,
mas apenas no caso nós precisamos voltar a ele, ele está lá. Esconder, selecionando a camada
e clicando no ponto sobre a camada de dummy sob o Show / Hide Layers botão Todos.
Para o plano de vôo. Vamos tirar algumas guias de movimento. Primeiro, selecione a camada
de Respeito. Clique no botãoAdicionar Guia de Movimento.
Usando a ferramenta Line (N), desenhe uma linha do RespectBtn 's ponto central para
é destino do vôo correspondente. Certifique-se de chamar a guia sobre a camada a camada guia de
movimento Repect.
Siga os passos anteriores para o resto dos botões.
Veja o que você deve acabar com.
Vá em frente e travar cada camada guia para que não possa selecioná-lo.
Agora, para alguns animação! Tudo certo. Inserir um frame (quadro-chave não) no frame 20 para
cada camada (excluindo Dummy). Clique direito sobre o quadro 20 na camada perfil
e selecione Criar Tween Motion. Selecionar cuidadosamente o botão ProfileBtn
e arrastá-lo até seu ponto de destino.
Isto irá criar o seu tween voar. Aqui está o resultado.
Você pode arrastar o controle deslizante timeline vermelha frente e para trás (ou use o ',' (vírgula) e
'.' (Período) chaves) para ver o seu entre em ação.
Continuarei a fazer o mesmo para o resto de sua botões item de menu.
Então esse é o plano de vôo para cima. E quanto é descida? Bem, eu estou feliz que você pediu.
Isso é simples. Selecione o quadro um em cada camada, clique direito sobre a seleção. Escolha Frames
Copiar.
Agora selecione o quadro 20 para cada camada e selecione Paste Frames, como assim.
Bem, isso foi a descida. Check it out usando o controle deslizante para ver seu menu animado
em toda sua glória! (Vá em frente e apagar a camada dummy se você quiser.)
Quase feito com o menu!
Tempo para alguns ActionScript! Precisamos adicionar algum controle cronograma para o nosso
menu. Inserir
uma nova camada chamada Timeline Control. Selecione o quadro 20 na nova camada e
hit F9. Como mágica abre o painel de ActionScript. Coisas simples aqui. Basta digitar
stop();
stop(); Isto irá parar o menu no topo do plano de voo quando é
jogado.
Faça o mesmo para quadro 40 para que o menu vai parar no fundo do seu vôo
plano. Observe o que denota um pouco o quadro tem alguns ActionScript. Aqui está
um olhar.
Precisamos de uma maneira para controlar o menu da timeline principal. Assim, a solução? Precisamos
para criar duas funções. Primeiro, adicione mais uma camada na linha do tempo MainMenuMc
chamada Actions.
Adicione o seguinte ActionScript para a camada Ações. function goHome():void { gotoAndPlay(20); } function leaveHome():void { gotoAndPlay(1); }
Nós vamos ser capazes de usar essas duas funções para controlar o nosso menu principal.
Parabéns! Isso é o fim do nosso menu principal. Que não foi tão ruim, certo? Ótimo trabalho!
Controle de navegação
Agora que temos o nosso menu de vôo, botão logo, e nossa pequena casa no botão estágio, vamos
colocá-los
em bom uso. Nós estaremos usando um bom bocado mais ActionScript (AS) daqui em diante. Animado?
A primeira coisa que precisamos fazer é se certificar de que a nossa camada de Mestre exibe todo o
cronograma. Para isso,
inserir um quadro em quadro de 8.
A próxima coisa que precisamos fazer é nomear o nosso menu. Selecione o símbolo MainMenuMc e
definir o seu nome Instância
para mainMenu_mc. Agora, vamos adicionar algumas linhas de ActionScript para a camada de Ações que
vai ser executado quando o
arquivo flash carrega pela primeira vez. ///////////////////////////////////////////////////////////////////// //
Startup. ///////////////////////////////////////////////////////////////////// stop(); mainMenu_mc.stop();
O bloco de inicialização não serve para nada, mas para identificar as linhas de código-associados
essencialmente manter os nossos
código de olhar bonito e fácil de encontrar.
Se você não tiver feito isso ainda, voltar para o seu símbolo e MainMenuMc
atribuir s Nome da Instância para nossos botões item de menu. Tente ficar com a mesma
convenção. Como, o nome do
ProfileBtn profile_btn, etc
Note como usamos o postfix _btn para botões eo postfix _mc para clipes de filme. Isso vai
dizer ao compilador para gerar AS intellisense (O que é isso? Veja abaixo.) para o seu objeto. Meio como
o Visual Studio,
Dreamweaver, programação e outros IDEs.
, A fim de manipular os eventos onclick dos botões de navegação, precisamos configurar alguns
manipuladores de eventos.
Adicione as seguintes linhas de AS para a camada Ações. Vou explicar o navigationClicked parte
em um segundo. ///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// mainMenu_mc.profile_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.resume_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.contact_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.portfolio_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.respect_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
Então, o que o mundo fez acabamos de fazer? É chamado de programação manipulação de
eventos. Tenho certeza de que
você está familiarizado com ele, mas é basicamente apenas dizendo que a função "X" é chamado
quando o usuário clica no botão "B"-bastante básico.
Então, nós temos ligados nosso menu principal de botões de navegação para uma função
chamada navigationClicked
que estamos prestes a definir. Agora, sempre que um desses botões são clicados, esta função será
executada.
Aqui está o que você deve ter em sua camada de acções para o palco principal até agora.
Eu sei que está ficando um pouco mais complicado, mas pendurar lá e tomar o seu tempo.
Em seguida, precisamos definir nossa navigationClicked função. Aqui está a função fora
arrancado.
Vamos adicionar mais para esta função em um minuto. Copie e cole este código em seu outro código no
Ações camada. ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function navigationClicked(Event:MouseEvent):void { }
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
reciclagem. logo_btn.addEventListener(MouseEvent.CLICK, navigationClicked); home_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
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
poupar algum tempo e digitação. ///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// whoCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whatCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whenCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whereCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whyCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whoPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); whatPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); whenPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); wherePup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); whyPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup);
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;
whenPopup_mc.visible = false; wherePopup_mc.visible = false; whyPopup_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
3.
Elegante
31. Maio, 2009
James também eu estou preso como George, que escreveu em 02 de abril, é. O seu texto não deixa claro
exatamente o que precisa ser feito eo que estamos tentando fazer neste momento em seu tutorial. Talvez
ele virá para mim se eu experimentar um bit.Your palavras esclarecedoras que seria apreciada.
Obrigado
EleganteResponder a este comentário
4.
Gary
03. Junho de 2009
Depois de adicionar os manipuladores de eventos e funções auxiliares, eu Selecione Debug-> Depurar
filme (Ctrl + Shift + Enter) de
Menu principal do Flash CS3. Recebo este erro
TypeError: Error # 1010: Um termo é indefinido e não tem propriedades.
em jright_fla:: MainTimeline / jright_fla:: frame1 ()
Eu não tenho certeza que o meu problema.
////////////////////////////////////////////////// ///////////////////
/ / Startup.
////////////////////////////////////////////////// ///////////////////
stop ();
mainMenu_mc.stop ();
////////////////////////////////////////////////// ///////////////////
/ Eventos / Setup.
////////////////////////////////////////////////// ///////////////////
mainMenu_mc.profile_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.resume_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.contact_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.portfolio_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.respect_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
////////////////////////////////////////////////// ///////////////////
/ / Manipuladores de Eventos.
////////////////////////////////////////////////// ///////////////////
função navigationClicked (evento: MouseEvent): void
{
/ / Vamos usar isso para armazenar o nome do rótulo Frame.
var frmLabel: String = ";
/ / Determinar o rótulo de quadro de usar com base no qual
/ / Botão foi clicado.
switch (Event.target)
{
mainMenu_mc.profile_btn caso:
frmLabel = "profile_frm";
break;
mainMenu_mc.resume_btn caso:
frmLabel = "resume_frm";
break;
mainMenu_mc.contact_btn caso:
frmLabel = "contact_frm";
break;
mainMenu_mc.portfolio_btn caso:
frmLabel = "portfolio_frm";
break;
mainMenu_mc.respect_btn caso:
frmLabel = "respect_frm";
break;
logo_btn caso:
frmLabel frmLabel = = "home_frm";
break;
home_btn caso:
frmLabel = "home_frm";
break;
}
/ / Encontrar o número do quadro com base em nossa rótulo de quadro.
var frmGoto: Number = this.getFrame (frmLabel);
/ / Ir para a página solicitada.
gotoAndPlay (frmGoto);
}
////////////////////////////////////////////////// ///////////////////
/ Helper / Funções.
////////////////////////////////////////////////// ///////////////////
função GetFrame (frameName: String): Number
{
var quadro: Number = 1;
/ / Loop através de todos os rótulos de quadro para encontrar a nossa estrutura solicitada.
for (var i = 0; i currentLabels.length <; i + +)
{
if (currentLabels [i] nome. frameName ==)
{
frame = currentLabels [i] frame.;
break;
}
}
retorno de quadros;
}Responder a este comentário
5.
Porsche
10. Junho de 2009
O MainMenu só se move corretamente quando o home_btn e logo_btn são clicados.O MainMenu
permanece no palco quando os outros são clicados. Como posso obter os outros botões para empurrar o
menu principal para o canto superior direito?Responder a este comentário
o
Mel
19. Junho de 2009
Eu estou tendo esse problema também! Quando eu clicar nos botões eles não
voam até o lado direito, é somente quando os botões Home e Logo são
clicados.
AJUDA!Responder a este comentário
6.
andrea
01. Julho de 2009
todos os botões do menu meu trabalho e mudança para essa página, mas o contato fica na home page a
partir do menu de inicialização, e quando eu estou em outra página, como carteira e em seguida, clique
em contato a partir daí que me leva de volta à tela inicial e move o menu de volta para o centro.
o que poderia estar causando isso? obrigado.Responder a este comentário
7.
Meda
13. Julho de 2009
Estou quase completa com o site porfolio, no entanto eu continuo vindo para este erro:
"Utils: definição Fader não pôde ser encontrado."
O arquivo utils.fader.as está no mesmo diretório que o meu arquivo fla., Mas eu simplesmente não posso
parecer para depurar o filme e ver os efeitos.
obrigado pelo seu tempo em me ajudarResponder a este comentário
o
Reid
14. Julho de 2009
Estou recebendo o mesmo;
Attemping para lançar e conectar-se a URL Player usando C: \ Users \
Marketing \ Documents \ Reid \ Flash \ reidbutler.swf
[SWF] C: \ Users \ Marketing \ Documents \ Reid \ Flash \ reidbutler.swf -
44.821 bytes após a descompressão
TypeError: Error # 1009: Não é possível acessar uma propriedade ou método
de uma referência de objeto nula.
em fl.transitions:: TransitionManager $ / start () [C: \ Arquivos de programas \
Adobe \ Adobe Flash CS3 \ en \ Configuration \ ActionScript 3.0 \ Classes \ fl \
transições \ TransitionManager.as: 204]
em utils:: Fader $ / fadeIn () [utils.Fader.as: 17]
em reidbutler_fla:: MainTimeline / reidbutler_fla:: frame1 ()
[reidbutler_fla.MainTimeline:: frame1: 173]Responder a este comentário
o
Reid
14. Julho de 2009
Estou recebendo o mesmo;
TypeError: Error # 1009: Não é possível acessar uma propriedade ou método
de uma referência de objeto nula.
em fl.transitions:: TransitionManager $ / start ()
em utils:: Fader fadeIn $ / ()
em reidbutler_fla:: MainTimeline / reidbutler_fla:: frame1 ()Responder a este comentário
8.
Effie
02. Agosto de 2009
oi james, queria saber como você ligar um botão para uma das páginas do site? eu gostaria de ter um
botão na página de perfil a ser relacionadas com a página do resumo. u poderia oferecer alguma
ajuda? espero que você veja este logo é bastante urgente. obrigado.Responder a este comentário
9.
CHRIS T.
03. Agosto de 2009
Oi, em primeiro lugar grande coisa você está aqui.
Estou prestes a meio, mas eu continuo recebendo mensagens de erro quando você pede para depurar
(eu estou no segundo debug). Eu não acho que estou ficando a função cheia do que eu deveria estar
vendo até agora. O que estou fazendo de errado? Também devo tirar as instruções do código? Me
disseram que eu não preciso deles. Pode que causam as mensagens de erro. Obrigado por tudo o que
você está fazendo. é muito apreciado .. realmente!
** Error ** Scene = Scene 1, layer = Ações frame, = 1: Linha 13: A classe ou interface 'MouseEvent' não
pôde ser carregado.
função navigationClicked (evento: MouseEvent): void
** Error ** Scene = Scene 1, layer = Ações frame, = 1: Linha 18: A classe ou 'MouseEvent' interface não
pôde ser carregado.
função navigationClicked (evento: MouseEvent): void
** Error ** Scene = Scene 1, layer = Ações frame, = 1: Linha 54: A classe ou interface 'MouseEvent' não
pôde ser carregado.
função navigationClicked (evento: MouseEvent): void
** Error ** Symbol = MainMenuMc, layer = Ações, frame = 1: Linha 1: Um identificador de tipo é esperado
após o ':'.
gohome function (): void
** Error ** Symbol = MainMenuMc, layer = Ações, frame = 1: Line 6: Um identificador de tipo é esperado
após o ':'.
função leaveHome (): void
Total de Erros ActionScript: 5 erros relatados: 5Responder a este comentário
10.
sibble
10. Agosto de 2009
Excelente tutorial! Corri para alguns problemas menores aqui e ali, mas isso é porque eu estou usando
CS4, de modo que é de se esperar. A partir deste tutorial, eu aprendi o conceito principal e criação de
concepção de um site em Flash.
Muito obrigado!Responder a este comentário
11.
Mehedi Hasan
20. Agosto de 2009
Partes Nice!! E também o seu um usuário avanço muito úteis para novos usuários e também para
Obrigado
Mehedi
Marketing BangladeshResponder a este comentário
12.
Cinza
01. Setembro de 2009
Eu não tenho ido todo o tutorial, pois eu só queria um efeito shadowbox-esque para a minha galeria. No
entanto, eu queria salientar algumas coisas a nota, caso você esteja tentando fazer esta parte do tutorial.
Na seção manipulador de eventos, whoPup_mc, whatPup_mc, etc, devem ser whoPopup_mc. Da mesma
forma, deve ser var currentPup currentPopup var.
Não sei se o autor fez isso como um dispositivo de segurança para garantir que você está realmente
lendo o tutorial e não copiar e colar diretamente, mas eu queria esclarecer aqueles que estavam lutando.Responder a este comentário
13.
Pancadinha
13. Setembro de 2009
Tutorial homem louco!
Eu estava apenas querendo saber como colocar um limite para a distância que você pode rolar a página
respeito. Caso contrário, você poderia simplesmente manter a rolagem até o infinito!Responder a este comentário
14.
Jinz
15. Setembro de 2009
eu tenho abit de problema como o seu minha primeira vez fazendo de flash .. após esta seção [indicado
abaixo]
"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. "
todo o flash meu fez foi "FLASH" e mover-se .. como non-stop? é correto ou não i asneira em algum
lugar? eu sigo todas as instruções e nomes próprios embora.Responder a este comentário
15.
eric
19. Setembro de 2009
hey, eu estou trabalhando lentamente através do tutorial. Correr em alguns dos mesmos problemas que
outros. James enviou e-mail por isso espero que ele responde logo. Principal problema que tenho é que
eu gostaria de revisar os arquivos de origem real. Por alguma razão não consigo abrir os que estão
incluídos no topo desta página. Alguém aqui sabe por quê? Estou executando o Flash 8 em meu Mac. Ou
isso ou eu estou correndo Flash MX 2004. Acho que tenho tanto no meu Mac, mas nenhum dos arquivos
abertos a fonte incluído neste tutorial. Qualquer ajuda de ninguém seria apreciada.
Obrigado mais uma vez para tal um tutorial maravilhoso. Espero terminá-lo por este fim de
semana? Grande ponto de partida para mim em flash, mesmo que eu já sei algumas coisas. Agora eu sei
script de ação. Acho que vou começar o meu projeto mais.Responder a este comentário
16.
hmetivier
30. Outubro de 2009
Estou passando por isso, e eu pensei que eu estava fazendo as coisas bem, mas eu não tenho certeza se
isso é verdade.
1. Eu estou no ponto onde você diz para adicionar nomes de instância com meus botões, mas quando eu
clicar sobre eles, a única coisa que aparece é o nome do rótulo ...
2. Em seguida, no ponto de actionscript Segundo onde você diz para colocar actionscript sob a camada
de ações que está sob a mainmenumc ... E isso não corresponde a suas fotos. Talvez alguém ou você
poderia ajudar.
matthew.scott2005 @ gmail.comResponder a este comentário
o
Alex
27. Dezembro de 2009
Eu também não consegue descobrir como mudar o nome da instância. Você
fez para descobrir isso ainda?Responder a este comentário
Alex
27. Dezembro de 2009
Nevermind, eu percebi isso.Responder a este comentário
Christen
08. Nov, 2010
Estou preso no mesmo local. Você está usando o CS4? Eu
absolutamente não consegue descobrir como fazer isso para
continuar.HELP!Responder a este comentário
17.
RJC
02. Novembro de 2009
Eu tenho que dar-lhe um monte de adereços. Este é um tutorial wicket porque ele provavelmente
responde tudo o que a maioria dos livros não cobrem em um formato fácil de seguir. Obrigado por colocar
tudo em perspectiva a partir da formatação e organização na construção de um site em Flash.
Além disso, todas as idéias e técnicas são mais comuns que podem ser usados em todos os sites. Que
bom que você foi capaz de fornecer tal um tutorial ótimo. Eu realmente espero ver mais de suas coisas
como isso deve ser um dos tutoriais em Flash mais completas sobre a construção de um website
completo.
Eu espero que você cobrir um pouco mais sobre a parte "RESPEITO" último fim de que o carrossel vai
realmente voltar ao ponto de origem.
Graças!Responder a este comentário
18.
NAM
21. Novembro de 2009
Graças a Deus ... MichaelResponder a este comentário
19.
Dave Christian
08. Dezembro de 2009
Sir,
Saudações do país das Filipinas! im interessados em
aprender flash através de internet, porque eu não tenho dinheiro para estudar
Adobe Flash na University School. im começando aprendizagem adobe
flash, mas eu não tenho a menor idéia por onde começar. Alguns dos meus amigos
me disse que começa com o básico, como interpolação e etc, e alguns
dos meus amigos disse-me para aprender reta Passo a Passo Flash web
tutoriais sem aprender o básico, porque alguns dos princípios básicos
were'nt úteis na construção de flash website.Im atualmente trabalhando como
freelance artista gráfico que eu usei apenas o Adobe photoshop
e ilustrador e im planejamento para aprender adobe flash para construir o meu
próprio website flash para mostrar meu portfólio on-line e as informações
sobre mim.
Obrigado e Deus abençoe!
Respeitosamente,
Dave Christian AgagonResponder a este comentário
20.
Shicko
01. Jan, 2010
Eu estive procurando uma solução em todos os lugares para limitar a rolagem infinita na página respeito,
Alguém tem alguma solução ainda?Responder a este comentário
21.
Luise
12. Jan, 2010
James,
Eu só queria dizer-Você está incrível!
É tão bom ir através de cada passo, quando
um professor entusiasta está ajudando você.
Obrigado!Responder a este comentário
22.
Michael
17. Jan, 2010
Oi,
Primeiro de tudo tutorial, ótimo, eu estou usando-o para o meu portfolio. Eu tenho uma questão pouco
sobre ele embora.
Como eu poderia cor dos botões para indicar o site que é visitado? Eu estava pensando que eu poderia
indicar que por uma linha por baixo da palavra, ad eu poderia colocar essa linha no quadro individual. Mas
eu queria saber se haveria uma maneira de exibir o texto em uma cor diferente?
Obrigado!Responder a este comentário
23.
Tyler
04. Fevereiro de 2010
Ou, você pode aprender AS3 real e fazer um que carrega em fundos soberanos e os usos múltiplos XML
que permite a fácil personalização.Responder a este comentário
24.
Flash Website CMS
10. Fevereiro de 2010
É um tutorial muito bom, Michael!
Poderia ter levado muito tempo para descrever todas as etapas. Então, hoje eu vou passar o dia todo a
minha na criação de um portfolio.
Graças.Responder a este comentário
25.
Deddy Irawan
17. Fevereiro de 2010
Legal e impressionante, Tutoriais muito grande!Responder a este comentário
26.
mrstex
22. Fevereiro de 2010
seu tutorial é ótimo .. mas mesmo difícil segui-lo em cada parte do meu menu não voa quando eu clicar
nos botões ... e eu não entendo porque .. u pode me ajudar?Responder a este comentário
27.
Sheetal
16. Abril de 2010
Necessita de ajuda. Estou usando o CS4.
Estou recebendo este erro
TypeError: Error # 1009: Não é possível acessar uma propriedade ou método de uma referência de objeto
nula.
em fl.transitions:: TransitionManager $ / start ()
em utils:: Fader fadeIn $ / ()
em reidbutler_fla:: MainTimeline / reidbutler_fla:: frame1 ()Responder a este comentário
28.
Justin Parente
25. Abril de 2010
Amo este tutorial, mas eu estou em um bloco na extensa AS. Tenho a certeza a minha AS parece
exatamente como o seu, então quando eu vá para Debug, fico com os erros do compilador seguinte:
Cena 1, 'Ações' Layer, Quadro 1, linha 45. 1120: Acesso de logo_btn propriedade indefinida.Responder a este comentário
29.
Jesus
05. Maio, 2010
Tutorial incrível. Muito obrigado!
Mas eu preciso de alguma ajuda com um problema pequeno, mas essencial.
O problema é no início do tutorial. A interpolação de movimento que criamos para o menu de vôo é
suposto ser estática no início, quando um botão é clicado ele voa para o topo e vice-versa. Meu problema
é que mesmo com a AS no controle de cronograma e as camadas de ações que continua indo de cima
para baixo sem parar. A mesma coisa acontece com as caixas de texto, colocado ao lado da casa que
mudam de acordo com o botão é selecionado. Ele continua a mudar sem parar a reprodução do
filme. Isso ocorre mesmo depois que eu escrevi no AS para pará-lo.Alguma idéia do que pode estar
acontecendo?
Graças.Responder a este comentário
30.
jc
13. Maio, 2010
Tutorial incrível.
Obrigado
Estou tendo alguns problemas com o arquivo utils.Fader. Ela diz que não pode localizar o arquivo. Como
posso garantir que eu estou salvando o arquivo para o diretório correto. Você pode esclarecer esse
processo?Responder a este comentário
31.
earthflyer
02. Agosto de 2010
Excelente tutorial.
Eu fiz isso no CS4 e tudo correu bem.
Os únicos problemas que tive durante o tutorial é entender como você explica as coisas, mas logo percebi
isso.
Esta será a me dar uma boa compreensão de como eu posso ir sobre a construção de um site Galeria de
fotos para mim, isso é meu próximo objetivo.
Obrigado
earthflyerResponder a este comentário
32.
Jigsaw_
23. Agosto de 2010
Olá! Estou pensando em começar produzir um site em flash com a ajuda deste tutorial!
Mas eu acho que ver um monte de respostas referindo-se a vários problemas?alguém sabe se isso
realmente funciona?
Então eu não perder meu tempo ... cheers!Responder a este comentário
33.
Seth
24. Agosto de 2010
Então eu vi alguns erros no código ActionScript postados. Limpei-lo um pouco, e aqui está o código
completo que vai na moldura de "acções".
////////////////////////////////////////////////// ///////////////////
/ / Inclui e Importações.
////////////////////////////////////////////////// ///////////////////
utils.Fader de importação;
////////////////////////////////////////////////// ///////////////////
/ / Startup.
////////////////////////////////////////////////// ///////////////////
stop ();
mainMenu_mc.stop ();
////////////////////////////////////////////////// ///////////////////
/ Eventos / Setup.
////////////////////////////////////////////////// ///////////////////
backward_btn.addEventListener (MouseEvent.CLICK, navigationClicked)
forward_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
logo_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
home_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.profile_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.resume_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.contact_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.portfolio_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
mainMenu_mc.respect_btn.addEventListener (MouseEvent.CLICK, navigationClicked);
////////////////////////////////////////////////// ///////////////////
/ / Manipuladores de Eventos.
////////////////////////////////////////////////// ///////////////////
função navigationClicked (evento: MouseEvent): void
{
/ / Vamos usar isso para armazenar o nome do rótulo Frame.
var frmLabel: String = ";
/ / Determinar o rótulo de quadro de usar com base no qual
/ / Botão foi clicado.
switch (Event.target)
{
backward_btn caso:
frmLabel this.getSequencedFrame = (false);
break;
forward_btn caso:
frmLabel = this.getSequencedFrame (true);
break;
logo_btn caso:
frmLabel = "home_frm";
break;
home_btn caso:
frmLabel = "home_frm";
break;
mainMenu_mc.profile_btn caso:
frmLabel = "profile_frm";
break;
mainMenu_mc.resume_btn caso:
frmLabel = "resume_frm";
break;
mainMenu_mc.contact_btn caso:
frmLabel = "contact_frm";
break;
mainMenu_mc.portfolio_btn caso:
frmLabel = "portfolio_frm";
break;
mainMenu_mc.respect_btn caso:
frmLabel = "respect_frm";
break;
}
/ / Encontrar o número do quadro com base em nossa rótulo de quadro.
var frmGoto: Number = this.getFrame (frmLabel);
/ / Não faça nada, se já estamos na página solicitada.
if (currentFrame! = frmGoto)
{
/ / Get e lembre-se o número da página inicial do quadro.
var frmHome: Number = this.getFrame ("home_frm");
/ / Se a nossa página solicitada é a página inicial, o menu de voar
/ / Precisa ir para casa.
if (frmGoto == frmHome)
{
mainMenu_mc.goHome ();
}
/ / Caso contrário, se estamos na página inicial e estão deixando, em seguida,
/ / Sair de casa.
else if (currentFrame == frmHome)
{
mainMenu_mc.leaveHome ();
}
/ / Ir para a página solicitada.
gotoAndPlay (frmGoto);
}
}
////////////////////////////////////////////////// ///////////////////
/ Helper / Funções.
////////////////////////////////////////////////// ///////////////////
função GetFrame (frameName: String): Number
{
var quadro: Number = 1;
/ / Loop através de todos os rótulos de quadro para encontrar a nossa estrutura solicitada.
for (var i = 0; i currentLabels.length <; i + +)
{
if (currentLabels [i] nome. frameName ==)
{
frame = currentLabels [i] frame.;
break;
}
}
retorno de quadros;
}
função getFrameLabel (frame: Number): String
{
var frmLabel: String ='';
/ / Loop através de todos os rótulos de quadro para encontrar o rótulo de quadro solicitado.
for (var i = 0; i currentLabels.length <; i + +)
{
if (currentLabels [i] frame. quadro ==)
{
frmLabel currentLabels = [i] nome.;
break;
}
}
retorno frmLabel;
}
função getSequencedFrame (forward: Boolean): String
{
/ / Usado para lembrar o rótulo de quadro da nossa página.
frmSequence var: String ='';
/ / Se estamos olhando para a próxima página na seqüência ...
if (forward)
{
/ / Se a página atual é que a última página ...
if (currentFrame == this.getFrame ("respect_frm"))
{
/ / ... Então, precisamos ir para Casa.
frmSequence = "home_frm";
}
outro
{
/ / ... Outra coisa, nós só precisamos ir para o próximo quadro.
frmSequence this.getFrameLabel = ((currentFrame + 1));
}
}
/ / ... Outra coisa, nós estamos olhando para a página anterior na seqüência.
outro
{
/ / Se estamos na primeira página (lembre-se, nós saltamos nossa página Start) ...
if (currentFrame == this.getFrame ("home_frm") | |
currentFrame == this.getFrame ("start_frm"))
{
/ / ... Então, precisamos ir para a última página.
frmSequence = "respect_frm";
}
outro
{
/ / ... Outra coisa, nós só precisamos ir para o quadro anterior.
frmSequence this.getFrameLabel = ((currentFrame - 1));
}
}
retorno frmSequence;
}