LIBRARY: Tutorials Reviews Interviews Editorials Features Business Authors RSS Feed

Flash Videos for the Web Using Adobe CS3

COW Library : Adobe Flash Tutorials : Abraham Chaffin : Flash Videos for the Web Using Adobe CS3
An Adobe CS3 Tutorial


Flash Video with Adobe CS3

Flash Videos for the Web Using Adobe CS3


This tutorial is designed to explain the various methods of creating Flash Video Files using different applications in Adobe CS3. It will explain many of the settings available and not available contrasted with the other applications in Adobe CS3. This tutorial will show how to create your Flash Video Files using Dreamweaver, After Effects, and Flash.


Abraham ChaffinAbraham Chaffin
CreativeCOW.net,
Cambria, California USA

©2007 CreativeCOW.net. All rights reserved.


Introduction

Right off the bat you may ask why is this tutorial necessary, it seems like Adobe CS3 makes creating and embedding SWFs so easy there should be no confusion. Well in fact there is a lot of confusion when it comes to embedding SWFs using Adobe CS3. The main reason is that there are so many ways to do it. Each method of creating these files from each application provides different options, skins and settings that the other applications don't have.

The main confusion in the process is all the skins each program in Adobe CS3 use to wrap your video in when it creates the SWF. Adobe After Effects doesn't have any skin, Dreamweaver has a unique set of skins but doesn't allow you to not have a skin, and Flash creates a third set. More confusion comes when wanting to change different settings in the video such as auto play, or auto hiding the video controls. We will cover some of these differences in this tutorial.


Using Adobe After Effects to Export FLVs or SWFs

Adobe After Effects Export Flash Video
Adobe After Effects CS3 has the ability to export to Flash Video (FLV), or SWF right within the application (a very cool feature). Adobe After Effects even creates an HTML file and Dreamweaver's Javascript embed code automatically when you export to SWF. All you need to do is modify the HTML file that After Effects creates to publish your video to the web. While After Effects has great controls for setting the quality of the video and audio the down side is the limited parameters for skinning your video with play controllers.

Exporting directly to SWF using After Effects is fast and easy if you aren't wanting a skin or controls for your video. Just go to the File menu > Export > Adobe Flash (SWF)... then choose the destination you want After Effects to create your SWF, Javascript, and HTML file. Choose the name for your SWF and choose save. AE gives us some basic controls in the SWF settings window like basic quality settings for the video and audio, or the choice to loop the video or not. After Effects will render your FLV movie, embed it into the SWF, create a Javascript and HTML file and then embed the SWF into the HTML file. You can either use the created SWF by importing it into a different HTML document with Dreamweaver or open and modify the HTML document that After Effects created.

If you want more control over your SWF and/or a skin with controls for your video then you need to choose to export your video from After Effects as a FLV file. Choose from the File menu > Export > Flash Video (FLV)… This brings up the Flash Video Encoding window and gives you much more settings to choose from than the other method of just exporting directly to a SWF. Four tabs of settings are given: Encoding Profiles for setting the quality and format of your FLV; the Video tab for choosing the codec, fps, and data rate; Audio tab for setting the audio quality; and the Crob and Resize tab to resize your video. This method is definitely for the users who want more control over their final product.

Tip: For best quality always precompose your layers before you export to Flash from After Effects.


Basic Overview of Creating Flash Videos Using Adobe Flash

Importing Flash FLV and Skinning
Using Adobe Flash CS3 to create the SWF is the best way to go, in my opinion. Creating SWFs is what Flash does. The ability to do it in other programs in CS3 are just bonus features to those applications and not the core of the program.

Flash is a powerful program and this tutorial is not designed to show you all the settings in Flash for creating Flash Videos. It is an overview of the methods and contrasts the programs in the CS3 bundle that are used to create Flash Video. Adobe Flash as an application is by far the #1 way to create SWFs for playing video on the way and gives you the most flexibility over the video player controls and look of the skin.

