Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
How can I make a flash picture animation
0 views
Skip to first unread message
atomic king
Oct 13, 2008, 6:07:17 PM10/13/08
to
Hi I havent used Flash before however want to get into it. I would like to
start by building a picture animation and link as on the bottom of the page
http://www.islandrealestate.com/index.cfm stating Roatan Real Estate. It looks
easy. I would be happy if someone can let me know how to do this or forward me
a tutorial which can help me.
start by building a picture animation and link as on the bottom of the page
http://www.islandrealestate.com/index.cfm stating Roatan Real Estate. It looks
easy. I would be happy if someone can let me know how to do this or forward me
a tutorial which can help me.
SCBrazil
Oct 14, 2008, 2:39:26 AM10/14/08
to
Okay, I'll go through this as if you have never used Flash (ever) before.
1. Open Flash
2a. Double click "Layer 1" and name it "background" - put your long background
beach pic in there (file - import - import to stage). I suggest you have the
photos you want to use at hand in a separate folder and preferably sized the
way you want them (although you can do this easily in Flash, it will just make
the whole process more confusing).
2b. Now go to "modify" choose the first option "document" and then "contents".
Done! Now...
3. Right click over the name "background" layer, choose "insert layer".
4. Double click this new layer (2x click the actual name) and name it "pic01".
Drag it so it is below "background" layer.
(observation - if you look at the video on the site you mentioned - you will
be able to count 7 layers - the long background beach pic is one, four small
pics appearing are another four and two layers of text. For each 'action' in
Flash you will create a new layer)
5. Now right click in frame 20 of "pic01" and choose "insert keyframe" - frame
20 of "pic01 layer" should now be shaded black. If it isn' t, single click it
and it will become shaded black.
6. Again - (file - import - import to stage) get your first little island pic,
size it and position it on your movie.
7. Now right click on "pic01" choose "insert new layer" - name it "pic02".
Drag it to below "pic01". You now should have three layers - "background",
"pic01" and "pic02".
8. Repeat step 5 but this time do it on layer "pic02" and do it at frame 40.
9. Repeat until all your little pics are in there - (new layer - 20 frames
ahead of the last one - 'insert keyframe' so that layer 7 should have a
'keyframe' on frame 120.)
1. Open Flash
2a. Double click "Layer 1" and name it "background" - put your long background
beach pic in there (file - import - import to stage). I suggest you have the
photos you want to use at hand in a separate folder and preferably sized the
way you want them (although you can do this easily in Flash, it will just make
the whole process more confusing).
2b. Now go to "modify" choose the first option "document" and then "contents".
Done! Now...
3. Right click over the name "background" layer, choose "insert layer".
4. Double click this new layer (2x click the actual name) and name it "pic01".
Drag it so it is below "background" layer.
(observation - if you look at the video on the site you mentioned - you will
be able to count 7 layers - the long background beach pic is one, four small
pics appearing are another four and two layers of text. For each 'action' in
Flash you will create a new layer)
5. Now right click in frame 20 of "pic01" and choose "insert keyframe" - frame
20 of "pic01 layer" should now be shaded black. If it isn' t, single click it
and it will become shaded black.
6. Again - (file - import - import to stage) get your first little island pic,
size it and position it on your movie.
7. Now right click on "pic01" choose "insert new layer" - name it "pic02".
Drag it to below "pic01". You now should have three layers - "background",
"pic01" and "pic02".
8. Repeat step 5 but this time do it on layer "pic02" and do it at frame 40.
9. Repeat until all your little pics are in there - (new layer - 20 frames
ahead of the last one - 'insert keyframe' so that layer 7 should have a
'keyframe' on frame 120.)
If you get to this part okay, post again and I'll explain the rest. If you get
any problems with this first part, post them and we'll sort them out before
moving on.
atomic king
Oct 14, 2008, 12:27:47 PM10/14/08
to
Thanks Buddy, will do your steps and then get back to you. Thanks a lot. Q
sgaeshoppe
Oct 14, 2008, 1:03:30 PM10/14/08
to
Do these steps also work for a html website?
SCBrazil
Oct 14, 2008, 1:43:59 PM10/14/08
to
Don't really know what you are asking my friend;- is it done in HTML or can it
be included in a HTML website?
Flash doesn't use HTML so you won't be able to code it this way. In fact,
basic Flash uses no code at all and is built visually. It would be possible to
build the ad linked by the original poster without any kind of coding. However,
when needed, Flash uses a code called ActionScript, not HTML.
The ad in question was probably made in a program called Flash CS3
Professional (30 day trial available here on the Adobe site) or something
similar and then included on the guy's HTML website. This is done in
Dreamweaver by choosing "insert - media - flash) and going to your ready made
Flash video created with the Flash CS3 program. It's the same principle as
including a photo on your site. The photo wasn't made in HTML but is easily
included in a site built in HTML.
Dreamweaver does have a 'Timeline' function which works in the same principles
as Flash but it is more limited.
Hope one of those answers your question.
be included in a HTML website?
Flash doesn't use HTML so you won't be able to code it this way. In fact,
basic Flash uses no code at all and is built visually. It would be possible to
build the ad linked by the original poster without any kind of coding. However,
when needed, Flash uses a code called ActionScript, not HTML.
The ad in question was probably made in a program called Flash CS3
Professional (30 day trial available here on the Adobe site) or something
similar and then included on the guy's HTML website. This is done in
Dreamweaver by choosing "insert - media - flash) and going to your ready made
Flash video created with the Flash CS3 program. It's the same principle as
including a photo on your site. The photo wasn't made in HTML but is easily
included in a site built in HTML.
Dreamweaver does have a 'Timeline' function which works in the same principles
as Flash but it is more limited.
Hope one of those answers your question.
atomic king
Oct 14, 2008, 8:46:15 PM10/14/08
to
Hi Thanks again. I managed all the pics and frame rates so far. Havent added
the text animations as I dont know how best to get that part done and how to
get proper graphics in them. Even though the background pic is there, it is not
showing up behind the little ones although it is on the very top of the layers
and I clicked send to back???
the text animations as I dont know how best to get that part done and how to
get proper graphics in them. Even though the background pic is there, it is not
showing up behind the little ones although it is on the very top of the layers
and I clicked send to back???
Furthermore, if I play the flash movie all the little pics show up and
disappear toward the end of the frames. So I think I need to change something
there in the keyframe aswell but dont know what exactly to get them to display
one after the other. I could send it to your email for you to have a look if
you dont mind. Thanks again.
SCBrazil
Oct 14, 2008, 11:17:30 PM10/14/08
to
Okay, now we can put in the animation. You should get a good idea of how the
thing works doing this although the transitions may be a little faster than you
hoped for. You will sort that out easily later on.
One other thing before we start - your "background layer" should be dragged to
the bottom, not the top. My mistake. It may also be a good idea to lock it or
make it invisible while you are working on the animation - click on the 'eye'
and 'padlock' symbol right next to its name.
Okay, now for the animation.
1. You should have a keyframe inserted at frame 20 of your layer 'pic01'. Now
insert another one at frame 30.
2. Right click on any frame in between 20 and 30 and choose the first option,
'create motion tween'. The space in between frames 20 and 30 should go a lilac
colour with an arrow between them.
3. Now left click once exactly on frame 20 then left click once on the
photograph itself. At the bottom of your page, in the 'properties' window you
should be able to see some drop down boxes and one of them entitled 'color'
with a 'none' default option.
4. Click here, choose 'Alpha' and drag the bar down to zero. Your photo should
disappear.
5. Now repeat this but this time left click once exactly on frame 30 of your
'pic 01' layer. Left click once on the photo itself, go to color - alpha and
this time drag it up to 100%. You photo should reappear.
6. Mess around with the playhead (red line indicating frames) to see this fade
in/out effect.
7. Now do the same for all of your photos - insert a second keyframe exactly
10 frames ahead of the first one and repeat steps 3 to 7.
8. That done. What you should have now is a movie that fades in a photo, then
flicks out before fading in a second photo. To get the continuous effect of one
fading in and staying, you just need to insert a frame (NOT a keyframe) for all
layers at the very end of the movie. By my calculations, this should be around
frame 120 (20 frames after the last keyframe). To do this, just right click on
each layer at frame 120 and choose 'insert layer.'
9. Play this movie. You can change the speed of the fade in by either
extending the distance between each keyframe (do the whole thing again) or by
reducing the Frames per Second (fps) in "modify" - "document".
10. To do the text just extend your "background layer" some more, say another
60 frames. Do this by right clicking at the desired frame (make sure you are
working on your "background layer") and choosing "insert frame".
11. Now make a new layer and call it "text01". Right click on this layer at
frame 120 (or 20 frames after your photos end), 'insert a keyframe'.
12. Choose the "T" (text tool" from the left margin, drag open the text box
and write your text.
13. That done, go back up to "text01" layer, right click 20 frames further on
and insert another keyframe.
14. Repeat this process for "text02" in a new layer.
If you get to here okay you should have learnt enough to play around with
Flash and make an ad even better than the one you linked to. Good luck!
There are some good Flash tutorials on the web, I like this one
http://flash-creations.com/notes/intro_whatisflash.php
Feel free to email me, the address is in your private message box.
thing works doing this although the transitions may be a little faster than you
hoped for. You will sort that out easily later on.
One other thing before we start - your "background layer" should be dragged to
the bottom, not the top. My mistake. It may also be a good idea to lock it or
make it invisible while you are working on the animation - click on the 'eye'
and 'padlock' symbol right next to its name.
Okay, now for the animation.
1. You should have a keyframe inserted at frame 20 of your layer 'pic01'. Now
insert another one at frame 30.
2. Right click on any frame in between 20 and 30 and choose the first option,
'create motion tween'. The space in between frames 20 and 30 should go a lilac
colour with an arrow between them.
3. Now left click once exactly on frame 20 then left click once on the
photograph itself. At the bottom of your page, in the 'properties' window you
should be able to see some drop down boxes and one of them entitled 'color'
with a 'none' default option.
4. Click here, choose 'Alpha' and drag the bar down to zero. Your photo should
disappear.
5. Now repeat this but this time left click once exactly on frame 30 of your
'pic 01' layer. Left click once on the photo itself, go to color - alpha and
this time drag it up to 100%. You photo should reappear.
6. Mess around with the playhead (red line indicating frames) to see this fade
in/out effect.
7. Now do the same for all of your photos - insert a second keyframe exactly
10 frames ahead of the first one and repeat steps 3 to 7.
8. That done. What you should have now is a movie that fades in a photo, then
flicks out before fading in a second photo. To get the continuous effect of one
fading in and staying, you just need to insert a frame (NOT a keyframe) for all
layers at the very end of the movie. By my calculations, this should be around
frame 120 (20 frames after the last keyframe). To do this, just right click on
each layer at frame 120 and choose 'insert layer.'
9. Play this movie. You can change the speed of the fade in by either
extending the distance between each keyframe (do the whole thing again) or by
reducing the Frames per Second (fps) in "modify" - "document".
10. To do the text just extend your "background layer" some more, say another
60 frames. Do this by right clicking at the desired frame (make sure you are
working on your "background layer") and choosing "insert frame".
11. Now make a new layer and call it "text01". Right click on this layer at
frame 120 (or 20 frames after your photos end), 'insert a keyframe'.
12. Choose the "T" (text tool" from the left margin, drag open the text box
and write your text.
13. That done, go back up to "text01" layer, right click 20 frames further on
and insert another keyframe.
14. Repeat this process for "text02" in a new layer.
If you get to here okay you should have learnt enough to play around with
Flash and make an ad even better than the one you linked to. Good luck!
There are some good Flash tutorials on the web, I like this one
http://flash-creations.com/notes/intro_whatisflash.php
Feel free to email me, the address is in your private message box.
atomic king
Oct 16, 2008, 11:26:38 AM10/16/08
to
Just emailed u. Thanks Again.
0 new messages