Sunday 21 April 2013

Adobe Flash - Next Page Button


Adobe Flash – Next Page Button

Open Adobe Flash and choose Action Script 2.0
In your stage draw an arrow key or any arrow that describes to view to next page or preview.
Like this:

So what I used here is line tool (N) and fills it with paint bucket (K) color red.
Lets then press right click on our arrow and select convert to symbol.
Name: next
Type: button
Like this:


Use rectangle tool (R).
Go to its properties then change stroke color with black and fill color with light orange.
Like this:


With our rectangle tool on use, draw a rectangle that would fit the stage you have.
Use selection tool (V) and move the arrow button right down on the stage.
Like this:


Use text tool then create any kind of message just above the arrow button.
Example:


Select your arrow button with selection tool (V) then right click and select action.
For our button to work we need to apply some coding in our arrow button.
Copy this code and paste it on your action script:

on(press){
gotoAndStop(2);
}

Let me explaine the coding its simple.
Here you have on(press{gotoandStop(2);}
The press with simply speaks for its action then go to and stop then you notice a closing parenthesis and the number.
The number is the number of your playhead in your timeline.
Let just say that starting from your 1st playhead going to your 6th playhead when you declared gotoandstop(6) the moment you press the next button it will automatically go and stop to that playhead.


In your timeline layer 1 we need to insert a keyframe in our 2nd playhead or simply just prses F6 for shortcut.
After inserting a keyframe you should be in your 2nd playhead by now and have the same thing as you have in your 1st playhead.
Now, I want you to change the text message and change the pointing direction of your arrow button going left by using transforming tool (Q) just rotate it.
Move the arrow button to your left side.
Like this:


Right click on our new arrow button then select action and change the number in your coding gotoandStop(1).
Like this:


Now try to see your progress by hitting Ctrl+Enter.

As you can see the whole thing is not finish yet cause the animation would only loop from the 1st playhead to the 2nd.
To fix it, we need to add some few codes on your keyframe.
Right on your 1st playhead keyframe then select action and copy this code:


In your 2nd playhead you need to have the same code as your 1st playhead.
After in your timeline layer 1 your 1st and 2nd playhead keyframe should have the same look as this:



Hold Ctrl and press Enter,
After you should be at your 1st playhead go ahead and press your arrow button if it works then after you press the button you should be at the next playhead.
Again press the arrow button and see if you will go back to your 1st playhead.


















No comments:

Post a Comment