CLICK HERE FOR BLOGGER TEMPLATES AND MYSPACE LAYOUTS »

Friday, 22 January 2010

Website Step-by-step.



To create the shelter page I firstly used a motion tween to get to doors to open.


The text had to me masked to get it to work in a scroll box.
This code was added to the actions layer:

function downward(){
if (txt._y>-32.8) [this bit stops the text from being able to scroll outside of the area which it is meant to]
txt._y=txt._y-2; [this controls the scroll and tells flash to more 2 pixels every time the button is pressed]
}

function upward(){
if (txt._y<27.2)
txt._y=txt._y+2;
}

function mover(myscroller){
goer=setInterval(myscroller,1000);
goer;
}

And this to the buttons for the scroll bar

on(press){
clearInterval(mover);
mover(upward);
}
 This makes the custom scroll bar work.
I made an invisible button using the rectangle tool and deleting the frames apart from on the hit state for the handle, to make the doors open. This code was used:
  on(press){
  gotoAndPlay(2);
  }
This gets flash to play frame two, which has no stop command, so flash plays to the end of the doors opening as that frame has a stop command.





To create the login page I used three keyframes. The first holds the password message and the text field for the password to be entered. The second frame displays the password fail message. And the third frame has the password protected information in it.

var myPassword:String= 'password' [this sets the password, in this case it is password]

submit_btn.onRelease=function(){
if (password_txt.text== myPassword ){
gotoAndStop(3); [if the password is correct this tells flash to go to and stop on frame 3]
}
else{
gotoAndStop(2); [if the password is incorrect flash will go and stop on frame 2]
}
}



To create my food page I use the alpha channel and motion tweens to get the page to fade in. 
I wanted hot spots on the background image over the tin and the packets to make more text appear in the bottom text window. To do this I put text in a movie clip on frame two with a blank frame one. I then create invisible buttons over the tin and the packet and used the following code


packsbut.addEventListener(MouseEvent.MOUSE_OVER,packsplay); [the button will do something when the mouse hovers over it]
function packsplay(event:MouseEvent):void
{ packs.gotoAndStop(2);  [the button will cause flash to got to and stop on frame two of the packs movie clip, this will show the text]
}
packsbut.addEventListener(MouseEvent.MOUSE_OUT,packsstop);
function packsstop(event:MouseEvent):void
{ packs.gotoAndStop(1); [when the mouse leaves the invisible button it will return the movie clip to frame one, making the text disappear again.]
}



To create the web pages I sliced my template in Photoshop. In Dreamweaver I then selected the table cell which covered the area I wanted to input the rest of my design and deleted it. I then used the image as the background to the cell so that I could enter information etc into it. I inserted my flash interface for each page in this cell. I also selected each of the slices that contained the links and linked these to the pages which they needed to link to.  This was repeated for each of the pages I wanted to create. 

0 comments: