Prática 12 Visibilidade do estado do sistema

Transcrição

1 Prática 12 Visibilidade do estado do sistema 1. Objetivos Desenvolver um carregador (loader) Desenvolver um carregador avançado Entender os tipos de carregadores. 2. Recursos Necessários Computador com o programa Macromedia Flash MX ou superior. 3. Conceitos Gerais e Procedimentos De acordo com um dos princípios heurísticos de Nilsen, o sistema deve sempre manter o usuário informado sobre o que está acontecendo através do fornecimento de feedback apropriado dentro de tempos razoáveis. E é aqui que entram as animações para indicar que o filme está carregando. Embora você sempre deva tentar manter o tamanho dos arquivos pequenos, o menor possível, é inevitável que você tenha filmes que levem mais tempo do que alguns segundos para usuários com modem fazerem download. Caso você tenha um arquivo que seja maior que 70kbs é recomendável que você construa um carregador para indicar ao usuário quanto falta para aparecer todo o conteúdo. Tem se tornado comum para desenvolvedores Flash e Shockwave criarem telas de carregamento para os filmes. A tela de carregamento é em geral o primeiro quadro ou cena de um filme e, então, é exibida em primeiro lugar. Ela então apresenta a mensagem carregando... para os usuários, de maneira que assim eles saibam o que está acontecendo. Você pode fornecer mais informações ao usuário enquanto o filme está carregando. Pelo uso do ActionScript, você pode mostrar ao usuário o quanto do filme foi carregado até então ou quanto ainda falta Atividade 1 Construindo um carregador (preloader) a) Abra o arquivo p12_ativ1.fla. Nele você encontrará as camadas necessárias, os símbolos usados no carregador e os usados no conteúdo do filme. b) Na camada Texto você encontrará dois quadros. O segundo deles, vamos nomeá-lo completo. c) Selecione a camada Porcentagem. Crie uma caixa de texto dinâmica na área principal e escreva 100%. Escolha a fonte e a cor que quiser. No Properties Inspector, em Var, coloque porcentagem. 1

2 d) Na camada Barra de Progresso, arraste da biblioteca o movie clip barra e coloque-o exatamente dentro da borda. No Properties Inspector, dê-lhe o nome de progresso. e) Agora chegou a hora de escrever o código necessário para o carregamento. Ele contém comentários que tornam mais fácil seu entendimento: onclipevent(load) { // pega o tamanho do arquivo inteiro tamanhototal = _root.getbytestotal(); // esconde a barra de progresso this._xscale = 0; onclipevent(enterframe) { // ver quanto já foi carregado até aqui bytesloaded = _root.getbytesloaded(); // converte para um valor de 0 a 1 quantidade = bytesloaded/tamanhototal; //converte para um valor de 0 to 100 percentloaded = int(100*quantidade); // determina a escala da barra de progresso this._xscale = percentloaded; // mostra a porcentagem _root.porcentagem = percentloaded + "%"; // se completou vai para... if (quantidade >= 1.0) { _root.gotoandstop("completo"); Pelo uso da função getbytestotal(), você pode determinar quantos kilobytes qualquer movie clip contém. Se você usa _root com getbytestotal(), você pode encontrar quantos kilobytes tem no filme todo. Similarmente, você pode usar getbytesloaded(), para determinar quanto do filme que já foi carregado até então. No movie clip barra um retângulo foi desenhado, sendo que, sua aresta superior esquerda está no centro do palco. Como o centro do movie clip está no lado esquerdo do retângulo, você pode usar _xscale para qualquer número de 0 a 00 e a largura do movie clip vai mudar para encher a área à direita do seu centro. Quando todo o filme foi carregado, ele força a linha do tempo principal para o quadro completo. inicial. Ele anuncia que o carregamento foi completado, e então espera pelo clique do usuário. Isto é bom no caso de ter sido um grande carregamento, pois, neste caso, o usuário pode ter se distraído. É melhor que ele clique em algum botão para começar do que ele perca alguma animação 2

3 O carregador está na primeira cena, enquanto o conteúdo da animação está na segunda cena. Um comando de play() é usado para continuar o filme a partir do quadro completo. Note que você não verá muito se você tentar rodar o.swf a partir do seu micro ou CD-ROM. O filme carrega rapidamente do seu disco rígido, muito rápido para você ver alguma coisa. Para vê-lo funcionando, você terá que fazer um upload para um website e, então, chamar a página na internet para ver o filme em ação. f) Salve seu arquivo como p12_ativ1_seunome.fla Testando a performance de download do documento O Flash MX ou superior tem um ótimo jeito de fazer uma pré-visualização de como o seu filme vai rodar em uma conexão lenta. g) Escolha Control> Test Movie. Se você testa uma cena ou documento, o Flash publica a seleção atual como.swf. Este arquivo.swf abre em uma nova janela e começa a tocar imediatamente. h) Selecione View > Download Settings, e selecione a velocidade de download para determinar a velocidade de exibição que o Flash simula: 14.4 Kbps, 28.8 Kbps, 56 Kbps, DSL, T1. Para entrar com uma característica customizada selecione Customize. Por hora, sugerimos 56 Kbps. i) Quando você está vendo um arquivo.swf, selecione View > Bandwidth Profiler para mostrar um gráfico da performance de download. O lado esquerdo do Bandwidth Profileer mostra informações sobre o documento, suas características, seu estado e streaming se existe algum no documento. O lado esquerdo mostra o gráfico e a linha do tempo. No gráfico, cada barra representa um quadro individual do documento. O tamanho da barra corresponde ao tamanho do quadro em bytes. A linha vermelha indica quando um dado quadro toca em tempo real com a atual velocidade do modem estabelecida no menu Control. Se a barra se estende sobre a linha vermelha, o documento vai esperar para aquele quadro carregar. 3

