Sirdots
asked on
Creating a sliding effect using flash cs5 with action script 3.0
I am building a flash website and will like to use this sliding style
Please take a look at the link below as this explains it
http://www.dupsyandjyde.com/
click on the welcome link and see how the welcome section slides out.
QUESTION 1.
a. when you click on the welcome link the welcome page loads and the welcome section slides out
b. when you click on the > sign it slides back in
c. When you click on the < sign it slides back out
d. Notice that the sliding is smooth and not too fast
e. Notice that the welcome section does not slide over the links
f. Notice how this section(welcome section) is transparent and we can see what is in the background.
i started by drawing a rectangle and tried to drop a button on the rectange so that I can click on the button to do the slide in. When I run it, I get an error saying I dont have access to the button.
How can i do something like this please. A little step by step approach will be helpful. Just started using flash 3 weeks ago but have good programming knowledge.
I am using flash cs5 with actions script 3. I guess the challenge (starting point) is to get the button sit on the rectangle and group both and still be able to make the button clickable. This way the rectangle with the button on it can slide back and forth. Maybe am wrong with my thinking.
Please take a look at the link below as this explains it
http://www.dupsyandjyde.com/
click on the welcome link and see how the welcome section slides out.
QUESTION 1.
a. when you click on the welcome link the welcome page loads and the welcome section slides out
b. when you click on the > sign it slides back in
c. When you click on the < sign it slides back out
d. Notice that the sliding is smooth and not too fast
e. Notice that the welcome section does not slide over the links
f. Notice how this section(welcome section) is transparent and we can see what is in the background.
i started by drawing a rectangle and tried to drop a button on the rectange so that I can click on the button to do the slide in. When I run it, I get an error saying I dont have access to the button.
How can i do something like this please. A little step by step approach will be helpful. Just started using flash 3 weeks ago but have good programming knowledge.
I am using flash cs5 with actions script 3. I guess the challenge (starting point) is to get the button sit on the rectangle and group both and still be able to make the button clickable. This way the rectangle with the button on it can slide back and forth. Maybe am wrong with my thinking.
Jen0910
You need to make a movie clip with your actionscript on one layer, the panel that slides on one layer, and the button(s) to activate it on another layer. Within the MC, draw your rectangle and right click-->convert to symbol. Make it an image symbol, then in your properties panel you can set an alpha value to make it semi-transparent and achieve your letter f effect. Then, you can duplicate that movie clip for each instance you want it to appear.
ASKER
Thanks Jen. This is not clear. First you said I should make a movie clip with actionscript on one layer, then draw a rectangle and right click......
Here is what I did if this might help
1. Draw a rectangle on the stage and coverted it to a movie clip
2. On a second layer, I dropped a button from the windows .. components section.
Can you itemize what you want me to try?
I need the rectangle and the button to slide together. if I group both it doesnt work.
Here is what I did if this might help
1. Draw a rectangle on the stage and coverted it to a movie clip
2. On a second layer, I dropped a button from the windows .. components section.
Can you itemize what you want me to try?
I need the rectangle and the button to slide together. if I group both it doesnt work.
Hmm. It is pretty well itemized above, maybe arranging this way will help?
Create a blank a movie clip.
place actionscript on one layer.
place the panel (your rectangle) that slides on one layer.
place the button(s) to activate it on another layer.
Convert your rectangle to an image symbol by right clicking on it...select convert to symbol.
Go to properties panel and set an alpha value for the level of transparency you would like.
The reason why you place them both in an MC is because you need to animate the MC from your parent timeline to get them to both move together. You are creating an actionscript layer within the MC for all of the content you will be placing within it after it's created (the sample site you gave has many animations, text and other items on those panels).
The reason why you are right clicking and converting the rectangle you are drawing to a symbol is because everything you work with should always be a symbol, especially if it's ever going to be moving or animated in any way. Also, it allows you more freedom in your file.
I cannot comment on dragging a button from the component window as i always draw my buttons on the stage, right click -->convert to button symbol. Not sure if a component button is any different.
Have you worked in flash much? Perhaps you should take a few tutorials to familiarize yourself with how it functions. I recommend Lynda. It's very detailed and you can start with a free trial.
Hope that is more clear for you!
Create a blank a movie clip.
place actionscript on one layer.
place the panel (your rectangle) that slides on one layer.
place the button(s) to activate it on another layer.
Convert your rectangle to an image symbol by right clicking on it...select convert to symbol.
Go to properties panel and set an alpha value for the level of transparency you would like.
The reason why you place them both in an MC is because you need to animate the MC from your parent timeline to get them to both move together. You are creating an actionscript layer within the MC for all of the content you will be placing within it after it's created (the sample site you gave has many animations, text and other items on those panels).
The reason why you are right clicking and converting the rectangle you are drawing to a symbol is because everything you work with should always be a symbol, especially if it's ever going to be moving or animated in any way. Also, it allows you more freedom in your file.
I cannot comment on dragging a button from the component window as i always draw my buttons on the stage, right click -->convert to button symbol. Not sure if a component button is any different.
Have you worked in flash much? Perhaps you should take a few tutorials to familiarize yourself with how it functions. I recommend Lynda. It's very detailed and you can start with a free trial.
Hope that is more clear for you!
ASKER
Thanks again Jen0910. I am a beginner in flash and have read a couple of books and seen some video.
I will try Lynda
Here is what I did.
I created a blank movie clip and I guess the reason you ask me to do this is to make it serve as a container for my button which will hold both the button and the rectangle.
When I created this blank movie clip, this was added to the library and gave me a symbol-editing mode with a cross hair indicating the symbol’s registration point.
Is this the point where you want me to create layers for my rectangle and the button ?
If yes..
I did that and went and dragged the main container I created called(container) and dragged it to the stage. It had the rectangle and button I created but I could not gain access to the button via code(action script)
this.Container_mc.mybtn1_b
I will try Lynda
Here is what I did.
I created a blank movie clip and I guess the reason you ask me to do this is to make it serve as a container for my button which will hold both the button and the rectangle.
When I created this blank movie clip, this was added to the library and gave me a symbol-editing mode with a cross hair indicating the symbol’s registration point.
Is this the point where you want me to create layers for my rectangle and the button ?
If yes..
I did that and went and dragged the main container I created called(container) and dragged it to the stage. It had the rectangle and button I created but I could not gain access to the button via code(action script)
this.Container_mc.mybtn1_b
For that line of code, you need to give the button an instance name of mybtn1_btn on your properties panel.
You also do not need "this" in there. "Container_mc.mybtn1_btn.a
I'm at work now (don't tell on me!), if you can wait until i have a chance to upload an example FLA file for you, I have no problem doing that. Do you have availability to wait a few hours?
You also do not need "this" in there. "Container_mc.mybtn1_btn.a
I'm at work now (don't tell on me!), if you can wait until i have a chance to upload an example FLA file for you, I have no problem doing that. Do you have availability to wait a few hours?
ASKER
Thanks. I can wait. You are very kind. Once I get this one, I should be fine. I am using flash cs 5.5. Code hinting is not working at all. I will try to figure that out why code hinting is not working for me. Am looking forward to the sample.
ASKER
Thanks again Jen0910. I was able to get it to work. At least i can move on to the next stage . I have the button and the rectangle move together now and If i click on the button it works using trace("you clicked me") as an example. I guess you dont have to send the fla file again.
If you can assist me with the code hinting problem, that will be great. I am unable to get code hinting to work and tried a lot of fixes I found online. I am using Adobe flash cs5.5
If you can assist me with the code hinting problem, that will be great. I am unable to get code hinting to work and tried a lot of fixes I found online. I am using Adobe flash cs5.5
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Jen0910. This is very nice of you. Great work. I will learn it. One last thing, If I increase the size of the page i.e maximize it then I am able to see everything going on. Is there are way to correct that?
Thank you so much.
Thank you so much.
ASKER
I am trying to figure out what you did now. What is collapse_btn. I can see that it is blank when you drag it on the stage.
it's not blank. it's white as it appears when you preview the swf. change your base stage color and you will see it. to preview the SWF, press command+return on a mac, or control+ return on a PC. You can also go to Control-->test movie-->test.
ASKER
Thanks. I will play with it and end this now. I will post other questions if I have any.
ASKER
Excellent job. Thanks.