{"id":2781,"date":"2009-01-22T11:25:50","date_gmt":"2009-01-22T13:25:50","guid":{"rendered":"https:\/\/eliezerladeira.com.br\/blog\/?p=2781"},"modified":"2026-02-05T15:59:08","modified_gmt":"2026-02-05T18:59:08","slug":"aprenda-a-criar-uma-interface-de-video-com-menu-de-acesso-parecida-com-a-do-youtube","status":"publish","type":"post","link":"https:\/\/eliezerladeira.com.br\/blog\/aprenda-a-criar-uma-interface-de-video-com-menu-de-acesso-parecida-com-a-do-youtube\/","title":{"rendered":"Aprenda a criar uma interface de v\u00eddeo com menu de acesso parecida com a do\u00a0YouTube"},"content":{"rendered":"
\n

Quem j\u00e1 n\u00e3o passou um temp\u00e3o na frente do PC vendo os v\u00eddeos do YouTube?<\/p>\n

E quem j\u00e1 n\u00e3o teve vontade de construir uma \u00e1rea de v\u00eddeo no pr\u00f3prio site? Se voc\u00ea se inclui nessa \u00faltima turma, este tutorial pode lhe dar uma boa m\u00e3o. Vamos desenvolver aqui uma interface de v\u00eddeo com recursos de menu, utilizando os formatos do Flash 8. Como no\u00a0YouTube<\/a>, o menu aparecer\u00e1 na tela antes da exibi\u00e7\u00e3o de qualquer filme, retornando a ela ao t\u00e9rmino de qualquer exibi\u00e7\u00e3o ou quando o bot\u00e3o Parar for pressionado.<\/p>\n

Antes de come\u00e7ar a programar a interface, vamos converter os filmes para o formato Flash Video no utilit\u00e1rio Flash Video Encoder, que acompanha a vers\u00e3o Professional do Flash 8. Apesar de o assistente de importa\u00e7\u00e3o de v\u00eddeo do Flash 8 ter as mesmas op\u00e7\u00f5es, o Flash Video Encoder permite a convers\u00e3o em lote, o que facilita muito a vida de quem possui mais de um v\u00eddeo para mudar de formato.<\/p>\n

1) A CONVERS\u00c3O<\/strong><\/p>\n

Abra o Flash Video Encoder e acione o menu\u00a0File\/Add<\/em>. Na janela Abrir, selecione os dois filmes que ser\u00e3o convertidos em Flash V\u00eddeo. Clique em\u00a0Abrir<\/em>. Escolha um v\u00eddeo e clique em\u00a0Settings<\/em>\u00a0para configurar. Na primeira tela, clique em\u00a0Show Advanced Settings<\/em>. Unifique o tamanho de exibi\u00e7\u00e3o dos v\u00eddeos na tela, redimensionando-os para 320 por 240 pixels, e clique em OK para retornar \u00e0 tela principal. Configure cada filme na fila do Encoder e clique no bot\u00e3o\u00a0Start Queue<\/em>\u00a0para disparar a convers\u00e3o. Ao terminar, feche o Flash Video Encoder.<\/p>\n

2) SELE\u00c7\u00c3O DE ARQUIVOS<\/strong><\/p>\n

Vamos criar o player. No Flash 8, crie um novo documento e salve-o como videoplayer.fla. Acione\u00a0Menu\/Import\/Import video<\/em>\u00a0para abrir o assistente de importa\u00e7\u00e3o de v\u00eddeo. Na primeira tela,\u00a0Select Video<\/em>, clique no bot\u00e3o\u00a0Browse<\/em>\u00a0para escolher o arquivo a ser importado. Escolha qualquer um dos dois arquivos convertidos, clique em\u00a0Abrir<\/em>\u00a0e avance.<\/p>\n

3) SA\u00cdDA DE V\u00cdDEO<\/strong><\/p>\n

Na segunda tela do assistente, escolhemos um dos quatro modos de entrega do v\u00eddeo online. As duas op\u00e7\u00f5es de streaming exigem que o v\u00eddeo seja armazenado em servidor dedicado. A op\u00e7\u00e3o de v\u00eddeo embutido na linha de tempo carrega o v\u00eddeo todo, tornando o arquivo final muito grande. Escolhemos para este tutorial o download progressivo, pelo qual o Flash Player vai tocando o filme enquanto o download prossegue. Avan\u00e7amos.<\/p>\n

4) A CAPA<\/strong><\/p>\n

Na terceira tela do assistente, escolhemos uma capa para o tocador. Ficamos com a\u00a0SteelExternalAll<\/em>. O processo amarra a aplica\u00e7\u00e3o a um arquivo externo (a capa), criado no diret\u00f3rio de desenvolvimento, na hora da publica\u00e7\u00e3o. O arquivo externo, que ter\u00e1 o mesmo nome do preset escolhido mais a extens\u00e3o .swf, deve ser copiado com o filme principal para a mesma pasta no servidor web. Na tela seguinte, checamos o resumo das op\u00e7\u00f5es escolhidas e clicamos em\u00a0Finish<\/em>.<\/p>\n