When importing a video into Flash CS3 if the video is not a FLV file it will be converted by Flash and a FLV file will be created. To import your video file into flash go to the File menu > Import > Import Video. Select your video in the Import Video window and choose next, and then select your deployment method. The next window is the skinning window; it is here that you can choose different functions available to your user for playing your video, pausing, showing captions, blowing the video up to full screen, lowering the audio, or scrubbing. In this window you can also choose to not have any skin for your video, or have it lay over or under your video. Select next and then finish completing the process.

Adobe Flash Video Parameters Once the video is embedded in your Flash project there are additional parameters available to change the settings to your video and its skin. With the video selected open the parameters window by going to the Window menu > Properties > Parameters. Here are the additional controls for choosing to autoPlay or not, auto hide the skin while playing, setting the initial volume level, setting the alpha level for the skin and other useful settings. There's also settings here that can were available in the previous window such as changing the color of the skin, or switching the skin all together.


Importing Flash Video into Dreamweaver

Importing Flash Video into Dreamweaver
Dreamweaver CS3 has the ability to both import SWFs and FLV files and embed them into your HTML document. Importing SWFs into HTML files is what it excels at, importing FLV files and creating the SWF file automatically is a bonus feature and not recommended unless for some reason you love the skin only Dreamweaver CS3 has or you do not have Flash.

When importing the FLV file directly into Dreamweaver, Dreamweaver CS3 will create multiple files to support this function. It will create a SWF for your video, a SWF for the skin you choose and a javascript file to support the embedding of the SWF into the HTML document. To import your FLV file into Dreamweaver CS3 go to the Insert menu > Media > Flash Video… There are some good, quick settings here for a basic video player skin but there's not a whole lot of flexibility. Importing your flash video this way requires that you MUST have a skin, and it MUST lay on top of your video, but you can choose to auto play or not, and there are few other basic settings there.

Importing your SWF Video into Dreamweaver is like importing any other SWF file. All the settings; such as autoplay, the skin, looping of the video, and other parameters are setup before hand in another program like Adobe Flash. Being that Dreamweavers function is not really to create SWF files this method is the preferable method and gives you the most functionality, and flexibility. Go to the Insert menu > Media > Flash and choose your SWF. Dreamweaver creates a javascript file that supports the embedding of the SWF file into the HTML document and then drops your file into place.


An additional note to mention as an FYI: Javascript files have not always been needed to embed SWF into HTML documents, and technically are not. The reason they are used is for Internet Explorer. When using the old embed tag to embed SWF files IE will make the user first click on the Flash media to activate it before the controls can be used in the SWF. The reason for this is because of a lawsuit against Microsoft for not asking if the user wanted to use Flash or not (very ridiculous). The Javascript bypasses this protection in Internet Explorer and the Flash media is automatically activated like it was before. This protection is not in any other browsers such as Firefox, or Safari.


This tutorial was designed to help clarify the different methods of embedding and creating Flash Video for the web using Adobe CS3.
Comments

It was long time ago this
by marcus grip
It was long time ago this post was active but i give it a try and hope for an answer. I have done like the tutorial and have watched others to see if there is any difference wich it is not. I have done correctly, the only difference is that i made an FLV file from ffmpegX encoder from an .mov file.

I don´t know if that´s the problem or if it is anything else but when i am preview the website the only thing that shows is a white window, wich is the flash video but nothing shows or plays. no video, no skin. nothing. so i can´t get it to work even on the local level. I can´t watch the FLV file in Adobe Media Player and i do not know if it´s supposed to but that is also a hint for you. Is it the encoder or what?
dreamweaver cs3 flv visibility
by rafael landea
Hi Abraham, I followed your tutorial, trying to place a .flv video, I'm able to see it in the preview mode but I can't see it online.
I created an html page, (xhtml 1.0 Transitional is the default type in my comp.) and place the .flv file using the 'insert flash video' window.
Please help!
Thank you!
Rafael
swf, flv, html and everything else...
by Brent Maagdenberg
firstly fantastic to read posts where there seems to be a few things in common regarding getting either swf's or flv's to play.

i fall into this category but i scratch my head for this is a process i do often following the same procedure and has worked on many of my webpages until NOW!!

