hii everyone,
soo after some other time, i finally got an idea to make out another tutorial
. For the tutorial I got the basic idea sometyime ago, when i saw that Flash is requesting too much form the client i order to show the webpage. But at the time, i wasnot well aware [or simply a n00b ] but now i got some new ideas [though still a n00b] and i'm ready to convert a FULLY flash site to simple Javascript based site with ALL THE FLASH FEATURES.
So, first we'll see WHY you would choose JS than Flash:
1) Almost every browser has the capapbility of parsing Jscript and requires no plugin for the cause. [a slight possibility of turning off scirpts, which can be easily ignored]
2) Decreased space needed + lower page laod time as resources can be manipulated by dirrefent means [you can easily load the pages part by part]
3) Easy direct linking to pages [ex: can directly put the link to the address bar and see]
4) Animations usually cost lower memory + processing power than Flash
5) Better with most of the Search engines [except google i thnk other engines even havnt think about crawling tohugh Flash pages]
-> A bit of con[s]:
A little bit harder in coding, yet the overoll coding process isnot very complex
-> Techs used:
Javascirpt
AJAX [to make pages load without navigating to another page, like in Flash]
Jquery [To add interactive features of flash]
Steps:
1) Making the Flash site in HTML
This is the primary step, i which you will code the already made [or deisned] flash site from HTML. For the sake of the tutorial i choosed this site that i made a long ago for a movie [Manna from hell : dont except a super-cool-thing].
View Site
The first step is all about HTML,but make sure you follow the structure or the way you need to build it as my example.
First, i wil make the index page, the most important of the structure, and the other pages without even linking them. The code for index page would be:
[index.html]
Make sure you use the the <div> names as EXACTLY as it as its needed in AJAX.
[style.css]
Note that the CSS style has NO hover, pressed classes as we will make changes using jQuery in a later chapter. So the index page with only the Navigation looks like this:
Now make the other pages BUT remember in all other pages than the index page, YOU PUT ONLY THE NEW CONTENT
for an example, the home.html will have only the content of the some sections like some pictures, and text. the main navigation or body properties are not added to it but extra CSS, Jscript stuff can be there.
My home.html will be
[home.html]
NOTE: when you any external resource like an image, be sure that you give a FULL PATH to the resource unless you need any complications. And you can change properties like the title here.
This conatins only a picture bcause i was given the text+background as single image by our graphicz guy [darkX] , but feel free to have as many as things in yours. but make it simple like above. And for the style of the page i have a new CSS page.css but it contains style properties common to all th pages so i simply put it in ma index page under the style.css
but you can always make the home.html like:
the page.css goes like anyother has nothing new, so im not putting it here
so like this i made gallery.html, watch.html, credits.html and i put them all in Pages folder
so, you need to be carefull when adding any resource.
REM: to test[TEST ONLY] your pages how it looks like in your index page, put the page coding inside
<div id="main"></div>
ex:
.......
<div id="main">
<div id="home">
<img src="http://zontek.zzl.org/zonmoviez/manna_from_hell/manna_html/res/home_cont.png" />
</div>
</div>
.....
so that if everythings correct you can say you are safe
what WE EXACTLY DO in the second parts is the same you do here, put that little pieces of code inside main div.
So, see you all in the next part
soo after some other time, i finally got an idea to make out another tutorial
. For the tutorial I got the basic idea sometyime ago, when i saw that Flash is requesting too much form the client i order to show the webpage. But at the time, i wasnot well aware [or simply a n00b ] but now i got some new ideas [though still a n00b] and i'm ready to convert a FULLY flash site to simple Javascript based site with ALL THE FLASH FEATURES.So, first we'll see WHY you would choose JS than Flash:
1) Almost every browser has the capapbility of parsing Jscript and requires no plugin for the cause. [a slight possibility of turning off scirpts, which can be easily ignored]
2) Decreased space needed + lower page laod time as resources can be manipulated by dirrefent means [you can easily load the pages part by part]
3) Easy direct linking to pages [ex: can directly put the link to the address bar and see]
4) Animations usually cost lower memory + processing power than Flash
5) Better with most of the Search engines [except google i thnk other engines even havnt think about crawling tohugh Flash pages
]-> A bit of con[s]:
A little bit harder in coding, yet the overoll coding process isnot very complex
-> Techs used:
Javascirpt
AJAX [to make pages load without navigating to another page, like in Flash]
Jquery [To add interactive features of flash]
Steps:
1) Making the Flash site in HTML
This is the primary step, i which you will code the already made [or deisned] flash site from HTML. For the sake of the tutorial i choosed this site that i made a long ago for a movie [Manna from hell : dont except a super-cool-thing
].View Site
The first step is all about HTML,but make sure you follow the structure or the way you need to build it as my example.
First, i wil make the index page, the most important of the structure, and the other pages without even linking them. The code for index page would be:
[index.html]
Code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img class="bck" src="res/bck.jpg" width="100%" height="100%" />
<!-- Note this, this contains the whole site and make the content of the site moveable as one object == like a real flash object -->
<div id="content">
<!-- the content has two sections, navigation and main area. The navigation never reloads but stays still but the main sections loads the new pages' content using AJAX -->
<div id="nav">
<ul>
<li><img src="res/home.png" /></li>
<li><img src="res/gall.png" /></li>
<li><img src="res/watch.png" /></li>
<li><img src="res/cred.png" /></li>
</ul>
</div>
<div id="main">
content goes here!!
And donot add any content here at the index page as index page NOT == to home page. we will load the home page later.
</div>
</div>
</body>
</html>Make sure you use the the <div> names as EXACTLY as it as its needed in AJAX.
[style.css]
Code:
html, body{
margin:0px;
padding:0px;
background-repeat:no-repeat;
color:#FFFFFF;
overflow:hidden
}
img.bck{position:fixed;z-index:-1}
#content{
width:800px;
height:500px;
position:relative;
left:25%;
top:25%
}
#nav{
float:left;
}
#nav li{
list-style:none;
padding:0px;
margin:0px;
line-height:0px
}
#nav li img{
width:150px;
}
#main{
float:left;
text-align:left
}Note that the CSS style has NO hover, pressed classes as we will make changes using jQuery in a later chapter. So the index page with only the Navigation looks like this:
Now make the other pages BUT remember in all other pages than the index page, YOU PUT ONLY THE NEW CONTENT
for an example, the home.html will have only the content of the some sections like some pictures, and text. the main navigation or body properties are not added to it but extra CSS, Jscript stuff can be there.
My home.html will be
[home.html]
Code:
<title>Manna From Hell: Home </title>
<div id="home">
<img src="http://zontek.zzl.org/zonmoviez/manna_from_hell/manna_html/res/home_cont.png" />
</div>
NOTE: when you any external resource like an image, be sure that you give a FULL PATH to the resource unless you need any complications. And you can change properties like the title here.
This conatins only a picture bcause i was given the text+background as single image by our graphicz guy [darkX] , but feel free to have as many as things in yours. but make it simple like above. And for the style of the page i have a new CSS page.css but it contains style properties common to all th pages so i simply put it in ma index page under the style.css
but you can always make the home.html like:
Code:
<style>
#home img{ width:550px}
</style>
<!-- or even <link href="http://zontek.zzl.org/zonmoviez/manna_from_hell/manna_html/style.css" rel="stylesheet" type="text/css"> can be used, but FULL PATH NEEDED -->
<div id="home">
<img src="http://zontek.zzl.org/zonmoviez/manna_from_hell/manna_html/res/home_cont.png" />
</div>the page.css goes like anyother has nothing new, so im not putting it here
so like this i made gallery.html, watch.html, credits.html and i put them all in Pages folder
so, you need to be carefull when adding any resource.
REM: to test[TEST ONLY] your pages how it looks like in your index page, put the page coding inside
<div id="main"></div>
ex:
.......
<div id="main">
<div id="home">
<img src="http://zontek.zzl.org/zonmoviez/manna_from_hell/manna_html/res/home_cont.png" />
</div>
</div>
.....
so that if everythings correct you can say you are safe
what WE EXACTLY DO in the second parts is the same you do here, put that little pieces of code inside main div.
So, see you all in the next part
No comments:
Post a Comment