You will learn to create one of the most widely used web site navigation interfaces in this lesson: the tab menu.
Before starting to design, click on the menu tabs of the two examples below to see what you’ll be working towards.
Drawing the basic tab shape
1 Open a new flash document (hope this sounds familiar to you by now :). If you are working in Flash MX 2004 or Flash 8, go to File > Publish Settings. Click on the Flash tab, and select Flash Player 6 in the version menu, then select ActionScript 1.0 in the ActionScript version menu. Click OK.
2 Select the Rectangle tool (R). Block the Stroke color in the Color part of the Tool panel by clicking the little middle icon on the bottom.
3 Click and start dragging on stage. While holding the mouse button down, press the Down arrow key, to start making the corners of the rectangle round.
Make the rectangle about 100 pixels wide and 30 pixels high (select it and enter the dimensions in the left side of the Properties panel, below the stage).
4 Now, draw a second rectangle on stage, but hold the Up arrow key while dragging, until the corners are completely sharp. Make this rectangle less wide but higher than the previous one.
5 Place this rectangle below and to the right of the first one. Select both rectangles. Open the Align panel (Ctrl+K). Make sure that the Align to stage button is turned off (1 on the image below). Click Match width (2). Click Align left edge (3).
Your result should be looking like the one below.
6 Select the lower rectangle and move it up with the Up arrow key, holding Shift to move it faster. Place it so that its upper edge is placed somewhere in the middle of the upper rectangle, where there is no curvature of the rounded corners.
7 Click anywhere on stage to unselect the rectangle. The two rectangles will now be merged into one shape.
8 Select a lower part of the shape and hit Delete to erase it. You have just created the basic shape of the tab!
Making the tab movie clip
9 Select the tab shape an convert it to a movie clip symbol (F8). Call it tab 1.
10 Double-click on the movie clip you just created on the stage to enter inside it.
11 Call the first layer base gradient. Click anywhere on stage to unselect the tab shape. You will now proceed to make a nice gradient, shiny tab. If you want, you can make it with a plain color and with no shine. The important thing is to base your choices upon the overall design of your web site, and how the tab menu will fit into it.
But, on the other side, why not seize on the possibilities of Flash and create something colorful and beautiful? Sure you want to, so continue with the next step 🙂
12 Go to the Color mixer panel. Select Linear as type of gradient. Double-click on the left small square situated between the thin and large gradient stripes in the lower part of panel. Enter #003366 as color code and hit Enter to confirm. Double-click on the right square and write #62B0FF as color code and again hit Enter to confirm your choice. You will now have a nice bluish gradient available.
13 Select the Paint bucket tool (K) and fill the tab shape with a vertical gradient. To obtain a perfectly vertical fill, hold Shift while clicking and dragging. It is important that you don't start and end your gradient at the edges, because of the reasons I will explain you later. So, click below the top of the tab and finish before its bottom end.
Your result should be as follows:
14 Select the whole tab shape. Copy it (Ctrl+C) and lock this layer. Create a new layer and call it shine. In this layer, paste in place the shape you just copied by selecting Edit > Paste in Place.
15 After you've done this, the shape will still be selected, which is ok. Without clicking anywhere, go back to the Color mixer panel. Click between two small squares to add a third one.
16 Now, place them (by clicking once and dragging each one of them) similarly to what is shown in the image below.
17 You will now adjust the colors for the shine. Select white as each square's color. Next, set their respective alphas as follows, from left to right: 90%, 14% and 0%. When you double-click on a square, there is the alpha option situated on the upper portion of the box. Or, you can click once on each small square and adjust the alpha in the field situated just above the colored stripe.
18 Select the Free Transform tool (Q) and turn off the Snap to Objects option at the bottom of the Tool panel. 
Select the whole shiny gradient shape. Click on a corner handle and hold Alt while dragging inwards. Make this shape a little bit smaller than the basic gradient on the layer below it. Zoom in to work more easily.
19 Select the Gradient Transform tool (F) and click on the gradient. Click on the white circle in the middle and move the gradient center up. You should have a cool looking gradient shiny tab now.
20 Create a new layer and call it text. You can put this layer above the current ones, or between them. If you place the text layer between the existing layers, the shine will go over the tab text. Again, what you will decide to make is related to the final look you want to achieve for your tab menu.
21 Select the Text tool (T) and choose Static text in the left part of the Properties panel. Choose white as color and any font you like. Click and write "Home" or any other website section name that will be a part of your tab menu in the end.
Also, be sure to have turned the Selectable option off in the Properties panel (see 1 in image below). Because if you leave it turned on, when a user places the mouse over the text of the tab, the text selection cursor will appear, which in addition to it looking lame, will think that the tab maybe isn't clickable.
Place the text in the middle of the tab by using the arrow keys. It is important that the coordinates of your static text field are round numbers. Check if they are in the Properties panel (X and Y). If they are not, just erase any number after the decimal point and enter zero. You have to do this in order to make sure that your text will render crispily. This is especially true for pixel and bitmap fonts.
Lock this layer.
22 Unlock the base gradient layer, select the whole shape and copy it (Ctrl+C). Lock this layer.
23 Create a new layer above all the others and call it lines. Paste in place the shape into this layer (Ctrl+Shift+V). With the shape still selected, choose a fill colour (in the Colors portion of the Tool panel) that is in good contrast with the blue hues used so far. This is only to make working easier, since you'll delete this shape once it has fulfilled its purpose.
24 Unselect the shape. Select the Ink bottle tool (S). In the Properties panel, select hairline as line type and #000033 as line color. Click on the shape to give it an outline.
25 Select the two rounded corner lines and the upper line by holding Shift while clicking. Hit Delete to erase them.
26 Select the fill shape and erease it. I've hidden the other layers to work more easily.
27 Select the horizontal line and cut it (Ctrl+X).
28 Lock this layer. Make a new layer above the existent ones and call it underline. Paste in place the line you just cut by selecting Edit > Paste in Place.
29 Convert the line to a movie clip by selecting Modify > Convert to Symbol. Call the movie clip underline.
30 With the newly created movie clip selected, go to the left side of the Properties panel and give it an instance name. Call it bottomLine.
You will control the appearance of the menu with this movie clip later, by showing which tab is selected.
Go back to the main scene by clicking on the Scene 1 link above the layers.
Click once on the tab movie clip you just created. Go to the left bottom part of the Properties panel and check that the coordinates for the movie clip are set to round numbers. If they are not, make them so by entering the zeros manually.
You must do this when working with detailed designs involving lines and such, so that everything looks sharp. This is important, because the visitors to your (or your client's) website should exactly see on what section of the site they are. Remember, always think about usability!
31 Test your movie (Control > Test Movie) and see if everything looks sharp and not blurred. If that is not the case, double-click the tab movie clip and go to the lines layer an adjust the lines a little bit by using the arrow keys and/or coordinates to place everything so that it looks nice.
If you entered the movie clip to make adjustements, go back to the main scene to continue building the menu.
Placing and creating the other menu tabs
32 Click once on the tab movie clip. Copy it (Ctrl+C) and paste it in place (Ctrl+Shift+V on a PC, Command+Shift+V on a Mac).
Now, don't click anywhere. Just hold Shift and press the Right arrow key about 11 times to move the copy of the movie clip to the right. Then use the Left arrow key (without Shift) to return the tab a little to the left. Your tabs should be placed as on the image below.
Repeat this twice, so that you have 4 tabs. Of course, you can have as many as you want, depending on your web site structure. You can make them smaller and less wide if you need a bigger number of sections on your site.
33 You will make the labels for each tab. To do this, you will need to duplicate the tab 1 movie clip. So, open the Library (Window > Library).
34 Right-click on the tab 1 movie clip symbol inside the Library and select Duplicate. Call the new symbol tab 2 and click OK.
35 Double-click on this newly created movie clip in the Library to enter inside it.
36 Select the Text tool (T) and unlock the text layer. Click on the text field to edit it. Write anything you want - the label for a section of your site.
Hit Esc to exit the text field editing mode. Center the text field in relation to the tab by using the Left and Right arrow keys.
37 Repeat the steps 34 through 36 to create two more tab movie clips, with their respective labels. When finished, you should have 4 different tabs in your Library.
38 Go back to the main scene by clicking on the link above the layers (same as in step 30).
39 Select the second tab from the left by clicking on it , again, once. Go to the Properties panel and click the Swap button. The Swap Symbol window will appear.
Select the tab 2 symbol and click OK. The tab on the stage will be replaced with the appropriate one. Do this two more times for the third and the fourth tab by replacing them with the tab 3 and tab 4 movie clips.
Say, ain't this cool? Flash makes everything so easy! 🙂
40 Click once on the first tab from the left. In the Properties panel, give it the instance name tab1.
Do this for the remaining three tabs. Give them the instance names tab2, tab3 and tab4. Press Enter each time to confirm.
Completing the menu design
Ok, you have just completed the tab menu design. You will now make some additional graphics to make clear which tab is selected when a user clicks on it, and some background to make the site look more compact.
41 Lock this layer (the only one on the main scene for now) and call it tabs.
42 Create a new layer and name it color strip. Click and drag this layer to place it beneath the tabs layer.
43 Select the Rectangle tool (R), block the stroke color and choose #62B0FF as fill color. This is important, because it is precisely this color that is at the bottom of the tabs, as the ending color for the linear gradient. So, in this way, you will have visual continuity from the tab to the rest of the site.
44 Draw a wide rectangle.
45 Click on the rectangle and check in the Properties panel that its coordinates are set to round numbers. If they are not, make them so.
46 By using the arrow keys, move the rectangle up so that its top edge is just below the bottom dark blue lines of the tabs. Look at the image below to see what I mean (you can see the detail, zoomed in, on the right side).
47 Lock this layer. Create a new layer, on top of the two existing ones and call it connecting lines.
48 Select the Line tool (N) and choose hireline for thickness, and #000033 as color.
49 Draw a small line between each tab, so that it connects each of the bottom lines.
50 Also, draw lines from the beginning of the first tab and ending of the last tab.
Why is this done, you ask? Well, to achieve the effect of a selected tab. You will do this in a moment, just look at the result you will obtain via ActionScript, in the image below.
Designing the basis for the web site content
51 Make a new layer and call it content. Select the Text tool (T). Write anything, some dummy content. You will place real content here later.
52 Convert this text (and any additional drawings you may have made) to a movie clip symbol by selecting Modify > Convert to Symbol. Call this symbol site contents. Click OK.
53 Double-click on this new movie clip on stage to enter its timeline.
54 Right-click on the frame 2 and select Insert Keyframe. Write something different or add a drawing. Make this only to see how the menu will function once you complete this tutorial.
Do this two more times. Right-click on frames 3 and 4 inside the movie clip and add some content.
55 Go back to main stage. In the Properties panel, enter the Instance name for this movie clip: contents. Be sure to enter this name correctly: contens, not content! You may put any other name, but be sure to continue using this name throughout your ActionScript code. Lock this layer.
Making the menu work with ActionScript
56 Create a new layer and call it Actions. Click on the first frame of this layer to select it and hit F9 to open the Actions panel.
Enter the following ActionScript code inside the Actions panel:
contents.stop();
numberOfTabs = 4;
for (i=1; i<=numberOfTabs; i++) {
line = eval("tab"+i);
line.onRelease = function() {
for (i=1; i<=numberOfTabs; i++) {
otherTabs = eval("this._parent.tab"+i);
otherTabs.bottomLine._visible = true;
}
this.bottomLine._visible = false;
contentFrame = Number(this._name.substr(3, 1));
this._parent.contents.gotoAndStop(contentFrame);
}
}
tab1.bottomLine._visible = false;
Test your movie (Ctrl+Enter) and click on the tabs! They will jump to foreground as you click on them and different site content will show up!
ActionScript code behind the menu explained
Now, let me explain you how this cool tab menu actually works!
The first line stops the movie clip with the site content from playing.
contents.stop();
Then you have a variable called numberOfTabs which holds the information about the number of tabs in your menu. This information will be used in a moment.
numberOfTabs = 4;
Now comes the main for loop. This loop repeats as many times as there are tabs. This is done in order to assign actions to each tab it must perform.
The piece of code i<=numberOfTabs means that the loop will continue to repeat as long as i, which starts with the value of 1, is less or equal to the number of tabs. So, when i reaches 4 (it is 4 in this example, keep in mind that this value can be any number you assign it - depending on the number of tabs you have in your menu), it is equal to numberOfTabs value and the loop stops from repeating. The i++ is a way to increment (increase in programming jargon) i by 1 for each iteration (repetition).
for (i=1; i<=numberOfTabs; i++) {
OK, what is inside this loop? The first line of code is put in here to facilitate some things. It stores a value in the line variable. This value is the instance name of each tab movie clip of your menu.
line = eval("tab"+i);
So, when, say, the loop repeats the second time, the result of the little operation between the parentheses ("tab"+i) is tab2. The eval function is there to make sure that Flash knows that you are referring to a movie clip instance name and not a simple piece of text.
Therefore, from now on, the line variable is a reference to the tab movie clip for the current iteration of the main for loop.
So, the following line,
line.onRelease = function() {
will be read by Flash as tab3.onRelease... etc. This is the case when i reaches 3. It will be tab4.onRelease... when i equals 4, of course.
The statement line.onRelease = function() means that the function which follows between the curly braces {} is assigned to the tab's onRelease event. That means that whatever is found between the curly braces will be executed when the mouse is pressed and released over the tab (this is a standard mouse click).
If you want the tab to react immediately, you should put onPress in place of onRelease. However, this isn't really necessary. Users click normally on tabs. They won't drag their mouses out or do some strange interaction with the tabs. This split-second difference between onRelease and onPress doesn't mean much, except in Flash games.
So, between the curly braces is what happens when a menu tab is clicked on. And here comes a second for loop. It is exactly as the first one. It is here to make sure that it passes through all tabs.
for (i=1; i<=numberOfTabs; i++) {
Again, you have a variable (otherTabs) in which is stored, for each iteration of the loop, the instance name of each respective tab.
otherTabs = eval("this._parent.tab"+i);
This time, however, there is a difference. The instance name resulting from the operation within the parentheses has a different path. Say, for example, that the loop is passing for the first time. So, you will get this._parent.tab1 as a result.
Why is this necessary? Since this loop is part of the tab's onRelease event, this means that this code belongs to the tab. So, by saying this._parent.tab1 you actually say to Flash that this movie clip's (this) parent movie clip (_parent, which is the main or root timeline in this case), has a movie clip called tab1 situated on it. So, from now on, the otherTabs variable points to each tab as the loop repeats itself.
Then, you say that the bottomLine movie clip (remember the horizontal line you converted to a movie clip symbol in step 29) should be made visible. This is done by making the _visible property's value of the bottomLine movie clip equal true.
otherTabs.bottomLine._visible = true;
What this in reality does, is that the line on the bottom of each tab is made visible. Why? Because when the user presses a tab, it is selected, so the other tabs' lines must become visible, visually "sending" the tabs to the background.
Now, the line of the tab that was just clicked is made invisible.This is done so that this tab jumps to the foreground, by becoming connected to the colored rectangle below the menu.
this.bottomLine._visible = false;
Now comes the part that makes appear the section of the site which is associated to the clicked tab (home, links, about, etc). It is again stored in a variable (contentFrame), for ease of use in code that follows.
contentFrame = Number(this._name.substr(3, 1));
But, what is this ActionScript after the equation sign? It is a scary little monster 🙂 No, it's actually quite simple.
The part between the parentheses extracts the number from the instance name of the current tab movie clip. The piece of code this._name means: the instance name of this, this being the movie clip to which this code is assigned (the current tab for each loop repetition). So if the loop is, for example, in its fourth iteration, this._name would mean tab4.
After the name comes the substr command. This command serves to extract a part of a piece of text. The first number between the parentheses is the position in the text where the extraction should start. The second one is the number of characters (letters, numbers, etc) the command should extract.
So, it goes like this: let's say the name is tab4. The substr command begins its count with 0. So the third character in the name tab4 is the last one - 4. It is this character that you need, so the number 1 says that only one character will be extracted. Anyway, there aren't any other characters that follow behind it, but it is nice to know how this ActionScript command functions, isn't it? 🙂
Next, the result (1, 2, 3 or 4, depending on the iteration of the loop) is transformed into a number with the Number command.
Number(this._name.substr(3, 1));
Why do you have to make it a number? Isn't it already a number? Nope, it is not. The substr command extracts text. So by using the Number command you convert it to a mathematical value.
And this number is needed in the next line, where you tell the contents movie to jump to that particular frame of its timeline. Remember the dummy content you created earlier? It is here that you make your web site functional.
The this._parent.contents path points to the contents movie clip, which is found on the main timeline, which is the parent movie clip of each tab (this._parent).
this._parent.contents.gotoAndStop(contentFrame);
Finally, the last line makes the bottom line of the first tab disappear, to push it into the foreground, while all the other tabs stay in the background. This makes sense, because when a user visits your site, it should be logical that the first section (home, start or whatever) is displayed at the beginning.
tab1.bottomLine._visible = false;
In addition to making an effective interface for your website, you also learned quite a lot of ActionScript!
Why is the tabbed menu so effective as an interface?
Tabs are great as website navigation systems. Because, first, they emulate the real-world tabs. So, they are recognizable by their shape.
Second, this shape is easy to spot if compared to links that are text-only or framed by a simple square.
Third, they emulate depth, by placing the selected tab in the foreground and the remaining tabs in the background, thus making it even more easy for the user to see which section she is currently on.
And last, they can be color-coded. I haven't included this option in the tutorial, because it would be huge. I'll leave it for another lesson. If you are just curious how this works, go to the british amazon site and click on the tabs for various products. Hint: amazon's navigation system is one of the most effective there is around. I am sorry to see that the original amazon.com changed that. They still have tabs, but they are very different from those found on the british amazon, both in number and functionality. But, I suppose they know what they're doing 🙂
So, if you make a tab menu interface for your (or your client's) flash web site, drop me a mail. I'll be really glad to see it!
And you know what's even cooler? This menu (the tabs, without the site's content) is only 1.4 KB in size!
Download the zipped source FLA file for the menu shown in this tutorial.
Also, you can download the source for the enhanced menu with the rollover effect.
Thanks for nice tutorial
I am new to flash and want to learn flash with all advanced techniques.
The technique described is useful for me. I had downloaded the zip file and its working perfectly.
great site, and great tutorials thank you for all the explanations!
You’re welcome guys. Spread the word about FlashExplained.com!
hi
good tutorial, great detail. but i am stuck and need your help urhently. please.
i have got to the part of the actionscript encoding i have 6 tabs so i changed it in the actionscript, but my tabs still wont work
please,please help me!!
aaqib: It is difficult to see what’s not working with the little info you provided.
damn!!! this is so amazing!!! ive known a few tricks in flash and this one’s superb. really really u guys are extraordinaire!!! thank you very very much for this one!!!
jonard: Glad you like it! Spread the word about flashexplained.com/ and subscribe to the RSS feed!
Great tutorial, really helped me implement a GOOD tabbed interface into my assignment. I had started to make a very sloppy tabbed interface but decided to ask Google first, and I am very happy that I did! Thanks very much Luka.
dont worry luka. i got it working i just missed some steps out which resulted in the actionscript not working crrectly.
excelent tutorial!!!
aaqib: I’m glad! Keep on learning!
Hi! Great tutorial!
I´m making my menu based on this tutorial.
How do I get a different color on the tab that is selected?
For example, I want the selected tab to be red, and the non-selected tabs green. Could somebody please help me out?
Oscar: I would make another frame inside the tab movieclip and control it with ActionScript. At first, the movieclip should be stopped at frame 1, and once a rollover event occurs, it should move to frame 2 where it has been colored differently. Also, the second downloadable source file at the end of this lesson has something similar – a shiny rollover animation. That’s a good starting point.
Thanks for the help, I´m quiet new to actionscript, could you post an example of code on how to control the tab mc to move to frame 2?
hi
i want to get hyperlinks on each of the buttons that i made to use in dreamweaver. please can you help me because i need for my I.C.T coursework.
thank you
Oscar: I will make an example.
aaqib: You should check out my banners tutorials section, see the menu at the beginning of page. You will find info on linking buttons there.
HELP !!!! It’s not working.
HELP!!!! please help me. i used the method from this tutorial:
http://flashexplained.com//banners/creating-a-flash-ad-banner-from-start-to-finish/
i get everything right the hyperlink works and i end up on the flashexpalined website but the only problem is that the rollover shiny thing doesnt work.
PLEASE,PLEASE help me!!!!!
sharon: Be more specific.
aaqib: I don’t know why it doesn’t function. Do you get any errors?
Nice Tutorial! Was wondering if there was a way to add a sub menu of sorts to the color strip when a tab is clicked? I am building a huge site and really don’t have room for a ton of tabs.
no, no errors in the actionscript or anything. its the layer that is the hyperlink is covering the rollover and thats why it doesnt work.
I’ve been searcing for this for awhile! Thank you , it actually works!! I have text on my panels that I want to link, at least 4 on each panel is that possible? I created this to use in place of spry tabbed panels.I thought an earlier post mentioned something like that, but not sure if we are talking about the same thing.
Great tutorial, I have tried this and works like a charm.
Have a question, I am about to create a Flash tab. On one of the tab, I want to have a dynamic content. I dont want to recreate the Flash everytime. Do you know if I can have a link on the tab page, but show the actual content and not just the link ?
I am not sure my question is clear, if not please let me know. Thanks !
Proposal for using onRollOver for controlling the tabs
contents.stop();
numberOfTabs = 4;
for (i=1; i<=numberOfTabs; i++) {
line = eval(“tab”+i);
line.onRollOver = function() {
for (i=1; i<=numberOfTabs; i++) {
otherTabs = eval(“this._parent.tab”+i);
otherTabs.bottomLine._visible = true;
}
this.bottomLine._visible = false;
contentFrame = Number(this._name.substr(3, 1));
this._parent.contents.gotoAndStop(contentFrame);
};
}
tab1.bottomLine._visible = false;
I used the tutorial and made a really nice tab nav bar. Is there a way to incorporate that into dreamweaver so each tab is a different HTML page instead of just different content underneath it? Like…I want to click a tab called COMPANY INFO and instead of text appearing from the content layer we made…can the content layer BE an html page? And when you end up on that page…I want the COMPANY INFO tab to remain without the line underneath. Any suggestions?
Wow thank you for this.
It has already proved to be very useful to me!
The tutorial was super easy to follow and it actually worked! Thanks for posting it. I do have a question about creating two separate tabbed menu independent of each other in the same file. I thought that if I changed the instance names on the second tabbed menu and switched that out with the AS, too it would work, but it doesn’t. Is there an easy way to do this?
NVM. I’m sure everyone can tell how new I am to Flash. Ugh. Finally, figured out that I just have to put the second tab menu inside a MC. Whew.
🙂
Hi,
Thanks for the Tutorial……………….
Pradeesh
Hi,
I want to incorporate this tabs into my company’s website.
Thinking of using these tabs for the banner part, whereby clicking on a tab will shows a different set of banner.
This is my idea:
I will have 4 tabs, clicking on each of them will give me a different banner.
However,each banner is with 3 photo transitions effect. Is it possible?
How do I go about doing it? Will really appreciate your help!! =)
is that actionscript 3?
Greate tutorial Well written and presented. If any body is interested, I’ve converted this example’s ActionScript 2.0 code to ActionScript 3.0. Just replace existing code with the following:
// Startup code
contents.stop();
var numberOfTabs:int = 4;
Initialize();
// Initialize tabs
function Initialize() : void
{
// Add a Click event handler for each tab
for (var i:int = 1; i <= numberOfTabs; i++)
{
var tab:Object = getChildByName(“tab” + i);
tab.addEventListener( MouseEvent.CLICK, tablClickHandler);
}
// On startup, make the first tab active
tab1.bottomLine.visible = false;
}
// Handle the Click event on a tab
function tablClickHandler(evt:MouseEvent) : void
{
// Get tab that was clicked
var tab:Object = evt.target
// Show bottom line for all tabs (bottom line for
// clicked will be processed after this loop)
for (var i:int=1; i <= numberOfTabs; i++)
{
this[“tab” + i].bottomLine.visible = true;
}
// Now unhide bottom line for clicked tab and show its contents
tab.bottomLine.visible = false;
var frameNo:int= Number(tab.name.substr(3, 1));
contents.gotoAndStop(frameNo);
}
Hi there,
I made the movie for so far now, and its working..
the problem is that it is looping very fast… tab 1, 2, 3,4 ,5 in 3 seconds..
how can i define the speed/time of the loop?
nice, but the truth is that this tabs doesnt keep the information of user-texts, comboboxes, checkboxes, etc etc
they’re good but not close enough to jquery and a bit messy
Hey, thanks for that tut – it’s more than nice.
But I’m looking for a way to load external swfs by clicking on a tab ( and onload the stuff, thats on the stage.
Could you please give me a clue how I could realize that in your menu?
Thanks a lot,
alex
[…] Classic tab menu creation at flashexplained.com/ […]
Hi guys a tring to make a form using flash
here is a sample of what i want
http://www.wildlifeadventures.co.za/reservations.cfm?AgentsID=299
the hardest part is the tabs i cant figure out how to go about it will some one please give me an idea
Regards
Geoffrey(kenya)
ivve found your site to be very usefull
Im trying to add content to the content frames via actionscript. Just trying to get some text atm ultimatly id like to add varibles from a xml file.
Heres what i have
//from your code
this._parent.contents.gotoAndStop(contentFrame);
//Starts my code
if (contentFrame == 3)
{
var myname:TextField = new TextField();
myname.text = “Sean”;
myname.x =200;
myname.y =200;
addChild(myname);
}
any help would be usefull
Thank you
Sj
Help!!! Can someome paste the actionscript if you site had 5 tabs please!!!!!
Hi
Thank you for this great tutorial. I too am learning .
I have 5 tabs and using Yazan Diranieh’s code for AS3 but this compile error is being reported:
1093: Syntax error var tab:Object = getChildByName(“tab” + i);
(Scene1, Layer ‘Actions’, Frame 1, Line 11)
and the movie keeps looping through the text movie ( it does not stop so that I can click on each tab to select the content in each tab).
Luka could you perhaps look at updating the code for AS3 (Flash CS4) if it’s any different to Yazan’s contribution.
Also could someone be able to help me with the code for adding a scrollbar to the text box.
Thank you for your help and assistance.
thanks you for your tutorial. it saves my day ^^
however, if i want to make it fullscreen, where should i put the script?
Hey Luka,
I’m trying to make a similar tab system, but then have it control a spry menu widget. Each button in a flash file will open a spry tabbed panel.
This way the user can see it whether they have the flash player installed or not. The as3 code is something like this:
button_btn.addEventListener(MouseEvent.MOUSE_DOWN,buttonmouseClick);
function buttonmouseClick(event:MouseEvent):void {
var tab:uint = ExternalInterface.call(“TabbedPanels1.showPanel(0)”);
}
It works pretty good. but what I can’t seem to find anywhere is how to programmatically trigger rollovers on the spry tabs.
is it:
var tab:uint = ExternalInterface.call(“TabbedPanels1.hoverPanel(0)”
or
var tab:uint = ExternalInterface.call(“TabbedPanels1.focusPanel(0)”
or what?
It’s nowhere in the adobe site.
How is it possible that your movieclip is calles “site contents” while your code says “contents”? What else is named contents?
need the same code for as3
AS3 code for 5 tabs please…cant understand