Resumo

Neste tutorial vai aprender como crear un slideshow, que ten un Flick / Fuzz / TV dobres transición entre as imaxes.

Aquí o resultado final:


Requisitos

Flash 8, Flash CS3 ou Flash CS4.
3 foto (neste caso 550 × 400, as imaxes dispoñibles no tutorial arquivo zip)

Nota: As imaxes nese tutorial están feitos en Flash CS3. Ela traballa exactamente da mesma en Flash 8 ou Flash CS4. Este tutorial é ActionScript 2 (aínda que ActionScript non é necesario).

Paso 1 - Instalar o compoñente do efecto

Baixo TV Efecto Fuzz aquí. Por favor, siga as instrucións de instalación e arrastra o compoñente do panel de compoñentes para a biblioteca do seu arquivo fla ..

Arrastrar compoñente na biblioteca

Paso 2 - Importación de imaxes

Importación de todas as tres imaxes de "Archivo" -> "Import" -> "Importar a biblioteca ...".

Importar imaxes

Paso 3 - Converter imaxes en Movieclip

Crear un novo movieclip [Ctrl-F8] ou "Inserir" -> "New Symbol ...", o nome de" image01 "e pór a primeira imaxe no primeiro cadro deste MovieClip. Repita este paso para as outras imaxes, o nome deses Movieclips "image02" e "image03". BTW, a cita depende de ti.

Crear novo movieclip ...

... o nome do Movieclip ...

... e arrastrar a imaxe na timeline do movieclip

Biblioteca con movieclips e imaxes

Paso 4 - Crear primeira transición

Agora prema en "Scene 1" para voltar á timeline principal.

Voltar para a timeline principal

Renomeie a capa xa existente para "img01". Crear máis capas e nomea-los "img02" e "transition01". Máis unha vez a cita é só para unha mellor vista. Pode escoller outros nomes, se queres.

Renomear capas

Arrastra as dúas primeiras Movieclips imaxe da biblioteca para a capa respectivos.

Drag Movieclips en capas

Prema no primeiro cadro da capa "transition01". Arrastra o compoñente de televisión Efecto Fuzz da súa biblioteca para o palco. O compoñente pode axustar automaticamente para o ángulo superior esquerdo do seu MovieClip.

Arrastrar compoñente na capa

Para cada nivel, prema no recadro 50 e crea un marco [F5] ou co botón dereito e "Insert marcos".

Crear un marco ...

... en todas as capas

É importante dar a imaxe de nomes de instancia Movieclips, en caso contrario, o compoñente de efecto non é capaz de detecta-los. Prema na imaxe Movieclip un por un e un conxunto de nomes de instancia, neste caso "image01" e "image02" (pode escoller un diferente se Vostede quere).

Definir nome de instancia do movieclip primeiro

Definir nome de instancia do movieclip segunda

Prema na TV Efecto Fuzz no escenario e abrir o Panel Inspector compoñente prema Shift [-F7] ou "Window" -> "Component Inspector. Todos Movieclips con nomes de instancia neste cadro están listados na sección "Iniciar Movieclip" End Movieclip lista e seleccione ". Escolla "image01" como "Start Movieclip" e "image02" como "Fin Movieclip".

Iniciar opcións Movieclip

Definicións de transición

Exportar a película flash [Ctrl-Intro] ou "comando" -> "Test Movie". A transición está a suceder desde a primeira imaxe para o segundo.

Resultados

Paso 5 - Engadir segunda transición

Crear tres capas e nomea-los "img03", "img04" e "transition02".

Crea unha capa

En cada nivel, prema no recadro 51 (un fotograma despois da transición que rematou) e inserir un keyframes [preme F6] ou co botón dereito e "Insert marcos".

Inserir marco ...

... para todas as capas

Imos reutilizar a segunda imaxe MovieClip, desde a segunda transición debe comezar con el. Prema no marco clave recén criada na capa "img03" e arrastrar o MovieClip "image02" dende a biblioteca para o palco. Prema no marco clave recén criada na capa "img04" e arrastrar o MovieClip "image03" da biblioteca para o palco.

Drag Movieclips para as capas creadas

Agora selecciona os nomes de instancia desta páxina Movieclips a "image03" e "image04".

Definir nome de instancia da primeira imaxe

Definir nome da instancia da imaxe segundo

É un pouco confuso conxunto de capas e os nomes de instancia dun número ata entón o nome do Movieclip orixinal. Pero, a mellor visión e para manter o número de erros de baixo potencial, é mellor tratar o Movieclips da segunda transición tan completamente novos movieclips.

Seleccione a capa "transition02" e arrastrar o compoñente a partir da súa biblioteca para o palco. Unha vez máis, o compoñente snap automaticamente.

Arrastrar compoñente do escenario

Prema no compoñente do escenario, abrir o Panel inspector de componente e seleccione "image03" como "Start Movieclip" e "image04" como "Fin Movieclip".

Opcións dentro do panel Inspector compoñente

Para a capa de tres novos crear un marco no marco 100 [F5] ou co botón dereito e "Insert marcos".

Inserir cadros en todas as tres capas

Cando exportar o seu película flash agora, podes ver que tanto a transición son presentados antes do filme é podada.

Resultados

Paso 6 - Engadir unha pausa entre as dúas transicións de imaxe

Para ter tempo un pouco máis entre as transicións de deixar os cadros clave da capa "img01" e "transition01 intocada". Estender a lonxitude da capa "img02" (a imaxe que a transición remata con) engadindo un marco no cadro 80 [F5] ou co botón dereito e "Insert marcos".

Inserir marco

Inserir marco

Agora seleccione todo o bloque da segunda transición (de modo que pode, premendo cadro 51 de "transition01" e coa clave Shift Prema premer recadro 100 de "img04") e move o bloque burato para recadro 81.

Seleccione capas ...

... arrastra o bloque para recadro 81 ...

e libera-lo

Podes facer o mesmo para a segunda transición.

Descargar

Prema aquí para baixar o fla. Deste tutorial. Nota: O fla. Inclúe a versión de proba do compoñente de efecto, que só funciona no IDE Flash (Flash 8, Flash CS3 e Adobe Flash CS4), pero non dentro do navegador.

Tamén podes baixar a TV Efecto Fuzz aquí.

Aquí pode atopar un video tutorial de como implementar un efecto diferente.

  • Share / Bookmark