4 Selecione View > Simulate Download ligar ou desligar o streaming. Se você desligar o streaming, o documento começa sem simular a conexão de internet. j) Clique na barra no gráfico para mostrar as características do quadro correspondente na janela esquerda e parar o documento. Depois que você estabeleceu um ambiente de teste usando o Bandwidth Profiler, você pode abrir qualquer filme.swf diretamente no modo teste Atividade 2 Barra de carregamento avançada Você também pode fornecer ao usuário a quantidade de bytes carregados e a quantidade total de bytes. Você pode fazer isto se mudar a linha que trata de porcentagem para incluir isto: _root.bytesmessage = int(bytesloaded/1000) + "kb/" + int(tamanhototal/1000) + "kb"; Desta maneira, ao invés de se ver, por exemplo, 63%, você veria 90kb/143kb. Você também pode dizer ao usuário quão rápido o download está procedendo, basta uma pequena matemática. Você pode estabelecer as variáveis para lembrar o tempo quando o código começa rastrear o carregamento e a quantidade carregada na primeira medida. Então você pode determinar quão rápido o donwload está acontecendo se você pegar quantos bytes foram carregados até então e então dividido por quanto tempo isto levou. Usando este número, você pode predizer quanto tempo vai levar para o download completar. a) Abra o arquivo p12_ativ2.fla. Nele você encontrará as camadas necessárias, os símbolos usados no carregador e os usados no conteúdo do filme. b) Na camada Texto você encontrará dois quadros. O segundo deles, vamos nomeá-lo completo. c) Selecione a camada Cálculos. Crie uma caixa de texto dinâmica na área principal e escreva somente um tracinho -. Escolha a fonte e a cor que quiser. No Properties Inspector, em Var, coloque bytesmessage. 4

5 d) Crie outra caixa de texto dinâmica na área principal e escreva somente um tracinho - nela. Escolha a fonte e a cor que quiser. No Properties Inspector, em Var, coloque speedmessage. e) Crie outra caixa de texto dinâmica na área principal e escreva somente um tracinho - nela. Escolha a fonte e a cor que quiser. No Properties Inspector, em Var, coloque timemessage. f) Na camada Barra de Progresso, arraste da biblioteca o movie clip barra e coloque-o exatamente dentro da borda. No Properties Inspector, dê-lhe o nome de progresso. g) Agora chegou a hora de escrever o código necessário para o carregamento. Ele contém comentários que tornam mais fácil seu entendimento: onclipevent(load) { // pega a informação inicial tamanhototal = _root.getbytestotal(); starttime = gettimer(); startbytes = _root.getbytesloaded(); // esconde a área de progresso this._xscale = 0; onclipevent(enterframe) { // vê quanto que foi carregado até o momento bytesloaded = _root.getbytesloaded(); // converte a valores de 0 a 1 quantidadecarregada = bytesloaded/tamanhototal; // converte a valures de 0 a 100 percentloaded = int(100*quantidadecarregada); // define a escala da barra de progresso this._xscale = percentloaded; // pega a velocidade timesofar = gettimer() - starttime; speed = bytesloaded/timesofar; // pega o tempo restante bytesleft = tamanhototal - bytesloaded; timeleft = (bytesleft/1000)*(speed/1000); // converte a um número com um número decimal speed = int(10*speed)/10; // diz o texto das caixas de texto dinâmicas _root.bytesmessage = int(bytesloaded/1000) + "kb/" + int(tamanhototal/1000) + "kb"; _root.speedmessage = speed + "k/seg"; _root.timemessage = int(timeleft) + " segundos que faltam"; // se está tudo carregado, então... if (quantidadecarregada >= 1.0) { 5

6 _root.gotoandstop("completo"); h) Salve seu arquivo como p12_ativ2_seunome.fla. Teste o filme e veja como ficou. i) Agora faça o carregador um pouco mais complexo. Coloque um movie clip com uma animação que rode ininterruptamente naquele quadro. Salve e teste novamente Atividade 3 Outro tipo de carregador (preloader) a) Abra o arquivo p12_ativ3.fla. b) Para este tipo de preloader, nós usaremos ifframeloaded() para determinar quanto todos os gráficos de um frame específico foi carregado. Isto pode ser útil se você quer que o usuário comece a entrar em seu sistema, mas não quer que ele continue além de um certo ponto até que os quadros apropriados estejam prontos. c) Para fazer com que o carregador funcione, você irá precisar de uma informação de extrema importância: até que quadro você quer que o filme seja carregado? Se for toda a cena principal, escreva o número do último quadro. Isto é necessário pois o preloader vai ler esta informação e fazer a contagem de acordo com o progresso. Sendo assim, antes de montar o seu preloader, é melhor terminar de elaborar o seu filme. d) Selecione o primeiro frame da camada ações e digite este código na janela do Actions: ifframeloaded("conteudo",210){ gotoandplay("conteudo",1); Onde conteudo" é a segunda cena, ou a principal, e 210 é o último quadro dessa cena. e) Agora devemos garantir que o carregador continue conferindo se o filme já foi carregado. Se esta rotina não for inserida, provavelmente os parâmetros do carregador não serão respeitados, e o filme passará para a cena seguinte, mesmo que essa não esteja carregada. Para tanto, no segundo quadro da camada ações adicione o código: gotoandplay (1); f) Crie um novo movie clip com uma animação que rode ininterruptamente e que indique que o filme está carregando. Algo bem simples, pois ele não pode demorar muito para carregar. g) Salve seu arquivo como p12_ativ3_seunome.fla e publique como.swf e teste como fica se tivesse que esperar o download. Gostou? Atenção: faça uma cópia de todos os arquivos para no diretório determinado pelo professor para correção. Até semana que vem! 6