Making Drop Down Menus

Shown above is a new drop down menu we have added to our "Passy World" website. We created these menus using Dreamweaver's Spry functionality.

Making a Spry Drop Down Menu Using Dreamweaver

Dreamweaver has very useful "Spry" functionality, which allows a quick way of building a set of drop down menus. We have used Dreamweaver DW CS3 to create our menus shown in the image above, but this can probably be done in newer versions of DW as well.

This first video shows the basics of how to make a Spry drop down menu.



Here is a more detailed Video on Horizontal Spry Menus.
(Don't worry laddies and lasses, you will get used to this guy's accent quickly).

After pressing Play, make sure you increase the resolution from 360p to 720p and go full screen to get a very clear high definition video.



Here is a follow-on video about how to customise the Spry Menu.

After pressing Play, make sure you increase the resolution from 360p to 720p and go full screen to get high definition imagery that shows the CSS code clearly.

Watch this video very carefully, and do exactly what the guy says, especially when putting in your own repeating gradient backgrounds.



On our Passy World site, we decided we would make an APDiv to put the menu inside, so that we can easily mouse drag and reposition it on our page using Dreamweaver.

We then inserted a Spry Menu Bar into the APDiv, and adjusted it (as per the YouTube videos we had watched), to have all the headings we wanted across the top of our page.

This process automatically created a new "Spry Assets" folder in our site definition, that we then needed to upload to our live website, along with our new copy of the Index Page.

The CSS modifications were a bit tricky, and for some of the links we had to go into code view and manually add target="_blank" to make each listed link open as a new page.

We created a gradient see-through background "blueGrad130x40.PNG" using Fireworks, as per the Scottish guy's video, and used this as our background for the menu bar. It is very important to set this background to "Repeat" or we end up with white bits on our longer submenu names.

We also had to make all background colors transparent, and replace all the "SpryMenuBarDown.gif" and "SpryMenuBarDown.gif" images for backgrounds, with our own "blueGrad130x40.PNG" image.

Also on each new link we make for a menu item, we need to click on the text for the menu item, paste in the link, and then underneath this box in proerties, set target to "blank" so that is opens in a new page.

With the CSS it is a matter of trial and error, try changing things to bright red and preview in a browser, to work out what part of the bar they effect. Eventually we got something we liked, but it took about 2 hours to figure it all out.

The CSS changes all get written automatically to a file called: "SpryMenuBarHorizontal.css" in the "SpryAssets" folder, and this whole folder needs to be migrated along with Index.html, and the menu image "blueGrad130x40.PNG", to our live website in the USA.

Here is the final CSS that we ended up with for the Passy World Spry Menu:

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

Click here to open or save the “Spry Menu CSS Code” PDF

There was only one minor problem with the upload to our live site. Eg. Because the "PWorldImages" folder does not live under a "PworldHome" folder on the real site, and so we had to go and edit all the paths in the CSS code and remigrate it.

We also found out how to remove the annoying white border around our website by setting up this code in the Index page HTML:



Testing of the new Homepage with Spry menu was done in Firefox, IE, and also Safari on the iPad, and they all came up okay.

Click the following link to check out our new Spry Menu on the Passy World homepage for yourself:

http://www.passyworld.com/

This "Passy World" website is one that we are slowly developing so show how Dreamweaver and Fireworks can be used for website building.
It also supplies some quick and easy links to some of our Facebook photos.

Here are some links to some other blog posts related to the building of our Passy World site:

Design-homepage-in-fireworks.html

Make-homepage-in-dreamweaver.html

Make-contact-us-webpage.html

Making-an-iframe-web-page.html


Finally, here are some additional videos we found for making Tabs and Menus in Dreamweaver by coding your own HTML and CSS, rather than using the built in Dreamweaver Spry functionality.

They claim that these type of menus are faster than the DW Spry ones. The videos certainly offer a good insight into how the CSS works to style up lists into nice menus, and are definitely worth watching for learning value.


Making Tabs in Dreamweaver using CSS

This video shows how to make a set of horizontal tabs that can link to other pages.
It uses raw HTML code and CSS code, and is very clearly explained step by step.

Not sure if this is exactly what we could use on our Passy World page, but it is interesting. Here is the Part 1 of 2.



And here is the second part of this video.




Making a Menu with Drop Down Links using CSS