5) O V\u00cdNCULO<\/strong><\/p>\n

De volta ao palco, vemos que foi criado um componente FLVPlayer vinculado ao v\u00eddeo \u201cimportado\u201d. Selecione o componente, acesse sua caixa de propriedades (Ctrl+F3) e altere o nome para mc_tocador. Na aba\u00a0Parameters<\/em>\u00a0dessa mesma caixa, apague o conte\u00fado do campo\u00a0contentPath<\/em>, que vinculava o player ao v\u00eddeo. Como o conte\u00fado ser\u00e1 assinalado dinamicamente, deixamos esse campo em branco e n\u00e3o importamos o outro v\u00eddeo \u2014 ele ser\u00e1 carregado por c\u00f3digo.<\/p>\n

6) O XML<\/strong><\/p>\n

O menu ter\u00e1 texto din\u00e2mico carregado por um arquivo XML. Para constru\u00ed-lo, digitamos no Bloco de Notas o c\u00f3digo j\u00e1 com os textos do t\u00edtulo, da descri\u00e7\u00e3o, do tempo e da data embutidos. Fica assim:<\/p>\n

http:\/\/www.xxx.com.br\/nomedofilme1\u00a6<\/a><\/strong><\/p>\n

Lente m\u00f3vel e superzoom\u00a6<\/p>\n

Zoom \u00f3ptico de 10x equipa a c\u00e2mera Nikon Coolpix S4\u00a6<\/p>\n

1 min 17 seg\u00a6<\/p>\n

08\/12\/2006\u00a6<\/p>\n

http:\/\/www.xxx.com.br\/nomedofilme2\u00a6<\/a><\/p>\n

Case de HD para rede\u00a6<\/p>\n

O storage Trendnet TS-I300W funciona em redes com ou sem fio\u00a6<\/p>\n

1 min 38 seg\u00a6<\/p>\n

30\/11\/2006\u00a6<\/p>\n

7) O MENU<\/strong><\/p>\n

Salve o arquivo XML como info.xml. Criaremos agora o menu. No Flash, insira uma nova camada com o nome \u201cmenu\u201d. No primeiro frame, desenhe ou importe o plano de fundo. Com o fundo selecionado, v\u00e1 \u00e0 caixa de propriedades e altere as dimens\u00f5es para 320 por 240 pixels. Depois, copie os valores das coordenadas x e y do objeto mc_tocador. Isso criar\u00e1 uma caixa sobreposta \u00e0 tela do tocador e, nela, faremos o menu. Ainda com a caixa selecionada, pressione F8 para torn\u00e1-la s\u00edmbolo. Na caixa de di\u00e1logo, d\u00ea o nome \u201cmenu\u201d e escolha tipo movieclip. A partir de agora, esse objeto ser\u00e1 um movieclip, com linha de tempo exclusiva. Na janela de propriedades, d\u00ea o nome de inst\u00e2ncia mc_menu.<\/p>\n

8) O TEXTO<\/strong><\/p>\n

Acessamos a linha de tempo do menu dando um duplo clique no objeto. Abre-se o programa \u201cmenu\u201d. Crie uma nova camada, que chamaremos de \u201ctextos e fotos\u201d. Nela, com a ferramenta de texto, trace os campos de t\u00edtulo, descri\u00e7\u00e3o, tempo exibi\u00e7\u00e3o e data do v\u00eddeo. Na janela de\u00a0propriedades do campo do t\u00edtulo<\/em>, altere o tipo de texto para\u00a0Dynamic Text<\/em>, atribua um nome de inst\u00e2ncia (titulo0) e, no campo\u00a0Var<\/em>, atribua o nome de vari\u00e1vel (titulo0_txt). Repita o processo para os campos de descri\u00e7\u00e3o, tempo e data, n\u00e3o esquecendo de alterar a numera\u00e7\u00e3o dos campos e atribuir o tipo de linha para os textos de uma (Single line) ou v\u00e1rias linhas (Multiple lines). Repita todo o processo para o segundo filme.<\/p>\n

9) AS FOTOS<\/strong><\/p>\n

Com a ferramenta de desenho, delimite a \u00e1rea que conter\u00e1 as fotos dos filmes e que ser\u00e3o carregadas dinamicamente. Selecione o tra\u00e7ado, converta em s\u00edmbolo do tipo movieclip (tecle F8), e d\u00ea o nome \u201cbot\u00e3o\u201d. Em seguida, na caixa de propriedades, d\u00ea o nome de inst\u00e2ncia mc_foto0 para a foto do primeiro filme. Repita todo o processo para a foto do segundo filme.<\/p>\n

