Baixe Tutorial flash e outras Notas de estudo em PDF para Gestão de Recursos Humanos, somente na Docsity!
ÍNDICE
- Módulo
- Introdução
- Interface
- Novo documento
- Camadas
- Vetor x Bitmap
- Ferramentas
- Panel Color
- Bola de basquete Exercícios:
- Desenhando - Pintinho (Vetor)
- Módulo
- Introdução à animação
- Pintinho Animado Exercícios:
- Módulo
- Interpolações
- Símbolos
- Movie Clip
- Animando – Motion Exercícios:
- Animando - Shape
- Movie Clip
- Curva na bola
- Módulo
- Mask
- Button
- Módulo
- Cenas
- Controle do filme (gotoAndPlay, gotoAndStop e stop)
- Módulo
- Carregando
- Player
MóDulo 1
INtroDução osoftwareAdobe®Flash®CS3Professionaléomaisavançadoambientedepublicaçãodeconteúdo ricoeinterativoparaasplataformasdigitais,webemóvel.Criewebsitesinterativos,anúnciosricosem mídia,mídiasinstrutivas,apresentações,jogosemais.utilizeoFlashCS3eoAdobeFlashPlayerparaas- segurar que o seu conteúdo atinja o maior público possível. requisitos do sistema: Sistema Windows
• Processador Intel® Pentium® 4, Intel Centrino®, Intel Xeon® ou Intel Core™ Duo (ou compatível)
• Microsoft®WindowsXPcomServicePack2ouWindowsVista™HomePremium,Business,ultimate,
ou Enterprise (certificado para edições de 32 bits)
• 512MB de rAM (1GB recomendado)
• 2,5GBdeespaçodisponívelemdisco(énecessárioumespaçolivreadicionalduranteainstalação)
• resolução de monitor de 1.024x768 com placa de vídeo de 16 bits
• unidade de DVD-roM
• Software Quicktime 7.1.2 necessário para os recursos multimídia
• Software DirectX 9.0c
• Conexão por Internet ou telefone necessária para a ativação do produto
• Conexão por Internet de banda larga necessária para o Adobe Stock Photos** e outros serviços
Panel: temos vários tipos de Panels no Flash, como: Align, library, Color e etc. tools: Ferramentas para trabalharmos como arquivos do Flash. Properties:Serãomostradosrecursosnestaparte,quandoforpedidoumnovodocumentoouquando alguma ferramenta for selecionada. Filters: recursos adicionais em textos e em Movie Clips.
NoVo DoCuMENto ParainiciarumnovodocumentonoFlashháváriasopçõescomo:programasparadispositivosmovéis, projetos e arquivos com a linguagem JavaScript. NocursodewebdesigndaMídia,nãofaremosdiferençaentreFlashFile(ActionScript3.0)eFlashFile (ActionScript 2.0), pois não estudaremos a fundo a linguagem ACtIoNSCrIPt. Criaremosagoranossoprimeirodocumento,noqualpoderásercriadonoCrEAtENEWdoFlashFile (ActionScript 2.0) ou pelo MENu FIlE >>> NEW.
CAMADAS NoFlash,criaremosdesenhosvetoriaisperfeitos.Elespoderãosesoldar/apararpelocorpooupelasua borda. observe os exemplos: 1º Exemplo: A bolinha selecionada é um vetor. observe os pontos da bolinha. outrabolinhafoicriadaecolocadadoladoda1ºbolinha.Quando forretiradaaseleçãoda2ºbolinha,teremosumnovoobjetoSol- DADo.
obs.:objetosdamesmacor=objetossoldados(unidos). obs.: objetos cor mesma cor de borda serão soldados.o FlASHSEPArAoPrEENCHIMENtoDABorDA,bastase- lecionar a parte que você quer. 2º Exemplo: obs.:objetoscomcordepreenchimentodiferente=sub- tração.
VEtor X BItMAP
- Gráficos Bitmaps Gráficosbitmapssãoimagensformadaporpixels(pictureelements).Masoqueéumpixel?Pixelssão pequenospontosemseumonitor,comcorebrilhovariados.Indicadospararepresentaçãodeimagens comaltoníveldedetalhes.osarquivosBitmapsporseremformadosdispondoaimagempixelapixel, setiveremseutamanhoaumentadosofrerãodistorçõesconsideráveis,poiscadapontoétransformado emblocosmaioresparacomporaimagemmaior.EntreosprincipaissoftwaresdeediçãoBitmapestão: AdobePhotoshop,JascPaintShopProeCorelPhotopaint,algunsdessesprogramastambémtempro- priedades Vetoriais, como a ferramenta Shapes do Photoshop.
- Gráficos Vetoriais GráficosVetoriaissãoimagensformadasporcálculosmatemáticosexecutadospelocomputador.Agora vocêdeveestarseperguntando:“Masedaí?oquemudadeVetorparaBitmap?”Simplesmentetudo. lembra-sequedoispontos“A”e“B”determinamumareta?Agoraimaginesevocêmoveroponto“A” para mais distante de “B”, continuaremos tendo uma reta, porém maior. Agorasuaperguntadeveser:“Entãoosgráficosvetoriais,mesmosemodificadosquantoaseutamanho, largura,etc,continuamomesmo?”Issomesmo!osgráficosvetoriaissecomportamexatamentedesta maneira.Sevocêcriarumquadradopequenoedepoisaumentarseutamanhoem200vezes,oquadrado continuaráomesmo,comamesmadefiniçãoequalidade.AgoraimaginefazerissoemimagensBitmaps. o quadrado vai ficar distorcido. o grande diferencial entre Bitmap eVetor é isso, a capacidade de transformação.
- Quando usar Vetor e quando usar Bitmap: usandoVetor:osgráficosvetoriaissãoutilizadosemimpressões,artepararevistas,folderes,Web.o MacromediaFlashfoioresponsávelpeloboomdaartevetorialnaWeb.Comoaparecimentodatecno- logiaShockwave,aMacromediaintroduziuovetoràWeb,mídianaqualaartevetorialraramenteapare- cia.umaáreaondeseutilizamuitoasferramentasvetoriaiséailustração,tantoparaquadrinhosquanto parapublicidade.Comaferramentadeilustraçãovetorial,cria-seocroquiquemaistardeétrabalhado em programas de edição bitmaps, para aplicação de detalhes, ou seja, para se dar vida. usandoBitmaps:osgráficosbitmapssãoamplamenteutilizadosnaWeb,impressões,cinema,tV,CD- roMS,Games,etc.usam-seimagensbaseadasempixelsquandosedesejaumamaiorprofundidade,algo quetransmitamais“vida”paraousuário/observador.usamosoBitmapemmuitoscasos,masnempor issoovetordeveserbanalizado,poismuitosilustradores,comcertezautilizamferramentasvetoriais paracriarsuasobras,sejaocroquiouaartefinal.Enfim,tantoosprogramasVetoriaisquantoosBitmaps sãoimportantíssimosecomcertezaforamrevolucionárioseresponsáveispelaexplosãodaartedigital nos dias de hoje.
FErrAMENtAS Asferramentasqueserãomostradasaseguirforamaperfeiçoadas.ApesardequeoFlashnãoéespe- cíficoparadesenhosvetoriais,asferramentasvãonosajudaradesenharbemmelhorqueasversões anteriores. obs.:Construaseusdesenhosnosprogramas:IlluStrAtor,PHotoSHoPCS3eimporteparaoFlASH CS3. Estes programas têm uma interação bem maior que a versão anterior. oval A ferramenta elipse do Flash CS3 tem duas opções. osdoistiposdeferramentaselipsesãobastanteparecidas, o que vai diferenciar é o modo de manipulação delas. En- quantoaoVAltoolteremosaoportunidadedemodifi- caroraio,oinícioeofimdosegmentoumaúnicavez,com a oVAl PrIMItIVEtool, você poderá modificar quando quiser. Veremos logo a seguir estas opções. Barra de propriedades dessa ferramenta quando selecionada: AlgumasopçõesvocêsjáconhecemdoFireworksCS3,oquemudoudeumsoftwareparaooutroforam asopçõesStArtANGlE,ENDANGlE,INNErrADIuS,CloSEPAtH,CAP,JoIN.Asquatrosprimeiras opções vão ser as diferenças do oVAl tool para oVAl PrIMItIVE tool. AsopçõesCAPeJoINsãoutilizadasparalinhaeobjetosqueexistampontas(retânguloPolígono).Como podemos separar cada parte do objeto (linha e preenchimento) podemos utiliza CAP e JoIN. *Veja vídeo aula no CD-roM de conteúdo interativo
rectangle A ferramenta rECtANGlEtool é rECtANGlE PrIMI- tIVEtool seguem o mesmo padrão das ferramentas oVAl.Porémoquesepodefazernosretângulosécolo- car cantos arredondados. Barra de propriedades dessa ferramenta quando selecionada: Na parte inferior da barra de propriedades, temos então as opções para cantos arredondados. o cadeado significa proporção para os cantos. Se adicionar o valor 32 a primeira caixinha, todas terão 32 por proporção. Se desmarcar o cadeado, você poderá mexer nos cantos com mais liberdade. rectangle Primitive Barra de propriedades dessa ferramenta quando selecionada: Quando quiser alterar os valores dos cantos, a opção estará habilitada.
PolyStar Barra de propriedades dessa ferramenta quando selecionada: Por padrão, o polígono terá 5 pontas, mas podemos alterar a quantidade de lados do polígono: Entre as opções: Style: Polígono ou estrela Number of sides: Número de lados Star point size: Está opção fará com que a estrela fique mais “gordinha” ou “magrinha”. Pencil Barra de propriedades dessa ferramenta quando selecionada: odesenhocomaferramentalápisésolto (à mão livre) e muito difícil. A menos que você tenha uma tablet (Mesa digitalizadora).
Dynamic text Aopçãodynamictext,existeparadiversasidéias,como:Informaaousuárioondeeleestánavegando, dataehora,carregandoeassimpordiante,ondeousuárionãopodealteraainformaçãoqueestádentro caixa,maspodemanipulaainformaçãoviacódigo(ACtIoNSCrIPt).Paraentendemosmelhor,vamos criar uma pequena aplicação com este tipo de caixa. Crie uma caixa dynamic, como a figura abaixo: o principal é o INStANCE NAME = dyna. Crie uma nova camada e renomeie para AC Selecione o primeiro frame (Quadradinho) desta camada. Aperte F9 e digite os scripts:
/* o curso de flash, não é voltado para linguagem ACtIoN SCrIPt. Só vai ser mostrado uma aplicação para a caixa Dynamic. Qualquer dúvida com relação ao script ou curiosidade, mande um e-mail para: [email protected] / //As 4 primeiras linhas como estão, são linhas de comentário // o símbolo barra-barra é utilizado para comentário com uma única linha / o comentário barra-asterisco + asterisco-barra, é para comentário com mais de uma linha / // todas as linhas deste script serão comentadas vardyna:textField;/AcaixaDYNAMICtemonome(INStANCENAME)dyna.tudonaprogramação quandovaireceberumvalor,temonomedevariável.AquinoFlASH,temosqueespecificar,quetipo de valor que esta variável vai receber. Ela vai se do tipo textField (Caixa de texto)/ horario = new Date(); // A classe DAtE, é responsável por minutos, segundos, dias. hora=horario.getHours();//temosumavarhora,quevaiquardarinformaçõessobreahoradosistema operacional minutos= horario.getMinutes(); //temos uma var minutos, que vai receber informações sobre os minutos do sistema segundos=horario.getSeconds();//temosumavarsegundos,quevaireceberinformaçõessobreos segundos do sistema dyna.text=hora+”:”+minutos+”:”+segundos;//Pegamostodasasinformaçõesdasvariáveis,ejoga- mos dentro da caixa dyna / Execute o arquivo flash apertando Ctrl+ENtEr / / lEMBrANDo: o SCrIPt APrESENtADo, NãoVAI SEr DISCutIDo DurANtE AulA. EM CASoS DÚVIDAS, MANDE uM E-MAIl */ obs.:oscriptdigitadoconformemostrado,serábemexecutado.Casoexistaerrooflashmostrará. Preste atenção e tente consertar.
PAlEtA Color ApaletaColorserveparamanipularascores,adicionandotransparêncianacordoobjeto,adicionando um bitmap (imagem) e adicionando um gradiente, seja ele linear ou radial. QuandonãoestiverdisponíveloacessoàpaletaColordoladoesquerdodajaneladoFlASH,váao MENu >>> WINDoW >>> Color.
EXErCÍCIo
BolA DE BASQuEtE 1ºComaferramentaElIPSEselecionada,façauma bolade150pxx150pxcomcontornopretotaman- ho3pxecompreenchimentovermelho.renomeiea camada para BolA. 2ºComaferramentaseleção,cliquesobreopreenchi- mento (VErMElHo). Com a paleta Color maximi- zada, clique sobre a lista suspensa da opçãotYPE e escolha BItMAP. 3º Escolha a textura texturaBolaBasequete.jpg (DVD-roM). 4º Crie outra camada, dê o nome a ela de lINHA HorIZoNtAl.Selecioneaferramentalinha,crieuma linha horizontal no meio da bola.