This video shows really well how to use raw HTML and CSS, (instead of inserting a Spry), to create a Horizontal roll over drop down list menu.
The tutorial is in two parts. Here is Part 1.



And here is the second part of this video.




So that's it, now we can easily update our Menus with new drop down items and links as we need them. Very Nice.

Enjoy,
Big Passy Wasabi

Cuddle Up Day Comments Hugs Graphics Myspace Animation Stock Images

Cuddle Up Day Comments Hugs Graphics Myspace Animation Stock Images.National cuddle up day greetings for your loved ones.happy cuddle up day and hugs comments for hi5 friendster xanga multiply.cuddle up day cards greetings for your friends and relatives this winters.

Cuddle Up Day graphics Hugs and Smiles

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://www.trulygraphics.com/wp-content/uploads/2010/09/hugs-smiles.gif" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Cuddle Up Day Glitter graphics is an opportunity snuggle up to someone on a cold winters day.

Cuddle Up Day Friends graphics

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://media.meme4u.com/ecards/celebrate-the-date/cuddle-up-day/1572-for-my-friend.jpg" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Animated Cuddle Up Day Greetings Card. Animated Cuddle Up Day Ecard for your friends.

Cuddle Up Day Comments Big Hug graphics

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://alllayedout.com/Comments/Comment_Pics/graphics/a_big_hug_4_u.jpg" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Web design pictures hugs cuddles for your friends on myspace facebook hi5 Friendster.

Cuddle Up Day Clipart best Huggs graphics

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://www.e-michael.jp/gallery/chihuahua14.jpg" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Cuddle up day clipart and huggs pictures for your social networking profile art prints.

Cuddle Up Day Hugs to u graphics

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://t3.gstatic.com/images?q=tbn:OzUnCY7exgdV5M:http://img.vmessages.com/hugs/1.gif&t=1" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Myspace Animation Stock Images cuddles winters hugs aniamtion graphics.

Its Cuddle Up Day graphics

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://media.meme4u.com/ecards/celebrate-the-date/cuddle-up-day/1568-waiting-to-be-cuddled.jpg" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Every Loving guy wants a special girl to cuddle up with after a hard day, send these cuddles to your loved one.

Cuddle Up Day Qutoes graphics

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://ak.imgag.com/imgag/product/full/ap/3025413/graphic1.jpg" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Warm Cudles up day Twitter Orkut hi5 Friendster xanga multiple linkedin.

Warm Cuddle Up Day graphics

Links to this Picture (Html Codes) (Copy/Paste into your own Website or Blog):
<a href="http://kaalchakra-graphics.blogspot.com/" target="_blank"><img src="http://media.meme4u.com/ecards/celebrate-the-date/cuddle-up-day/1570-jumbo-size-cuddle.gif" border="0" alt="Huggs and Cuddles Comments" /></a><p><a href="http://kaalchakra-graphics.blogspot.com/" target="_blank">Free Photos Angels Fairies Mermaids Gothic Photos Glitter Graphics <br /> http://kaalchakra-graphics.blogspot.com/</a></p><br />

Scratch Programming 3

Make sure you have sound turned on for this one.

Click the top right hand corner Green Flag to start the animation, and click the round stop sign to finish it.

This post is all about using Scratch to animate your Name in interesting ways.

We built this first project: "Animate Your Name: Passy Rocks" as follows.

First we obtained some raw images of letters off the Internet. For each letter we obtained two images: the normal letter, and then another “old style” version of the letter. We then used Photoshop to reduce their size to 50x50 and saved them to our PC as .GIF files.

We then set up our first sprite for the letter P, and imported two costumes for it, containing the normal letter, and the surprise “old style” version.



We then set up the following Script on the letter P, to make it rock forward and back, and then pause on the surprise letter, and keep repeating forever. Later on we fine tuned the numerical values, but the script structure was kept the same.



To create the remaining letters, it was just a matter of right clicking this Sprite in the Scratch work environment and selecting “Duplicate” and then modifying it to be a different letter in the costume, and dragging it to its position on the stage.

We then created an additional Sprite containing a picture of a Guitarist, and made him appear only when the second set of letters appear by setting up his scripting as follows:



This worked fine in the Scratch Environment, but the timing was out when it was played online on the web page here. We managed to fix this by creating a Broadcast message to the Guitar Sprite to appear when the letters change costume.

