 |
|
| FORUMS | LIBRARY | PODCASTS | BLOGS | MAGAZINE | SERVICES | NEWSLETTERS | NEWS | STORE | EVENTS |
|
Flash Videos for the Web Using 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.
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 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 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.  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 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
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Digg it
FORUMS • LIBRARY • PODCASTS • BLOGS • MAGAZINE • SERVICES • NEWSLETTERS • NEWS • STORE • EVENTS
© CreativeCOW.net All rights are reserved.
[Top]