webdude77
asked on
Flash 5: animation fade in from 0% to 100% opacity; then out; then display "replay" text
I am using Flash 5. I have a preloader and then an animation.
1.) I'd like to fade in from the preloader to the animation's first image. So, once the preloader reaches 100% loaded, it starts the animation. Once, it reaches 100%, I'd like the screen to be white, and then slowly fade from 0% opacity to 100% opacity (for that first image) in about 3 seconds. Then the animation would run as normal.
2.) Then, I'd like the final frame of the animation to fade from 100% opacity to 0% opacity (white).
3.) Instead of having the animation constantly looping, once the animation finishes, I would like "Replay" text to appear in which the user could click "Replay" if he/she wishes to play the animation a second time, third time, etc. I'd like the animation to start after the preloader (since it will already be loaded!)
I am using this for my preloader:
--
Frame 1... (in the actionscript panel)
bytes_loaded = Math.round(this.getBytesLo
bytes_total = Math.round(this.getBytesTo
getPercent = bytes_loaded/bytes_total;
this.loadText = Math.round(getPercent*100)
if (bytes_loaded == bytes_total) {
this.gotoAndPlay(3);
}
--
Frame 2... (in the actionscript panel)
this.gotoAndPlay(1);
--
How can this be accomplished?
1.) I'd like to fade in from the preloader to the animation's first image. So, once the preloader reaches 100% loaded, it starts the animation. Once, it reaches 100%, I'd like the screen to be white, and then slowly fade from 0% opacity to 100% opacity (for that first image) in about 3 seconds. Then the animation would run as normal.
2.) Then, I'd like the final frame of the animation to fade from 100% opacity to 0% opacity (white).
3.) Instead of having the animation constantly looping, once the animation finishes, I would like "Replay" text to appear in which the user could click "Replay" if he/she wishes to play the animation a second time, third time, etc. I'd like the animation to start after the preloader (since it will already be loaded!)
I am using this for my preloader:
--
Frame 1... (in the actionscript panel)
bytes_loaded = Math.round(this.getBytesLo
bytes_total = Math.round(this.getBytesTo
getPercent = bytes_loaded/bytes_total;
this.loadText = Math.round(getPercent*100)
if (bytes_loaded == bytes_total) {
this.gotoAndPlay(3);
}
--
Frame 2... (in the actionscript panel)
this.gotoAndPlay(1);
--
How can this be accomplished?
ASKER
Yes, I am a beginner and don't know actionscript. Thanks for the help so far.
Ok, so for the Scene one, preloader. You could use this code (below).
Make dynamic textbox on frame one.
Set its variable (from text options) to _root.c (to show percentage that has been loaded).
Add code to frame one (described below)
Add new keyframe to frame 2 and add code (described below)
Make dynamic textbox on frame one.
Set its variable (from text options) to _root.c (to show percentage that has been loaded).
Add code to frame one (described below)
Add new keyframe to frame 2 and add code (described below)
//Scene one, frame one
a = getBytesLoaded();
b = getBytesTotal();
c = Math.ceil((a/b)*100)+"%";
if (a == b) {
nextScene ();
}
//Scene one, keyframe 2
gotoAndPlay (1);ASKER
In Scene 1, which I called "preloader", I now have:
KeyFrame 1: Dynamic Text Box with variable name "_root.c" and the actionscript:
a = getBytesLoaded();
b = getBytesTotal();
c = Math.ceil((a/b)*100)+"%";
if (a == b) {
nextScene ();
}
KeyFrame 2: the actionscript:
gotoAndPlay (1);
In Scene 2, which I call "Animation", I have just the single layer animation.
--
So, when I do an F12 to preview, it just shows the white screen, no percentages, nor does it advance to the next scene. What am I a doing wrong?
Do my scenes need to be named 1 and 2? Sequentially, they appear in this order: preloader, animation.
Also, how does this affect the fade-in that you described as below. I'll try to get the above working, and then I'll try to add the 3rd scene into the mix.
Scene 2 for the desired effect
-Use alpha tween
-Jump to Scene 3 and play
KeyFrame 1: Dynamic Text Box with variable name "_root.c" and the actionscript:
a = getBytesLoaded();
b = getBytesTotal();
c = Math.ceil((a/b)*100)+"%";
if (a == b) {
nextScene ();
}
KeyFrame 2: the actionscript:
gotoAndPlay (1);
In Scene 2, which I call "Animation", I have just the single layer animation.
--
So, when I do an F12 to preview, it just shows the white screen, no percentages, nor does it advance to the next scene. What am I a doing wrong?
Do my scenes need to be named 1 and 2? Sequentially, they appear in this order: preloader, animation.
Also, how does this affect the fade-in that you described as below. I'll try to get the above working, and then I'll try to add the 3rd scene into the mix.
Scene 2 for the desired effect
-Use alpha tween
-Jump to Scene 3 and play
ASKER
Okay, I figured out that I needed to pay attention to Scene names. I updated the action script to this and the percentages show and it advances to the animation:
gotoAndPlay ("animation", 1);
Now that I have the preloader working as a separate Scene, how I do the scene transitions with the fading and how exactly do I insert the "stop and replay-button"?
gotoAndPlay ("animation", 1);
Now that I have the preloader working as a separate Scene, how I do the scene transitions with the fading and how exactly do I insert the "stop and replay-button"?
So, in Scene two.
Take the image you wan't and convert it to a symbol (graphic).
Then make a tween with alpha effect.
Alpha & Tweening explained here;
http://www.grographics.com/wiki/index.php/BasicFlashAnimation
When the desired effect is achieved, go to scene's last frame and tell it to Scene 3, frame 1.
Go to scene 3 last frame, and add stop(); to the frame actions.
On the same frame, add text replay and convert it to a symbol(button).
Add action to the button trough object actions (code below).
Hope this helps.
I would recommend to search the net for tutorials concerning basics. It's not allways fun to do simple annoying things, but when you have learnt enough, you know how to do something different by combining the basic methods.
And warm welcome to the world of flash.
Take the image you wan't and convert it to a symbol (graphic).
Then make a tween with alpha effect.
Alpha & Tweening explained here;
http://www.grographics.com/wiki/index.php/BasicFlashAnimation
When the desired effect is achieved, go to scene's last frame and tell it to Scene 3, frame 1.
Go to scene 3 last frame, and add stop(); to the frame actions.
On the same frame, add text replay and convert it to a symbol(button).
Add action to the button trough object actions (code below).
Hope this helps.
I would recommend to search the net for tutorials concerning basics. It's not allways fun to do simple annoying things, but when you have learnt enough, you know how to do something different by combining the basic methods.
And warm welcome to the world of flash.
//Replay-button
on (release){
gotoAndPlay ("Scene2", 1);
}
You won't propably see the preloader working because the file doesn't have enough data. But if file is enough large and it's online, you will see it working.
One way to test it would be to stop the movie when loading is done. Then inform that movie is fully loaded and request a button press before continuing the play.
One way to test it would be to stop the movie when loading is done. Then inform that movie is fully loaded and request a button press before continuing the play.
ASKER
Very helpful. I've accomplished the fading by tweening thanks to your guidance.
For the "replay" button, I tried looking at the actions for Up/Over/Down/Hit, specifically "Hit", becase I imagine this is like a clickthrough. Most of the actions are greyed out (unselectable), while only a few unrelated ones are highlighted in green (selectable).
Because I couldn't add the actionscript to the button itself, I tried putting the 2 action scripts on the keyframe. This didn't work, but this isn't quite what you recommended. I just tried it because the button actions weren't working:
stop ();
on (release){
gotoAndPlay ("smartsips", 1);
}
Any thoughts? Oh, and I will get more acclimated with tutorials in the near future. I just need to get this out the door. Thanks again.
For the "replay" button, I tried looking at the actions for Up/Over/Down/Hit, specifically "Hit", becase I imagine this is like a clickthrough. Most of the actions are greyed out (unselectable), while only a few unrelated ones are highlighted in green (selectable).
Because I couldn't add the actionscript to the button itself, I tried putting the 2 action scripts on the keyframe. This didn't work, but this isn't quite what you recommended. I just tried it because the button actions weren't working:
stop ();
on (release){
gotoAndPlay ("smartsips", 1);
}
Any thoughts? Oh, and I will get more acclimated with tutorials in the near future. I just need to get this out the door. Thanks again.
ASKER
FYI... For the fade/tween, when I convert one of my 350 x 500 jpg images to a symbol, Flash seems to slightly alter the image (it looks like part of the image is stretched by 1 pixel). I checked that the X and Y locations of instance were the same as the others. This is 1 pixel alteration throws things off due to the nature of the fade & animation. Well, I'll keep troubleshooting. Just an FYI...
ASKER
It appears that when using Effects > Alpha, when the slider is at 100% the image is normal. When the slider is changed to 99% or anything lower, the image is altered by 1 pixel (the image gets bloated in the middle by 1 extra pixel). Why is this occurring?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If I am understanding your problem right;
You need to put code on the buttons actionpanel...No need to enter the movieclips editing mode. Just edit the movieclips action on the stage... Just click the replay-button, so its active. Then enter actions-button. And add the code...
You need to put code on the buttons actionpanel...No need to enter the movieclips editing mode. Just edit the movieclips action on the stage... Just click the replay-button, so its active. Then enter actions-button. And add the code...
Problem solved?
ASKER
Haven't had time these last few days to follow up on this last post. Will check it out soon... thanks for your help. I'll post again soon...
Requesting to close this thread.
Scene 1 for preloader
-When movie is fully loaded go to Scene 2
Scene 2 for the desired effect
-Use alpha tween
-Jump to Scene 3 and play
Scene 3 for the actual movie
-In the last frame, add stop and replay-button with function that goes to the beginning of scene 3 and plays it.
This is how I would do it.
In flash, only your imagination is the limit, so this is only one way to accomplish it.
Do you need help with the actionscript itself?