Creating a sliding effect using flash cs5 with action script 3.0

Posted on 2011-09-30
Last Modified: 2012-05-12
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
click on the welcome link  and see how the welcome section slides out.
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.

Question by:Sirdots
  • 8
  • 5

Expert Comment

ID: 36892073
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.

Author Comment

ID: 36892188
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.


Expert Comment

ID: 36892516
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 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!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 36892846
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_btn.alpha = .25


Expert Comment

ID: 36893656
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.alpha = .25" will be fine (flash is case sensitive) since you are accessing that specific movie clip, and not the main stage.

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?

Author Comment

ID: 36893712
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.

Author Comment

ID: 36894090
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

Accepted Solution

Jen0910 earned 500 total points
ID: 36894120
Here is the example. I took it one step further and included how to make it collapse again. Hope this helps!

Author Comment

ID: 36894175
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.

Author Comment

ID: 36894272
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.

Expert Comment

ID: 36894620
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.

Author Comment

ID: 36894696
Thanks. I will play with it and end this now. I will post other questions if I have any.

Author Closing Comment

ID: 36894701
Excellent job. Thanks.

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question