How To Create an Adobe Flash Web Site
Posted on 12. Aug, 2011 by admin in adobe flash
Expand the description and view the text of the steps for this how-to video.
Check out Howcast for other do-it-yourself videos from gigafide and more videos in the Adobe Flash category.
You can contribute too! Create your own DIY guide at http://www.howcast.com/videos/new or produce your own Howcast spots with the Howcast Filmmakers Program at http://www.howcast.com/filmmakers/apply.
Spice up your online presence by creating your own Flash site. Here’s how.
To complete this How-To you will need:
A computer with internet access
Adobe Flash CS4
Step 1: Create new Flash document
In the Adobe Flash program, select “Flash File (Actionscript 3.0)” from the “Create New” menu. Switch the workspace layout by clicking on the dropdown menu in the upper left of the top menu bar, and selecting “Designer.” You can adjust the size and color of the document by adjusting the settings in the “Properties” panel.
Step 2: Create new layers
Divide your Flash document into four layers: Actions, Background, Menu, and Pages. To do this, go to the Flash timeline, and click three times on the “New Layer” icon so you have four layers total. Rename each one by double-clicking on the name, or holding the mouse down on a Mac.
Step 3: Adding a background
To add a background image, select the Background layer from the timeline. Then, go to File, Import, and Import to Stage, and select the image you want to use. You can change the size of the background in the Properties panel once the image is imported.
Tip: To prevent accidental changes, lock a layer by clicking on the second dot directly to the right of the layer name. The dot should change to a padlock icon.
Step 4: Create the navigational menu
Select the Menu layer from the timeline. From the top menu, select Windows, Components. In the window that appears, double-click the Button component under the User Interface section, which adds a button to the document. Position the button where you want the menu to be. Repeat this process to add as many menu buttons as you need.
Step 5: Enhancing the buttons
Select the first menu button you added. In Properties, change the instance name to “button1.” Change the name displayed on the button by selecting Windows, Component Inspector from the top menu. In the resulting window, change the label value. Continue this process for the remaining buttons.
Tip: Make sure the instance name is a relevant label with no spaces, capital letters, or special characters.
Step 6: Add a title
To add a title to your web site, select the text tool from the Tools panel. In Properties, change text attributes, like the number of lines, font, color, and size. Then, click on your document to add text.
Step 7: Create the content container
Create pages to add content to your site. Select the Pages layer from the timeline, and then click on the rectangle tool in the Tools panel. Adjust color and transparency from the Color panel. Then, draw a rectangle on the document to match the size you want your content to be.
Step 8: Hold Shift
Add pages in the Pages layer. Hold down the Shift key, and select the Background layer. This will select every layer except for Actions.
Step 9: Copy and paste to add pages
Right-click (or command-click for Mac) the first frame of the Pages layer and select Copy Frames. Right-click the second frame in the Pages layer, and select Paste Frames. This is where the second page will be. Continue this process for as many pages as you need.
Step 10: Adding content
Add content. Select the first frame of the Pages layer. In Properties, change the label name to “page1.” Then, use the text tool from the tools panel to create the text for the first page. When you are satisfied, go back to the Pages layer, select the second frame, and repeat the process. Continue until you have content for each page.
Step 11: Create the Actionscript
Select the first frame of the Actions layer and hit F9. In the Actions window, type a stop script to stop the pages from cycling. Hit Enter to go to the next line, and create a function for each button that tells it which page frame to jump to. Hit Enter and write a script that attaches the functions to their corresponding buttons, using the button instance name.
Tip: To preview the document in action, go to Control and then Test Movie from the top menu.
Step 12: Publish and upload
Publish the web site by going to File, Publish Settings. Check both the SWF and HTML boxes. Rename both files, and select a location to save it to. Then click publish, and upload all of the published files to your web server. To access the Flash page, just navigate to the HTML file on your web server. You’re done!
Thanks for watching How To Create an Adobe Flash Web Site! If you enjoyed this video subscribe to the Howcast YouTube channel! http://www.youtube.com/subscription_center?add_user=howcast
Duration : 0:4:27
stop();
function …
stop();
function button1_clicked(e:MouseEvent):void{
gotoAndStop(“page1″);
}
function button2_clicked(e:MouseEvent):void{
gotoAndStop(“page2″);
}
function button3_clicked(e:MouseEvent):void{
gotoAndStop(“page3″);
}
function button4_clicked(e:MouseEvent):void{
gotoAndStop(“page4″);
}
function button5_clicked(e:MouseEvent):void{
gotoAndStop(“page5″);
dont skip lines for …
dont skip lines for these functions needs to be as shown
button1.addEventListener(MouseEvent.CLICK, button1_clicked);
button2.addEventListener(MouseEvent.CLICK, button2_clicked);
here it is the …
here it is the correct code continue the functon button for as many pages that you need only change the button and page number for as many ages you need start from one always skip# after the } symbol
stop();
function button1_clicked(e:MouseEvent):void{
gotoAndStop(“page1″);
}
function button2_clicked(e:MouseEvent):void{
gotoAndStop(“page2″);
}
button1.addEventListener(MouseEvent.CLICK, button1_clicked);
button2.addEventListener(MouseEvent.CLICK, button2_clicked);
Any one needing …
Any one needing full CS4 master collection it is the back up cd and has all the apps gauranteed to work not a trial version full version for windows or mac 75..00 message me at richirich602@msn.com
To all those having …
To all those having problems with the loop:
When I copied the text above, Flash CS5 inserted a “-” between “Mouse” and “Event” so it didn’t work. Tjeck if it’s the same for you.
@Deathys Me
@Deathys Me
@Deathys ROFL xD
@Deathys ROFL xD
sooo you don´t need …
sooo you don´t need to pay?
when i try to make …
when i try to make the website and preview it, the preview goes all loopy and spams out.
good infortion
good infortion
@Deathys
I don’t …
@Deathys
I don’t have internet access, I don’t believe in it. LOL
How do the people …
How do the people without internet access watch this video?
thumbs up if after …
DD
thumbs up if after the first step, you opened a new window then every 3 seconds went back to it to watch the video then the window to change stuff and then messed up and went “Oh………CRAP!” then go frustrated and went to raid the fridge for something to eat and forgot why you were here
Very nice tutorial.
Very nice tutorial.
@Deathys me i …
@Deathys me i seeing this in my i pad
awesome job
awesome job
Just check this out …
Just check this out – easyway4u. org
That Stop thing not …
That Stop thing not working ?? And you are new in Adobe Flash
Well if u have AdobeFlash CS 5.5 then use code snippets , You will find it easy to use.
Thumbs Up if this helped , So others can save their time
the guy who posted …
the guy who posted the copy paste didnt post the second bracket, for those having problems. it should be
stop();
function button1_clicked(e:MouseEvent):void{ gotoAndStop(“page1″); }
button1.addEventListener(MouseEvent.CLICK, button1_clicked);
Ok I did it again …
Ok I did it again and this time is better I do can preview but the content is flashing every page in the preview screen.
Can someone help me pls?
i love it nice work …
i love it nice work on presenting the flash layout!
stop();
function …
stop();
function button1_clicked(e:MouseEvent):void{ gotoAndStop(“page1″);
button1.addEventListener(MouseEvent.CLICK, button1_clicked);
I got an error, what do I do? im using cs5
@1CyberNinja1 i …
@1CyberNinja1 i dont know ö_ö
I use HTML And …
I use HTML And JavaScript…. :/
Script dosen’t work …
Script dosen’t work , why ?