Making Simple Sequence Of Photos Blending Into Each Other
Could someone help me please. I'm pretty new to flash and want to make a sequence of photos that blend into each other and play on a loop. Each photo appearing for about 3 or 4 seconds. I know the basics but if you could take the time to be as detailed as possible that would be AMAZING!
I also want to link each photo to a specific page on my website - could you let us know how to do this too - I think you convert it to a button but I don't understand the GetURL bit really!
After that, what I hope to do is add a rollover effect so when you hover over a specific photo, some text appears.
I'm using Flash CS4.
I would really appreciate ANY HELP!!
Thanks in advance
if you are still needing help on this, let me know. check out this very simple demo i made of 3 pics doing exactly what you are saying: fading from one to the other, having rollover text to describe each one, clicking to navigate to a new web page ( in this case, especially for demonstration purposes, i have it opening in a new browser window. make sure your browser will allow this). the pictures are a continual loop
1) this was done in CS3 AS3 and not CS4 like you have ( i don't think that will matter)
2) you say you are new ( a novice) so i made this SIMPLE. it is all timeline based. that will be frowned upon by experienced coders, who would want to do it all in code. of course that can be done that way, but it might be over your head. this will give you all the functionality you want and need, and is easy to change and modify
3) just for the heck of it, the first pic will open up the CreativeCow page of your question. pic 2 opens up ebay home page and pic 3 opens up Youtube home page
if this is what you ( or anyone else) wants, i will post the code, and give you a download for the FLA to use and modify, and a short tutorial onit.
Many thanks for the reply - yeah it would be great if you could take the time to explain - I'd appreciate it!
OK- here goes. once again, this is all Timeline based stuff- rather ' old school' when it comes to Flash, but it still gets the job done!
I'll take you at your word that you know the 'basics'. let me know if you want further clarification.
1) Prepare your images for importing. they should be at the same size and resolution that they will be used in your document. Mine were sized in Photoshop to 400 x 300 @ 72 dpi.
2) import your images to the Library.
3) drag the first image out to the stage on Layer 1. position it where you want it.
4) Convert that image into a Symbol - a Button symbol. Double click this new Button to enter its timeline.
5) add a Keyframe to the Over state, and now add whatever text or additional stuff you want to appear on the rollover state. use additional layers if neccesary.
6) return to original scene. now Convert that Button Symbol into a MovieClip Symbol. Give this MovieClip an instance name in the Properties Inspector. I'll call mine "btn1"
7)now, let's assume your movie is set at 12 fps. you want the image to remain for 3 seconds, so that is 36 frames. after that, it will take 5 frames to fade out.
8) so add a Keyframe on this Layer to frame 36(where the fadeout begins), another one on frame 41(where the fade ends) then also on frame 118 and 123(for the 'fade in). then add a Blank Keyframe on frame 42 ( just so it removes the image altogether between frames 41 and 118.)
9) Click on a frame between frames 36 and 41. Add a Motion Tween between these frames.
10) on frame 41, click on the instance of btn1 on the stage. from the Properties apnel, change its alpha to 0. now you have the image/button showing for 36 frames ( 3 seconds), then fading out on frame 41 and disappearing on frame 42.
11) add a Motion Tween between frames 118 and 123.
12) on the stage, click on the image in frame 118. change its alpha to 0. now this transition will make it re-appear as it loops back to frame 1
13) add a Layer and name it Actions. these will make the button click work to send you to the other pages on your website.
14) on Frame 1, add this code in the Actions Panel:
(use your website page, obviously)( change '_blank' to '_self' if you want the page to open in the same browser window rather than a new one)
15) add a new Layer above Layer 1. on this Layer 2 , add a new Keyframe on frame 36.
16) drag out from the Library your second image. make it a button, then a MovieClip like you did the first one. give it an instance name of "btn2".
17) add additional Keyframes on this layer 2 on frames 41, 77, and 82. and a Clear Keyframe on frame 83.
18) add Tweens between frames 36 and 41 , and between frames 77 and 82.
19) change the alpha of this image to 0 on frrames 36 , and on frame 82.
20) on the Actions Layer, copy the actions from frame 1 and paste it into the Actions panel on frame 41. change the code from "btn1" to "btn2". change the name of your webpage to wherever you wnat it to go. change the name of the function from 'page1' to 'page2'. change it also on the line with the event Listener.
do this for as many images you have. i used 3 in my example. here is a screenshot of the timeline.
hope this makes sense for you,and that it helps. let us know. and also, let us see how you use it in your website !
Timeline screenshot can be seen at : http://demetri-media.com/Sven/fade.jpg
original example at: http://demetri-media.com/Sven/fadeTest.html
Thanks very much for the info - will try all that and let you know how i get on and give you web address once its in place!
Thanks again for the time