Flash auto play image gallery


Published on

Flash Tutorial: Auto-play Image Gallery

Published in: Design, Technology, Art & Photos
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flash auto play image gallery

  1. 1. Flash Auto Play Image Gallery w/ Thumbnails Fisheries Information Management Center Prepared by: Lyndon Jeorge A. Mendoza
  2. 2. Overview In this tutorial we will show you how to create an auto- play image gallery with thumbnails in Flash CS5. We will apply a couple of simple, yet nice transitions to the images and thumbnails. This will require you to get the hands a bit dirty in animation and action scripting. However, this is going to be easy and fun! So here we go.
  3. 3. Added Feature Auto-play Image Gallery with Thumbnails in Flash CS5 also has a feature that when you click a particular thumbnail, the gallery will not continue playing till the mouse cursor is not remove over the thumbnail (see the Final Result video).
  5. 5. Step 1Open your Adobe Flash CS5and we will start creating your ownFlash Auto-play Image Gallery withThumbnails.
  6. 6. …cont. ofStep 1Create a new file with ActionScript3.0 and modify the document justby clicking the „Edit‟ button like it‟sshown on the screenshot . You canenter the document properties viathe admin panel (follow thehighlights in red) or pressing Ctrl+J.On this tutorial I made mine to awidth of 600px by 500px of heightwith white background.
  7. 7. Step 2After customizing your document,we are now ready to add somelayers.Just right-click your mouse on theLayer Area and choose „InsertLayer‟ or click the small buttonhighlighted in red for shortcut .
  8. 8. …cont. ofStep 2After creating the three new layers,give them the names Thumbnails,Big Images and Actions.To rename a layer, double click onit and type the text. See thescreenshot.
  9. 9. Step 3Add four images from yourcomputer to your library. To do thispress File => Import => Import toLibrary. You can also import theimages directly to the stage, bypressing Ctrl+R.
  10. 10. …cont. ofStep 3Now choose the images you wantto put one your Image Gallery.You can choose as many as youwant but for this tutorial, I use onlyfour images.
  11. 11. …cont. ofStep 3You can see on the Library theimages that you have chosen.
  12. 12. Step 4Go to the Buttons layer and selectthe first frame on the timeline. Dragthe images from your library to thestage (in case you haven‟t importedthem right to the stage already).Notice that the first frame of eachlayer has a small circle on it. This isa blank keyframe. Once you putanything on the stage, the circletransforms into black dot whichcorresponds to the filled keyframe.
  13. 13. …cont. ofStep 4And modify their size to 129×86 px.Be sure to drag the images to ourdocument area which we‟ve madewhite earlier.Do the same steps to the 3remaining images to complete theset of our thumbnails.
  14. 14. Step 5After completing the set, now youhave your thumbnails on the stage.Set image alignment byselecting Align in Window menu, orjust press Ctrl+K.
  15. 15. …cont. ofStep 5Align the images to the bottom anddistribute horizontal center like it‟sshown on the screenshot.
  16. 16. Step 6Our thumbnails are going to bebuttons, so now we need to convertthe images into the Button symbols.Using the Selection Tool, right clickon the first thumbnail image andchoose “Convert to Symbol”, orsimply hit F8.
  17. 17. …cont. ofStep 6In the opened window set the typeButton and name the symbol btn1.Click “OK” to save the changes. Dothis for the other three images andgive them thenames btn2, btn3 and btn4,respectively.
  18. 18. …cont. ofStep 6Now we have to give each of thesethe same Instance Name which is aname to refer to your symbol orobject in ActionScript.Instance Name can be set in the„Properties‟ panel which you canenter by selecting the necessaryobject on the stage. Instance Nameof the btn1 button will be btn1 andso forth.
  19. 19. Step 7Right click on the first frame of theButtons layer, select Copy Frames,go to the fourth frame and PasteFrames the same way. Or you canjust drag the first frame up to thefourth cell to copy it.
  20. 20. …cont. ofStep 7As you notice, there‟s a Keyframeat the end of the layer. We don‟tneed that so we have to delete it.Just right-click on the Keyframe andchoose „Clear Keyframe‟ to deleteand you will see the result on thesecond screenshot.
  21. 21. Step 8OK, let‟s put the images that we willbe exactly viewing in our gallery.Switch to the Big Images layer andselect the first frame on thetimeline. Drag the image thatcorresponds to the first thumbnailfrom your library to the stage. Sizeit down to 558×320 px and set itsposition to 18×0.05.Of course, you may set your owndimensions and place the pictureswhatever you like; this is just whatwe use for this tutorial. Insert three more blank keyframes (F6) and do the same operation with the rest of the images.
  22. 22. …cont. ofStep 8You can change the image byclicking the „Swap‟ button(highlighted in red). This will allowyou to swap the current shownimage to other image. Just be surethat you‟re on the frame you want tochange the image.After changing or swapping theimage, resize it again to have thestandard size same on what we didon the first one.
  23. 23. Step 9After changing all the images‟properties, we are now to create theactionscript for the images‟ timer.This is important since we wantedan auto-play image gallery.Switch to the Actions layer andselect the first frame on thetimeline.Right-click on the frame and choose„Actions‟ or simply hit F9 forshortcut.
  24. 24. …cont. ofStep 9Now we have the blank area readyfor typing the code for our timer.Just type in the window thefollowing code:var nextImage:Timer = newTimer(6000);nextImage.addEventListener(TimerEvent.TIMER, playNext);nextImage.start();functionplayNext(event:Event):void{ nextFrame();} The code will give the function to automatically start the movie, play the next image and put time interval for showing each images.
  25. 25. Step 10After putting up some actions, weneed to reset the play. This isimportant in order to play ourgallery continuously and get back tothe first image again.We just have to create anotherblank keyframe for our actionscriptto reset the time of the gallery.Just right-click on the frame (underthe Big Images layer next to the lastkeyframe) and choose „Insert BlankKeyframe‟.
  26. 26. …cont. ofStep 10Now we have a blank keyframeready for adding the actionscript.Right-click on the blank keyframeand choose „Actions‟ of simply hitF9 for shortcut.Now type in the following code onthe pop-up window shown on yourscreen:nextImage.stop();nextImage.reset();gotoAndPlay(1); This will give the function to stop the next image, reset the timer and play the first frame again.
  27. 27. Step 11Now we have to create anotherfunction that will call the imagewhen you click one of thethumbnails.Switch to Actions layer and do thesame steps of adding actionscriptsshown on the previous slides andtype the following codes (seescreenshot or see the next slide).
  28. 28. Actionscript for the buttons: stop(); ///////////////////////////First///////////////////////////// /////////////////////////Third////////////////////////////// btn1.addEventListener(MouseEvent.CLICK,play1); btn3.addEventListener(MouseEvent.CLICK,play3); function play1(event:MouseEvent):void{ function play3(event:MouseEvent):void{ nextImage.stop(); nextImage.stop(); gotoAndStop (2); gotoAndStop (4); btn1.addEventListener(MouseEvent.ROLL_OUT, btn3.addEventListener(MouseEvent.ROLL_OUT, rollout); rollout); function rollout(event:MouseEvent):void{ function rollout(event:MouseEvent):void{ nextImage.reset(); nextImage.reset(); nextImage.start(); nextImage.start(); } } } } //////////////////////////Second///////////////////////////// //////////////////////////Fourth///////////////////////////// btn2.addEventListener(MouseEvent.CLICK,play2); btn4.addEventListener(MouseEvent.CLICK,play4); function play2(event:MouseEvent):void{ function play4(event:MouseEvent):void{ nextImage.stop(); nextImage.stop(); gotoAndStop (3); gotoAndStop (5); btn2.addEventListener(MouseEvent.ROLL_OUT, btn4.addEventListener(MouseEvent.ROLL_OUT, rollout); rollout); function rollout(event:MouseEvent):void{ function rollout(event:MouseEvent):void{ nextImage.reset(); nextImage.reset(); nextImage.start(); nextImage.start(); } } } }
  29. 29. Now our image gallery is almost done but if you test themovie, you will notice that after playing the last image you willsee a fast blink. And that is some kind of a problem to me. SoI try to find an alternative to that and you will see it on the nextslide.
  30. 30. Step 12To remove the “blink effect” on ourimage gallery, we have to createblank keyframes just by clicking thefirst frames on both Thumbnails andBig Images layer. Hold Shift thendrag the frames one step.
  31. 31. …cont .ofStep 12Now you will notice that you havealready blank frames on bothThumbnails and Big Images layer.What we need to do next is to copythe first filled frame one by one onboth layers.Switch to Big Images layer andright-click on the first filled keyframeand choose „Copy Frames‟.
  32. 32. Step 13Now paste the copied frame on thefirst frame and you will see that theblank key frame is filled now.Do the steps also on Thumbnailslayer and see the result.
  33. 33. Step 14To add some spice to our imageswhen they come in, let‟s learn howto animate them in Flash CS5.So, go down to your Big Imageslayer and select the first frame thenthe image. To be able to add someanimation to our images, we needto convert them to symbols andchoose graphic as the type.
  34. 34. …cont. ofStep 14On the pop-up window, set thename of the symbol to mov1 andchange its type to Movie Clip likeshown on the screenshot.Repeat this operation for each ofthe four images. Let the namesbe movie1, movie2, movie3 andmovie4.
  35. 35. …cont. ofStep 14Now double-click the newlyconverted symbol. What we need todo now is to add 3 more layers.Same on the previous steps, right-click on the layer area and choose„Insert Layer‟ or just click the buttonbelow for shortcut.
  36. 36. …cont. ofStep 14After creating the three new layers,give them the names Content, Title,Launch and Actions. To rename alayer, double click on it and type thetext (see screenshot).
  37. 37. Step 15What to do next is to add title.Switch to Title layer and choose onthe Properties panel and press theletter „T‟ button or just hit „T‟ on yourkeyboard for shortcut to toggle „TextTool.
  38. 38. …cont. ofStep 15Now click on the stage and starttyping the title for your image.Remember to switch on the Titlelayer before putting your title on thestage.
  39. 39. Step 16Now it‟s time to add the link buttonfor the content of our image.Do the same steps on how to addtitle and what we need to add is justto convert it to button.Switch to Launch layer, type in yourtitle then click anywhere to thestage in order to set that your donetyping. Right-click on your title andchoose „Convert to Symbol‟ orsimply hit F8.
  40. 40. …cont. ofStep 16On the pop-up window, name yourbutton to btnlnk1, change its type toButton and click OK.
  41. 41. Step 17Next is to add the actionscript thatwill call the page of your image.Switch to Actions layer and right-click the blank keyframe or hit F9for you to type in the codes.
  42. 42. …cont. ofStep 17On the pop-up window, type in thefollowing codes:btnlnk1.addEventListener(MouseEvent.CLICK,fl_ClickToGoToWebPage);functionfl_ClickToGoToWebPage(event:MouseEvent):void{ navigateToURL(newURLRequest("../pages/AboutUs/news/IIMCplant_bicol.htm"), "_blank");} This actionscript will give the function to navigate the content page of the image into new tab when the button is being clicked.
  43. 43. Step 18Now it‟s time to add someanimation on our image, title and onthe link button.First, switch to the Content layer.Now choose the desired span oftime then right-click on thatparticular frame and choose „InsertKeyFrame‟ or simply hit F6 forshortcut.
  44. 44. …cont. ofStep 18You can see that it automaticallyinserts some frames; the number offrames inserted depends on yourframe rate. Let‟s cut it down to 15frames per second.Select the image on the stage. Goto the object properties,choose Alpha in the Stylemenu and put it 0%.
  45. 45. …cont. ofStep 18Click Ctrl+Enter to test your movie.You will see that the Movie playsover and over again and we don‟twant this loop happen. Stop actioncomes in handy here.Return to your movie clip window.Then go to the last frame andhit F9. Type stop() in the Actionswindow and that should fix theproblem.
  46. 46. …cont. ofStep 18Now let‟s create a sleek fade-ineffect by means of some coloreffects and motion tween.Just right-click on any area betweenthe first and last keyframe andchoose „Create Classic Tween‟.Do the same steps on both Launchand Title layer to have the sameeffects on your title and link button.
  47. 47. Step 19After having all the effects for theimages, title and link button, switchto the action layer and insert ablank keyframe same with thelength time span of the other layers.This is just to make the actionscriptavailable on the time span of thegallery while playing.
  48. 48. Step 20Another cute effect we‟re going toapply is rollover.Double click on the first button inthe thumbnail line, which is btn1.You can see four frames on yourtimeline – Up, Over, Down and Hit.These are the states of our button.•The Up frame is the inactive stage whennothing is happening, the button isdisplayed as it is.•The Over is the stage when the mousehovers over the button.•The Down frame is the stage when thebutton is clicked on.•The purpose of the Hit frame is to definethe clickable area or the coordinates ofthe button.
  49. 49. …cont. ofStep 20Now you will see that the UP frameis already filled. What we need todo is to fill the other frames andwe‟re ready to add some effects.Hit F6 to the succeeding framesone by one to fill.
  50. 50. …cont. ofStep 20Switch to UP frame and right-clickthe first thumbnail and convert it tosymbol.On the pop-up window name yournewly converted thumbnail buttonto btnup1 and select Graphic as thetype of symbol.
  51. 51. …cont. ofStep 20To add effects, you can choosewhatever kind you want. For thistutorial I‟ve chosen Tint to add coloreffects.Go to the Properties panel, click theStyle dropdown menu and choose„Tint‟ and set the tint to 50%, red to59%, green to 142%, and blue to173% (follow the highlights in red)to have this color effects for yourthumbnail button.
  52. 52. Step 21After having the color effects, weare now to create an emphasizingeffects on our thumbnail.Switch to OVER frame, right-clickthe thumbnail and convert it againto symbol. Name it btnover1 andselect Graphic as style.
  53. 53. …cont. ofStep 21Now to add an emphasizing effects,click the thumbnail and move it alittle bit higher than the otherthumbnails.
  54. 54. …cont. ofStep 21To add effects when the thumbnailis clicked, do the previous steps onhow to convert it to symbol with agraphic style and name itbtndown1.Select the Style to Tint and set thecolors to 0% (follow the highlights inred).This will give you the effect ofmaking your thumbnails color blackwhen clicked.
  55. 55. …cont. ofStep 21Move on to the Hit area and usingthe Rectangular Tool draw an areayou want to be clickable on yourthumbnails. Repeat this step for theother three thumbnails.
  56. 56. …cont. ofStep 21To get back into movie clip area,click the blue arrow button on theupper left of the stage (see thescreenshot).
  57. 57. Step 22After having all the effects for yourthumbnails, go to Control => TestMovie => Test or press Ctrl +Enter to see the result of yourimage gallery.Now you know how to create anauto-play image gallery withthumbnails and spice it with somenice effects.
  58. 58. Final Result
  59. 59. References • How To Create A Simple Image Gallery In Flash CS4 http://tuts.flashmint.com/how-to-create-a-simple- image-gallery-in-flash-cs4/ • Flash Tutorial: Create A Simple Image Gallery! -HD- http://www.ilmugrafis.us/flash-tutorial-create-a-simple- image-gallery-hd.html • Flash Slideshow Image Gallery http://layersmagazine.com/flash-slideshow-image- gallery.html
  60. 60. Comments and Suggestions? If you have questions or suggestions regarding to this tutorial, please send me your email at mendozalyndeorge@yahoo.com. Thank you!