15 Replies Latest reply on Dec 27, 2008 11:47 AM by Newsgroup_User

    Cell animation basics

    tansle
      Hi All:

      I am completely new to Flash and to animating generally. But I understand some of the underlying basics. I have created and scanned a series of drawings on acetate creating a Christmas card with a chicken and an egg. I don't think I need to tween - just need to go from one layer to the next! I have tried 3 times now to import each cell into a separate layer and to create a rough animation using the timeline and keyframes. I have read several online tutorials and purchased a used Teach Yourself Flash 8 primer.
      But I cannot get anything to work, i.e. cells don't seem to line up, can't see them animate using the Play Handle. None of my sources will explain to me exactly how to manipulate the timeline for my purposes nor how to deal with layers such as mine (already produced offline and lined up pixel to pixel in PS, etc).

      Can someone please recommend a free online tutorial which explains animating cells - but also starts from the beginning - do this, then do that?

      Thanks!

      Using Flash 8 Pro.
        • 1. Re: Cell animation basics
          Level 7
          tansle,

          > I have created and scanned a series of drawings on acetate
          > creating a Christmas card with a chicken and an egg. I don't
          > think I need to tween - just need to go from one layer to the
          > next!

          You mention acetate, so I assume that some of your artwork has
          transparent areas. For example, you might have a completely opaque
          background, then a series of acetates with the chicken and another series of
          acetates with the egg. If that assumption is right, you'll be using two
          axes here: a) vertical axis (layers in the Timeline panel) for your
          overlapping artwork and b) horizontal axis (frames along your timeline).

          You might put your background in Layer 1, which you can renamed to
          something like "background," and the first picture of your egg in Layer 2
          (renamed to "egg"), then the first picture of your chicken in Layer 3, and
          so on. Each frame along your timeline will be a "snapshot in time," so as
          you make your chicken move, frame by frame, you'll add new keyframes to
          *that layer only,* swapping the picture in each new keyframe for a another
          one, so that the pictures change over time. You won't add keyframes to the
          background layer, because the background picture never moves. You might add
          keyframes to the egg layer later, by the time the chicken gets there to
          interact with it.

          > I cannot get anything to work, i.e. cells don't seem to line up,
          > can't see them animate using the Play Handle.

          Are you creating your animation horizontally? Based on your
          description, I almost suspect you're stacking each of your cels vertically,
          hoping to turn layers on and off sequentially to see the thing move.


          David Stiller
          Adobe Community Expert
          Dev blog, http://www.quip.net/blog/
          "Luck is the residue of good design."


          • 2. Re: Cell animation basics
            tansle Level 1
            Yes, in answer to your second question, I have stacked the cels vertically. How ould I add them horizontally, by "swapping the picture in each new keyframe for a another one"?

            More details: I drew them to animate roughly without any Flash effects.They were scanned not to appear transparent - mainly because my scanner balked at treating them as positive film. There is a nest that remains static so I was expecting to use it as the background and then the egg and roosting chicken start changing. Each major change has a cel - equalling 13 overall. I don't know if this is too few, but thought I would start there and add more if necessary.

            I opened a document and sized it to equal the pixel size of the cels, then I created 13 layers and imported a cel into each one, naming and locking and creating a keyframe where I estimated it might start (where the previous cel ended when I dragged its keyframe to the right).

            The images on the Stage are not the same size as the document . There is a while rectangle and I can see my cel's outline within it. Each cel is in a different place within the stage too. Although some are not visible at all for some reason!

            I guess I really need some basic do this. do that instructions which explain how to import correctly and then how to operate the timeline for my specific project - which I understand is more than any forum can answer. Do you know of an online tutorial that doesn't spend alot fo time explaining creating images or manipulating images but just explains importing and assembling?

            Thanks alot!


            • 3. Re: Cell animation basics
              Level 7
              tansle,

              > Yes, in answer to your second question, I have stacked
              > the cels vertically. How ould I add them horizontally, by
              > "swapping the picture in each new keyframe for a another
              > one"?

              Lets assume you have a layer named "background." In frame 1 of that
              layer, you will have already imported your background artwork (File > Import
              > Import to Stage). Lock that layer (to avoid accidentally selecting it
              layer) and add a frame at, oh, frame 300. That means scroll the timeline
              until you find frame 300, right click on that frame in that layer and select
              Insert Frame. Doing so adds 299 frames to that layer, bringing you to a
              total of 300 frames. If you drag the playhead back and forth along the
              timeline, you'll see that the background image stays present on the Stage
              for the duration of your very short movie (at 24 frames per second, 300
              frames is approximately 12 seconds).

              Now you shift attention to your "chicken" layer. Presumably, frame 1 of
              that layer already has your first chicken cell imported. You mentioned that
              you haven't yet make the background areas of your non-background cells
              transparent. You'll need to do that. Open each image (BMP, TIFF, whatever)
              in Photoshop and use the Background Eraser tool (or whatever procedure works
              for you) to get rid of the presumably white background of each individual
              cell. When you're done, trim the file so that it's cropped as tightly as
              possible. Now import your prepared cell 1 to frame 1. At frame 5, insert a
              keyframe -- not a frame, as discussed in the previous paragraph -- and your
              cell 1 will appear in frames 1 through 5. In addition, you'll see that this
              new span of frames features two keyframes: 1 and 5. At this point, import
              chicken cell 2 into your Library. Now select cell 1 on the Stage as it
              appears in frame 5 (the second keyframe of that layer). Click the Swap
              button in the Property inspector, and you'll be able to swap that image with
              cell 2 from your Library. Repeat at frame 10, 15, and so on, importing
              subsequent cells as you go.

              Or ... import everything from the get-go. Or put your keyframes every
              two frames apart, rather than five. You'll have to experiment to see what
              works best for you. You can move keyframes at any time, so you're not
              locked in to anything.


              David Stiller
              Adobe Community Expert
              Dev blog, http://www.quip.net/blog/
              "Luck is the residue of good design."


              • 4. Cell animation basics
                tansle Level 1
                Thanks David. NOW, I get it.

                2 problems so far, though.

                1. My background layer includes a nest which never changes. This layer places itself on the stage in a different place than the first action cel.

                I performed a bulk action on all my cels in PS so that they would match to the pixel - which they do. Why do they not on the Flash stage?

                Before importing anything, I set the Flash document up to be the same dimensions as the cels.

                How do I ensure that the cels all line up?

                2. My property manager doesn't have a swap button! (I checked the Help pages that come with and they also mention it as being there - so it doesn't seem to be a version problem. (Flash 8.0 Pro.) It only has a pulldown Tween option and sound options. Can't find it in other managers.

                Tansle
                • 5. Cell animation basics
                  tansle Level 1
                  Fooled around (and around and around) and finally figured out that I needed to select Keyframe AND then also click on image on stage to bring up swap button in property inpector. Onward!

                  Have finished a rough assembly and it is looking pretty good. Still have to figure out the best way to line up the nest/background layer. All others seem good.

                  Also,

                  1) How do you change number of frames/instance? Often, when I try to drag a keyframe, I get weird frames and sometimes tweening happens etc.

                  2) I have added another layer for text which comes in partway through the animation. No problems creating and formatting etc. Inserted a Keyframe where I wanted it to start and created another Frame (and also tried Keyframe) where I wanted it to end (at end). Also tried dragging along Timeline. Also tried Tweening between satrt and finish. But it only shows up in that first Keyframe and the Timeline is clear between first and last frames (i.e. not shaded like other layers with content). Why can't I get the Text to keep playing to the end?

                  Thank you SO much for your help so far.

                  Tansle


                  • 6. Cell animation basics
                    tansle Level 1
                    I seem to have solved the text problem by inserting a Blank Keyframe - the text finally stayed visible to the end of the animation.

                    Have also solved the odd Timeline behaviour by changing a preference (span based selection off).

                    So, I went back to finish the animation (alternating 2 cels until end). Suddenly now I can't swap as my property inspector is showing yet another screen with no swap button - instead it has publish, etc buttons.

                    So, I tried deleting the new layer thinking it caused this problem (hope I can figure out how to make text work again....), but no go.

                    Terribly frustrated.


                    • 7. Re: Cell animation basics
                      Level 7
                      Tannis,

                      > I performed a bulk action on all my cels in PS so that they
                      > would match to the pixel - which they do. Why do they not
                      > on the Flash stage?

                      You mentioned using Flash 8, which means (I believe) that images
                      imported to the Stage are centered to the Stage, at which point you can move
                      them wherever you like. In Flash CS3 and up, the image importer has changed
                      for Photoshop and Illustrator files: they allow you to import those files
                      and have them placed as they're arranged in the original file.

                      In your case, it will likely be part of your workflow to import assets,
                      then arrange them by hand.

                      > How do I ensure that the cels all line up?

                      You can click assets and move them, or you can tweek "by the numbers"
                      (to the pixel, and even to the 20th of a pixel [a twip] by using the
                      Property inspector with an image, symbol, or text field selected).

                      > My property manager doesn't have a swap button! (I checked
                      > the Help pages that come with and they also mention it as being
                      > there - so it doesn't seem to be a version problem.

                      The Property inspector is context sensitive, meaning it changes based on
                      the object selected. When you select a swappable item (an image, a symbol),
                      the button will appear.

                      > ... how do you change number of frames/instance? Everytime I try
                      > to drag a keyframe, I get weird frames and sometimes tweening
                      > happens etc.

                      Tweening shouldn't happen unless you already have a tween applied. Not
                      sure how to explain that one, but ... make sure, when you're dragging
                      keyframes, to keep them on the same layer. It's easy to accidentally drag a
                      keyframe from one layer to another.

                      You can also click between two keyframes and add a frame repeatedly.
                      That "pushes" the righthand keyframe further to the right.

                      > I seem to have solved the text problem by inserting a Blank Keyframe
                      > - the text now stays visible to the end of the animation.

                      A blank keyframe might work too: it all depends on what you're after.
                      Blank keyframes give you a keyframe ... but an empty one. Frames (Insert >
                      Timeline > Frame) simply extend whatever was in the previous frame.
                      Keyframes give you the same thing as frames, except that the new frame is a
                      keyframe.

                      > Thank you SO much for your help so far.

                      Sure thing! You'll get it. :)


                      David Stiller
                      Co-author, Foundation Flash CS4 for Designers
                      http://tinyurl.com/5j55cv
                      "Luck is the residue of good design."


                      • 8. Cell animation basics
                        tansle Level 1
                        quote:

                        Originally posted by: Newsgroup User
                        Tannis,

                        Thanks again David:

                        You can click assets and move them, or you can tweek "by the numbers"
                        (to the pixel, and even to the 20th of a pixel [a twip] by using the
                        Property inspector with an image, symbol, or text field selected).

                        I figured this was what I would have to do. Will get there eventually. Hopefully before Christmas!

                        I went back to animating and had problems bringing up a swap button again - turns out is was because I had locked the layer.

                        But, before I had figured that out, I gave up and opened a new dcoument to start from scratch. I got one instance into my animation before I could no longer swap - the button was there but greyed out. The layer was not locked. I could see no reason for this in the history.

                        Which is why I wish I could understand what I am doing - then I would understand what not to do, what to do when things go awry.


                        Thanks again,

                        Tansle
                        • 9. Cell animation basics
                          tansle Level 1
                          Sorry to be such a pest - but I can't believe how finicky this app is!

                          I have created an animation which despite the document being set to 803 x 1086 pixels, insisted on being published at ~200 pixels across (it shows 803x1086 in the Property Inspector once the layers are saved). While trying to align my background/nest,using the Property inspector, I found that these incorrect dimensions were shown next to the alignment dimensions and if I changed them the document would publish to its correct size. Not sure what this all means!

                          1)Is there any way of changing ~ 25 instances at one time to publish to a specific size?

                          In trying to get the nest to line up using the Property Inspector, I am running across several problems. Using x,y guides, I lined up the nest (which was way off) and the animated cels. Some animated cells were off by a pixel or less. I now have an animation that almost works except for:

                          2) When published, the document image does not fill the window - it is set off to the right and down. I can see the edge of the 600 x 811 pixel document. If I Modify>Document the document to 600 x 811 it fills it more but not fully (further to the left and down).

                          a) How do I make a document that opens into a window the same size as my document? If I cannot, can I frame the document in some way?

                          b) Since the document does not fill the window and I had to tweak pixels, you can see some "layers" along the left edge of the flash document - I see a pixel of one alternating instance over and over again at the end (because it crosses that edge of the frame).

                          Can I get rid of this really annoying effect?

                          3) My background doesn't show up. It consists of a nest on white. When I was going through the animation frame by frame resizing and lining up, I would see it there before I enlarged the (originally sized 200 pixel) instance - but once enlarged it would be hidden behind. All instance were supposed to be from scanned graphics that I used PS's Background Eraser tool on and saved as a copy to jpg. Are they not transparent enough?

                          How can I get the nest to show - make it transparent too and add as a separate layer? It stays consistent throughout the animation.

                          Thanks!

                          Tansle

                          • 10. Re: Cell animation basics
                            Level 7
                            Tansle,

                            > Sorry to be such a pest - but I can't believe how finicky
                            > this app is!

                            No worries. :) And you'll understand Flash in time. Like anything
                            else, it just takes practice. I've been unicycling for four or five years
                            now, but I still remember learning how to ride (and falling, and falling,
                            and falling!). Unicycles are finicky too.

                            > I have created an animation which despite the document
                            > being set to 803 x 1086 pixels ... insisted on being published
                            > at ~200 pixels across.

                            Did you test this as embedded in an HTML page? If so, it may be that
                            the HTML was coded in such a way as to resize the SWF, in the same way that
                            HTML can be coded to resize a JPG.

                            > While trying to align my background/nest,using the Property
                            > inspector, I found that these incorrect dimensions were shown
                            > next to the alignment dimensions and if I changed them the
                            > document would publish to its correct size.

                            Aha. Then maybe this was simply an incorrect setting on your background
                            image? As you discovered, that's easy enough to fix. You can use the
                            Property inspector to adjust dimensions, and you can also use the Transform
                            panel (or simply resize things by hand with the Free Transform tool).

                            > 1)Is there any way of changing about 25 instances at one time
                            > to publish to a specific size?

                            If the background image doesn't change, then you only need a single
                            instance of that image on the Stage (one keyframe in frame 1, and simply
                            frames after that). You might be able to affect numerous instances at once
                            if the original Library asset is sized incorrectly: changing its dimensions
                            in the Library will effect every instance of that asset. For example, if
                            you have a background symbol in the Library -- a graphic symbol, say -- that
                            contains your imported image, your image might be sized to 50%. In such a
                            case, the graphic symbol displayed at full size (100%) would only display
                            the image at half size. Makes sense, right? In that scenario, you could
                            enter the timeline of the graphic symbol, set the image to 100%, and then
                            the symbol would show the image at 100% wherever it appears in a timeline
                            (unless the symbol itself is resized somewhere). The principles of this
                            symbol hierarchy are important in Flash.

                            > 2) When published, the document image does not fill the window.
                            > I can see the edge of the 600 x 811 pixel document. If I Modify>
                            > Document the document to 600 x 811 it fills it more but not fully.

                            What you're seeing inside Flash may not be exactly what you see when the
                            SWF is embedded in your HTML page. Flash will try to show you as much of
                            the SWF's content as possible, but if you resize the SWF window, you may
                            indeed see letterbox or pillarbox rectangles -- in the same way that
                            widescreen content has letterbox rectangles on a standard TV. Embed that
                            SWF in an HTML file at the dimensions of your FLA document, and all should
                            be well. Based on your notes earlier, that might be 803 x 1086. At this
                            point, you're saying 600 x 811. Whatever the FLA document's boundaries are,
                            that should be the embedding dimensions of your HTML code. Anything else --
                            especially a different aspect ratio -- may show edges or content that should
                            be hidden by those edges.

                            > a) How do I make a document that opens into a window the same
                            > size as my document?

                            That requires JavaScript inside the HTML document. Dreamweaver features
                            a built-in code snippet for exactly this endeavor: Behaviors panel (in
                            Dreamweaver) > Open Browser Window.

                            > b) Since the document does not fill the window and I had to tweak
                            > pixels, the left edge of the flash document is uneven - I see a pixel of
                            > one alternating instance over and over again at the end (because it
                            > crosses the edge of the frame).
                            >
                            > Can I get rid of this really annoying effect?

                            Either keep tweaking your pixel placement or make sure to embed your
                            content at the proper aspect ratio. You could also experiment with masking
                            the entire movie, but that would probably be overkill.

                            > 3) My background doesn't show up. ... All instance were supposed to
                            > be from scanned graphics that I used PS's Background Eraser tool on
                            > and saved as a copy to jpg. Are they not transparent enough?

                            The JPG format doesn't support transparency. Export your Photoshopped
                            images as PNGs instead (use PNG 24 for smooth edges).


                            David Stiller
                            Adobe Community Expert
                            Dev blog, http://www.quip.net/blog/
                            "Luck is the residue of good design."


                            • 11. Cell animation basics
                              tansle Level 1
                              Thanks for all the detailed explanations David - I haven't digested them all yet.

                              I couldn't figure out how to replace my jpgs with png files. So I resaved all my .jpgs as pngs and I started from scratch (again!!).

                              I got the background (nest)and the first three instances in place. I still couldn't see the nest - despite onionskins turned on. Publishing to preview showed NO nest!

                              Hmmmmm.

                              Discovered I needed to go back and Reerase all my cels since saving to .jpg erased erasing. (If you know what I mean.) Now have a nest showing. Yea!

                              > being set to 803 x 1086 pixels ... insisted on being published
                              > at ~200 pixels across.

                              Did you test this as embedded in an HTML page? If so, it may be that
                              the HTML was coded in such a way as to resize the SWF, in the same way that
                              HTML can be coded to resize a JPG.

                              I tested both by publishing the fla file and opening and by publishing to preview. In Flash. No html involved. It ignored the document size but used the size of the instance. If I had changed one instance and not the other, it would show alternating sizes in the animation.

                              Am thinking this may have something to do with the instances being imported as .jpgs.

                              > While trying to align my background/nest,using the Property
                              > inspector, I found that these incorrect dimensions were shown
                              > next to the alignment dimensions and if I changed them the
                              > document would publish to its correct size.

                              >Aha. Then maybe this was simply an incorrect setting on your background
                              image?

                              Interestingly enough, when I imported png files, each instance showed up on the stage as its original size (803 pixels across) as opposed to the .jpgs which showed up as ~200 or less. Since I have decided 600 looked better, I started converting the files as they reached the stage - but now find that the files imported at 800 are automatically converting to 600 as I swap them onto the stage. Which is saving time.


                              If the background image doesn't change, then you only need a single
                              instance of that image on the Stage (one keyframe in frame 1, and simply
                              frames after that). You might be able to affect numerous instances at once
                              if the original Library asset is sized incorrectly: changing its dimensions
                              in the Library will effect every instance of that asset.

                              What is an asset exactly? I have a collection of pngs each of which swaps the other out sequentially.


                              Tansle

                              • 12. Re: Cell animation basics
                                tansle Level 1
                                Okay - I have a completed rather crude animation (friends will have to wait for swish Flash from me!) saved (and compressed) to an .fla file. I tried emailing this to my laptop since it is too ancient to run Flash. It didn't know how to open it. This is a problem because I was hoping to email this card to friends.

                                You keep mentioning a .swf file - which is precisely what I expected to end up with. Why do I have an .fla file and how do I get a .swf file? My Publish settings mention .html and .swf and not .fla. and doesn't seem to have any setting that is wrong. I am not given a chose of file formats when I Save As.

                                Thank you again!

                                Tansle
                                • 13. Re: Cell animation basics
                                  Walter Elias Level 2
                                  Oy vay. You need to read the basic "Getting Started" tutorials that come with Flash. I really think you'll save a lot of time and frustration if you try to familiarize yourself with the program.

                                  The FLA is your source file. You have publish it to render it as SWF (or other video formats). "Save" does not mean "Publish". Go to File/Publish and then like magic the SWF will appear.
                                  • 14. Re: Cell animation basics
                                    tansle Level 1
                                    Actually, I did read many of the tutorials (spent days at it) and found them very uninformative.

                                    And I have been publishing. Over and over. Each time I published I would then look at the result and fix mistakes.

                                    It is only now that you mention I really should be getting .swf files out of the exercise that I have checked to see where these .swf files might be residing. And have discovered that Flash never asked me where I wanted them to go and has therefore been putting them in another folder, of its own choosing. So, I fixed that.

                                    And, as you say, voila, .swf files.

                                    Thanks for the tip off.
                                    • 15. Re: Cell animation basics
                                      Level 7
                                      Tansle,

                                      > I am starting from scratch (again!!) because I couldn't figure
                                      > out how to replace my jpgs with png files.

                                      If you right-click on any bitmap in your Library (meaning, any imported
                                      raster image, such as PNG, JPG, GIF, BMP, TIFF, etc.), you'll see that you
                                      can select Properties from the context menu to open the Bitmap Properties
                                      dialog for that image. This dialog lets you adjust numerous properties for
                                      that particular bitmap, such as compression, smoothing, and so on, and
                                      you'll see an Import button that lets you replace that bitmap with another
                                      file. By using this Import button, you can replace your JPGs with PNGs
                                      while keeping all your placement and tweening work intact. (Obviously,
                                      replacements will only look right if the new files are saved at the same
                                      dimensions as the files they're replacing.)

                                      > I have got the background (nest)and the first three instances
                                      > in place. I still cannot see the nest - despite onionskins turned
                                      > on.

                                      Onionskinning lets you see frames prior to and/or after the frame you're
                                      currently on. Adjacent frames are displayed at a lesser transparency than
                                      the current frame. Onionskinning doesn't have anything to do with the
                                      visibility of layers per se.

                                      > Publishing to preview shows NO nest!

                                      Is the nest on a layer that is a) visible, b) not obscured by another
                                      layer, and/or c) not positioned off the edges of the Stage?

                                      > Interestingly enough, when I imported png files, each instance
                                      > showed up on the stage as its original size (803 pixels across)
                                      > as opposed to the .jpgs which showed up as ~200 or less.

                                      I have occasionally noticed that bitmap images (again, JPGs, PNGs, BMPs,
                                      GIFs, etc.) don't always appear in a timeline at 100% size. Not sure what
                                      the rhyme or reason is, but you can always determine the percentage size of
                                      any bitmap -- in fact, any symbol or shape -- by selecting that asset and
                                      taking a quick look at the Transform panel.

                                      > What is an asset exactly?

                                      An asset is anything usable in a FLA file. In this case, we've been
                                      discussin bitmap assets, but there are also movie clips, graphic symbols,
                                      button symbols, text fields, components, and so on. Every one of these
                                      things is an "asset" in Flash, in the layman's sense of the word.

                                      [from the post replied to by Walter]
                                      > You keep mentioning a .swf file - which is precisely what I
                                      > expected to end up with. Why do I have an .fla file and how
                                      > do I get a .swf file?

                                      As Walter mentioned, a FLA file is a Flash source file. Think of it
                                      like a PSD file (a Photoshop file) from which you export a JPG for the Web.
                                      In terms of Flash, you work on a FLA file, then export a SWF for the Web.
                                      You get a SWF file by testing your movie (Control > Test Movie) or by
                                      publishing your movie (File > Publish), the latter of which assumes you have
                                      the Flash checkbox selected in your File > Publish Settings > Formats
                                      dialog.

                                      > My Publish settings mention .html and .swf and not .fla.

                                      Exactly. That's because you don't publish your FLA. That's your source
                                      file, and if you share that file with anyone, that person will have to have
                                      the Flash authoring tool in order to view the file.

                                      > have discovered that Flash never asked me where I wanted
                                      > them [published SWF files] to go and has therefore been putting
                                      > them in another folder, of its own choosing.

                                      By default, Flash puts a FLA's SWF file into the same folder as the FLA
                                      itself. You can optionally change this default by changing the file path
                                      and/or name in the File > Publish Settings > Formats dialog.


                                      David Stiller
                                      Adobe Community Expert
                                      Dev blog, http://www.quip.net/blog/
                                      "Luck is the residue of good design."