segunda-feira, 28 de junho de 2010

domingo, 27 de junho de 2010

Desenvolvimento da Página "Conheça nosso campus"

Para o desenvolvimento da página Conheça Nosso Campus, nós utilizamos vários recursos e ferramentas. De início, pensamos numa forma de mostrar ao público a qualidade da infraestrutura que a UFC nos oferece. Então fizemos alguns vídeos do campus, da sala de aula e dos laboratórios. Os vídeos foram editados do Adobe Premiere CS3. E foi composto com imagens editadas no Adobe Photoshop e animações criadas no Adobe Flash. Seguem alguns exemplos:


Imagem copiada do site do curso: http://frodo.virtual.ufc.br/~fpufc/tiki-download_file.php?fileId=4&display


Foto da 1ª turma (alguns faltosos) SMD 2010.1.


Logotipo do curso (criada pelo aluno Israel Carlos Bezerra).


Para conferir o resultado da edição clique no smd ao lado:
 
 
 
 

quarta-feira, 23 de junho de 2010

Processo criativo: problemas e soluções

O primeiro problema:

Tenho que criar sete páginas de site, que diferem muito pouco uma das outras. Como fazer para organizar todas estas página na linha do tempo?

A solução:

Trabalhar as sete páginas, utilizando-me de animações de conteúdos diferenciados seria muito trabalhoso e desorganizado, se eu as inserissem na mesma linha do tempo. Então eis que surge a primeira solução: cenas. Colocar cada página em uma cena, possibilitaria uma independência maior das páginas e suas criações eram relativamente fáceis. Bastava criar a original e duplicá-la o número de páginas que se queira.

Eis que surge um novo problema:

Em sala fomos apresentados a códigos action scrpit que poderiam ser inseridos em botões para irem para os próximos quadros de uma timeline, de uma mesma cena.  O código era o seguinte:

on (release) {

gotoAndStop(x)

}

No código acima o x refere-se ao quadro que se quer ir na timeline. Mas, e se eu quiser ir para um quadro específico de uma cena específica.

A solução surge novamente:

Bastava utilizar o código da seguinte forma:

on (release) {

gotoAndStop(‘Cena’,x)

}

A solução foi descoberta devido ao assistente de código do próprio flash. Foi só bulir um pouquinho nele e a resposta foi encontrada.

Mais um problema:

O site deveria ter uma música e seria muito interessante se os internautas pudessem ligar e desligar a música. Como faz?

Solução:

A solução veio de forma criativa. No assistente do flash havia um código que servia para parar o som, stopAllSound. Mas e para ligar? Bem, o jeito foi usar a criatividade. Criei um botão que ao ser clicado ele mostra mais dois botões, on e off. No off só fiz colocar o código de para o som (stopAllSound). Para a música voltar a tocar coloquei o código:

on (release) {

gotoAndPlay(x)

}

Entretanto, isso só funciona pra primeira página, pois para fazer isso funcionar em todas as página, eu deveria adicionar o som em todas elas e isso deixaria o arquivo muito pesado.

Processo criativo: concretização do layout

Como o esboço do layout já foi mostrado a vocês, pode-se perceber que para concretização deste layout basta desenhar aquilo que já foi idealizado anteriormente no papel. Para isto, vamos nos utilizar das seguintes ferramentas do flash:

image Ferramenta seleção – esta ferramenta será importante para modificar as formas criadas por você ,através das linhas ou através das formas, principalmente para realizar curvas.

image Ferramenta Linha – esta ferramenta irá lhe auxiliar a criar suas próprias formas.

image Ferramenta de Formas (Retângulo, oval, etc.) – este cojunnto de ferramentas lhe possibilitará a criação de formas geométricas comuns, como retângulos, círculos etc.

image Ferramenta balde de tinta – será utilizada para colorir as formas criadas.

 

Para criação do layout, como já temos a ideia concebida e ilustrada através do esboço no papel, devo trabalhar em cima do que foi idealizado. Para isto devo criar algumas formas e botões. O método de criação de botões já foi exposto em outro post, por isso vamos a criação das formas. Para criação da barra inferior, que deve esconder parcialmente os botões, irei criar algumas linhas, de modo que possa obter uma forma fechada. Em seguida, me utilizando da ferramenta de seleção (Atalho = V) irei dar algumas curvas na linha que aparece no layout para obter o efeito desejado. Após ter a forma da maneira desejada irei colorí-la, utilizando-me da ferramenta balde de tinta. Se eu quiser prencher a forma com uma cor sólida bastaria selecionar uma cor na paleta de cores ao lado e clicá-la com o balde de tinta.

image 

Já que eu quero um prenchimento degradê, de forma linear, eu devo clicar na caixa de cores, selecionar a opção linear e editar as setas do degradê da maneira que eu preferir.

