[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


Creating a sliding effect using flash cs5 with action script 3.0

Posted on 2011-09-30
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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!
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


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 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

656 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