Criando um Livro Interativo

//www.youtube.com/embed/2Ej9nN2Pj0E

Introdução:

Este é um tutorial para ensinar você a criar um livro interativo básico usando o hyperPad. Ao seguir este tutorial, você entenderá os conceitos necessários para montar um livro.

Estrutura do Projeto:

Um projeto no hyperPad é dividido em Cenas, Objetos e Comportamentos.

Cenas:

As cenas contêm todos os objetos do seu aplicativo e são uma ótima maneira de organizar as diferentes partes que compõem seu aplicativo. Por exemplo, você pode usar uma nova cena para cada página de um livro.

Objetos:

Objetos são itens individuais dentro da cena. Isso inclui qualquer texto ou ilustrações. Cada objeto pode ter seus próprios comportamentos.

Comportamentos:

Comportamentos são o que tornam sua cena e objetos interativos e os dão vida.

Importando Imagens:

Você pode importar imagens e ilustrações da Rolagem da Câmera, Fluxo de Fotos e Dropbox. O hyperPad criará automaticamente imagens não-retina para você, então, ao criar ilustrações, certifique-se de trabalhar com um tamanho de imagem de 2048×1536. O tamanho máximo de imagem que a Tapapbl pode importar é 2048×2048 pixels.

Além disso, como o hyperPad atualmente não suporta fontes ou Textos Ricos, você também deve importar seu texto como PNGs com fundos transparentes.

Depois de importar todas as suas imagens, você pode abrir a Gaveta de Objetos para começar a adicioná-las à sua cena.

Adicionando Comportamentos:

Tornar seus objetos interativos é fácil no hyperPad.

Primeiro toque no objeto que você deseja tornar interativo. Em seguida, nas Propriedades do Objeto, toque no botão “Comportamentos” para abrir o editor de comportamentos.

Para este tutorial, a interação que queremos criar é quando um leitor toca no objeto, ele se move para uma posição específica.

Na categoria “Entrada”, arraste o comportamento “Começou a Tocar” para a tela.

Por padrão, o comportamento Começou a Tocar seleciona automaticamente o objeto atual. Mas você pode mudar isso tocando na imagem do objeto nas propriedades do comportamento.

Em seguida, arraste um comportamento “Mover Para Ponto” e conecte-o ao “Começou a Tocar” que você adicionou na etapa anterior. O comportamento “Mover Para Ponto” moverá o objeto para um ponto selecionado na Tela.

Você pode inserir a localização específica preenchendo os campos de entrada X/Y localizados nas “Propriedades do Comportamento”. Você também pode escolher visualmente a localização para mover.

Para fazer isso visualmente, toque na imagem do objeto nas propriedades do comportamento. Selecione o objeto que você deseja mover e, em seguida, mova o alvo azul para a localização desejada.

Quando estiver satisfeito com a posição, toque no ícone de checkmark para aceitar a nova posição. Note que os campos X e Y nas propriedades do comportamento são preenchidos automaticamente.

Se você pressionar “Reproduzir” agora, verá que funciona exatamente como os comportamentos estão dispostos. O objeto se moverá depois que você tocá-lo.

Viradas de Página & Cenas:

Agora que você tem sua primeira página com interações configuradas, pode querer adicionar páginas adicionais e a capacidade de deslizar entre elas.

Existem algumas maneiras diferentes de adicionar o gesto de deslizar. Você pode adicionar o comportamento a um objeto específico em sua cena ou adicioná-lo aos Comportamentos Globais para que ele afete todas as cenas do seu livro.

Para este tutorial, vamos adicionar o gesto de deslizar aos Comportamentos Globais para não precisarmos adicioná-lo para cada nova cena.

Para começar, abra o “Menu de Criação” pressionando o ícone no canto superior esquerdo.

Em seguida, toque no botão “Comportamentos Globais” na parte inferior para abrir o editor de comportamentos. Os comportamentos que você adicionar aqui afetarão todo o seu projeto e serão executados quando você carregar cada cena.

Em seguida, arraste um comportamento “Deslizar Para a Esquerda” e toque nele uma vez que for adicionado à tela para abrir as propriedades do comportamento.

Note o interruptor de alternância “Deslizar em qualquer lugar”. Se este interruptor estiver definido como “Desligado”, você deve deslizar em um objeto específico para que o evento seja disparado. Defina o interruptor na posição “Ligado”, para que você possa deslizar em qualquer lugar e não esteja restrito a deslizar em um objeto específico.

Nota: Se você adicionar um comportamento “Deslizar” aos comportamentos globais, ele não terá um objeto específico selecionado. O objeto ao qual você está restrito é o “Fundo”. Se você não definir o interruptor na posição “Ligado”, isso pode parecer que funciona. Mas se você adicionar outros objetos cobrindo o fundo, eles podem interferir com o deslizar, especialmente se tiverem outros comportamentos de entrada de toque adicionados.

Em seguida, adicione um comportamento Carregar Próxima Cena e conecte-o ao comportamento de Deslizar. Isso carregará automaticamente a próxima cena assim que você deslizar seu dedo em direção ao lado esquerdo da tela.

Se você não tiver outras cenas em seu projeto, então a cena atual será recarregada. Além disso, se você estiver na última cena do seu projeto, a próxima cena será a primeira na lista de cenas.

Agora você pode adicionar uma nova cena ao seu projeto. Se você pressionar play, verá que seu gesto de deslizar funciona em ambas as cenas sem precisar adicionar comportamentos adicionais.

Conclusão:

Basicamente, isso é tudo que você precisa saber para criar um livro interativo no hyperPad. Você pode experimentar os diferentes comportamentos para criar um amplo nível de interações para seus livros.