10 Replies Latest reply on Mar 18, 2010 10:45 AM by Ned Murphy

    newbie in hell...flash cs4 image

    vonchookers

      Hello everyone,

       

      I must warn you I am an absolute beginner with flash, however am proficient in Illustrator / ps cs4 and now have flash cs4. I have a mountain of graphic work for a client and as part of this welcome work I've inherited a flash header that I need to finish for a website. The only problem is, I usually work in print and know nothing about flash, but would like to tackle this if I can. The inherited header is 980 x 230 with 8 images that fade in/out as they change over each other (morph). It was originally done in flash 10 using tweens but I gather flash has changed a bit with regards to this sort of thing.

       

      I like to learn new things but I have spent HOURS online and just can't find out how to do this. I've had a good look around flash but unfortunately I just can't dedicate days or weeks to learning the entire program.

       

      From what I can gather so far:

       

      The images go into flash library (is jpeg ok or do they have to be BMP) then I need to convert them to symbols then they go into the timeline as layers ...OMG I guess my first question is..is this a fairly simple thing to accomplish or should I look at outsourcing it? I'm pretty good with the teaching myself stuff, but my biggest enemy is time. I've looked at the adobe tv tuts but didn't see anything like what I'm after (the image doesn't need to slide, it just needs to fade into another one).

       

      I'm so buggered, hoping if I get some sleep some kind soul will either be willing to help, or tell me to forget it, either way helping to end my frustration!

       

      Thanks in advance,

       

      A bona fide Flash Dummie...

       

      Lauren

        • 1. Re: newbie in hell...flash cs4 image
          Ned Murphy Adobe Community Professional & MVP

          You will want to use jpegs.  Import them and turn them into graphic symbols.  If the file uses timeline tweens, there's no reason you can't as well.  That hasn't changed at all except possibly the way they were done... since you say it is Flash 10, that is the latest release, so there would be nothing old about the file by those numbers.

           

          For the fade tween I recommend you search Google using "Flash alpha tween tutorial" and you should find something to light the way for you.  It is not a difficult task and you should be able to pull it off if you take your time with it.

          • 2. Re: newbie in hell...flash cs4 image
            vonchookers Level 1

            Thank you Ned, after a break I am revisiting this now. Thanks for your

            patient reply. I've checked out a few tuts but now I'm wondering if perhaps

            what I need to do is maybe as simple as this:

            *

            What I am working with*: a flash file of 8 images, and in the library I note

            13 tween files. A mask is also used.

             

            What I have to do: change 3 of the images to different ones

            *

            Is this an ok way to do it*: Last night i was thinking I was doomed, but

            this morning I tried a no brainer and it seems to work - is it ok to just go

            into the image properties, click "update", and upload a new image? I can't

            believe it's that simple, but it looks like that keeps the same name and

            everything, it just uses a fresh image and the transitions and everything

            still work fine. Is that all I have to do? Holy cow....I feel like it's

            Christmas if the answer is yes!

             

            Thank very much

             

            Lauren

            • 3. Re: newbie in hell...flash cs4 image
              Ned Murphy Adobe Community Professional & MVP

              Good news and bad news...  If you have the original images and you edited them and saved them under the same name, then you should be able to just update the images as you discovered, as long as they can be found in the same location.  If not, it is still not an impossible task to import one, open the symbol containing it (not the animation) and place the new image in it while removing the original.

               

              The bad news is (not so terribly bad)... if you have things literally called "Tween"s in the library, then whoever created the animation the first time around messed up.  Those Tweens are filler material that Flash creates when someone doesn't properly create a timeline tween.  To properly create a tween involves making sure you have the exact same object at every keyframe of the tween--easiest realized by placing the symbol in the first frame of the tween and then inserting a keyframe down the timeline (which places the same object in that new keyframe)... you could just copy the frame and paste it down the timeline as well.  Then you adjust whichever property you intend to tween at each keyframe.  For fade tweens you would select the object on the stage and in the Properties panel select the alpha property in the Color drop down selections, setting it to either 0 or 100%.

               

              A night's sleep often clears a Flash fried brain.

              • 4. Re: newbie in hell...flash cs4 image
                vonchookers Level 1

                well that makes sense! No wonder...I was looking at all those tween files in the library and I couldn't find any way they fit the puzzle! Ok let me have a go and see if I have any luck, I will post update soon.

                 

                Thanks so much Ned, you make me feel there is some hope (just maybe).

                 

                Back soon,

                 

                Lauren

                • 5. Re: newbie in hell...flash cs4 image
                  vonchookers Level 1

                  Hi again, ok I think I am feeling a bit more familiar with things, that

                  actually helped a lot to know those tween files were not supposed to be

                  there! BTW this is a link to what I need to do

                  https://rcpt.yousendit.com/838114498/22e193445d2544610286b0f9ba4a67ae

                   

                  Ned I understand what you are saying re his timelines, and I think a lot of

                  my confusion last night was in trying to untangle something done

                  incorrectly. I can tell you right now the timelines aren't done right!

                   

                  If I understand you correctly I can update the images I need to and give the

                  client back the same file (with messed up tweens) and it will still work, OR

                  I can start over and do it right (always my favorite option). Will either

                  scenario work? I do have original images so that's no drama.

                   

                  I've checked out a few tuts and followed along, but got stuck - no doubt on

                  something silly / stupid.

                   

                  1. Imported jpegs

                  2. Made two layers in timeline

                  3. converted the jpegs to graphic symbols

                  4. For layer 1, inserted keyframe at 24, and made the alpha 100

                  5. Made keyframe at 12, made image alpha 0

                  6. right clicked either side of the 12 and selected "create motion tween" *

                  BUT* nothing seems to happen, no little arrows show, and when I drag the

                  slider it just goes 100% > 0% > 100% with no smooth transition.

                  7. can't see where I have gone wrong as I am doing exactly as tutorials tell

                  me to do.

                   

                  any suggestions? I know it'll be something easy.

                   

                  Gosh it is so frustrating being stuck on something like this...thanks for

                  your help, you're saving me today...

                   

                  Lauren

                  • 6. Re: newbie in hell...flash cs4 image
                    vonchookers Level 1

                    I have just discovered that Classic Tween works, while Motion tween does

                    not....? Also most of the tuts I am seeing say to make it a movie symbol not

                    a graphic symbol - is one preferable?

                     

                    Thanks...L

                    • 7. Re: newbie in hell...flash cs4 image
                      Ned Murphy Adobe Community Professional & MVP

                      I don't have CS4 so I am not familiar with the new way of tweening, only with what CS4 calls classic tweens, which is what I grew up with in Flash.  What I described for you is based on classic tweens.

                       

                      While those in in the know (a few) praise the wonders of the new tweens, general concensus in these forums for those that question them is that trying/learning to work with the new tweens is not straightforward.

                       

                      As far as movieclip versus graphic goes, neither is preferable over the other.  Both will perform in a tween.  Movieclips are useful when you have more to do with the object than just display it.

                      • 8. Re: newbie in hell...flash cs4 image
                        vonchookers Level 1

                        Ned thank you! Believe it or not, I now have a beautiful header w/ images

                        and mask almost finished. I can hardly believe it, now that I've done it

                        from scratch, I can easily see how messy the old one was - no bloody wonder

                        I was so confused trying to unscramble it! I am just now putting the text

                        on, but one last thing I haven't been able to discern, is can I use both

                        Open and True type fonts, or is it only one or the other. I have one open

                        (Minion) and one true (Tom's handwriting) - is there anything I have to

                        watch for?

                         

                        Thanks Ned, so long as the font is ok, I should be done in about 10 minutes

                        - only took me all day but at least I learned heaps in the process.

                         

                        Cheers,

                         

                        Lauren

                        • 9. Re: newbie in hell...flash cs4 image
                          DigitalArchitectCanada

                           

                          I don't have CS4 so I am not familiar with the new way of tweening, only with what CS4 calls classic tweens, which is what I grew up with in Flash.  What I described for you is based on classic tweens.

                           

                          While those in in the know (a few) praise the wonders of the new tweens, general concensus in these forums for those that question them is that trying/learning to work with the new tweens is not straightforward.

                           

                          As far as movieclip versus graphic goes, neither is preferable over the other.  Both will perform in a tween.  Movieclips are useful when you have more to do with the object than just display it.

                          The difference with the motion tweens is that the motion tweens are built to be easily scalable and to provide a graphical interface for easily updating/editing the tweens visually (including path, timing etc). Classic tween is what you want for your project so you're on the right track. As far as the difference between a movieclip and a bitmap not mattering, well it depends really on the scale of the project but best practice is to go with the smaller class. The movieclip class is massive, one of the largest because it is a dynamic type and is near the bottom of the chain of inheritance on the flash displayobject list. So, the bitmap class would be probably like 1/10th the file size of the movieclip class, so go with bitmap. Since flash is primarily a web technology and I'm sure you're doing this project for a website, every byte matters.  Imagine the difference in filesize is 5 kb just because of what classes you decide to use but you decide to deploy the project on a website with 5 million users. Thats 25 gigabytes of wasted bandwidth. Anyway that doesn't really apply to you because you're doing timeline tweens and the flash IDE will automatically import all of those bulky classes anyway, but it's good to keep in mind if you decide to pursue getting deeper into flash and working with actionscript.

                           

                          Anyway it looks like you've almost got your project all sorted out but there is the problem with doing everything inside flash using timeline tweens. As you're aware, it's a pain if you need to update. Below is some basic actionscript you can paste inside of a new fla file. It's not the best example but I just kind of wipped it up and should be more than enough for you to pick apart and learn how actionscript 3 works in flash. So.. create a new fla set the stage to the size of your project (980 X 230) pixels. Create a new blank movieclip (might as well, read up) and give it an instance name of "imageContainer". That's it for setup in the FLA. In the same folder as the FLA create a folder beside the fla called images. Create a new text document inside that folder and name it "filelist.xml". In that list, paste this:

                           

                          <files>
                              <file filename="171_2784_2.jpg" />
                              <file filename="165_2564_0.jpg" />
                              <file filename="171_2690_2.jpg" />
                              <file filename="171_2735_1.jpg" />
                          </files>

                           

                          Copy all of your images for this project into the images folder. Now modify that XML to include the name of each file in the folder.

                           

                          Now back in your FLA, click the first frame of the main timeline. Open the actions panel (view -> actions in the menu)

                           

                          Now paste this into that frame:

                           

                          import fl.transitions.Tween;
                          import fl.transitions.easing.Strong;
                          import fl.transitions.TweenEvent;

                           

                          var listIndex:int = 0;
                          var nextImage:Bitmap = new Bitmap();
                          var listOfImages:Array = new Array();
                          var listLoader:URLLoader = new URLLoader();
                          listLoader.addEventListener(Event.COMPLETE, parseFileList);
                          listLoader.load(new URLRequest("images/filelist.xml"));
                          var imageLoader:Loader = new Loader();
                          var cycleTimer:Timer = new Timer(5000, 0);
                          cycleTimer.addEventListener(TimerEvent.TIMER, beginImageCycling);

                           

                          function parseFileList(e:Event):void
                          {
                              //trace(e.currentTarget.data); //Uncomment this to debug and see what data is coming in
                             
                              var fileListXML:XML;

                           

                              try{
                                  fileListXML= new XML(e.currentTarget.data);
                              }catch(e:Error){
                                  trace("The file list is either not well formed XML or not XML at all");
                              }   

                           

                              var a:Number;
                             
                              //Get an XMLList object which will contain all of the children of the fileListXML
                              var fileList:XMLList = fileListXML.children();

                           

                              for(a = 0; a < fileList.length(); ++a){
                                  trace(fileList[a].attribute("filename"));
                                  listOfImages.push(fileList[a].attribute("filename"));
                              }
                              
                              trace("Done parsing file list XML");
                              
                              beginImageCycling();
                          }

                           

                          function beginImageCycling(e:TimerEvent = null):void
                          {
                              imageLoader = new Loader();
                              imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, showNextImage);
                              imageLoader.load(new URLRequest("images/" + listOfImages[listIndex]));
                             
                              listIndex++;
                             
                              if(listIndex >= listOfImages.length){
                                  //This will reset the index and begin looping from the images from the start
                                  listIndex = 0;
                              }
                          }

                           

                          function showNextImage(e:Event):void
                          {
                              trace("Image loaded, get ready to show it");
                              nextImage = e.currentTarget.content as Bitmap;
                             
                              var tw:Tween = new Tween(nextImage, "alpha", Strong.easeOut, nextImage.alpha, 0, 1, true);
                              tw.addEventListener(TweenEvent.MOTION_FINISH, changeOutImage);
                              tw.start();
                          }

                           

                          function changeOutImage(e:Event):void
                          {
                              while(imageContainer.numChildren > 2){
                                  trace("removing old images");
                                  imageContainer.removeChildAt(0);
                              }
                             
                              //Add the new image to the container, in this case the stage
                              imageContainer.addChild(nextImage);
                             
                              var tw:Tween = new Tween(nextImage, "alpha", Strong.easeOut, nextImage.alpha, 1, 1, true);
                             
                              //Restart the timer to cycle images
                              cycleTimer.reset();
                              cycleTimer.start();
                          }

                           

                          In the menu go to Control--->Play. That should do it, it should cycle through those images over and over. I'm at work doing this on my lunch I'll post a completed project/demo of this later when I get home and give you an intro to actionscript by covering the code I've put here. Anyway so now the benefit of doing things this way is that if you want to adjust the transition time, you simply go to the :Tween = new Tween lines and change this:

                           

                          Strong.easeOut, nextImage.alpha, 1, 1, true);

                           

                          to:

                           

                          Strong.easeOut, nextImage.alpha, 2, 1, true);

                          Which will change the transition time from 1 second to 2 seconds. Or, say if you want to add new pictures, all you have to do is change that XML and copy in new pictures, something even your client could do (which is sure to make them happy).

                           

                          Anyway I'll post later even if you don't need this anymore it may be useful to somoene else who finds this topic one day. .:)

                           

                           

                          -Jesse

                          • 10. Re: newbie in hell...flash cs4 image
                            Ned Murphy Adobe Community Professional & MVP

                            You're welcome Lauren. Please mark this posting as answered if you are satisfied with the results and are still able to.