- Friendster Tricks and Tutorials
- » How to Create Cross-Flash Layout (Video Demo and Tutorial)
#1 2009-01-30 17:45:45
- ashdesignz
- Asthon John Castillo
- » Promoter
[ Liquid Tension ]
Philippines
417
117
2010-01-09- Website
How to Create Cross-Flash Layout (Video Demo and Tutorial)
PART 1
PART 2
Tutorial Requirements:
Macromedia Flash 8
Fileave Account or any hosting account that supports Flash File
Notepad for Positioning Scratch
Background Image
Click Here for Crossflash Sample
Copy Codes to Notepad, this serves as your JS file.
/*************************************************
THIS NOTE MUST STAY INTACT WITH THIS CODE!
CONSTRUCTED AND CODED BY MR. PAUL DEMONTEVERDE
YOU CAN USE FREELY ALL TEMPLATES, GRAPHICS AND CODES
BY AGREEING NOT TO REMOVE THIS COMMENT
PHILIPPINE COPYRIGHT 2008, PAULDEMONTEVERDE
*************************************************/
function loadLayout(){
var alterwithThis =
'<center><div id="container" style="position: relative; margin: 0px; width:1024px; height: 768px;"><embed src="URL_OF_FLASH" width="100%" height="100%" wmode="transparent"></embed><div id="mymain_navi" style="position:absolute; left:???px; top:???px; width:???px; height:???px; overflow: hidden;"></div><div id="mymain_frame" style="position: absolute; left:???px; top:???px; width:???px; height:???px; overflow-X: hidden; overflow-Y: auto;"></div></div></center>';
window.document.getElementById('footer_container').innerHTML = alterwithThis;
var Rcontent =
"<a href=\"http://www.friendster.com/\">Home</a> | "
+"<a href=\"javascript:onClick=revealContent('content_0')\">Profile</a> | "
+"<a href=\"javascript:onClick=revealContent('content_6')\">About Me</a> | "
+"<a href=\"javascript:onClick=revealContent('content_1')\">Gallery</a> | "
+"<a href=\"javascript:onClick=revealContent('content_2')\">My Friends</a> | "
+"<a href=\"javascript:onClick=revealContent('content_18')\">Testimonials</a> | "
+"<a href=\"javascript:onClick=revealContent('content_10')\">Media Box</a> | "
+"<a href=\"javascript:onClick=revealContent('credits')\">Credits</a>";
window.document.getElementById('mymain_navi').innerHTML = Rcontent;
var showThisone1 = document.getElementById('content_0').innerHTML;
window.document.getElementById('mymain_frame').innerHTML = showThisone1;
}
function revealContent(id) {
document.getElementById('mymain_frame').innerHTML = document.getElementById(id).innerHTML
}
document.write('<body onload="loadLayout()">');
document.write('<style>table#flo_wrapper,#credits {display:none} #footer_container {display:table !important}</style>');
document.write('<span id="credits"><div id="creditsHolder">More free layouts and graphics at <a href="http://www.friendstermagic.net">FriendsterMagic.net</a><br>NAME OF LAYOUT CREATOR</div></span>');
document.write('<link href="URL of CSS FILE" rel="stylesheet" type="text/css">');
//BELOW THIS LINE YOU CAN ADD MORE JAVASCRIPT
BLUE PART - URL OF FLASH FILE
The container size must also be the same with the flash background size.
<div id="container" style="position: relative; margin: 0px; width:1024px; height: 768px;">
The ??? remaining we're the sizes of the box and the position of the box,
watch the video for the demo.
For the URL of CSS FILE, create CSS pattern from non-crossover layouts regarding the boxes properties only and link color, background images and even additional box positioning, just do the same thing to compile. Save in notepad as yourfilename.CSS and upload file in your fileave account or any web hosting site 
Updated Message, please disregard applying the old linker in video, try to choose any steps you want for the JS linker. ^_^
Upon editing your CSS file, try adding up some spices on this pattern:
Code:
/* FRIENDSTER CSS CODE */
/* COPYRIGHT (C) 2008, FRIENDSTERMAGIC */
/* MAIN PAGE BACKGROUND */
body {
background-color: #000000;
color: #ffffff;
}
/* MASTER LINKS */
a:link, a:active, a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: none;
color : #cccc99;
}
/* DISPLAY OR REMOVE YOUR RECENT UPDATE BOX */
.more, .user_tracker {
display: none;
}
/* SINGLE ROW CONTROL PANEL BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
background: url('');
background-color: #cccc99 !important;
color: #663300;
font-family: verdana;
font-size: 10px !important;
font-weight: normal;
text-align: center;
border: #cccc99 1px solid;
width: 125px;
height: 18px;
margin-left: 34px;
margin-right: 0;
margin-top: 1px;
margin-bottom: 0;
padding-left: 0px;
padding-right: 0;
padding-top: 1px;
padding-bottom: 0;
}
#controlpanelbuttons a:hover {
background: url('');
background-color: #663300 !important;
color: #cccc99 !important;
font-family: verdana;
font-size: 10px !important;
font-weight: normal;
text-align: center;
border: #cccc99 1px solid;
width: 125px;
height: 18px;
margin-left: 34px;
margin-right: 0;
margin-top: 1px;
margin-bottom: 0;
padding-left: 0px;
padding-right: 0;
padding-top: 1px;
padding-bottom: 0;
}
/* SMALL IMAGE AT YOUR MORE ABOUT ME: 10x10 PIXEL IMAGE */
.q {
background: url('PLACE IMAGE URL HERE') no-repeat left 50%;
padding: 0 0 0 15px;
}
/* PLACE A BACKROUND COLOR TO YOUR TESTIMONIAL ROWS */
.evenrow {
background-color: #b17374 !important;
}
/* ADD BCKGROUND TO YOUR PHOTO: 100x80 PIXEL PHOTO */
.flogriditem {
background-image: url('PLACE IMAGE URL HERE');
}
/* TO RESIZE YOUR PRIMARY PHOTO */
.imgblock200, .imgblock200 img {
width: 120px !important;
height: 120px !important;
background-color: transparent !important;
margin: 0 auto;
border: none;
}
/* PLACE A BACKROUND COLOR TO YOUR FRIEND'S PHOTO */
.flogrid75 .dr {
background-color: #b17374;
font-weight: normal !important;
text-align: center;
}
Original Concept of Pogi na Nurse
Codes by Ka Paul
Last edited by ashdesignz (2009-02-01 13:52:08)
|
#2 2009-01-30 18:47:53
- fadedblock
- carlo
- » n00b
- B cool
- 92
- 0
- 2009-07-27
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
wow.... 
hope i can do that...
|
#3 2009-01-30 18:52:59
- ashdesignz
- Asthon John Castillo
- » Promoter
- [ Liquid Tension ]
- Philippines
- 417
- 117
- 2010-01-09
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
you can do, as what i did in the tutorial, less than 30 mins, you can create your own cross flash layout, its up to you on animations on flash, i dunno where will i put the tutorials on flash animations 
|
#4 2009-01-30 19:16:41
- adepat
- Lyn
- » FTalkManiac
- Live life 2 da fulliest
The Insiders- California, U.S.A
- 941
- 17
- 2009-10-22
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
wow ash, you amazed me more and more and more, love your toturial keep it up
|
#5 2009-01-30 19:23:11
- eney0715
- » Promoter
- Mga Masayahing Pinoy!
- 4490
- 524
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
Nice kuya Ash. 
I might try this later. XDD Keep on sharing kewl tutorials like this one. 
Bling Ding Dong ㅋㅋ
|
#6 2009-01-30 19:30:21
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
Omigawd. Is this seryus? 
Positioning? I'm so ready to die now.
Anyway, you made this all by yourself? It's so cool!
|
#7 2009-01-31 02:10:41
- cklahrckiey
- Cklarck Vi Britannia
- » FTalkFreak
- [ Tha Mafia ]
- Class-S
- 3 Stars and A Sun
- 1857
- 52
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
nice video... 
nice profile...
it will definitely help me aLOT
|
#8 2009-01-31 09:52:28
- kr9ns_Dern
- Pastor talaga...
- » FTalkManiac
- Pastor ng TK
- TK Prayer House
- 949
- 30
- 2009-07-23
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
it can do center profile?
|
#9 2009-01-31 11:26:01
- ashdesignz
- Asthon John Castillo
- » Promoter
- [ Liquid Tension ]
- Philippines
- 417
- 117
- 2010-01-09
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
kr9ns_Dern wrote:
it can do center profile?
its up to your repositioning, it still get centered in any type of resolution.
try to view the sample in larger resolution, check if the boxes dis-align the background image
|
#11 2009-02-01 01:34:17
- rebora2007
- Jimmy
- » FTalkGeek
- France
- 1217
- 40
- 2009-12-15
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
wow very nice profile its realy cool
|
#12 2009-02-01 04:12:08
- sven07
- » n00b
- 3
- 0
- 2009-12-27
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
http://photos-p.friendster.com/photos/8…82110l.jpg
Astig!! idol p2ro nmn dyan oh...
gawa moh q ng gnyan yan gmitin mohng background.. pde? 
what was the image for?
-ducheszv
Last edited by ducheszv (2009-02-01 10:22:34)
|
#13 2009-02-01 09:02:15
- chipster489
- » Made in FTalk
- 38752
- 1000
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
^Speak English, great tuts, and profy as wel, excellent.
|
#15 2009-02-01 13:47:56
- ashdesignz
- Asthon John Castillo
- » Promoter
- [ Liquid Tension ]
- Philippines
- 417
- 117
- 2010-01-09
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
akatsu14 wrote:
yeah..dats cool..i'm using it right now?
but I have a question? is there a way to add links at navigation? cause I can't use my wvm..
thx..
Crossover have simple CBOX type of viewer tracker:
http://theftalk.com/t55794-Friendster-V…Users.html
^ visit that thread
|
#16 2009-02-02 01:04:34
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
why is it my flash don't show up?
my profile------>http://profiles.friendster.com/user.php…mp;sc=3400
|
#17 2009-02-02 06:53:11
- ashdesignz
- Asthon John Castillo
- » Promoter
- [ Liquid Tension ]
- Philippines
- 417
- 117
- 2010-01-09
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
akatsu14 wrote:
why is it my flash don't show up?
my profile------>http://profiles.friendster.com/user.php…mp;sc=3400
Your flash background showed up, if you want to animate it, search flash tutorials in google, there are tons of flash animation tricks there that may spice up your background.
By the way, please don't remove credits, i just noticed you alter a part of it that is not necessary, please don't alter the credits part 
|
#18 2009-02-27 11:09:44
- slashedkite
- The Keyblade Master
- » FTalkGeek
- got it memorized?
- Class-S
- Dark Meridian
- 1342
- 39
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
cool tutorial.. i'll try to make this one.. .gif)
|
#19 2009-03-04 04:22:21
- ashdesignz
- Asthon John Castillo
- » Promoter
- [ Liquid Tension ]
- Philippines
- 417
- 117
- 2010-01-09
- Website
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
If you have questions where to DL macromedia 8, leave me PM, i think its not allowed to post download links here ^_^
|
#20 2009-03-04 16:53:35
Re: How to Create Cross-Flash Layout (Video Demo and Tutorial)
Topic Sticked
Original topic with original concepts and thorough tutorials.
BTW, my friend said thanks.
|
- Friendster Tricks and Tutorials
- » How to Create Cross-Flash Layout (Video Demo and Tutorial)