Solved

Creating a sliding effect using flash cs5 with action script 3.0

Posted on 2011-09-30
13
576 Views
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
 
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.

0
Comment
Question by:Sirdots
  • 8
  • 5
13 Comments
 
LVL 8

Expert Comment

by:Jen0910
Comment Utility
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.
0
 

Author Comment

by:Sirdots
Comment Utility
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.

0
 
LVL 8

Expert Comment

by:Jen0910
Comment Utility
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!
0
 

Author Comment

by:Sirdots
Comment Utility
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

0
 
LVL 8

Expert Comment

by:Jen0910
Comment Utility
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?
0
 

Author Comment

by:Sirdots
Comment Utility
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.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:Sirdots
Comment Utility
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
0
 
LVL 8

Accepted Solution

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

Author Comment

by:Sirdots
Comment Utility
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.
0
 

Author Comment

by:Sirdots
Comment Utility
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.
0
 
LVL 8

Expert Comment

by:Jen0910
Comment Utility
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.
0
 

Author Comment

by:Sirdots
Comment Utility
Thanks. I will play with it and end this now. I will post other questions if I have any.
0
 

Author Closing Comment

by:Sirdots
Comment Utility
Excellent job. Thanks.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now