Code2Design.com

User login

The Layout

Programming

Graphic Design

Resources

Navigation

C2D Projects

Unsystematic Affiliates

Pixel2life iPhotoshop Player-Art Deceptive Logic 

Change Language

Who's online

There are currently 0 users and 6 guests online.

Basic webpage in flash pt1 - the layout

Ok, I'm just going to introduce you to the basic's of flash and how to build a easy webpage in it. You can find the result here. First of all, you need to start flash 8. Than you'll get this window:

Press the button (pointed at in the image) and you'll start a new flash file. Now because we're going to make a webpage, the first thing we need to do is to create a place for the content to stay. So lets get our rectangular-tool and drag a big square onto the stage:


Then double-click (with the selection tool (the black mouse pointer)) THE FILL of the rectangular and hit f8 to turn this into a symbol, then this window will popup:

Use "content" as the name, click "movieclip" as the type, and just ignore the registration point as it doesn't really matter right now... Hit ok and give the new-baked symbol a instance name of "content". To give an item a instance name just click on it and enter the name here:

Then we need to create some buttons... Let's create a new layer, to do that simply hit new layer here:

Call the new layer "Buttons" and the old one "Content", then create a new layer and call that "Actionscripts" (to name a layer double-click it's name...) Then lock the "actionscript" layer (you'll figure out how to yourself :P ).

Select the buttons layer and create two buttons (just like we did with the content) and convert them to movieclips named b1 and b2, also giving them an instancename of b1 and b2.

When this is done you can double-click one of the buttons, grab your text tool and name it Home, to get back to the main stage simply double-click outside the button... Also write Info on the second button as done with the first one... Then it should look something like this:

For now you can lock the buttons layer and unlock the content layer... I always likes to have only one layer unlocked because it's easier to make sure that you're working in the right layer... Enter the content object by double-clicking it. Then we want to lock the first layer and create a new one which we call content (inside the content object)... Now we are going to create one new normal frame on the first layer and one new keyframe on the content layer, and how to do so? Watch:

Now you should be looking at this:

Now lets enter some text at the first frame of the contentlayer... select the first at the contentlayer, get your text-tool and write "Main"... Redo this at frame 2 with the text "Info" Now lock that layer, get back to the main timeline and lock all layers there too...

Now it's time to start CODING!!! No, no, no. Don't leave... It's easy, i promise ( ;) )
select the first frame of the actionslayer and hit f9 to get the actionspanel showing... than let's start coding...

All we want is to do is to get button events for the two buttons (b1 and b2). To do this we use

button.onRelease()
. Also note that actionscript is case-sensitive, so that means that it is a difference between b and B...

Ok, so the first thing we want to do is to write

b1.onRelease = function(){

}
b2.onRelease = function(){

}

This means that whenever b1 or b2 is released we want what is between the { and the } to be run by the computer...

Then inside b1's function simply write: content.gotoAndStop(1)... How easy was that? Any1 guessed what is to be inside b2's function? Yes that’s right...

content.gotoAndStop(2)

This means that of now the code is:

b1.onRelease = function(){
content.gotoAndStop(1)
}
b2.onRelease = function(){
content.gotoAndStop(2)
}

Now we only need to do 1 more thing. Go into the content and create an actionscript layer there too. Then inside that layer just write stop() and you've done!!! Easy huh?

Hit Ctrl + Enter to test the "movie"...

Have fun!!!


Submitted by Alxandr on January 9, 2007 - 8:38pm.
printer friendly version

Awesome but 1 problem

Hey how would i make the content text fade in and also what do i have to do to make the "main" not show up off the bat when i preview the movie? I can't seem to figure that one out. Awesome tutorial!


Answers

The fading can be done in several ways, but I can't find one that is easy enough to describe right now... But I'm going to update the design in the 4th tutorial (the third one is done, just not published) so I might put that in there... Then i don't realy understands what you meen with the "main" not to show up off the bat when you preview the movie... If you can clarefy that question a bit... My english isn't that good...

Alxandr


Answer

I think to do what you're asking you have to put main in the 2nd frame and move info into the 3rd. Although, I am just learning Flash so correct me if I'm wrong


I think that the best method

I think that the best method to do it is to put content into a new movieclip called holder. Than on holder frame1 you have blanc, on frame 5 you have stop() and content. Whenever the user hits a button the number is stored as a variable and you have holder.play(). Than when the content is created you'll have it gotoAndStop(variable); Now this was only briefly... As said... I'll try to do this in tutor 4... I'll start writing tutor3 as we speak...

Alxandr


Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <br /> <h3>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use BBCode tags in the text, URLs will be automatically converted to links
More information about formatting options



Like what you see?

Why not add more? C2D is looking for other Christian Web Masters who would like to help write articles for this site. If you have expericance in FLASH, CSS/HTML, PHP/MySQL, PhotoShop/GIMP, Blender, Javascript, or just General Design - our users would love to hear what you have to say. Contact Us

delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   technorati