4 Replies Latest reply on Jan 21, 2013 6:04 PM by dhosford

    Animate text as in flash

    3nick

      Hello. I'm tried to do the same sample as in flash http://xflash.ucoz.ru/991/generator/redaktorflauer.swf

      The description is very important! the background must be transparent. So you can use your animate text in html5 everywhere.

      See in this flash you can see some video which replace the color of text.

      of course it is simply to do the mp4 file behind the png mask with the transparent text, but what you will do if you are going to use the animate text over the jpg, or other animation.

       

      So i can't understand how to create animate text with transparent backgroung. Using some video files as color.

        • 1. Re: Animate text as in flash
          dhosford Employee Moderator

          Hi there,

           

            It sounds like you want the fill of your text to be transparent and then filled with the animated video content. At this time, Edge Animate does not have "masking" in the traditional sense that Flash and After Effects do, however it is a feature that is being looked into for the future.

           

            However, you could "cheat" your way around this. I would suggest creating what I'm going to refer to as a "cookie cutter". You can do this by using Photoshop (or Illustrator) to make a layer that is the size of your project file. I made mine 720 x 480 with 72 DPI.

           

            Then, create a new layer and fill it with a color.

          firstLayer.png

           

          Then, use the Type Tool and create some text. I wrote the word "creepy".

           

          textLayer.png

           

          Right click your text layer and choose "Rasterize Type".

           

          Then Command + Click on a Mac or CTRL + Click on a PC the text layer. You will get a marquee line (Or the "dancing ants") around the text characters. After this step, click the filled color layer (Layer 1) and hit the Delete key.

           

          marquee.png

          transparent.png

           

          Finally choose the Background Layer and right click, choose "Delete Layer". You should be left with one layer (Layer 1) with a transparent cut out of the type (the cookie cutter image). Save this as a .png and preserve transparency.

           

          Next, open Edge Animate. Change the width and height of your stage to 720w x 480h.

          widthHeight.png

           

          Import your "Cookie Cutter" image. Then click the Open Actions button next to "Stage". Choose "compositionReady" from the pop up menu that appears. Then paste this code:

           

          sym.$("Rectangle").append('<video id="productVideo" width="720" height="480" preload="none" autoplay="autoplay" loop="loop" ><source src="http://www.devonhosford.com/images/images2/videos/17.mp4" type="video/mp4" /><source src="http://www.devonhosford.com/images/images2/videos/17.ogg" type="video/ogg" /><source src="http://www.devonhosford.com/images/images2/videos/17.webm" type="video/webm" />Your browser does not support the video tag.<br />Please upgrade your browser</video>');

           

          Replace the bolded text with the URLs to your video.

           

          **Please note: You will have to upload the video to your server prior to linking it in the project code. Also, please keep in mind that you'll have to convert your video into the Theora video codec and the WebM video codec. These different formats optimize your video to be played in other browsers that do not accept MP4 video.

           

          Next, draw a rectangle on the stage and change it's width and height to be 720 x 480. After you draw the Rectangle, navigate to the Elements panel in the top right of the workspace and drag the Rectangle layer below the "Cookie Cutter" layer:

           

          elements.png

           

          After that you're done! CMD + Enter on a Mac or CTRL + Enter on a PC to preview in your browser. I hope this helped some. If you need further clarification let me know. I am also attaching a .zip folder with my sample project files inside. Just click the image below to download the files:

           

          creepy.png

          Also, for reference, the screenshot above is what your finished Edge Animate project should look like inside Edge Animate.

           

          I hope this helps!

          • 2. Re: Animate text as in flash
            dhosford Employee Moderator

            Also, here is a link to the finished project so you can check it out. : )

             

            http://devonhosford.com/transparentMovieText/transparentTextProject.html

            • 3. Re: Animate text as in flash
              3nick Level 1

              yes, you perfectly understanded me. I can do what you do, it is the simple variant. You see, sometimes, we have to do what the customer wants. For example there is a variant with an animate text gif with transparent background, or the video(i have never  seen video with transparent background, is it possible?). Can anybody can add variants?

               

               

              PS also for you project: autoplay deletes preload property automaticly in video tag html5.

              • 4. Re: Animate text as in flash
                dhosford Employee Moderator

                  If you're asking to dynamically edit text externally, I am not sure if there is a solution to that at this time. Like I mentioned before, this is a work around to use in the meantime because as of right now there is no masking functionality in Edge Animate. Making the "cookie cutter" image in Photoshop creates a "mask" for us to use in place of actual masking functionality.

                 

                  I am not entirely sure if you can export video with a transparent background. I would suggest posting in the After Effects or Premeire forums to ask for help with that.

                 

                After Effects Forum link:

                http://forums.adobe.com/community/aftereffects_general_discussion

                 

                Premeire Forum link:

                http://forums.adobe.com/community/premiere

                 

                I hope this helps!