starting with an flv movie i import into flash, add the skin, publish through settings so html, swf, jscript and skin is created then copy all of this into a unique folder on my local website.
Insert flash onto my webpage or html if i have changed the code to allow 'full screen'. Test in browser and all is well. Load all of this up to remote server but all i see now is the control skin and no picture.

i even go as far as recreating a new flv from the raw mpeg footage and have reloaded previously used flv's to find the same process i used to load them on the web doesn't work for the one i need as swf format on my webpage but with the flv on my server for it is pointless trying to insert monster flv's on a webpage for others may not be able to play it.

any thoughts would be great

http://krazy.co.nz/club%20physical.html

been doing the same thing for even the web address above...cheers
hi i have been struggling to
by Tenney McClane
hi

i have been struggling to get flvs to play in dreamweaver for weeks now and something just isn't working! the flv plays fine when i open it locally. but when i use dreamweaver to create a simple html page go to insert>media>flv and choose progressive download, choose a skin and insert it. when i view it in a browser it doesn't work. i have the most recent flash player installed in all browsers. i seriously have no idea why it isn't working. i have been a golive user for years and just switched over to dreamweaver because it's supposedly great with flvs. maybe i am just missing something?

please help :-)
Flash to Dreamweaver - Skin Not Showing
by Abraham Chaffin
When you have used Adobe Flash to import your FLV and then also used it to export a SWF along with a SWF skin file you must make sure these two files stay together when they are published to the web.

Wherever the SWF file is moved to for your web page you must move the support SWF skin file along with it or the skin will not show up.

There is no parameter that needs to be set in Dreamweaver for finding the skin when you use this workflow because the SWF created from the FLA associates a relative path to the skin file by default, though this parameter can be easily changed with the Component Parameters window in the Flash program.

If you do not use the Adobe Flash program to create the skin and SWF file these problems are not the same for you.

There are three different workflows that are explained in this tutorial so when you cross them up you may get a little confused. The idea of the tutorial is to give you an over view and simplify the process a little.
Inserting flash video with skin in Dreamweaver
by Sonal Dedhia
Hi!

I have exported an fla file to swf. It has a corresponding flv file and a SkinUnderAll.swf file.

I inserted the flash file using your instructions (Insert -> Media -> Flash). The skin does not show. So I cannot view the controls. If I run the swf file, the skin appears.

I gave a larger height to the video in dreamweaver so the skin would show. But it still does not. Is there any particular param that I should use?

Can you let me know.

Thank you for your help.

Sonal
Flash Videos for the Web Using Adobe CS3
by Abraham Chaffin
Hello Randall,

Appreciate the feedback, must have been an over site on my part.

If you would like your FLV to loop you need to add a little action script inside of Flash.

After importing your FLV into Adobe Flash you will need to give the flash player an instance name by clicking on the player and then typing an instance name in the parameters window. A name such as my_player is good and used in this example.

Then click on the first frame in the time line to add some action script in the Actions Window. This example is as3 so be sure you're using an as3 document.

Add this action script code to have the movie loop:

<pre>
//import the necessary functionality
import fl.video.*;

//add a listener for when the movie ends
my_player.addEventListener("complete", the_end);

//this will execute when movie ends
function the_end(event:VideoEvent):void {
//go to first frame
my_player.seek(0);
//and play
my_player.play();
}
</pre>
Flash Videos for the Web Using Adobe CS3
by randall martin
Everything worked!!!

Didn't expect an answer this fast, if at all, given the time frame of my comment.

Thanks...
Flash Videos for the Web Using Adobe CS3
by randall martin
This comment is over two years late, but...

I'm trying to loop a flash video in Flash/Dreamweaver and when googling this issues, the following came up:

Flash Videos for the Web Using Adobe CS3 : Adobe Flash Tutorial
In this tutorial you will learn the various methods of FLV and SWF Video ... for the video and audio, or the choice to loop the video or not. ... To import your FLV file into Dreamweaver CS3 go to the Insert menu > Media > Flash Video
Flash Videos for the Web Using Adobe CS3
by Steven Panzullo
Wow! I have been tearing my hair out for this answer! Thanks great TUT every vid ou there shows how to build the playesr but none expalin how to upload and which files to upload with the JS code. Thanks alot


Related Articles / Tutorials:
Adobe Flash
Adobe Edge Animate/The Missing Manual Software/Book Review

Adobe Edge Animate/The Missing Manual Software/Book Review

Increasingly, web developers are being asked to create sites that are viewable on tablets and mobile devices, as well as desktops and laptops running Windows, OS X or Linux. One of the challenges in creating a site like that is animation. Flash, for many years the preferred cross-platform animation solution, is no longer supported on many tablets and mobile devices. Michael looks for - and finds - answers within Adobe's Edge Animate.

Review, Editorial
Michael Hurwicz
Adobe Flash
HTML5 (CreateJS): Interactivity and Debugging

HTML5 (CreateJS): Interactivity and Debugging
  Play Video
Building on two previous tutorials on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz introduces interactivity (specifically, responding to a mouse click), debugging using the JavaScript "alert" statement, and assigning names to objects exported from Flash. Project files included.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
HTML5 (CreateJS): Animate with JavaScript

HTML5 (CreateJS): Animate with JavaScript
  Play Video
Building on a previous introductory tutorial on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz shows how to modify the JavaScript exported from Flash, to change attributes such as position, speed, wait time, and color. Project files are included.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
HTML5 (CreateJS) for Adobe Flash Professional CS6

HTML5 (CreateJS) for Adobe Flash Professional CS6
  Play Video
Creative COW leader Michael Hurwicz provides a brief introduction to CreateJS, an extension for Adobe Flash Professional CS6 that allows you to export Flash projects as HTML and JavaScript, even on platforms that do not support the Flash Player.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Building an Interactive Whiteboard in Flash: Part Two

Building an Interactive Whiteboard in Flash: Part Two
  Play Video
In part two of this series, Justin Junda walks you through the necessary steps to connect the graphical elements from part one, with Actionscript 3.0 using the Flash drawing API in order to bring this whiteboard to life.

Tutorial, Video Tutorial
Justin Junda
Adobe Flash
Building an Interactive Whiteboard in Flash: Part One

Building an Interactive Whiteboard in Flash: Part One
  Play Video
In this tutorial, Justin Junda takes you through the step by step process on how to build and interactive whiteboard. These whiteboard are often seen in drawing applications, scratch pads, and educational sites. This is part one of a two part series. Part one takes you through setting up all the graphical elements within the stage. Then part two shows a user how to connect the graphics to Actionscript using flashes drawing API to make this whiteboard truly interactive.

Tutorial, Video Tutorial
Justin Junda
Adobe Flash
Embedding a Speech Transcript in a Flash Video with Adobe CS5

Embedding a Speech Transcript in a Flash Video with Adobe CS5
  Play Video
In this tutorial, Creative COW Leader Michael Hurwicz shows you how to create a scrolling transcript synced with a Flash video, using Adobe Creative Suite 5 (Story, OnLocation, Premiere Pro, Soundbooth and Flash Professional).

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Inverse Kinematics - Springs

Inverse Kinematics - Springs
  Play Video
Springs are a new feature for Inverse Kinematics in Flash CS5. In this video tutorial, Creative COW leader Michael Hurwicz shows you a simple technique for implementing springs, as well as several other "tricks and traps" to make your work with Inverse Kinematics in Flash easier, more flexible and more powerful.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Inverse Kinematics - Control Points

Inverse Kinematics - Control Points
  Play Video
Fine-tune your Inverse Kinematics animations in Flash CS5 by working with control points. In this Adobe Flash video tutorial, Creative COW leader Michael Hurwicz shows you how to associate bones with control points, how to move, add and delete control points, and how to adjust control point handles.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Inverse Kinematics

Inverse Kinematics
  Play Video
Inverse Kinematics allows you to create structures of bones and joints and use them to animate characters in Flash. Fun and easy! Creative COW leader Michael Hurwicz shows you how in this video tutorial, step by step. Learn some basic ActionScript, too!

Tutorial, Video Tutorial
Michael Hurwicz
MORE
© 2016 CreativeCOW.net All Rights Reserved
[TOP]