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!
written by sd , July 10, 2009
what software is this?
written by chloe , July 10, 2009
adobe flash
written by Andrew Abwetera , July 13, 2009
its agreat tutorial!
written by C7 Data Centers , July 21, 2009
Great tutorial, many thanks. Mike C7 Data Centers www.c7dc.com
written by Leilah , July 23, 2009
Bless you! saved my life.
written by Stephanie , August 11, 2009
this is different in cs4 since motion tweening has changed. no need for keyframes within the tweens anymore if you want to change the alpha. i was confused at first since no arrow for the tween was appearing as it did in previous versions of flash. just create the motion tween within two keyframes and at points you want to change the alpha, simply click on the desired frame in the timeline and then the movie clip on stage. it creates a kind of "mini" keyframe that looks like a diamond on the timeline. hope this helps~
written by skatiaris , August 15, 2009
thank you sooo much
written by ellie , August 25, 2009
You are absolutely a divine angel for putting this tutorial up. I'm a 100% novice--have never made a single flash anything in my life, yet have made a slideshow using more photos, different sizes, different colors, and all in less than an HOUR! I've learned so much from this tutorial, I think next I'll try adding some new elements into the mix to make some fancy stuff happen. You ROCK. Really. You do.
written by savi , October 05, 2009
thanx i did a nice flash movie for my anniversary.. :)
written by vailis , October 31, 2009
best tutorial i've found!.. congrats!! and also thank you.. just a question ... i need a fade between the frames, not from frame-white-frame.. what do i need to chnage? couldnt figure out yet! thank you again
written by deepeshk , November 06, 2009
how to move a slide from right to left ?
written by chrisss , November 07, 2009
You are awesome, THANKS SO MUCH
written by ooyat , November 18, 2009
thank u
written by J Swain , December 05, 2009
I want to make flash slideshow with control button (play, stop, previous, next, pause). I want each image to have flash trasition effect but not 'fade' (disappear) effect ie one image moves forward & after a while second image replaces it smoothly without disappear effect. Pls help.
written by camaelyon , December 12, 2009
I tried to do this using flash cs4 and it did not work. I am not able to add an image to frame 51.
written by Ricky123 , December 16, 2009
Way to go man! I'm in Year 9 and had to make a flash transition to meet the requirements for the website project. I tried a load of websites but your tutorial is awesome! Cheers man. You got me an A*!
written by whoathatislame , January 01, 2010
NOT! Instructions very unclear. Missing information on setting the alpha to 0 in 20 and 30 so that YOU ACTUALLY SEE THE PHOTO!!! The way you have it set up, all you see is the 0 alpha setting, which means you see nothing thru the whole clip but BLACKNESS. DUH. I figured out on my own, being completely new to flash, that I had to reset the alpha to 100 % on 20 and 30 and have it at 0 at the beginning and end frames or there was no such thing as fade. AND the period of time you have the photo visible is too short, so you should instruct so that the period between 20 and 30, where the image is actually being seen without fade, lasts maybe twice as long. So you should say something like 20 to 50, then from 50 to 70 run the thing from alpha 100 to alpha 0 so the tween actually works as a fade.
written by whoathatislame , January 01, 2010
PLUS, to respond to camaelyon, you can't insert the image at frame 51 because the author of this page failed to tell you it had to be a KEYFRAME, not a frame.
written by whoathatislame , January 01, 2010
AAAAAANNNNNNNDDDDDD You have to set the frame rate a lot higher than 1 fps or it looks terrible.
written by Pedro Rafael Silva , January 04, 2010
Hi all, This tutorial is fantastic... Thanks. Pedro Rafael Silva Portugal
written by Lasitha , January 10, 2010
Perfect Thanks AnaS Seems u r not active recently but ur tutorials will serve others well. Wishing u luck!!!
written by BrianRS , January 26, 2010
I have been meaning to create a slideshow as part of my design arsenal for a long time. Now I have found this and done my first .swf slideshow. Now I wish I had done it months ago. Your lesson was spot on and very easy to follow, nice job and thanks for the help.
written by agn , January 29, 2010
Thoughts Hosting:- Domain Name Rs.92/-only, 10Gb space, 100 Email id's, Rs.2600/-only. And for every domain get FREE extras over 7900/-. *Start Your Own Web Hosting Company Only for Rs.4000/-. visit: www.thoughtshosting.com, Contact:9059747833
written by Bill Willcox , January 31, 2010
Flash slide shows are great but don't show up on iPods or iPhones, so dynamic slide shows are better. I put one on my site at jacksonholejournal.net and it has the advantage of being pausible when moused over, as well as linking to another page on click. Of course you can do this in flash, but it is a little complicated. Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 28 March 2008 ) |