10) BOT\u00d5ES INVIS\u00cdVEIS<\/strong><\/p>\n

A seguir, crie uma nova camada e d\u00ea a ela o nome \u201cbotoes invisiveis\u201d. Da janela\u00a0Components<\/em>\u00a0(Ctrl+F7), arraste um componente bot\u00e3o da pasta\u00a0User Interface<\/em>\u00a0at\u00e9 o palco. Selecione o bot\u00e3o e, na aba\u00a0Parameters<\/em>\u00a0da caixa propriedades, limpe o campo\u00a0Label<\/em>. Clique no bot\u00e3o com o bot\u00e3o direito do mouse, escolha\u00a0Free Transform<\/em>\u00a0e ajuste o tamanho para assentar sobre a \u00e1rea da tela em que ele dever\u00e1 ficar para acionar o filme. Transforme o bot\u00e3o em s\u00edmbolo (tecle F8), d\u00ea o nome botao_invisivel e selecione tipo movieclip. Na caixa de propriedades, altere o campo\u00a0Color<\/em>\u00a0para Alpha, e o percentual, para 0%. Isso o torna invis\u00edvel, mas ainda assim clic\u00e1vel. Altere o nome do bot\u00e3o na caixa de propriedades para botao0. Acesse a biblioteca, localize o movieclip botao_invisivel e arraste mais um para o menu. Altere o campo Color para Alpha com 0%, o nome na caixa de propriedades para botao1 e posicione-o corretamente. Conclu\u00edmos o menu.<\/p>\n

11) EM DESTAQUE<\/strong><\/p>\n

Agora criamos as \u00e1reas do menu que entram em destaque quando o cursor passa sobre elas. No movieclip menu, crie uma camada e d\u00ea a ela o nome \u201cdestaque\u201d. Posicione-a atr\u00e1s dos bot\u00f5es e textos, \u00e0 frente apenas do fundo. No primeiro frame dessa camada, desenhe um ret\u00e2ngulo de cor azul que emoldure o quadrado que conter\u00e1 a foto e o texto do primeiro filme. Transforme-o em s\u00edmbolo do tipo movieclip, de nome \u201cdestaque\u201d. Na janela de propriedades do destaque, atribua o nome de inst\u00e2ncia transpa0, mude o campo Color para Alpha com percentual de 60%. Depois, arraste da biblioteca uma nova inst\u00e2ncia do destaque e coloque sob o segundo filme. D\u00ea a ela o nome de inst\u00e2ncia transpa1 e altere Color para Alpha, com 60%.<\/p>\n

12) A PROGRAMA\u00c7\u00c3O<\/strong><\/p>\n

Partimos para a programa\u00e7\u00e3o. Primeiro, fa\u00e7a o\u00a0download do aquivo codigo251.zip<\/a>\u00a0e descompacte. Em seguida, abra a linha de tempo do filme principal e, no primeiro frame, crie uma nova camada. D\u00ea a ela o nome \u201cscript\u201d, acione o editor de ActionScript e cole o c\u00f3digo. Esse c\u00f3digo comentado monta o texto e as imagens do menu conforme os dados que recuperou do XML, roda o filme de acordo com a intera\u00e7\u00e3o do usu\u00e1rio no menu e nos controles do player e mostra ou esconde o menu de acordo com a exibi\u00e7\u00e3o do filme. Est\u00e1 feito.<\/p>\n

