3d rotating sphere using flash action script
5 HOT TRENDS IN WEB DESIGN FOR 2013
In the fast-moving nature of the web, it’s only natural that website design trends change frequently. The year 2013 will confirm to hold just as much change in web design practices than prior year.
1. Responsive Web Design
Responsive design is the approach of developing one set of code to accommodate the display of a web design in all display atmospheres, in spite of screen dimensions.
For example, you may see one variety of the design on a desktop, another on a tablet’s horizontal view, another on a tablet’s vertical view, and yet another on a Smartphone. Responsive design is a content-focused move toward to building web experiences, and is future-focused in that the design is fluid and can adapt to new technology.
2. Design in Full Screen
A wave of better visual design is upon us. Look at the recent redesigns of Facebook, Twitter and LinkedIn, and it’s evident that some of the most popular sites on the web are determined to deliver a more visual experience.
Similarly, we expect to see more companies taking the visual direction to a better extreme with the implementation of full-screen designs.
3. Parallax Design
One of the cooler developments in web design in recent years is parallax design, which integrates special scrolling techniques whereby background images on the screen move slower than foreground images. The consequential illusion on the screen is one of 3D depth. The effect can be perfectly amazing.
See examples at beetle.com, activatedrinks.com, stopatnever.com, sullivannyc.com and the Air Jordan 2012 website. Be sure to scroll down the page!
4. Designed Fonts
In the past, in order to attract a website, a designer should typically look to images. In 2013, expect fonts to be a significant design element in many websites. This is thanks to web fonts such as those listed at Google Fonts and MyFonts, allowing designers to go beyond standard system fonts.
There are many different font formats for the web, including EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO and XSF, which can make font selection somewhat challenging. However, with the use of the CSS3 @Font-Face rule, designers can have a boundless number of custom fonts with which to work. Perhaps one day in the not too distant future web fonts insert will become the default design practice, enabling almost any typeface and any font style, just like in print design.
5. Social Media Integration
Social media integration historically has meant social checklist in a website, or the display of Facebook and/or Twitter activity feeds in a website. These examples of integration are limited, and begging for a accurate integration of content and engagement.
In terms of basic tools, Click To Tweet is a good option in that it files in on the very specific pieces of data that would be most shareable, rather than forcing the user to share the entire page. We particularly recommend the tool.
The major social platforms each offer a variety of integration options, as well. For example, Twitter for Websites, Twitter’s embedded timelines, and Facebook social plugins deepen site and social integration. Even though, these are examples of the current state of “patchwork integration” slightly than what you should consider accurate integration.
Expect 2013 to start heading in that direction.
Rendering of 3d colorful sphere rotation using Flash:
Step-1: Open a new document in flash is about the size of 400 X 410.
Step-2:In layer-1 type the text which ever you want. Here I gave “Move the Mouse over the surface to rotate the sphere”.
Step-3:Create layer-2 and write the following action script in keyframe-1(F9).
var boardSize:Number=350;
var cubeSize:Number=Math.round(boardSize/3);
var rotateFactor:Number=1.2*320/boardSize;
var fLen:Number=2000;
var spBoard:Sprite=new Sprite();
this.addChild(spBoard);
spBoard.x=200;
spBoard.y=200;
var shBack:Shape=new Shape();
spBoard.addChild(shBack);
drawBack();
var shCube:Shape=new Shape();
spBoard.addChild(shCube);
var doRotate:Boolean = false;
var prevX:Number;
var prevY:Number;
var curTheta:Number=-10;
var curPhi:Number=60;
var examplesTot:uint=11;
var exampleNum:uint=3;
var nMesh:Number=40;
var tilesArray:Array=[];
var firstRun:Boolean=true;
var tilesColors:Array=[];
function drawBack():void {
shBack.graphics.lineStyle(2,0xFFFFFF);
shBack.graphics.beginFill(0x000000);
shBack.graphics.drawRect(-boardSize/2,-boardSize/2,boardSize,boardSize);
shBack.graphics.endFill();
}
setTilesArray();
renderView(curTheta,curPhi);
function setTilesArray():void {
var i:int;
var j:int;
var istep:Number;
var jstep:Number;
var tmin:Number;
var tmax:Number;
var smin:Number;
var smax:Number;
var curt:Number;
var curs:Number;
shCube.graphics.clear();
tilesArray=[];
tilesColors=[];
firstRun=true;
curTheta=-10;
curPhi=90;
if(exampleNum==3){
tmin=0;
tmax=1.5*Math.PI;
smin=0;
smax=2*Math.PI;
}
istep=(smax-smin)/nMesh;
jstep=(tmax-tmin)/nMesh;
for(i=0;i<=nMesh;i++){
curs=istep*i+smin;
tilesArray[i]=[];
for(j=0;j<=nMesh;j++){
curt=jstep*j+tmin;
if(exampleNum==3){
tilesArray[i][j]=[cubeSize/4.3*Math.cos(curs)*(2+Math.cos(curt)*2),cubeSize/4.3*Math.sin(curs)*(2+Math.cos(curt)*2),cubeSize/2.6*(3-curt)-0.3*cubeSize];
}
}
}
}
function renderView(t:Number,p:Number):void {
var i:int;
var j:int;
var n:int;
var distArray=[];
var dispArray=[];
var tilesNewArray=[];
var midPoint:Array=[];
var dist:Number;
var depLen:Number;
var coloFactor=100/cubeSize;
t=t*Math.PI/180;
p=p*Math.PI/90;
shCube.graphics.clear();
for(i=0;i<=nMesh;i++){
tilesNewArray[i]=[];
for(j=0;j<=nMesh;j++){
tilesNewArray[i][j]=pointNewView(tilesArray[i][j],t,p);
}
}
for(i=0;i<nMesh;i++){
if(firstRun){
tilesColors[i]=[];
}
for(j=0;j<nMesh;j++){
midPoint[0]=(tilesNewArray[i][j][0]+tilesNewArray[i+1][j][0]+tilesNewArray[i][j+1][0]+tilesNewArray[i+1][j+1][0])/4;
midPoint[1]=(tilesNewArray[i][j][1]+tilesNewArray[i+1][j][1]+tilesNewArray[i][j+1][1]+tilesNewArray[i+1][j+1][1])/4;
midPoint[2]=(tilesNewArray[i][j][2]+tilesNewArray[i+1][j][2]+tilesNewArray[i][j+1][2]+tilesNewArray[i+1][j+1][2])/4;
dist=Math.sqrt(Math.pow(fLen-midPoint[0],2)+Math.pow(midPoint[1],2)+Math.pow(midPoint[2],2));
distArray.push([dist,i,j]);
if(firstRun){
tilesColors[i][j]=combineRGB((2*coloFactor*midPoint[2]+100)*0.8+70,(2*coloFactor*midPoint[1]+100)*0.8+70,(2*coloFactor*midPoint[0]+100)*0.8+70);
}
}
}
distArray.sort(byDist);
for(i=0;i<=nMesh;i++){
dispArray[i]=[];
for(j=0;j<=nMesh;j++){
dispArray[i][j]=[fLen/(fLen-tilesNewArray[i][j][0])*tilesNewArray[i][j][1],-fLen/(fLen-tilesNewArray[i][j][0])*tilesNewArray[i][j][2]];
}
}
depLen=distArray.length;
shCube.graphics.lineStyle(1,0×111111);
for(n=0;n<depLen;n++){
i=distArray[n][1];
j=distArray[n][2];
shCube.graphics.moveTo(dispArray[i][j][0],dispArray[i][j][1]);
shCube.graphics.beginFill(tilesColors[i][j],1.0);
shCube.graphics.lineTo(dispArray[i][j+1][0],dispArray[i][j+1][1]);
shCube.graphics.lineTo(dispArray[i+1][j+1][0],dispArray[i+1][j+1][1]);
shCube.graphics.lineTo(dispArray[i+1][j][0],dispArray[i+1][j][1]);
shCube.graphics.lineTo(dispArray[i][j][0],dispArray[i][j][1]);
shCube.graphics.endFill();
}
firstRun=false;
}
function byDist(v:Array,w:Array):Number {
if (v[0]>w[0]){
return -1;
} else if (v[0]<w[0]){
return 1;
} else {
return 0;
}
}
function pointNewView(v:Array,theta:Number,phi:Number):Array {
var newCoords:Array=[];
newCoords[0]=v[0]*Math.cos(theta)*Math.sin(phi)+v[1]*Math.sin(theta)*Math.sin(phi)+v[2]*Math.cos(phi);
newCoords[1]=-v[0]*Math.sin(theta)+v[1]*Math.cos(theta);
newCoords[2]=-v[0]*Math.cos(theta)*Math.cos(phi)-v[1]*Math.sin(theta)*Math.cos(phi)+v[2]*Math.sin(phi);
return newCoords;
}
function combineRGB(red:Number,green:Number,blue:Number):Number {
var RGB:Number;
if(red>255){red=255;}
if(green>255){green=255;}
if(blue>255){blue=255;}
if(red<0){red=0;}
if(green<0){green=0;}
if(blue<0){blue=0;}
RGB=(red<<16) | (green<<8) | (blue<<0);
return RGB;
}
spBoard.addEventListener(MouseEvent.ROLL_OUT,boardOut);
spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);
spBoard.addEventListener(MouseEvent.ROLL_OVER,boardOver);
function boardOut(e:MouseEvent):void {
doRotate=false;
}
function boardOver(e:MouseEvent):void {
prevX=spBoard.mouseX;
prevY=spBoard.mouseY;
doRotate=true;
}
function boardMove(e:MouseEvent):void {
var locX:Number=prevX;
var locY:Number=prevY;
if(doRotate){
prevX=spBoard.mouseX;
prevY=spBoard.mouseY;
curTheta+=(prevX-locX)*rotateFactor;
curPhi+=(prevY-locY)*rotateFactor;
renderView(curTheta,curPhi);
e.updateAfterEvent();
}
}
Now run the program.