Changing the right click menu in flash
September 28th, 2009
Changing the right click menu in flash files is relitivley simple. Using the code below and placing it on the root of your document you can add a new right click menu to your published files. This disables the existing zoom in, zoom out ect and enables you to attach functions to the buttons, whether it be launching a new web page or changing the colour of the movie clip document.
So heres what to do:
Paste the following code onto the root of your flash document, directly onto a blank frame, publish your movie, Job done!
And heres the code:
//define any functions to included on a menu item
function launchsite1(){
getURL("http://www.zenduo.co.uk", _blank);
}
function launchsite2(){
getURL("http://www.zenduo.co.uk/contact.php", _blank);
}
////Declare a new menu item
newmenu = new ContextMenu();//Hide the built in flash menu
newmenu.hideBuiltInItems();//define your new menu items
item1 = new ContextMenuItem("My Home Page", launchsite1);
item2 = new ContextMenuItem("Another Web Page", launchsite2);
newmenu.customItems.push(item1);
newmenu.customItems.push(item2);//Build New Menu
_root.menu = newmenu;You can change add or remove any of the items above to suit your requirements.
Posted in ActionScript & Flash | No Comments »
For loops in Flash – Setting global variables
September 28th, 2009
A common ‘mistake’ when working with any programming language is over use of code, or rather not being efficient with code. The most common mistake, and most easily rectified is repetition of similar or exact snippet of code, over and over and over and over and over and over again…. just like the example actionscript code shown below.
Example of Inefficient use of code
_global.variable1 = 0;
_global.variable2 = 0;
_global.variable3 = 0;
_global.variable4 = 0;
_global.variable5 = 0;In the above example we are simply setting a whole load of global variables in flash. You can imagine that if the number of variables increased, say for example 40 variables, you would need 40 lines of code to achieve the desired result.
To simplify this process i have created a simple snippet of code could be contained within a for loop, creating and setting all of these variables in only 3 lines of code. By using a for loop we can add or decrease the amount of variables increased by changing just one variable.
Efficient use of code
/// set how many variables should be created
number_of_times = 5;
/// loop 5 times creating 5 variables with the value of 0
for (var i = 1; i<(number_of_times+1); i++) {
_global["slide"+i] = 0;
}
The Benefits
This makes it much easier to increase or decrease the amount of variables created, simply change “number_of_times = 13″ to a greater number.
If for example we wanted to rename the varaibale from “variable” to “myVariable” we would ammend one line of code… not 5 as shown in the initial example.
This method can be applied in a variet of different ways helping you become more productive and efficent with your code.
I hope this simple little explanation helps someone out.
Posted in ActionScript & Flash | No Comments »
Actionscript 2 Shuffle an Array
September 28th, 2009
Using arrays in flash is always a handy and efficient way to work with variables etc. But some times its handy to be able to shuffle the results in the array, for example when creating a quiz to allow a random set of questions.
Using the code below (actionscript 2.0 but should still work in 3.0) we create an array and trace the results.
The Code
Array.prototype.shuffle=function(){
for(i=0;i<this.length;i++){
var tempvar=this[i];
var ranVar=random(this.length);
this[i]=this[ranVar];
this[ranVar]=tempvar;
}
}
myArray=["flash","dreamweaver","illustrator","in-design","photoshop"];
myArray.shuffle();
trace(myArray);
This would return a trace with answers such as:
‘dreamweaver, flash, in-design, photoshop, illustrator’
Posted in ActionScript & Flash | No Comments »
Actionscript 2 – Flip Movieclip
September 28th, 2009
Simple short and sweet. If you have ever needed to flip a movieclip so its infact facing the other way use the following:
mymovieclipname._xscale=-100;
Posted in ActionScript & Flash | No Comments »
Min-height hack for Internet Explorer 6
September 28th, 2009
Yes thats correct, another css hack for i.e 6 this time it’s ‘min-height’. As some of you are probably aware i.e 7 now supports the ‘min-height’ css property making our lives much simpler, or rather even more complicated as we have to create hacks or work arounds for old browsers such as i.e 6.
Show below i have included the css for creating a div element with a minimum height, of course this could be applied to any element of your html document. For the div example that i am showing, this method is incredibly usefull when you have content that does not fill a specified area on your webpage. By using the min-height property you will effectivley allow your div to scale and expand but the hight will go no lower than the specified pixel size (e.g. 200px).
What you will see below is the basics of getting your div to display correctly on nearly all browsers (I haven’t managed to find any that dont support this method).
Example of min-height code
mydivname {
min-height:200px;
height:auto !important;
height:200px;
}
Try it out and see how easy it is to use.
Posted in CSS Tips & Tricks | No Comments »
CSS Navigation Examples
September 28th, 2009
Navigation / Drop down Navigation in CSS can cause many problems across different browsers browsers.
After crawling the net i managed to stumble across a good site with some very nice examples, both build wise and visually.
The site links to a number of Horizontal and Vertical drop down menus.
Click here to check them out.
Posted in CSS Tips & Tricks | No Comments »
IE only CSS Hacks & IE 6 or below Hack
September 28th, 2009
If you’ve created your website but want to style or change the formatting of your css depending on the users browser version, ie allows you to set a different css style sheet using this handy little hack.
Internet explorer recognises the following:
If you need to target any users browser that is just internet explorer simply use the follwoing code and place in your <head> </head> tags.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" mce_href="css/ie.css" />
<![endif]-->
If you need to target any users browser that is internet explorer below version 7, e.g. 6, 5, 5.5… use the following code and place in your <head> </head> tags.
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6orlower.css" mce_href="css/ie6orlower.css" />
<![endif]-->
Posted in CSS Tips & Tricks | No Comments »
CSS Star hack * {your css here}
September 27th, 2009
The CSS star hack is one of my favorite hacks when developing any good website design in CSS. This CSS star hack effectively allows you to reset any attribute to all HTML elements of your web page, saving you time and code if used correctly. It’s a great way to remove padding or margin on all HTML elements on your website giving you a blank canvas to start developing on especially when you have ie6, ie7 and ie8 to deal with!
How to apply the CSS Star Hack
Firstly I will begin by explaining how and where I generally use the star hack within your css document.
Begin by opening your stylesheet, and paste the CSS below into the very top of your stylesheet :
Code:
* {
margin:0;
padding:0;
border:none;
}
What does it do?
By doing this we are effectively setting every element of the HTML document to have no margins, no padding and no borders.
This can be of major benefit to you when building a website from scratch, mainly due to the fact that almost all browsers apply different padding, margin and border defaults. By applying the css shown above we are making things easy for ourselves by setting a blank canvas and stripping any elements from its previous default style.
Pros:
- Can increase productivity and reduce development time.
- Could reduce your code dramatically.
- Resets all HTML elements so they have no predefined styles allowing you to eliminate browser compatibility issues.
Cons:
- Could put more load on you browser.
- Technically it might increase code if not used appropriately.
Things to consider:
The CSS star hack is great for removing the margin and padding etc but don’t get too carried away. For example if you set the colour to be black, this will apply this to every element of your web page and can be very annoying. This will mean you have to set the colour on everything that is different thereafter and will increase your code dramatically.
Give it a go and see how much time and coding it can save you. I’ve never looked back since implementing it into every website I create.
Posted in CSS Tips & Tricks | 1 Comment »
Shorthand CSS – reduce your CSS in minutes
September 27th, 2009
Anyone who works with css knows the great potential and flexibility that it has given designers, enabling us to create beautifully designed and well coded websites. By taking advantage of simple css shortcuts (e.g a line of code relating to one property) you will be able to reap the benefits of time saving and effective code, not only helping you create, but also eliminate any issues that might arise and also make updating much faster.
A common assumption by newbie cssers is to specify each individual property line by line (this is by all means not wrong, but it is however a longwinded way of writing your css). Below in the next set of examples i will try to explain some of the basic methods for shortening your css.
Inefficient code
#selector {
margin-top:25px;
margin-right:0px;
margin-bottom:25px;
margin-left:0px;
}
Efficient code
#selector{
margin:25px 10px 25px 10px;
}
As you can see we have manage to shorten the css styling from 6 lines to only 3. The way this works is by setting the properties in order: Top, Right, Bottom and then Left.
Similarly to simplify your code further you could use the following for the padding attribute:
Even more eficient code
#selector{
margin:25px 10px;
}
This works by setting the top and bottom margin to 25px and the left and right margin to 10px;
If the all of the attributes are the same (e.g top, right, bottom and left) you can simplify your code once again:
#selector{
margin:40px;
}
The example above shows an example where a 40px margin is required on the top, right, bottom and left of your div.
This method isn’t just used for the margin attribute it can also be used for things such as padding and the same principle can be carried into things such as font, background, border etc. Below i will show some example of long winded css compared to shorthand css.
Fonts
Example 1
#selector {
font-weight: bold;
font-family: verdana;
font-size: 115%;
}
Example 1 in shorthand
#selector{
font: bold 115% verdana;
}
Background
Example 2
#selector {
background-color:#003366;
background-image:url(images/background.gif);
background-position:top;
background-repeat:no-repeat;
}
Example 2 in shorthand
#selector{
background:#003366 url(images/background.gif) top no-repeat;
}
Borders
Example 3
#selector {
border-weight:1px;
border-style:solid;
border-color:#ffcc00;
}
Example 3 in shorthand
#selector{
border:1px solid #ffcc00;
}
As you can see the above examples show a clear demonstration of how to code more efficiently.
Body is your friend
Another common mistake that i often see when editing other peoples work is the constant use of font this, font that, and its used on nearly every div, or element of the xhtml document.
For example
#mydiv{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
.mytextarea{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
By utilising the body tag correctly you can save your self a lot of hassle and extra code.
Simply start by setting everything in the body tag like below:
body{
font:bold 62.5% Arial, Helvetica, sans-serif;
colour:#000;
}
Additionally if you know that you want everything to have the same font, whether it be an input element or just a standard div, make use of the star hack:
*{font-family:Arial, Helvetica, sans-serif;}
To find out more regarding the star hack click here
Posted in CSS Tips & Tricks | No Comments »
Transparent Boxes using CSS
September 27th, 2009
Transparent boxes are becoming a common element to many new designs, as you will see our latest design is build around the design of 2 transparent boxes however this was done using png’s.
There are a number of ways to achieve this effect but today i will show a simple example of how to achieve this using CSS. I am not certain to what extent this code will work on all browsers but any feedback that you might have please let me know as i will include it in this post.
The below example will show a box using the background colour of white and an alpha of 50%.
Transparent Box CSS
#mydiv {
width: 300px;
height: 50px;
margin: 20px 0;
background-color: #ffff00;
/* Internet Explorer */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
Here’s what it looks like
50%
30%
10%
Advantages
The only real advantage, but a good one, is that you no longer need to use images (e.g. pngs) for your backgrounds which could result in faster loading times for your web page.
Disadvantages
This may not work on all browsers, it certainly does for the most recent versions but how far back this technique goes back I’m not too sure. Using the code above you will also need to keep the width set, in IE it seems to break without it. But im sure there is a work around for this.
Posted in CSS Tips & Tricks | No Comments »