IpixDesigners

AS3 Loading

noreply@blogger.com (ipixdesigners) — Thu, 04 Mar 2010 10:05:00 +0000

here is a step by step procedure to add a loading to a as3 flash.
1) Keep first frame clean to add loading to first frame.

2) create load_mc movieclip on first frame with 100 frame of loading animation. and a dynamic textbox inside load_mc named percent_txt;

3) give an instance name to load_mc - "load_mc"
4) finally add the following script to first frame of your flash document.

----------------------------------------------------------------------------------
stop();

var timer:Timer=new Timer(10);
timer.addEventListener(TimerEvent.TIMER,loading);
timer.start();

function loading(evt:Event)
{
var loaded=root.loaderInfo.bytesLoaded;
var total=root.loaderInfo.bytesTotal;

var percent=Math.ceil((loaded/total)*100);
load_mc.percent_txt.text=percent+"%";
load_mc.gotoAndStop(percent);
if(loaded>=total)
{
timer.stop();
gotoAndStop(2);
}
}

-----------------------------------------------------------------------------------

download FLA file

Rounded corner css button with single background image

noreply@blogger.com (ipixdesigners) — Fri, 18 Sep 2009 05:09:00 +0000

Here is a simple method to make the rounded corner button for navigation using css

Demo
______________________________________________

______________________________________________

Follow below description to add these type navigation to your website:

1)Add background image
First download below image to your images folder.

2)Add html code
followin is the html code of navigation bar. just add this code to your web page where you want to show the navigation bar

<ul class="nav">

<li><a href="#"> Home </a></li>

<li><a href="#"> Our Services </a></li>

<li><a href="#"> Sitemap </a></li>

<li><a href="#"> Contact Us </a> </li>

</ul>

3)Add CSS Styles
Add below css styles to your stylesheet files or to your html page

ul.nav{
padding:0;
margin:0;
}
ul.nav li{
float:left;
list-style-type:none;
margin-left:5px;
}
ul.nav li a:link,ul.nav li a:visited{
text-decoration:none;
font-weight:bold;
font-size:14px;
color:#669933;
height:35px;
display:block;
padding-left:15px;
cursor:pointer;
float:left;

}
ul.nav li a:hover{
text-decoration:none;
font-weight:bold;
font-size:14px;
color:#FFFFFF;
background:url(images/nag_bg.jpg) no-repeat;
}
ul.nav li a:hover span{
background:url(images/nag_bg.jpg) no-repeat right;
}
ul.nav li span{
display:block;
height:35px;
padding-right:15px;
line-height:30px;
float:left;
}

Download zip file

Welcome to ipix Designers blog

noreply@blogger.com (ipixdesigners) — Mon, 27 Jul 2009 09:05:00 +0000

Here we can communicate/share our design ideas....