Skip navigation
Suntower
Currently Being Moderated

Cross Fades and Dissolves Like Premiere?

Apr 5, 2012 3:17 PM

Hi,

 

I'm rather late to the party. I -rarely- use Flash.

 

My client had me do a little 'presentation' video which is essentially like a PowerPoint presentation... some images that cross fade one to the next; some text that slides left and right and a voiceover. I typically do this in Premiere because I can do the dissolves and titles in nothing flat. (It has a drag n drop way to apply dissolves.)

 

But my client wants it to be a landing page, which plays on load on their web site so a SWF seems appropriate. ALSO: It would be -really- nice to have the 'video' play with a transparent background... which I realise is easily done in Flash.

 

OK... those 'dissolves' which are so easy in Premiere are -killing- me in Flash. If I have it right I need a separate -layer- for each object I'm going to use during the 'video', right? So with perhaps 24 piccies and 30 text snippets that's a LOT of layers! I had hoped I could have just 5-6 layers and... as in Premiere... have the objects just start and stop at various points and thus have multiple objects on the same layer.

 

Plus, I create the 'motion tweens' and then insert the keyframes and it -usually- works, but if I need to move a fade-in point back and forth in time, something -always- screws up!  How does one 'move' a Tween left/right in the timeline?

 

Also, I'm hoping there is something like a 'Motion Preset' ... as there are Video Transition presets in Premiere... to automate this process and make it less goof proof.

 

One thought: If I do this in Premiere, is there a way to import this into Flash... and then make the bg transparent? I experimented a bit and couldn't figure it out. ALSO: I couldn't figure out how to get the imported movie to automatically 'play' when the SWF was published. Perhaps if I figure those two things out, I could skin the cat that way?

 

Sorry for going all over the map.

 

TIA,

 

---JC

 
Replies
  • Currently Being Moderated
    Apr 5, 2012 6:14 PM   in reply to Suntower

    Don't think 'video' is too expensive for your menu. You can fully produce all the effects you want and export a video. Flash can simply be used to import/play that video.

     

    Seriously, pixellation transitions are 90s. There's nothing exciting about them. They are fairly complicated for your level if you are to program them in flash. The easiest thing for you is simply to produce your content as a video and compress the heck out of it and display it using flash.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 6:32 AM   in reply to Suntower

    1 and 2 sort of conflict with each other. If you want to make it easy to play video in something that has all the code prewritten to the point all you do is tell it a FLV filename to play then you're going to want to use the FLVPlayback component. The problem is you won't get a transparent background. To do that you'll need to code up a video player yourself using the NetStream class.

     

    The reason you want to use the NetStream class rather than just slapping it on the timeline is you can keep the FLV external from the SWF so the SWF loads instantly and can progressively play back the FLV. If you embed the video into the SWF then the user is going to get a much worse experience.

     

    Here's an adobe example of the code to play a video, probably not for the faint of heart. Here's a much more piece by piece tutorial on the same subject. By using this method of playing the video without a component the classes don't come with a background so you can see through them and alpha can be useful (if you set the embedded flash to windowless transparent in the HTML).

     

    On 2, things are very different in the CS5.5 world. Premiere exports its work to Adobe Media Encoder to encode rather than doing it itself. What I used to do myself was use Sorenson Squeeze back when I used CS4. I would use a codec like Quicktime with the Animation codec, set the output to millions+ of colors so it output an alpha channel and then I'd take that (huge) quicktime video into Sorenson Squeeze and compress it into a ON2VP6 Pro FLV while checking the Alpha channel support.

     

    Actually I used the Bitjazz SheerVideo codec because it's 100% lossless, supports alpha, is ultra cpu efficient and cuts the filesize by half but you need to buy it. The Animation codec is probably the next best thing as it can be lossless.

     

    So perhaps you want to export your video using Animation with Millions+ colors to get the Alpha, Then you have to remind me if CS4 has Adobe Media Encoder. If it does, use that to compress your video into ON2 VP6 Pro FLV as it should have an option for Alpha. Otherwise look for a way to export via Premiere directly to FLV ON2VP6 as it should support your Alpha.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 12:30 PM   in reply to Suntower

    After Effects (AE) can definitely export you a FLV. AE does still render on its own rather than sending it to Adobe Media Encoder (AME) but you have all the same support (at least in CS5.5) for formats as AME. Adobe shares all its format support pretty universally.

     

    Text may look awful but it's probably because you're using some effects like drop-shadows and such that may not be exported with proper transparency in Premiere. I can say my absolute least favorite app in the Adobe Suite is Premiere. It seems to do just about everything wrong. As soon as they changed to disallowing you to edit a projects resolution after you created it, I grabbed a high end rig and started editing 100% in After Effects. It's a pain because you need to ram preview to hear audio, nowhere near the scrubability as premiere, but I just HATE Premiere.

     

    That aside I don't even know what XFL is. You can directly export a FLV, and should, right from AE, if you imported your Premiere project into it. I find AE to be the highest quality rendering solution in the Adobe bunch for video overall. It's the photoshop of video. It just works.

     

    Here's a screenshot of CS5.5's format list from my install:

     

    http://www.filehorde.com/o/formats.jpg

     

    So you can see both FLV (old, On2VP6-esque) and F4V (new, H264-esque) listed there.

     

    Do note that (to my knowledge) despite H264 supporting transparency, Flash Player does not show transparency encoded into mp4/h264. I could be wrong but I think you need to use FLV/On2VP6.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 11:41 AM   in reply to Suntower

    All I see is white with faint gray lines there. Am I missing an animation? WMP will have a black background by default so if your text is a lighter color it'll look better.

     

    Chances are your data rate combined with a difficult to compress effect such as drop-shadows on text will compress very poorly. Easiest thing to do to see if this is your problem is crank up the bitrate to around 1600kbit/s. Make sure you're using On2VP6 and not something like Sorenson Spark (very old pixelated codec).

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 12:48 PM   in reply to Suntower

    The Flash is not displaying in IE because the path in the <object> is wrong:

    <param name="movie" value="Untitled-2.swf" />

    The <embed> has it correct:

    src="/wp-content/themes/jchwebdev/images/Untitled-2.swf"

    I may be missing something but the animation looks like just a very simple slideshow with a little text... and the text looks really bad right now. Are you rending this as a video rather than a simple .swf?

    While you may want some fancy transitions as per video, right now the text looks so amateurish that the transition will mean little.

    I'll admit that I haven't followed the thread entirely but I can see and evaluate the progress so far. Why don't you just do the slideshow directly in Flash, the text would come out MUCH better.

    Or a second option would be to do the images as video.... if you must (over in Premiere) and import that into Flash and let Flash handle all the text... as the video plays on the stage.... combine video and Flash.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 6:42 PM   in reply to Suntower

    a) A way to do these simple dissolves FAST directly in Flash

    There are a heck of a lot of ways to do simple transitions in Flash... you should be able to get a  hold of many slideshow examples that can do that. Then you can use the great text ability of Flash.

    One simple method basically uses 2 movie clips and an xml file to feed data to the 2 clips. Then by swapping the depth .... laying the next one on top of the previous... you switch images.

    The xml could also feed in all the text you need, so the timeline for this could be very short.

    Here is just a sample of one type of transition:

    http://www.cidigitalmedia.com/tutorials/transitions/transitions.html

    and that's really a very old and crude one.... but still a very nice fade and it includes captions.... done completely in actionscript... no timeline animation.

    Google "Flash slideshows and transitions" and you'll have more info than you can possibly use.

    b) A method for rendering an AE or Premiere video as an FLV with these text bits that doesn't look crap on the web. I'm open to changing fonts, sizes, -whatever- it takes.

    If you are creating a good looking video

    text looks -fine- when played directly from Adobe Media Player

    you should not be experiencing

    but TERRIBLE when loaded on the web page

    The only time I've experienced the type of pixilation I see on your site, is if I change the pixel dimensions from the original and attempt to display on a Web page at a different dimension.... it really screws up the text. The rest of the video may look just fine, but the text in a video just does not scale well... up or down.

    Are you SURE that you are display the video on the Web at exactly the same dimensions as you rendered the video? It just doesn't look right. And of course I still can't test in IE because of the problem I mentioned earlier.

    Can you provide a screen shot of the video playing directly in the Flash player... at the exact dimensions at it appear on the screen?

    This should not be that difficult a problem.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 9:37 PM   in reply to Suntower

    Observations... The image you posted looks more like a 640 wide video.

    Also the video posted to your Web site is:

    rafters-b.flv

    while the video you are displaying in the image is:

    rafters-b_2_1.flv

    same video or something different?

    Embedded metadata for rafters-b.flv:

    canSeekToEnd: true

    videocodecid: 5

    framerate: 16

    videodatarate: 1500

    height: 412

    width: 550

    duration: 32

    I still think you are comparing 2 different files or have the wrong Web page dimensions.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 9:45 PM   in reply to Suntower

    Sorry ... missed this part:

    is there a way to 'see' the properties of an FLV?

    Yes... use NetStream rather that FLV Playback to display the video. MUCH more powerful and versatile means of handling video. Then:

    // Trace the metadata //

    ns.onMetaData = function(myMeta) {

    for (var i in myMeta) {

      trace(i + ":\t" + myMeta[i])

    }

    }

    to output the metadata as a trace function.... see results above.

    If in fact the screen shot comes from a different video... post it somewhere and we'll look at the metadata for it.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 5:04 PM   in reply to Suntower

    Here is sample code from a working NetStream vid player... the very bare minimum code needed to play the video and "trace" any embedded metadata.

    var nc:NetConnection = new NetConnection();
    nc.connect(null);

    var ns:NetStream = new NetStream(nc);
    video_screen.attachVideo(ns);
    /* Name of your video, with correct path, goes here */
    ns.play("video1.flv");

    // Trace the metadata //
    ns.onMetaData = function(myMeta) {
    for (var i in myMeta) {
      trace(i + ":\t" + myMeta[i])
    }
    }

    It assumes you have given the video an instance name of "video_screen" and that the video file is named "video1.flv".

    Alter as needed. See if you can at least get the video playing.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 1:17 PM   in reply to Suntower

    Sounds like you may want to switch over to using the FLVPlayback component. Just drag it out of the components window and place of the stage... edit path as needed.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 4:10 PM   in reply to Suntower

    var nc:NetConnection = new NetConnection();
    nc.connect(null);

    var ns:NetStream = new NetStream(nc);
    video_screen.attachVideo(ns);
    /* Name of your video, with correct path, goes here */
    ns.play("your_video_name.flv");

    This is all the code you need to play a NetStream video.

    Can you at least get this to play the video?

    If you've never done a NetStream video before.... at the top of the Library Panel is a very small menu icon on the top far right... very top. Click that menu icon and choose new video... Now that video appears in the Library.

    Drag that video onto the stage and give it an instance name "video_screen".... set the dimensions as needed.

    Add the code shown above in a separate Actions layer. Save the .fla in the same folder as the .flv... This is from an older .fla publishes as Actionscript 2 so be sure to save as AS2 (not AS3).

    Test the video... it should play just fine.

    If it does, I'll provide code for the controls.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 5:19 PM   in reply to Suntower

    "video_screen" is an instance name, declared as described above.... but as I said, it's AS2 and it looks like you are using AS3... and since that works for you, so much the better!

    Don't have controls in AS3 but this is all you need in AS2:

    play_btn.onRelease = function() {

    ns.pause();

    }

    "pause" toggles between play and pause.

    And as for the metadata... you don't need any of that to actually play the video. just to inpect... if needed.

    Keep pluggin' away, I think you are getting real close.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points