Since everyone seems to have a basic understanding of Flash and an interest in gaming why don’t you work on creating a game in Flash. Here is a bit of Flash Gaming History.
Here are a few tutorial resources:
Flash MX Speed Ball
Balloon Shooter
The Tank: Part 1: Basic Movement and Artillery
Space Invaders Clone
If you need a basic Flash tutorials try Flash 101
All of your hosting accounts include a web site manager called cPanel. With cPanel you can configure and check email (using multiple web interfaces), check site statistical information (visitors, referrals, etc.), manage databases, set directory permissions, edit .htaccess files, add hotlink protection, create and manage FTP accounts, upload and manage files, perform site backups, submit sites to search engines, and perform one click installation of CGI and other scripts. You can learn more about CPanel by watching some of the cPanel Flash movies. Be sure to watch the Navigating around cPanel movie.
You can access your cPanel account @ http://www.robinshosting.com/cpanel. Use the username and password in your welcome email.
Fantastico is included with your accounts. Fantastico is an auto installer; it installs web applications with a few clicks. Some of the popular web applications include: content management systems, message boards, WordPress, Xoops, Mambo, pMachine, shopping carts, help desk systems, and wikis. Watch the four Fantastico movies here http://www.robinshosting.com/faq.html#fant.
Assignment
Take a look at the different applications available with Fantastico. Try installing one of the blogs, content management systems, image galleries, or discussion boards on your account.
Post here and let me know how you did.
Continue to work on last Thursday’s assignment.
Some of you were wondering how to style the hyperlinks on your page. Here is a CSS Links tutorial to get you started.
You can also change the page properties in Dreamweaver to control some of the basic CSS of the page. Click Modify > Page Properties. On the Appearance tab you can change the background color and image, fonts, and font color. In the Links category you can change how all of the links appear on the page.
You’ll have tomorrow and Friday to complete this assignment. This is going to be worth big points, so don’t put off starting this assignment until Friday. If you truly have trouble with parts of the assignment work on the sections that you understand and I will help you on Friday with the rest. If you spend your Thursday playing games, visiting ESPN, blogging, emailing, IMing and goofing off then you’re not going to get a good score. If I come in on Friday and you haven’t done anything, then your score will reflect your effort. I don’t want to hear anymore stories about the “dog eating your homework”.
I contacted my web provider and it looks like the connection issue we were experiencing Wednesday was due a maximum connection setting on the server. My provider has increased the maximum connections so you should all be able to connect and upload at the same time.
Cyrus and anyone else who got an iPrism error when you tried to view your page in Safari - I tried checking your site in my other classroom and here at home and it loads fine. I will have to check with the tech department to see why it isn’t loading in the AHS classroom.
Phil and Tim agreed to help people to get their lounge files uploaded today if you are having trouble. Thank you Phil and Tim! There are step-by-step instructions that you can read/print here.
Assignment 1
If you try typing in yourusername.robinshosting.com in the Safari address bar (or clicking your link in the menu to the right) you will see a list of files and folders including your lounge folder. To prevent this folder listing you need to create a web page named index.htm and upload it to the public_html folder. If you look at Dan’s site, he has already created an index page for his site that prevents this directory listing. :/
Create a folder on your desktop called ’hosting index’. Create a folder in the ‘hosting index‘ folder called ‘images‘ (you will use this folder to store all of your site images and Flash files).
Using Dreamweaver, define a web site (Site > Manage Sites > New). Name your site ‘Hosting Index‘. Use the ‘hosting index‘ folder as the local root folder. Use the images folder as the default images folder.
Click the Remote Info Category and select FTP access - fill in your FTP settings and use public_html as the host directory. Test your connection.
Create a new file in Dreamweaver, save the file as index.htm. This page is going to be your portfolio page with links to your other class assignments. I created a template page that you can look at to get you started. The template that I am providing you with has no CSS. You will need to add CSS and any images you would like to display to the page. Here is a completed page for you to review. Don’t use my CSS; you need to design your own page. You need to go back through the CSS and design resources provided on this blog and come up with a strong design for the page. There are a lot of ways that you can style this little page, so I want to see what you can come up with. This is the most important part of your assignment, it’s worth the most points.
Assignment 2
If you did not use an external style sheet in Assignment 1, export the styles to an external style sheet.
Assignment 3
Create a new file and save the file as flash.htm. Apply your external style sheet to the file.
In order to display Flash files on the web you have to export them in SWF format. Open your Flash movies and click File > Export > Export Movie. Name the file and save it in the ‘hosting index\images’ folder. At the Export Flash Settings Screen keep the default settings and click OK.
Return to Dreamweaver and make sure that the flash.htm file is open and insert the two Flash movies you created earlier in the week. Click Insert > Media > Flash - select your Flash file and click OK. Save the file.
Open your index.htm file and create a link from the file to your new flash.htm file. Save the file.
Assignment 4
Upload your site. Test your site and post your link here.
Today we will work on uploading files to your new hosting accounts. Here are the step-by-step instructions that you can print along with the welcome email you received that included your account details. We will practice with the lounge site we were working with last week.
Open Dreamweaver
Click Site > Manage Sites
Select the New Lounge site and Click Edit
You are going to add the remote information to the site definition. The remote information allows you to connect to your hosting company’s server and upload your web site.
Click the Remote Info Category
Change the Access to FTP
Change the FTP Host to yourusername.robinshosting.com (replace yourusername with the username in your welcome email)
Change the Host Directory to public_html - This is where you must store all of your files on the web server. The host directory setting tells the server what folder to open when you connect to the web host.
Change the Login and Password to your username and password from the welcome email.
Click Test to ensure that you can make a connection successfully. If you get an error, proofread your settings to be sure that you don’t have any typos.
Click OK and Done.
Open the Files Manager by clicking the Expand button 
In the Files Panel click the Connects button 
Create a New Folder to Store Files
The left side of the screen is the remote server, the right side is your local computer. Control click the public_html folder on the remote (left) side of the screen. Name the folder lounge and press Return.
Close the Files Panel
Click Site > Manage Sites and select the Remote Info category. Change the host directory to public_html/lounge. You’re telling Dreamweaver to open the public_html folder then to open the lounge folder every time you click the Connect button.
In the Files Panel Connect to the remote server and click the Put button 
to upload your files into the lounge folder.
You can test to see if your upload worked by opening Safari and typing in your web address yourusername.robinshosting.com/lounge/lounge.html. Do not include the public_html folder in your address.
Please finish up your two Flash movies today. If you missed class on Monday, 3/6/07, the assignment is here.
Tomorrow we’re going to work on uploading. All of you have web pages that you created earlier in the year, we will upload those to the Internet on Wednesday. Once we get them uploaded we will work to update them using CSS. Today, you should create a folder on your desktop called ’site files’ and copy your pages and graphics into the new folder in preparation for Wednesday’s lesson.
Review the tutorial Managing and Uploading Files in Dreamweaver MX 2004.
I resent welcome emails for your hosting accounts. If you do not have your welcome email please post below.
Today we will apply masks and motion tweens to text on an image. Applying a mask to an image allows you to hide portions of an image in your animation. You can use shapes, lines, brush strokes, and text as masks. Last week we used shapes with a mask, today we will use text.
Open Flash
Create a new Flash document by clicking File > New
In the Properties panel (Window > Properties) set the document size to approximately 550 (w) x 150 (h)
Import a photo of your choice to the stage. File > Import > Import to Stage
Position the image on the stage using the selection tool 
.
Rename Layer 1. Double click ‘Layer 1′, type photo and press Return/Enter.
Create a new layer above the photo layer by clicking the Add New Layer Icon. Rename the layer text.
Using the Text tool 
add some text to the stage. Once the text tool is selected, set the desired properties (font and font size), click the stage and type the text.
When you mask, the image on the lower layer shows through the object on the mask layer. For this exercise the text will be the mask. We want the photo to show through the text.
You can center the text on the image by clicking Edit > Select All and Modify > Align > Horizontal Center (Center Vertical on the Mac). Alternatively, use the Selection tool to nudge the image and text to the desired location. Try to position the text over the best part of the image. Remember that the image will show through the text after the mask is applied.
Select the text and convert it to a graphic symbol by clicking Modify > Convert to Symbol. The text has to be converted to a symbol before you apply motion tweens (Shape tween objects should not be converted to symbols)
Click on frame 25 of the text layer and insert a keyframe by pressing F6. Insert a keyframe on frame 25 of the photo layer. Insert keyframes on frame 50 of both layers.
Select frame 25 of the text layer and select Modify > Transform > Scale. Scale the text to 0%
Right click the text layer and select Mask.
Test your movie by clicking Control > Test Movie. Your movie should look something like this
In order to display your movie on a web page you must export the file as a SWF file. Export your movie so it is ready for the web by clicking File > Export > Export Movie
Try combining different motion and shape tweens with masks. See what you can come up with!
Additional Resources
Making a mask
Shape Tweening Shapes to Text
Free Images @ Stock.Xchng
Image Resources from About.com
Read Some tips for finding a hosting company.
This week we will work on uploading your files to the Internet. I’m going to provide each of you with accounts so that you can upload your class work. This will give you an opportunity to learn how to manage a web site and it will be easier for you to submit your work to me.
Your free account will be a subdomain of robinshosting.com. This means that the URL to your site will look like this: http://yourusername.robinshosting.com. I hope to have additional domain name choices in the future.
Acalanes High School Policies, Rules and Procedures apply to these accounts. Profanity, inappropriate photos and graphics, and derogatory content about sexual orientation, religion, violence, and race will not be tolerated on these sites. Account content will be monitored.
You can visit http://www.robinshosting.com to sign up for an account. Read the front page of the site and the terms of service. After reading the terms of service you will find an order link at the bottom of the page. At the order page select the HSStudent package and complete the registration form. Be sure to supply accurate information including your email address. Usernames can be eight characters or less and you cannot use your username in your password. There is a notes section on the registration form; you must acknowledge that you have read the terms of service in the notes box or your new account will not be created.
I will setup your accounts within 24 hours. You will receive an email from me with your account details. You should look for the email at the beginning of Thursday’s class.
In order to ensure that you have coded your XHTML documents properly and you are usings standards compliant code you can validate the documents using a service provided by the W3C. The W3C is the organization that establishes standards for HTML, XHTML, CSS, and other web languages. To learn the benefits of writing standards compliant code read W3C Compliance and SEO.
Before you can validate your files you need to make sure that you have coded them to be XHTML Compliant. Read Making Documents XHTML Compliant to learn how XHTML differs from HTML.
After reading the article, try validating your lounge.html file @ http://validator.w3.org/. You will need to validate by file upload.
What were your results?
The W3C also has a validator for CSS. I find this really helpful when a CSS file is not displaying properly, it helps to track down errors in the file. Try using the CSS validator to validate the lounge.css file you worked on last week. If you got errors, post them here.
Read the following articles on Monday, February 27, 2006:
Tomorrow there will be a follow-up assignment, so be sure to get the reading done on Monday.
Have a great day!
With communications day last Thursday we didn’t have much of an opportunity to explore more CSS. Complete the following on Tuesday, February 21, 2006:
Exporting CSS Styles in Dreamweaver
Exploring CSS
Check out some of the cool CSS demonstrations at CSS Play. You can look at the code for any of the demonstrations by viewing the source code in your browser.
A GUIDE TO TOP COLOR COMBINATIONS IN WEB DESIGN Examples of Color Schemes and Color Combinations Within Designs - This is a really good article on color. Worth a read.
See you Wednesday.
Let’s spend some more time exploring CSS. Here are some resources:
CSS Properties Table - A simple table of CSS properties and possible values.
CSS2 Reference - This page lists CSS properties. Click the CSS property to display an example of how to use the code.
Remember that these properties and values need to be used with a selector. The property:value pair goes between the braces: Here is an example:
[code lang=”xml”]
h1 {
padding: 10px;
}
[/code]
h1 is the selector, padding is the property, 10px is the value. You can use multiple property:value pairs with a selector like this:
[code lang=”xml”]
h1 {
color: #000;
padding: 10px;
font-size: 18px;
background-color: #fff;
}
[/code]
Here are a few properties and values for you to try:
Add this to your h1 selector:
[code lang=”xml”]
padding: 10px;
[/code]
What happens?
Add this to your image selector:
[code lang=”xml”]
float: left;
[/code]
What happens?
Change float: left to float: right. What happens?
Add this to your blockquote selector:
[code lang=”xml”]
text-align: center;
[/code]
Change to value from center to right. What happens?
Add this to your h1 selector:
[code lang=”xml”]
text-transform: uppercase;
[/code]
What happens?
Try some new selectors like this:
[code lang=”xml”]
a {
color: green;
text-decoration: none;
}
[/code]
Look at the hyperlinks in the document. Did they change color? Did the underline disappear?
Try styling the lists in the journal.html document. Here are some examples http://www.w3schools.com/css/css_list.asp
Next week we will work on CSS positioning, classes, and ids so be sure to come back here for the Tuesday assignment. :)
For today, explore and have fun! Enjoy the holiday weekend!
To follow-up on our Wednesday class workshop, here are the instructions for creating and linking to an external style sheet.
Exporting CSS Styles from an Embedded Style Sheet
After you create an embedded CSS style and test your page to ensure that it is working properly you should export your CSS styles to a separate or external file. When you create a separate or external CSS file you will be able to use the file on other pages.
To export your embedded style sheet in Dreamweaver follow these steps:
Open the page that has the embedded style sheet (lounge.html)
Ensure that there is an embedded style sheet in the file. Remember that embedded CSS style sheets are placed in the in the head section of the document and that they are placed between opening and closing style tags like the image to the right.
Click File > Export > CSS Styles. Navigate to your site folder (lounge folder on the desktop) and give the file a name with a .css extension (for example: lounge.css). Click Save.
Checking the External CSS File
The embedded style sheet is still in your original XHTML file. If you want to ensure that the export process worked look in your site Files panel (Window > Files or F8). If the new CSS file does not display in the Files panel, click the refresh button 
in the files panel.
Double click the CSS file in the files panel to open and inspect that it has all of the code. After checking the file close it.
Deleting the Embedded CSS
Once the CSS code has been exported to an external file the embedded code can be deleted. Return to the original file, click on the Code View button 
and highlight the style code from the opening style tag to the closing style tag. Press the delete key on your keyboard to delete the code from the XHTML file.
If you return to Design View by clicking the Design View button you will find that your document is no longer styled. The external style sheet needs to be attached to the XHTML document.
Linking the External CSS Document to an XHTML File
Click Window > CSS Styles. The CSS Styles Panel will appear in the top of the panels group (left-hand side of the Dreamweaver screen). Currently there should not be any styles. Click the Attach Style Sheet button, browse to and select the CSS file. You should Link to the file and click OK. Your document should have the styles from the external file applied.
When you link an external CSS file, Dreamweaver adds the following code within the head tags of the XHTML document:
[code lang=”xml”]
[/code]Once you have created the external CSS file you can easily link it to any XHTML document.
Assignment 1: Attach the lounge.css file to the following XHTML files:
about\directions.html
beverages\elixir.html
Complete this assignment on 2/16/06.
On Monday we edited the lounge.html file in the lounge folder that I gave you on Friday. We added an embedded CSS style sheet to the lounge.html file. The embedded style sheet code was added to the head section of the lounge.html document.
Here is an example of the embedded CSS that I added to my lounge.html file:
[code lang=”xml”]
[/code]
In the above example I used the body selector to change the font-family for the entire document to Verdana and we changed the font color to maroon. By using the body selector we were able change the default settings for the entire page.
We then changed all of the h1 and h2 tags to gray and applied a 1 pixel solid border to the bottom of each of the headings.
Try adding the above CSS code to your lounge.html file. Remember that it needs to be placed inside the opening and closing head tags of the lounge.html file. Once you have edited the lounge.html file, read and complete Tuesday’s CSS (Cascading Style Sheets) Assignment.