Ao transferir seu trabalho para o site, n\u00e3o se esque\u00e7a de fazer o upload, com o arquivo videoplayer.swf gerado, do XML, dos filmes, das fotos e do SWF criado com a capa (e seus bot\u00f5es de controle) do player escolhido. Ele \u00e9 gerado no mesmo diret\u00f3rio de trabalho do arquivo .fla e tem o nome da capa \u2014 SteelExternalAll.swf, no nosso tutorial. Confira o c\u00f3digo inteiro,\u00a0baixando o arquivo iutube251.zip<\/a>.<\/p>\n

 <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Quem j\u00e1 n\u00e3o passou um temp\u00e3o na frente do PC vendo os v\u00eddeos do YouTube? E quem j\u00e1 n\u00e3o teve<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3508,1079],"tags":[16,1007,999,36],"class_list":["post-2781","post","type-post","status-publish","format-standard","hentry","category-programacao","category-tecnologia","tag-dicas","tag-publicacao","tag-video","tag-youtube"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":4626,"url":"https:\/\/eliezerladeira.com.br\/blog\/microsoft-revela-o-windows-8\/","url_meta":{"origin":2781,"position":0},"title":"Microsoft revela o Windows\u00a08","author":"admin","date":"","format":false,"excerpt":"N\u00e3o era surpresa para ningu\u00e9m que a Microsoft estava trabalhando em uma nova vers\u00e3o do Windows, mas nesta quarta-feira (1\u00ba) finalmente foi poss\u00edvel conferir pela primeira vez como ele se parece. Steven Sinofsky, presidente da divis\u00e3o de Windows, demonstrou o Windows 8 rodando em um tablet no palco da confer\u00eancia\u2026","rel":"","context":"Em "Sistemas Operacionais"","block_context":{"text":"Sistemas Operacionais","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/sistemas-operacionais\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2011\/06\/windows-8.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3509,"url":"https:\/\/eliezerladeira.com.br\/blog\/videos-do-youtube-no-powerpoint\/","url_meta":{"origin":2781,"position":1},"title":"V\u00eddeos do YouTube no\u00a0PowerPoint","author":"admin","date":"","format":false,"excerpt":"Saiba como executar um v\u00eddeo dispon\u00edvel no YouTube em uma apresenta\u00e7\u00e3o do PowerPoint 2007.","rel":"","context":"Em "Software"","block_context":{"text":"Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/software\/"},"img":{"alt_text":"youtube-powerpoint1","src":"https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2009\/08\/youtube-powerpoint1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3480,"url":"https:\/\/eliezerladeira.com.br\/blog\/de-powerpoint-para-o-formato-flash\/","url_meta":{"origin":2781,"position":2},"title":"De PowerPoint para o formato\u00a0Flash","author":"admin","date":"","format":false,"excerpt":"Os arquivos de apresenta\u00e7\u00e3o PPT podem ser convertidos para o formato da Adobe com um programa auxiliar.","rel":"","context":"Em "Software"","block_context":{"text":"Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/software\/"},"img":{"alt_text":"dic45_ppt-flashabre","src":"https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2009\/07\/dic45_ppt-flashabre.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4593,"url":"https:\/\/eliezerladeira.com.br\/blog\/como-baixar-videos-que-nao-estao-no-youtube\/","url_meta":{"origin":2781,"position":3},"title":"Como baixar v\u00eddeos que n\u00e3o est\u00e3o no\u00a0YouTube","author":"admin","date":"","format":false,"excerpt":"Muitas vezes \u00e9 complicado copiar um v\u00eddeo que n\u00e3o est\u00e1 no YouTube ou n\u00e3o tem uma URL amig\u00e1vel. Por alguma raz\u00e3o, certos criadores de sites escondem o arquivo no c\u00f3digo ou dificultam a sua vida utilizando tecnologias obscuras de streaming. A seguir, duas maneiras de resolver isso. Confira. Para fazer\u2026","rel":"","context":"Em "Internet"","block_context":{"text":"Internet","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/internet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2011\/04\/captura.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2011\/04\/captura.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2011\/04\/captura.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2011\/04\/captura.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":2689,"url":"https:\/\/eliezerladeira.com.br\/blog\/quer-dar-um-show-no-powerpoint\/","url_meta":{"origin":2781,"position":4},"title":"Quer dar um show no PowerPoint?","author":"admin","date":"","format":false,"excerpt":"Confira uma cole\u00e7\u00e3o de truques e tutoriais para produzir melhor e mais r\u00e1pido suas apresenta\u00e7\u00f5es.","rel":"","context":"Em "Software"","block_context":{"text":"Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/software\/"},"img":{"alt_text":"show-no-PowerPoint-20090913004558","src":"https:\/\/i0.wp.com\/www.eliezerladeira.com.br\/site_old\/wp-content\/uploads\/2009\/09\/show-no-powerpoint-20090913004558.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4577,"url":"https:\/\/eliezerladeira.com.br\/blog\/cinco-formas-de-fazer-o-android-2-1-funcionar-como-o-android-2-2\/","url_meta":{"origin":2781,"position":5},"title":"Cinco formas de fazer o Android 2.1 funcionar como o Android\u00a02.2","author":"admin","date":"","format":false,"excerpt":"Se voc\u00ea possui um smartphone com o sistema operacional Android e est\u00e1 impaciente porque o seu aparelho ainda n\u00e3o recebeu atualiza\u00e7\u00e3o para a vers\u00e3o 2.2 (tamb\u00e9m conhecida como Froyo) ou, talvez, insatisfeito porque ele n\u00e3o receber\u00e1 o upgrade, acalme-se! O que voc\u00ea pode fazer \u00e9 instalar aplicativos no seu Android\u2026","rel":"","context":"Em "Mobile"","block_context":{"text":"Mobile","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/mobile\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/2781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2781"}],"version-history":[{"count":1,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/2781\/revisions"}],"predecessor-version":[{"id":2782,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/2781\/revisions\/2782"}],"wp:attachment":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}