26 Replies Latest reply on Jul 8, 2010 10:40 AM by StudentsofShiloh

    interactive slideshow help?

    WillV2Met Level 1

      Hi,

       

      First-time poster here. Does anyone know where I can find a tutorial or any instructions for doing an interactive slideshow in Flash? I'm
      looking to do something with numbered controls like this link I've provided:

       

      www.starline.com

       

      I'm new to Flash and have looked all over the web and even called Adobe Technical Support, but have had no success. If anyone can point me in the right direction for finding an online tutorial I'd REALLY appreciate it!

        • 1. Re: interactive slideshow help?
          Ned Murphy Adobe Community Professional & MVP

          That particular piece is likely no more than a timeline-based movie where you transition from one image to the next, and the buttons simply move you to the transition-in of their associated images.  I say this because when you click a button, the image it leads to shows the image transitioning from the image physically before it rather than from the image you were at... (click button 2 while it's at 4 and you'll see image 2 transition from image 1).

           

          Doing timeline transitions is basic Flash so you're not likely to find any tutorials dedicated to the process... Though you may find something at lynda.com (I can't say because I've never subscribed).

           

          There are actionscript -based design of this nature, which would transition properly, from where you are to where you're going, but I have never seen any tutorials for those style designs.  I have created a couple from scratch, but using what I know, not any tutorial.

           

          Someone else may come along with better info to offer, but as far as I know, there's no readily/freely available tutorials for such a piece.

          • 2. Re: interactive slideshow help?
            waterdad568 Level 3

            I made this for you as a quick template to give you an idea of one way to do it. It is very basic, very little actionscript, mostly tweened object alpha levels at the same points on each objects layer and then cascading the entire tweened blocks of object layers across the timeline. You should be able to import, convert and swap the symbols pretty easily. A little more action script to change the color on the buttons on frame enter, and a little polish, should do ya just fine.

             

            Anyway, have fun.

            • 3. Re: interactive slideshow help?
              WillV2Met Level 1

              Thanks a TON, guys!

               

              Your advice has been most helpful. I've been working on it almost all day... and I think I may have it! (almost)

              • 4. Re: interactive slideshow help?
                WillV2Met Level 1

                Thanks again for all the wonderful help. I really do appreciate it!

                 

                Now I need to add a play/pause button and also have each image in the slideshow link to a different url. I've tried and found some tips online for doing both of these... but each time I get an error message. I've attached the file as it is so far, without the play/pause button or links in hope that someone may be able to help.

                • 5. Re: interactive slideshow help?
                  Ned Murphy Adobe Community Professional & MVP

                  If you include your complete error message someone who cant' or won't open your file may still be able to help.

                  • 6. Re: interactive slideshow help?
                    WillV2Met Level 1

                    Good point - Thanks.

                     

                    Here is the code I tried:

                     

                    on (release) {

                    getURL("http://www.apple.com", "");

                    }

                     

                    Here are the error messages I'm getting:

                     

                    Scene 1, Layer 'Layer 1', Frame 30, Line 1: 1087: Syntax error: extra characters found after end of program. on (release) {

                     

                     

                     

                    • 7. Re: interactive slideshow help?
                      Ned Murphy Adobe Community Professional & MVP

                      First try removing that  , ""   from the getURL argument abd see if that takes care of the error.  If not make sure you don't have any stray typing in the actions panel that holds that code.

                      • 8. Re: interactive slideshow help?
                        WillV2Met Level 1

                        Thanks... I tried that, but I still get the same error message.

                        • 9. Re: interactive slideshow help?
                          Ned Murphy Adobe Community Professional & MVP

                          Unfortunately, AS2 is a far cry from AS3 in terms of telling you what's wrong with code.  Syntax errors such as the one you're getting can arise just about anywhere, meaning there may be code in some other frame or line that has the error, and for lack of being able to pinpoint it properly, it gives some innocent line of code a guilt complex.

                          • 10. Re: interactive slideshow help?
                            waterdad568 Level 3

                            Try this, you should get the idea.

                            • 11. Re: interactive slideshow help?
                              WillV2Met Level 1

                              Thanks again, waterdad568. You've been an immense help with this project!

                               

                              I've tried using variations of the code you provided for the buttons to add links to the actual slide images as well, but after several tries, I still can't seem to get it to work. Can you show me where I'm going wrong? It appears that the link is there, but clicking does not do anything. I've attached the latest version of the file.

                               

                              Thanks again,

                               

                              Will

                              • 12. Re: interactive slideshow help?
                                waterdad568 Level 3

                                In the code I gave you, you have to enter the actual URL address you want in the (http://...) in each function first, that will link the buttons. Then to link the images there are a couple ways, the easiest for this project I would say would be just create invisible buttons for the images.

                                 

                                In one of these tutorials they specifically cover invisible buttons.

                                 

                                http://tv.adobe.com/show/flash-in-a-flash/

                                • 13. Re: interactive slideshow help?
                                  WillV2Met Level 1

                                  Thanks for linking me to those tutorials. I'll check them out.

                                   

                                  I did add the web addresses to the code you gave me for the buttons and it worked perfectly!

                                   

                                  I must say that I'm finding Flash a lot more complex than I expected. Most of my experience is in print design, using Photoshop, Illustrator, Quark, InDesign, etc. so I wasn't expecting to have to learn all this code. When I first got a hold of Flash I experimented with shape tweens and motion tweens and I thought it was pretty easy at the time. Oh well, I'm sure I'll get the hang of of it soon enough.

                                   

                                  Thanks again to everyone for all the advice and help!

                                  • 14. Re: interactive slideshow help?
                                    WillV2Met Level 1

                                    Thanks again for the tutorial links. There's a lot there to learn, which is great!

                                     

                                    Unfortunately, I'm still not having much success with this project. I feel like I'm close (could be wrong about that, though, lol) but just can't figure out what isn't quite right. I've tried adding an invisible button with a link for the first image in the slideshow, but after doing it the slideshow no longer plays, the link I've tried to add doesn't work and there is this error message: TypeError: Error #1009: Cannot access a property or method of a null object reference.

                                    at slideshow_test_fla::MainTimeline/frame1()

                                     

                                     

                                     

                                    I've attached the actual file. This is the code I have for the file:

                                     

                                    btn1.addEventListener(MouseEvent.CLICK, btn1ClickHandler);

                                    btn1.addEventListener(MouseEvent.MOUSE_OVER, btn1OverHandler);

                                    btn1.addEventListener(MouseEvent.MOUSE_OUT, btn1OutHandler);

                                     

                                    function btn1ClickHandler(event:MouseEvent):void

                                    {

                                        navigateToURL(new URLRequest("http://www.apple.com"));

                                    }

                                     

                                    function btn1OverHandler(event:MouseEvent):void

                                    {

                                        gotoAndStop(10, "Scene 1");

                                    }

                                     

                                    function btn1OutHandler(event:MouseEvent):void

                                    {

                                    play();

                                    }

                                     

                                    btn2.addEventListener(MouseEvent.CLICK, btn2ClickHandler);

                                    btn2.addEventListener(MouseEvent.MOUSE_OVER, btn2OverHandler);

                                    btn2.addEventListener(MouseEvent.MOUSE_OUT, btn2OutHandler);

                                     

                                    function btn2ClickHandler(event:MouseEvent):void

                                    {

                                        navigateToURL(new URLRequest("http://www.apple.com"));

                                    }

                                     

                                    function btn2OverHandler(event:MouseEvent):void

                                    {

                                        gotoAndStop(55, "Scene 1");

                                    }

                                     

                                    function btn2OutHandler(event:MouseEvent):void

                                    {

                                    play();

                                    }

                                     

                                    btn3.addEventListener(MouseEvent.CLICK, btn3ClickHandler);

                                    btn3.addEventListener(MouseEvent.MOUSE_OVER, btn3OverHandler);

                                    btn3.addEventListener(MouseEvent.MOUSE_OVER, btn3OutHandler);

                                     

                                    function btn3ClickHandler(event:MouseEvent):void

                                    {

                                        navigateToURL(new URLRequest("http://www.apple.com"));

                                    }

                                     

                                    function btn3OverHandler(event:MouseEvent):void

                                    {

                                        gotoAndStop(105, "Scene 1");

                                    }

                                     

                                    function btn3OutHandler(event:MouseEvent):void

                                    {

                                    play();

                                    }

                                     

                                    btn4.addEventListener(MouseEvent.CLICK, btn4ClickHandler);

                                    btn4.addEventListener(MouseEvent.MOUSE_OVER, btn4OverHandler);

                                    btn4.addEventListener(MouseEvent.MOUSE_OVER, btn4OutHandler);

                                     

                                    function btn4ClickHandler(event:MouseEvent):void

                                    {

                                        navigateToURL(new URLRequest("http://www.apple.com"));

                                    }

                                     

                                    function btn4OverHandler(event:MouseEvent):void

                                    {

                                        gotoAndStop(150, "Scene 1");

                                    }

                                     

                                    function btn4OutHandler(event:MouseEvent):void

                                    {

                                    play();

                                    }

                                     

                                    btn5.addEventListener(MouseEvent.CLICK, btn5ClickHandler);

                                    btn5.addEventListener(MouseEvent.MOUSE_OVER, btn5OverHandler);

                                    btn5.addEventListener(MouseEvent.MOUSE_OVER, btn5OutHandler);

                                     

                                    function btn5ClickHandler(event:MouseEvent):void

                                    {

                                        navigateToURL(new URLRequest("http://www.apple.com"));

                                    }

                                     

                                    function btn5OverHandler(event:MouseEvent):void

                                    {

                                        gotoAndStop(210, "Scene 1");

                                    }

                                     

                                    function btn5OutHandler(event:MouseEvent):void

                                    {

                                    play();

                                    }

                                     

                                    btn6.addEventListener(MouseEvent.CLICK, btn6ClickHandler);

                                    btn6.addEventListener(MouseEvent.MOUSE_OVER, btn6OverHandler);

                                    btn6.addEventListener(MouseEvent.MOUSE_OVER, btn6OutHandler);

                                     

                                    function btn6ClickHandler(event:MouseEvent):void

                                    {

                                        navigateToURL(new URLRequest("http://www.apple.com"));

                                    }

                                     

                                    function btn6OverHandler(event:MouseEvent):void

                                    {

                                        gotoAndStop(259, "Scene 1");

                                    }

                                     

                                    function btn6OutHandler(event:MouseEvent):void

                                    {

                                     

                                    play();

                                    }

                                     

                                    link_1.addEventListener(MouseEvent.CLICK, link_1ClickHandler);

                                     

                                    function link_1ClickHandler(event:MouseEvent):void

                                    {

                                        navigateToURL(new URLRequest("http://www.apple.com"));

                                    }

                                    • 15. Re: interactive slideshow help?
                                      waterdad568 Level 3

                                      More than likely you have either not placed the instance of link_1 on the timeline in frame one, did not give the button an instance name of link_1, did not make the invisible button correctly, or have it on a layer below the image layer.

                                       

                                      So... Did you give your button the instance name of link_1? Is it on the stage at frame one? On it's own layer? Is the layer you put the invisible button on above the image layer, and large enough to cover a good portion of the image? I believe instance names are also case sensitive, so if you coded link_1 and named the instance Link_1 they are two different files.

                                      • 16. Re: interactive slideshow help?
                                        WillV2Met Level 1

                                        Thanks for the quick response (again!). I really appreciate your help.

                                         

                                        I did not have the instance of link_1 on the timeline in frame one, but now I have corrected that and there is no longer any error message and the link works!... except if during the slideshow I hover over button #1 (which brings me back to the first image) and then try to click on that image (the one with the invisible button) nothing happens. The cursor turns into the pointing finger, making it look like clicking will take you somewhere, but when you click nothing happens and it continues onto the next slide.

                                        • 17. Re: interactive slideshow help?
                                          waterdad568 Level 3

                                          Try this:

                                          1 person found this helpful
                                          • 18. Re: interactive slideshow help?
                                            WillV2Met Level 1

                                            It works perfectly now! Thank you so much!

                                             

                                            I see you put each invisible button layer right above it's corresponding slide image layer and put the code on each actual link layer instead of the actions layer. Is that what solved the problem or did you do something else too?

                                            • 19. Re: interactive slideshow help?
                                              waterdad568 Level 3

                                              You cannot code to an instance that does not exist, as well as you can't expect an instance event to function without the code loaded in the same frame your asking it to funtion in. So If you put code in frame one to load, the instance must be on the stage in frame one when the code is loaded or it will error. Notice how code layer keyframes encompass the timeline of the images in each instance.

                                               

                                              Because you have 6 instances that basically enter and exit the stage at different points along the timeline, you can't run the code until they shows up so the easiest way was to create a specific event code layer for each image layer that came and went, it loads same time and code is available throughout its life span and does not interfere with you main action code layer loaded on frame one.

                                               

                                              If this did the job, and a job it was I might add, please mark this thread as answered by me. Hook a brother up, I earned it.

                                              • 20. Re: interactive slideshow help?
                                                WillV2Met Level 1

                                                You sure did earn it! I can't thank you enough and really do appreciate it. You went above and beyond and far exceeded even the most generous help I was expecting.

                                                • 21. Re: interactive slideshow help?
                                                  waterdad568 Level 3

                                                  No problem, your welcome, glad I could help.

                                                  1 person found this helpful
                                                  • 22. Re: interactive slideshow help?
                                                    WillV2Met Level 1

                                                    Unfortunately, I had to revise the look of the buttons and images and am having some new issues that I just can't figure out. I had assumed that this would be pretty simple, so I swapped out the buttons and slide images under properties. The images are fine and still play and link correctly. I didn't change any code and made sure the buttons all have the same instance names and are at the same places as before in the timeline and layers, but the buttons no longer function properly as they did before and once again the slideshow stops at the end and gives this error message similar to before:

                                                     

                                                    TypeError: Error #1009: Cannot access a property or method of a null object reference.

                                                    at slideshow_test_FINAL_fla::MainTimeline/frame1()

                                                    I tried all day yesterday and this morning to figure out what the problems could be - swapping and importing the new buttons various ways - but I'm at a total loss and once again need some help. I've attached the file and would REALLY appreciate any help/advice/tips. Thank you!

                                                    • 23. Re: interactive slideshow help?
                                                      waterdad568 Level 3

                                                      OK last fix, your on your own from here. I would also highly suggest you use the layer locks, that's why they are there, to stop you from doing what you just did, inadvertantly changing things on unintended layers.

                                                       

                                                      Work one lock it, unlock next, when done lock it, rinse repeat.

                                                       

                                                      You'll have to redo color changes on buttons, didn't have time, sorry. And if you didn't hear me the first time, re-read above.

                                                       

                                                      Actually what you should have said was, "hey anybody want to build me a Flash component"?

                                                       

                                                      lol, j/k... good luck.

                                                      • 24. Re: interactive slideshow help?
                                                        StudentsofShiloh Level 1

                                                        Water, I just wanted to say thanks for the help you've provided on this subject.  I started working with flash last night and was using a tutorial online to create a simple transition from one image to another.  I couldn't figure out how to make my buttons go to a certain spot in the timeline and your code worked great.  I just had to change the frame settings.

                                                         

                                                        My question is how can I make the buttons change to a different image at a certain spot in the timeline?  In my project, I have four images and four buttons.  As image 1 fades into image 2, I want Button 2 to change color to emphasize which number image is being shown.

                                                         

                                                        Link to my project

                                                        • 25. Re: interactive slideshow help?
                                                          Lily.adobe Level 1

                                                          www.lynda.com has great Flash tutorials.

                                                          • 26. Re: interactive slideshow help?
                                                            StudentsofShiloh Level 1

                                                            Thanks.  In the past, I've purchased training DVD's from Total Training and one DVD from Lynda.com.  It might be time to invest in the annual subscription since they have a multitude of resources for all of the Adobe Software and even different trainers.  Total Training offers a more limited selection (although very good quality).

                                                             

                                                            I've never used Flash before and am considering purchasing the software.  It depends on how much I believe I will find use for it during my 30 day Trial Period. I thought this would be a somewhat simple project to begin with.