WORKSHOP: CONFECÇÃO DE OBJETOS DE APRENDIZAGEM
INTERATIVOS UTILIZANDO FLASH*
Parte 2: Confeccionando Objetos de Aprendizagem
Prof. Ricardo R. Fragelli
UnB / IESB ([email protected])
www.mecanicavetorial.com
1.
www.reidaderivada.com
CONFECCIONANDO NOSSO PRIMEIRO OBJETO
Agora que conhecemos alguns elementos básicos do Flash MX, vamos construir um objeto simples para
apresentação de uma teoria qualquer em um esquema similar com a conhecida passagem de slides, entretanto,
um pouco mais elaborado.
Inicie um novo projeto e construa um layout simples que contenha uma região que delimite o local onde
serão exibidos os textos (figura 1). O layout simples deve ser preferido de uma maneira geral ao se construir
objetos de aprendizagem para não causar sobrecarga cognitiva no aprendiz.
Figura 1
Layout sugerido.
Chame essa camada de fundo e clique no cadeado que fica na linha de tempo (figura 2). Desse modo, a
camada com o cadeado estará protegida contra modificações.
Figura 2
Cadeado usado para proteger a camada de fundo.
Agora, insira uma nova camada que será utilizada para colocarmos os textos. Chame a nova camada de
textos. Pense em um tema que você queira desenvolver, insira o título do objeto e um botão com o escrito iniciar
conforme mostra a figura 3.
* Workshop apresentado no Congresso Internacional de Qualidade em Educação a Distância – CIQEAD,
em São Leopoldo/RS em 13 e 14 de novembro de 2007.
1
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
Figura 3
PROF. RICARDO R. FRAGELLI
Exemplo de objeto (curso a distância de fadiga em cabos condutores de energia,
produzido pelo Grupo de Mecânica dos Materiais – GAMMA. Parceria UnB - Eletronorte).
Agora, insira um quadro-chave em branco na camada textos no quadro 2 e escreva seu primeiro texto
nesse quadro (figura 4). Os textos nesse tipo de objeto não devem ser longos. Utilize parágrafos curtos e
diretos. Para textos mais elaborados, como o deste workshop, os arquivos em PDF são mais indicados.
Figura 4
Texto teórico inserido na camada “textos”.
Note que no quadro 2 o fundo não aparece. Para que o fundo se torne visível no quadro 2, clique com o
botão direito em cima do quadro e selecione inserir quadro (figura 5).
2
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
Figura 5
PROF. RICARDO R. FRAGELLI
Ferramenta seta.
Insira novos quadros-chave e escreva novos textos teóricos. Quando finalizar, execute o filme.
Note que o filme será executado rapidamente. Para que isso não ocorra, vá até o quadro-chave 1 e
insira a ação stop();. Assim, o filme ficará parado no primeiro quadro.
Selecione o botão iniciar e insira a seguinte ação:
on(release){
nextFrame();
}
Com esse código, o filme irá para o próximo frame e permanecerá nele.
2.
NAVEGABILIDADE
Um dos principais elementos de um objeto é a sua navegabilidade. O usuário deve ter facilidade em
navegar pelo objeto de forma que sua atenção esteja voltada para o conteúdo.
Insira uma camada com o nome seta direita e construa nela uma seta apontada para a direita. O
primeiro e o último quadros dessa camada devem estar vazios para que a seta não apareça nesses quadros
(figura 6).
Figura 6
Navegabilidade: seta para a direita.
3
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
PROF. RICARDO R. FRAGELLI
Faça o mesmo para a seta que direcionada para esquerda, contudo, devem estar vazios o primeiro e o
segundo quadros (figura 7).
Figura 7
Navegabilidade: setas direcionais.
Adicione o seguinte código para a ação do botão da direita:
on(release){
nextFrame();
}
Para o botão da esquerda, adicione o seguinte código:
on(release){
prevFrame();
}
Assim, o botão da esquerda faz com que o filme vá para o quadro anterior e o da direita faz com que o
filme vá para o quadro seguinte. Rode o filme e veja se ele está funcionando corretamente.
Adicione também um controle para enviar o filme para o início (figura 8). Para isso, faça um botão com o
escrito início e adicione a seguinte ação ao botão:
on(release){
gotoAndStop(1);
}
4
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
Figura 8
PROF. RICARDO R. FRAGELLI
Navegabilidade: controle para o início do filme.
Basicamente, nosso primeiro objeto já está pronto. Contudo, ele possui apenas textos e, seria um
desperdício não utilizar as potencialidades do Flash (como a construção de animações interativas e
simuladores) em nosso projeto. É o que faremos nas próximas seções.
3.
PROBLEMA DE MÚLTIPLA ESCOLHA
Um dos elementos de bastante uso na confecção de materiais de aprendizagem na educação mediada
por computador é o problema de múltipla escolha. Esse tipo de objeto é especialmente utilizado após o módulo
teórico (mas não necessariamente) e pode ser aproveitado para consolidar os conceitos do tema de estudo,
para inserir novos conceitos secundários e também para organizar os conceitos aprendidos.
Faça um novo arquivo no Flash e construa o layout da página inicial (figura 9). No nosso exemplo,
utilizaremos um tema bastante simples para que o entendimento da lógica de confecção do objeto se torne de
fácil compreensão.
Figura 9
Layout sugerido.
Insira um quadro-chave no segundo quadro e insira a pergunta que o usuário terá que responder e as
opções de resposta. Cada opção deve ser um botão para que o usuário consiga clicar.
5
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
Figura 10
PROF. RICARDO R. FRAGELLI
Problema de múltipla escolha.
Para cada opção, construa uma boa resposta, de modo a aproveitar a resposta como ponto de
discussão e aprendizagem. Por exemplo, a raiz quadrada de um número real não pode ter como resposta um
número negativo. Sendo assim, vamos fazer um quadro-chave com um texto que diga isto.
Portanto, insira um quadro-chave no quadro 3 para a resposta da opção A.
Figura 11
Resposta para uma opção selecionada.
Para que esse quadro-chave (3) seja mostrado quando o usuário clicar na opção A, selecione o botão
referente à opção A (que está no quadro 2) e escreva a seguinte ação:
on(release){
gotoAndStop(3);
}
Para que o usuário possa voltar ao quadro-chave 2, que possui a lista de opções, adicione um botão
voltar no quadro da resposta errada e coloque a ação adequada.
6
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
Figura 12
PROF. RICARDO R. FRAGELLI
Resposta para opção incorreta.
Faça o mesmo para os demais botões, inclusive para a opção correta.
Teste o objeto de aprendizagem que você construiu e analise como ele pode ser melhorado. Uma
sugestão (e é o que faço há algum tempo) é construir um objeto de múltipla escolha que gere opções diferentes
(aleatórias) para cada vez que o aprendiz execute o filme.
4.
SIMULADOR: O REI DOS OBJETOS INTERATIVOS
Não há dúvidas que o simulador é o que mais se destaca entre os objetos. Um simulador pode
proporcionar ao aprendiz uma infinidade de possibilidades de modo que a teoria seja consolidada ou construída
com base nessas experiências.
Atualmente, alguns autores de objetos preferem apresentar o simulador no início do curso, funcionando
como organizador prévio da aprendizagem. Outros há que preferem apresentá-lo no final do curso. De um modo
ou de outro, o simulador dará ao seu curso um ganho de qualidade substancial.
Nesse rápido workshop não será possível construir um simulador, mas, tentaremos apresentar alguns
elementos necessários para sua confecção.
Com criatividade, você conseguirá fazer um bom simulador apenas com os comandos já trabalhados até
aqui. Contudo, o trabalho poderá ser simplificado se você conhecer um pouco sobre variáveis e condicionais.
5.
VARIÁVEIS E TEXTOS DINÂMICOS
Inicialmente, faça um layout semelhante ao da figura 13.
Figura 13
Sugestão de layout.
7
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
PROF. RICARDO R. FRAGELLI
Agora vamos inserir um campo de texto para servir de entrada de dados. Portanto, insira um campo de
texto para logo abaixo do texto coeficiente angular e mude a propriedade do tipo de texto para texto de entrada
(figura 14).
Figura 14
Inserindo um texto de entrada.
Dê o nome de coef_a para o campo Var (figura 15). Esse campo será atualizado com o valor da variável
coef_a e sempre poderá ser utilizado para entrada de dados. Se o campo não estiver visível, clique do lado
direito inferior para expandir as opções da caixa de propriedades. É aconselhável selecionar a opção de exibir a
borda em volta do campo de texto para que o usuário possa identificar onde irá inserir o texto (opção que fica do
lado esquerdo de Var).
Figura 15
Nome para a variável de entrada.
Faça o mesmo para o coeficiente linear, ou seja, insira um campo de texto de entrada e dê o nome para
Var de coef_b. Por fim, insira um campo de texto para o valor da raiz, mude a propriedade do tipo de texto para
texto dinâmico e dê o nome de raiz para a variável.
Ao final dessas operações, a cena terá uma aparência similar à da figura 16.
Figura 16
Aparência final da cena.
Selecione o botão, abra as ações (F9) e digite o seguinte código no editor do Action Script:
8
CIQEAD - CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS EM FLASH
PROF. RICARDO R. FRAGELLI
on(release){
raiz = -coef_b/coef_a;
}
Dê Ctrl+Enter e rode o programa para vários valores, inclusive para a igual a 0 (zero).
6.
UTILIZANDO UM CONDICIONAL
Se o coeficiente angular for igual a zero, então não há raiz. Portanto, vamos informar ao usuário uma
resposta mais coerente inserindo um condicional ao código. Veja como:
on(release){
if (coef_a == 0){
raiz = "Não há raiz.";
}
else{
raiz = -coef_b/coef_a;
}
}
Ao enviar um conteúdo para uma variável definida por meio de um texto dinâmico, o Action Script
converte automaticamente para o formato literal. Sendo assim, podemos atribuir qualquer tipo de dado aos
textos dinâmicos.
7.
UM FORTE ABRAÇO
Esperamos que este encontro tenha sido proveitoso e que você consiga expressar suas idéias para
seus alunos de uma forma mais didática, interessante e especial, seja na educação a distância ou na educação
presencial.
Conte conosco para novos cursos e mantenha-nos informados sobre suas experiências e novidades no
campo da educação a distância.
Um forte abraço!
Ricardo.
9