To fix this we do NOT need to create a new variable called "LettersChanged". Instead we simply bring out a "Broadcast" control block, and we can define the message name of "LettersChanged" right there, via "new" on the control block.

We set up the letter P to broadcast "LettersChanged", and the guitar sprite to receive this and act upon it by appearing on the stage. (Show/Hide commands).

We also needed a restarting message, so that the guitarist could hide afterwards. We set this up in the letter P script as well.

On the Guitarist Sprite, we then imported a Scratch "cymbal crash" sound into the project, and set up for it to play whenever the guitarist appears.

For the Letter P sprite we introduced Drums, but had a problem with the Guitar Sprite turning them off, and so we had to add a receiving broadcast message statement to reactivate the drums.

We then played around with some timings, and were done. Note that adding sounds took our project from 287K up to 432K in size.

For the Stage background, we just used one of the “Indoors” backgrounds that comes with Scratch.

However, when we put it on our website and played it online, the sounds did not quite sync up, and so we had to adjust the timings loop numbers etc again.
Eventually we got it all working in time.

Here is the final Letter P script:



And here is the finished script for the Guitarist Sprite:



The other letters of our name each have the following script on them:





Making a Musical Name - Version 1

This project was adapted from a Project made by "atyo-dickerson" that we found at the MIT site at: http://scratch.mit.edu/projects/atyo-dickerson/514178

It uses X and Y coordinate positions of the mouse to create different pitched notes, when the mouse is moved across the background.

Click the top right hand corner Green Flag to start the animation, and click the round stop sign to finish it. Now Drag the mouse all over the screen to paint the name and hear some wonderful music. Press the Space Bar to clear the screen at any time.

To build this animation, four copies of the original name text were created as separate costumes.



The following code was then used to alternate through the costumes while repeatedly cloning them with the "Stamp" command. The number 16 "Dulcimer" sound was used, as per the original MIT project.





Making a Musical Name - Version 2

Make sure you have sound turned on, then click the top right hand corner Green Flag to start the animation. Then move the mouse across the letters to play the piano note for each letter.

Changing the bottom right hand corner speed will vary the sustain of the notes. (Space Bar Clears all line drawings).

The main parts of this project were taken from a similar project by “Duckey355” from the MIT site at: http://scratch.mit.edu/projects/Duckey355/57592

First of all the animation has some introductory instructions text contained in the costume for "Sprite1". The script for Sprite1 contains the "ghost" effect which immediately fades the text away as soon as the green Start flag is clicked.



The letters for our name were all obtained by Photoshopping an Alphabet we got from Google Images, and saving each cropped letter as a transparent .PNG file.

The Background has Scripting to set the "Speed" variable to an initial value of 0.2. There is also coding for space bar to clear the pen drawings at any time.



The Speed variable icon was then right clicked on the Stage and set to "Slider" so that a range of values could be chosen between 0 and 1. Large values make long music notes, and short values make short stacatto type notes.

The Letters are each set up the same. The coordinates of their start position in the script are obtained by reading off the values of where they are on the screen when moved to their stage positions during the build.

When we click on the "Play Note" values it gives us a Piano keyboard to pick the note number. We used the notes for our letters as Middle-C=60, D=62, E=64, G=67, High-C=72. So by pressing the letters P, A, and S, on our name in the right order, we can actually play "Mary Had a Little Lamb".

There is also code to make the Pen drawn lines and the letters return to their original start positions each time.





Getting R2D2 to Say Our Name

Make sure you have sound turned on, then click the top right hand corner Green Flag to start the animation. Type your text into the bottom of screen input box, and then click the tick mark to hear R2D2 say your message.

We got this project by "Leylosh" from the MIT site at http://scratch.mit.edu/projects/complex/924468

This project came with the alphabet of R2D2 sounds already imported, (one sound for each letter of the alphabet). When we type our name in the Input Box, the Script goes through each letter from left to right, making the appropriate R2D2 noise each time.

All we did at Passy World was create a new red R2D2, to match a Background we saved from Google Images and Photoshopped to the standard Scratch background size of 480x360.

Here is the Script that runs for the whole R2D2 translator.



So that's our name done to the max in Scratch.

Enjoy,
Big Passy Wasabi