Visão geral do Flash Storybook Phase 2
Este tutorial inicia a segunda fase do nosso FlashR Série do aplicativo Storybook para iOS. Se você está acompanhando, sabe que a primeira fase detalha como criar uma cena de introdução animada para um aplicativo de livro de histórias. Esta introdução animada é opcional, mas você pode querer ler esses tutoriais, pois eles abordam como criar animações e botões básicos em Flash.

A razão pela qual essa introdução animada é opcional para o projeto é que a maioria dos aplicativos de livros de histórias é aberta com um gráfico estático da capa e um botão ou área quente onde o leitor toca ou desliza o dedo para virar a página.

É aqui que começaremos a fase dois da série. Se você criou a introdução animada na fase um, deixe-a de lado por enquanto. Vamos integrar os dois juntos mais tarde.

Vamos dar uma olhada no livro de histórias. Como você pode ver, temos vários itens dentro e fora do palco e nossa Linha do tempo principal tem 32 quadros. No Quadro 1 da Linha do tempo principal, o palco contém a imagem estática da capa do livro de histórias. Além do gráfico da capa do livro, a única coisa no palco é um botão de alternância na capa superior esquerda. Este botão alterna a página do menu de configurações.

Fora do palco e à esquerda está o gráfico pageCurl que animaremos para simular as páginas viradas quando tocadas ou passadas.

Acima do palco está a página de sobreposição do menu de configurações. Quando você clica no botão de alternância no palco, a página do menu de configurações é aberta sobre o que já está no palco. Esta página de configurações contém links para as páginas informativas do livro de histórias, como as páginas Índice e Créditos. Ele também contém um botão de alternância para ativar / desativar a música de fundo e um link para o site do autor.

Por que precisamos desta página do menu de configurações? Por conter um link para a página Índice, o leitor sempre tem como voltar ao início do livro a partir da página atual que está visualizando. Também é uma boa idéia dar ao leitor a opção de desativar a música de fundo. E, claro, você deseja que o leitor visite seu site para obter mais informações sobre você e seus outros aplicativos de livros.

Agora, vejamos as camadas no painel Linha de tempo. Como você pode ver, a camada inferior é a camada de páginas. Começando com o Quadro 3, cada quadro contém um clipe de filme para uma página do livro. Criaremos um clipe de filme diferente para cada página e os colocaremos no palco. À medida que avançamos na Linha do tempo, "paginamos" o livro.

De cima para baixo, as outras camadas são as seguintes.

  • actionsMain - contém o ActionScript para a principal navegação e eventos.

  • actionsPages - contém o ActionScript que será executado em determinadas páginas do livro. Como você pode ver, essas páginas são 11 e 31.

  • setTogBtn - contém o botão de alternância do menu de configurações.

  • Pasta setMenu - essa pasta contém as camadas que exibem o gráfico de plano de fundo do menu de configurações e os botões individuais do menu.

  • buttonsMain - contém os botões de navegação para frente e para trás.

  • buttonsPages - contém botões que iniciarão o ActionScript nas páginas 11 e 31.

  • pageCurl - contém o clipe de filme pageCurl que cria a simulação de virar a página.

  • páginas - clipes de filme para cada página do livro de histórias e outras páginas informativas.

IMPORTANTE: esses tutoriais de desenvolvimento de aplicativos foram escritos com o novato em Flash em mente. Você precisará otimizar seu aplicativo além do coberto nestes tutoriais antes de finalizá-lo na loja de aplicativos.


Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram reproduzidas com a permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / são marcas comerciais registradas ou marcas comerciais da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.


Instruções De Vídeo: Parallax Overview - Google Web Designer (Março 2024).