RSS
 

Archive for the ‘Scrap Work’ Category

Text Style Rollover!!!

24 Aug

In Macromedia Director, I mean Adobe, there are two main forms of text which you can add to your movies and even add various interactivity to these text types. These are regular and field text. Briefly, regular
text allows for paragraph formatting, kerning, line spacing and other functions found within the Text Inspector menu. On the other hand field text

“is standard text controlled by your system software, the same as the text you see in dialog boxes

and menu bars. Director does not anti-alias field text or support paragraph formatting and tabs for fields”

Basically, regular text has the advantage of the features offered by the Text inspeactor allowing for various formatting. However, it is best suited for large types. On the contrary, field text
is best suited to create the smallest possible text cast members that don’t need to be anti-aliased.

To add regular text, simply:

1. Left click on your text tool within Director, it resembles an ‘A’. Then left click again onto your stage. You may now edit the text to your liking.

or

2. Go to Insert>Media Element>Text

To create rollover on the regular text add the following script piece(s) to the cast member.

on mouseEnter
member("text").fontStyle = [#bold,#italic,#underline] --style change
member("text").forecolor = 3 --changes the colour of text
member("text").fontSize = 20
end
on mouseLeave
member("text").fontStyle = [#plain]
member("text").forecolor = 50 --changes text to some other colour
member("text").fontSize = 14 --changes size of font
end

or..

on mouseWithin me
member("text").fontStyle = [#bold,#italic,#underline]--style change
member("text").forecolor = 3 --changes the colour of text
member("text").fontSize = 20
end
on mouseLeave
member("text").fontStyle = [#plain]
member("text").forecolor = 50 --changes text to some other colour
member("text").fontSize = 14
--changes size of font
end

That’s it!

 
No Comments

Posted in Director

 

CSS-Floating DIVs

24 Aug

This tutorial is related to CSS layout techniques. If you seek something like this, then this tutorial might be useful to you.

<div class="box_container">
<div class="box_header">Simple Div-ing</div>
<div class="box_content">
<div class="panel1s">
<div class="panel1_sub">
Your body text here.
</div><!--End panel1_sub -->
</div><!--End panel1 -->
<div class="panel2s">
<div class="panel2_sub">
Your body text here.
</div><!--End panel2_sub -->
</div><!--End pane2s -->
<div class="panel3s">
<div class="panel3_sub">
Your body text here.
</div><!--End panel3_sub -->
</div><!--End panel3s -->
</div><!--End box_content -->
<div class="box_footer"> © You!</div>
</div> <!--End of box_container-->

Here’s the CSS styling

*{/*This is optional, I like to remove all browser default settings and then add my own later.*/
margin:0; padding:0;
}
.box_container{  /*Once you give this a defined width, you can also add  margin: auto auto; to centre the container*/
width: 400px;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.box_header{
background:#003333;
text-align: center;
}
.panel1s, .panel2s, .panel3s{
float: left;
width: 133px;
margin:auto auto;
}
.panel1s{
background: #336600;
}
.panel2s{
background:#FF6600;
}
.panel3s{
background: #663399;
width: 134px; /*Over writes previous 133px width so that the panel meets the edge of the box_container*/
}
.panel1_sub, .panel2_sub, .panel3_sub{
padding: .3em .3em;
width: 100px;
margin:auto auto;
}
.box_footer{
/* clear: both; drops the div below the floating ones. You could have just used clear: left; but this only clears divs floating to the left, which is what we need, but if you added a div to float right, then you wouldn't have to worry about editing the code. clear:both; clears the DIV in question from all previously floating divs.*/
clear:both;
background:#000033;
text-indent: 10px;
}

You would have noticed that I added .panel#s_sub divs to the .panel#s and none for the .box_header and .box_footer, you are allowed to add more sub/nested divs. I only did for demonstration purposes, sub/nested divs allows you to format inside text and the like without messing with the
main structure. In the example, I gave the .panel#_sub paddings, which would keep the text and any other elements away from the edges.

If you wanted to keep spacing between your panels, then you could have just given your .panel2s, and .panel3s margin-left (or margin-right) settings. Whenever you add margins, you must also consider your widths of your floating divs, any panel that breaks beyond the container will drop. Let’s say you added a margin-left: 40px; to .panel2s, then this would push .panel3s to the edge, once .panel3s passes the boundering width of the .box_container, it will no longer float next to it’s previous brother, en otras palabras, .panel3s will drop! So therefore, the wrapping container, in this tutorial .box_container, should have a width large enough to contain its child DIVs/panels.

The limits are endless with what you can do. Hopefully this tutorial gives you ideas on how to take things further. Of course, your own site would have larger widths, the demonstrated one is just small to fit neatly in this page. :)

For additional info, it is important that you give your main container (in this tutorial it’s .box_container) a fixed width, because if a user toggles with the window size, making the window size smaller than the size of your panel containers, then you will notice that the panels will drop, and you’ll lose your float:left; effect. So do remember, that floating divs need fixed width properties, and by fixed I mean don’t use width: auto or width: xxx%, use px units or so.

Download file.

Cheers.

 
No Comments

Posted in CSS

 

CSS-DIV Expandable Content Box

24 Aug

Let’s get started!

After you’re done creating and saving your 3 slices..

  1. Header
  2. Content
  3. Footer
<div class="box_container">
<div class="box_header"></div>
<div class="box_content">
<div class="bodytxt">
Your body text here.
</div>
</div>
<div class="box_footer"></div>
</div> <!--End of box_container-->

Here’s the CSS styling

.box_container{  /*Once you give this a defined width, you can also add margin: auto auto; to centre the container*/
width: 608px;
}
.box_header{
background: url(sd_01.gif) no-repeat;
width: 608px;
height: 56px;
}
.box_content{
background: url(sd_02.gif) repeat-y;
width: 608px;
}
.bodytxt{
font-family: century gothic;
font-size: 10px;
color: #339933;
margin: 0 1em 0 2em; /*Set margin values for top=0,
right=1em, bottom="0" left="2"*/
}
.bodytxt p{ /*Remove browser paddings and margins
-THIS IS VERY IMPORTANT*/
margin:0;
padding:0;
}
.bodytxt p{
padding: .5em;  /*Add your desired paragraph paddings. */
}
.box_footer{
background: url(sd_04.gif) no-repeat;
width: 608px;
height: 28px;
}

Please note that you must remove the paragraph margins or else in browsers like Firefox, there will be a space/gap between the header and the content images and the content and the footer images. Once you remove the margins, you can then give padding values to the p tag.
The final result in action here!

Download project files here…

 
No Comments

Posted in CSS

 

Adding Sounds to Objects

20 Aug

Being an awesome multimedia program as it is, Adobe Director allows us to add sounds to various objects. For instance, we can add our own little sounds to buttons and the like. Adding a sound to an element is as easy as counting your fingers. All you need is basic code which you can re-use day in and day out. [The wonderful nature of programming] :-) . So let’s add some sounds, in this tut, we’ll just add the sound to a simple button.

Load Adobe D and then add the following code to your object (text, button, image).

on mouseEnter
sound(2).play(member("button"))
end

This code added to your object named ‘button’, plays the sound in channel 2 whenever the cursor or mouse enters the area of the object. Naturally, you could have had these handlers instead:

on mouseUp --plays sound whenever object is clicked
sound(2).play(member("button"))
end

or

on mouseWithin me  --plays sound as long as cursor remains
sound(2).play(member("button"))
end
 
No Comments

Posted in Director

 

Restoring Backing-Up MSN Custom User Emot-icons

20 Aug

Millions of users around the world utilizes MSN messenger, an application for connecting with others online. One of the most common ways of expressing your feelings online is to make use of emoticons. While the default emoticons for MSN messenger are enough for some users, other users like to personalize their utility by using custom emoticons.

Okay, so you’ve got some really cool custom emoticons and want to save them to an external storage device in the event of a system failure. So what do you do? Well, it’s pretty simple. Just follow this little guide and you’ll be backing-up your emoticons in less than a minute.

You will first need to enable viewing of hidden files and folders. To do this on:

Windows Vista

  1. Click [Start] or Windows Logo orb
  2. Go to Control Panel
  3. Click classic view on the left panel, then click on Folder Options
  4. From the Folder Options pop up window, click on the View tab,
  5. Under ‘Hidden files and folders‘, select ‘show hidden files and folders
  6. Click [Ok]

Now that you can view your hidden files and folders, time to back-up those emoticons.

  1. Click [Start] or Windows Logo orb
  2. Go to: My Computer\Local Disk or C Drive\Users\YourName\AppData\Local\Microsoft\Messenger\you@hotmail/live.com\ObjectStore\CustomEmoticons
  3. Copy and paste all the files in this folder to a back-up location, that’s it!

Windows XP

  1. From the tools menu in Windows Explorer click Folder Options
  2. From the Folder Options pop up window, click on the View tab,
  3. Under ‘Hidden files and folders‘, select ‘show hidden files and folders
  4. Click [Ok]

Now that you can view your hidden files and folders, time to back-up those emoticons.

  1. Click [Start] or Windows Logo
  2. Go to: My Computer\Local Disk or C:\Documents and Settings\Owner\Local Settings\Application Data\Microsoft\Messenger\you@hotmail/live.com\ObjectStore\CustomEmoticons
  3. Copy and paste all the files in this folder to a back-up location, that’s it!

In the event of a system failure where you had to re-install your OS, therefore also having to re-install a fresh copy of MSN messenger, simply copy the files from your back-up device, then return to the CustomEmoticons folder, paste your files, and re-start MSN messenger if it was already initialized.

If your system crashed before you could’ve made a back-up, then according to your re-install method, you’ll find a WindowsOld folder located on your local disk drive. Just open this folder and follow the same steps above.

What if your system is unbootable, or you did a re-install, basically, what if there was no access to a back-up to actually do a restore? Well, there might be some hope, software likeActive @ File Recovery might be able to find these files for you, that’s if the location data sector wasn’t written over by new data. Anyhow, this method goes beyond the scope of this post but in any order, it’s still helpful to know that there’s an alternative for the problem.

 
No Comments

Posted in Windows

 

Hello world!

20 Aug

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!