image

Utilizando estes procedimentos, criei as formas básicas do layout. Expostas a seguir:

barra lateral barra fundo

 

Até agora, já descrevi como se criar todos os elementos do layout que são:

  • Logotipo;
  • Botões;
  • Barra lateral;
  • Barra inferior;
  • Fundo;

Processo criativo: criação dos botões

Diante do esboço criado no papel, já apresentado a vocês. Só nos restava concretizar sua criação, utilizando as ferramentas de desenho do Adobe Flash CS4. Primeiro resolvemos criar os botões e para isso foram necessárias três etapas:
  • criação de um gráfico que representasse o botão;
  • criação de um movie clip que servisse de animação, ao se colocar o mouse sobre o botão;
  • criação de um botão adicionando o gráfico no primeiro quadro dessa categoria, e o movie clip na segunda, no terceiro e no quarto também se utilizou do gráfico.

Ao posicionar o mouse em cima do botão, ele realizará a seguinte animação: 
bt

Ao todo, serão sete botões, com a respectivas categorias: introdução, workshop, Grade Curricular, Nosso Campus, Área de Atuação, Contato e Créditos.

terça-feira, 22 de junho de 2010

Processo criativo: criação de logo MD

Pretendemos fazer uma animação de entrada para o site. Tendo em vista que o site deve fazer referência a uma das habilitações do curso e devido ao fato da nossa opção retratar a habilitação de Mídias Digitais, resolvemos criar uma logo que retratasse essa habilitação, algo que servisse de símbolo, algo em que você bate o olho e já associa o símbolo a sua referência.

Eis o rascunho da nossa logo:







Eis a logo feita no programa Adobe Photoshop CS4:



Basicamennte, a imagem foi desenhada no Photoshop com a  pen tool. Em seguida, colorida com a lata de tinta. E estilizada com um brushe cerda redonda áspera, que já vem com o Photoshop.

Processo Criativo: criação do layout

Primeiro, desde já ressalto que irei narrar o acontecimento dos fatos como se estivesse fazendo as coisas no presente momento, tendo em vista tornar a leitura mais agradável e empolgante, apesar dos fatos relatados não estarem acontecendo no presente momento.

Todo site, para ser um bom site, tem que ter um bom layout. Entenda layout como a disposição de elementos em um determinado espaço. Para criar um layout você vai precisar de um lápis, uma folha de papel e de muita imaginação e paciência. É uma tarefa relativamente simples, mas as ideias as vezes demoram a vir, por isso o concelho que dou aqueles interessados na sua criação é que comecem a rabiscar folhas e folhas pois as ideias, literalmente, vão se esboçando.

Aqui vos apresento o nosso rabisco, digo nosso layout.

segunda-feira, 14 de junho de 2010

Tema abordado e time preparado

Nosso produto final escolhido foi um web-site em que abordaremos especificamente a habilidade de Mídias Digitais. Para agilizar e facilitar a produção, dividimos o trabalho para cada integrante da equipe, mas isso não significa que cada um não possa ajudar na realização da tarefa do companheiro.

Redação: Lidiana
Animação: Israel
Design: Paulo
Sonoplastia: Lidiana e Paulo
Vídeo-produção: Israel.

Nosso objetivo é mostrar a habilidade de Mídias Digitais a todos, principalmente aos pré-universitários, de uma forma que eles se sintam instigados a ingressar na Universidade no curso de Sistemas e Mídias Digitais. Pretendemos expor a grade curricular, a área de atuação do profissional formado. Exibiremos também alguns trabalhos já realizados pela primeira turma do curso e temos a intenção de fazer um vídeo mostrando um pouco do Campus, onde temos aulas e como são as nossas instalações.

domingo, 13 de junho de 2010

A prosposta

A proposta das possibilidades de trabalhos de conclusão de semestre se encontra para donwload no arquivo abaixo.

Só para deixá-los mais interessados, ressalto que os alunos poderiam escolher três propostas:
  • Um jogo ou;
  • Um site ou;
  • Uma animação.
Para saberem os outros detalhes que os alunos devem se adequar baixem o arquivo.




Apresentação

Este site foi criado com um único propósito. Divulgar como se cria um site em flash, especificamente, como se cria o nosso site em flash.Aqui descreveremos, como surgiu nosso site, seu layout, a criação dos botões, possíveis dúvidas e seus esclarecimentos, enfim todo o processo criativo. Desde já, digo aos leitores que este é um trabalho de conclusão dos alunos da UFC, do curso de Sistemas e Mídias Digitais. Cada equipe, composta de três a cinco pessoas deve fazer um projeto de conclusão de semestre, adequando-se a uma das propostas ofericidas pelo professor. No post seguinte apresento-lhes a proposta. Espero que gostem!