Flash slideshow with fade transition |
| Written by AnaS | |
|
In this tutorial it will be explained how to realize a flash slideshow with fade transition between images. For attempting this tutorial you need to have basic knowledge of Flash, but no ActionScript is required. The result should be a flash slideshow below: You should have Flash 8 on your computer and Flash Player 8 or later. Prepare 5 images with 300 px x 225 px dimensions. 1. Let's start! Create a new Flash document. Choose Modify >> Document (Ctrl+J) or go to the Properties panel and change dimensions to 310 px x 235 px. 2. Create 5 new layers. Rename the layers from top to bottom text, images1, images2, images3, images4, images5.
4. In the first frame of the images1 layer drag the first image you want in the slideshow. Select it and go to the Properties panel. Set X:5.0, Y:5.0. While the image is still selected choose Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears choose MovieClip as type and give it a name of image1MC.
6. Go to the frame 20 of the images1 layer and choose Insert >> Timeline >> Keyframe, or right-click >> Insert Keyframe or press F6. Insert again a new keyframe to frame 30, and then to frame 50. 7. Now go back to first frame and select it. Select then the MovieClip that is there and go to the Properties panel and choose Color: Alpha, Alpha Amount: 0%. Repeat the same actions for frame 50.
10. Select again the Rectangle tool (R). Now choose none for Stroke Color and for Fill Color choose #99CCFF and alpha 60%, like in the picture below. Draw a rectangle, click it to select it, go to the Properties panel and set W:300, H:40, X:5, Y:190.
12. Now just test the movie. Hope this flash tutorial helps!
You need to Register in order to download the FLA file.
written by andrew , September 15, 2007
nice one
written by Kevin , September 15, 2007
AWESOME THANK YOU SOOOO MUCH!! So many cheesy windows application websites when all I wanted was a neat small self contained swf! You saved my life!
written by Frans , September 26, 2007
I followed the tutorial and made a simple dynamic Flash movie in Flash8 without showing any errors. I imported the .swf file in my website with Dreamweaver8. Off line things work fine in Dreamweaver. You can see the dynamic Flash movie. I also tested the uploaded version with Dreamweaver ... everything worked fine. But ... when I open Explorer (and Firefox) ... the place where the Flash movie suppose to be is empty ... even not the Flash logo ... nothing. Any Idea?
written by Kanag , September 27, 2007
Excellent tutorial. This is my first flash test and it came out perfect. Thanks
written by Deepak Sakharkar , October 01, 2007
How to do slideshow without tweening on screen, but using Actionscript.
written by Jon , October 04, 2007
Is there a way to dynamically load the images for the above example?
written by Brandon , October 04, 2007
This was a wonder little lesson. Presented me with a solution for my site to display my project partners logos in a nice manner.
written by Tori , October 26, 2007
You taught me more then I learned after visiting half a dozen other dumb uninformative sites so thanks.
written by Antonia , October 31, 2007
Thanks for this great tutorial works also in Flash CS 3
written by bijay limbu , November 05, 2007
I like this site and hope to be more better and brings new tutorials for reader and flash practiser.
written by zealmurapa , November 19, 2007
you are great can you be contacted
written by zealmurapa , November 19, 2007
can you be contacted
written by Naratip , December 05, 2007
It's easy to follow. I'm newbie for flash. Thanks for tutorial. :)
written by Rhees , December 19, 2007
Hello, I am a newbie in flash. I tried your instructions with CS3 and it worked but the transition from one picture to the next is quite sudden, my heart leaps so to speak. How do I make the transition more flowing (not so sudden)
written by Abhishek , December 30, 2007
Hi i want to do slide show of photoes with the help of flash 8. In that slide show i wants lot of different - different effects on photoes. Plz provide me idea how to do. Regard Abhishek
written by Joseph S. , January 09, 2008
you just save my day once again,Anas..Thanks What are youup to lately I'm looking forward to your next tutorials. What ever, have a nice oneand happu new year 2008!!
written by Bhagyashri , January 17, 2008
Hi i want to do Rotation of circle or image. Plz provide me idea how to do. Regard Abhishek
written by Mark , February 08, 2008
On step 8 I am trying to add the second image to frame 51 of layer 2, but when I drag the image to the stage, it does not stay on the stage (or at least it is not visible and I cannot modify it). Any ideas what I am doing wrong?
written by Kim , February 14, 2008
niceee ... just what i was looking for. if i was able to crawl trough the network cable and kiss you i would
written by bhagyshri , March 08, 2008
Thanks for this great tutorial works also in Flash CS 3
written by jack , March 09, 2008
well done tkx for sharing your nolege,it when well step by step it's all so simple just practic guys,tkx again
written by Drew P. , March 10, 2008
Thanks a bunch. Never touched Flash before in my life. Got a copy of Flash CS3. I couldn't figure out how to get started. Found this site and followed your instructions to the letter! It worked perfectly. I know just enough to build upon what you've given me/us with this tutorial. I can take it from here, but thanks so much again, for the kick start!
written by Drew , March 23, 2008
This was EXCELLENT! THANK YOU!! THANK YOU!!!
written by kathy larrabee , March 25, 2008
i want to do Rotation of images that slowly load from 1 movie clip to the next so that 20 photos eventually are open on the screen, I tried but out of 20 maybe 10 open randomly. I would like them to go in order form mc1 to mc20. can you help
written by Suz , April 03, 2008
Need more -- Great tutorial - worked like a charm for my small slideshow. But what if I have 35 images?? Doesn't seem like this would be the best approach - any advice? The small one is on the site, but large one not yet.
written by Roger Wood , April 03, 2008
Im doing a fade in of several symbols to make one still pic when all the transitions have completed... everything is transitioning in and then suppose to stop and hold. But how do i get the first symbol that fades in, (which is the main background for everything else to lay on) to stay for the duration of the show? Right now it just fades in and then shuts-off/disappears. Sincerely - Thanks Much - RW
written by Gazie , April 25, 2008
Thanks so much for this tutorial! I used Flash CS3 and only had a few small issues to solve as I went along. I changed the transitions to overlap, so that as one fades out, the next one is fading in. Very nice! Thank you!
written by emily , May 06, 2008
this was great thank you but how do i make it so it plays a continuous loop
written by AfroSamurai , May 09, 2008
This is awesome. Simple and on the money. Thanks for your effort & time on this tutorial as well as publishing it free. We love your work n looking forward for more stuff. Cheers !
written by John Jacob , May 24, 2008
I am having the same problem as written above by "Mark" on 2/28/08. I can not get the 2nd or any other image to "stick" when I try to drag it to frame 51. I am using Flash cs3 professional. Thanks in advance for any direction you offer me.
written by CyberFox , May 25, 2008
its kinda what i looked for, but. i need a fade between the frames, not from frame-white-frame, but frame-frame. or would that require a whole other procedure?
written by bryce , June 14, 2008
I am having the same issue on frame number 51. I can't drag the image to it.
written by shafi , June 20, 2008
advance slide show tutorials
written by Frank , June 26, 2008
thanks very simple easy to modify and add actions thanks a lot....
written by joko , July 08, 2008
After the first picture I am unable to drag subsequent pictures to the stage. My mouse turns to a circle with a line across. Does anyone have an idea what I'm doing wrong? Thanks
written by fay , July 10, 2008
thank you soooooooooooooo much! this really helped me!
written by claire , July 31, 2008
To Mark and the others who cannot add the image onto frame 51, just right click on frame 51 and add a keyframe then continue with steps 4 - 7.
written by claire , July 31, 2008
For Mark and the others who cannot add an image for frame 51. Right click on frame 51 and add a keyframe and then follow steps 4 - 7 as normal.
written by ChrisB , August 06, 2008
awesome!!! how can i make it have three images on the stage, and only transition one at a time? [img] [img] [img with transition] [img] [img] [img with transition] [img] [img with transition] [img] [img] [img with transition] [img] [img with transition] [img] [img] [img with transition] [img] [img]
written by Thankful , August 27, 2008
Thanks for this beautiful tutorial. My boss praised me for creating something simple and neat for a presentation that we were looking for. Thanks once again. And please post more of your tutorials that help amateurs like me.
written by shradha , September 11, 2008
i can not select the second img to continue the 4 to 7 steps..do plz help
written by Catherine , November 04, 2008
I don't have an option for "alpha" in the color drop-down. It has everything else, ie. "none", "bitmap", etc, but not ALPHA. There is an option to drag the alpha percentage down or up from zero, but when I set the keyframes accordingly, nothing happens, nothing at all. I'm using Flash CS3, btw. Anybody?
written by swoods , November 06, 2008
CS3 does have the Alpha option in the drop down. I just used this tutorial. You have to actually click on the object on the stage and then the "Color" option will appear. There should be a drop down with the Alpha option there.
written by Murthy , November 13, 2008
Great tutorial.Just following your steps i have been able to create a nice slideshow.
written by rachana , December 04, 2008
Wonderful and precise.. Thanks a Million dear..
written by sun , December 26, 2008
I use Flash Gallery Factory from Wondershare to create photo slideshow and use it in my blog. No flash skills needed.
written by Geri Luongo , January 07, 2009
Love it, but how can it either loop or stop on the last image? Right now it ends on a blank white space.
written by Bill Willcox , January 15, 2009
How do you fade to black instead of white? This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
written by ce , February 11, 2009
this was great - helped me at work, with things I should know how to do...
written by A. Cruz. , February 12, 2009
Muy buen tutorial. Hello from Mexico.
written by JustinC , February 19, 2009
Useful tutorial Anyone have any idea where there is a tutorial that allows you to specify an image directory, or images in an XML file and then does as the above and fades between those images? This way it is a dynamic slideshow which doesn't require the flash being updated when an image is added or removed. Thanks
written by Thracian , February 21, 2009
Very easy to follow tutorial. Thanks
written by Yosedesh , March 07, 2009
Thank you for this easy & helpful tutorial! In response to JustinC: http://www.adobe.com/support/flash/applications/jpeg_slideshow_xml/ This may be just what you are looking for. Good luck!
written by Jennifer Natera , March 13, 2009
Ok, so I am very new to Flash. I just want to make a simple slide show for my website. I have gotten to step 8 but when I select frame 51 on images2 layer, I cannot drag the next image into the rectangle. What I am doing wrong? Also how to you adjust the time of the white frame if you want it there for less time? Thanks!
written by rcollum , March 29, 2009
Thanks for the help! Also for those who are interested you can make the picture or text in my case appear to sweep in while fading in by just moving the image to your desired location on fram 1 and frame 50. In my case I made the text swoop in from the corner, dance around for a bit, and then swoop out to the opposite corner.
written by Wes , April 21, 2009
Great tutorial, thnaks. To Jennifer I had the same problem, looks like you need to drag the very first frame from layer 2 up to frame 51, and then for layer 3 drag the first frame up to frame 101, etc etc.
written by - , May 02, 2009
you are a star... took me ages trying to understand from books but your tutorial was easier! thanks :)
written by sed , May 06, 2009
How can I allow the user to click via a thumbnail image directly to a desired image anywhere in the timeline? Do I need actionscript? I know a little 2.0. It that still current now that actionscript 3.0 is out?
written by Sarah H. , May 06, 2009
Finally, a SIMPLE, straightforward tutorial on how to do a slideshow! This made my day, thank you!
written by kievalex , June 06, 2009
AWESOME THANK YOU SOOOO MUCH!! So many cheesy windows application websites when all I wanted was a neat small self contained swf! Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 28 March 2008 ) |
