How to setup Creative Studio Website

Report as inappropriate Your report has been received

Shared by: smithhaleey

Tags

How, to, setup, Creative, Studio, Website

Stats

views:: 6
posted:: 6/12/2009
language:: English
pages:: 5

Public Domain

Document Sample

Updated: 22-04-2008

How to setup Creative Studio Website?
Creative Studio template is a fullscreen flash website template which you can use either
for a personal portfolio website or for a company website. I have designed and coded it
mainly for those who want to present their creative works in a nice and professional way.

Almost all the data is configured to be from the external xml file so that you can edit the
website easily. Even you can use a content management system to update the website
contents, because you just have to change the path of the xml file with the server side file
path which will in turn generate the xml file and your site will be dynamic then.

Note: Giving it “Creative Studio” doesn’t mean that it can be only used for presenting
creative portfolios it can be used for any purpose you want.

If you want to use this template by just changing the text images with your own text
images, which of course you will do, then just make the changes to the xml file and put
all the those files on your hosting domain.

Note: You don’t need to put the files like the flash source files with the extension
of .fla, .as files on the web server. But you have to put the .swf, .xml, images, .js, .css
and .html files on the website domain.

XML File:
XML file conventions:
Take the following xml node as an example:

In the above sample xml node id, date and title are attributes of the newsItem tag,
whereas the <![CDATA[]> is a text node. CDATA is a xml node which can contain any
type of text symbols. For example for the value of an attribute you cannot use a > or <
symbol as it has special meanings to the xml file parsers but you can use these or any
other symbol inside the CDATA tag and this is why I have used it for sections where you
might need to have a text hyperlink.

XML file structure:
The xml file structure has been divided into sections and there are four main sections
each representing one of the four pages in the flash website. Each main section tag has an
id and a title attribute. The title attribute is important as these will be used for the
navigation buttons’ titles.
1. Home Section
Home section contains all the data for the home page and this page is further
divided into 4 subsections.
 Home Subsection
The home subsection has only two text one is the title of the home
subsection and the other when the introduction text.
 News Subsection
This subsection contains the tags necessary for the news text. Each news
item tag has an id, date and title attributes and a text node for containing
the news description. The news section has no way to show a short
description of each news and when clicked it will show the full length
description but if you know flash and actionscripting a little then that
should not be a problem to implement.
 Featured Work Subsection
The featured work subsection will contain the data for the Featured
subsection of the home page in the flash website.
The featured work subsection has a title type and image attributes and text
node which corresponds to respective text fields and an image area in the
flash website.

 Logo Subsection
The logo is composed of actually only text values so this section contains
the logo title and slogan statements. If you want to use a graphical element
for your logo then you should remove this section and related code from
the flash file for the logo text fields.

2. Services Section
The services section has only one subsection as in the flash site there is only one
section which is about the services. The subsection’s title attribute is for the title
of the main title of the services page.
You can have as many servicesItem tags as you need. Each servicesItem tag has
an id and title attribute and a CDATA text node. If you want to add more
servicesItem tags then just copy one and paste it and amend it.

3. Portfolio Section
It is like the services main section and the portfolioItem tags are like the featured
work section of the home page.
Note: If you don’t to show in the external link then you can leave it as blank like:
<![CDATA[]]>
4. Portfolio Section
Again like the services or portfolio sections. There are two title attributes of the
subsection, title1 is for the left section in the flash website and title2 is for the
flash contact form.

I have put the images files inside the portfolio folder. You can organize the files
as you like but you have change the paths of the images in the xml file.

Can the template be extended?
Yes, you can extend the template to accommodate more pages according to your needs. If
you know flash and actionscripting then the code is very clear and commented well so
you can do that easily by just duplicating one of the page and making the changes to suit
your needs. If you want the text for the newly created page to be from the xml file then
you have to make the changes in the parseXML() function and also you have to create a
separate array as you will see that data for each page is saved in a separate array in the
flash website.

The following tutorial added on 22-4-2008. In this tutorial I am going to tell you how to
add a page (in this case I will add 5th page which will be guestbook and it will be added
after portfolio page).

Follow the following procedure to add/remove more sections/pages:
1. Open the xml_data_file.xml file and copy one of the section tag for example copy
<section id="1" title="GuestBook"> and past it somewhere looking at the
structure of rest of the file and now write the closing tag of section tag like
</section> so in the end you should have something like:
<section id="1" title="GuestBook"></section>
If you can deal with xml in actionscript then add more tags like I have done for
four of the pages. In case you want to load an external swf file (as requested by
iDraw ) then again you can add a tag inside the section tag to specify the path of
the swf file or just leave it empty and specify the path of the swf file inside the fla
file. Here I assume I will load an external swf file in this new page so I will leave
it empty as:
<section id="1" title="GuestBook"></section>

2. Now open the creative_portfolio.fla file.
3. Select one of the pages (I selected the contact page) on the stage, right click and
choose Duplicate Symbol… from the context menu. Give a library symbol name
guestbook_page_mc. Now in the properties panel give this duplicated page also
change it to guestbook_ page_mc.
4. Double click the newly duplicated page and delete the extra stuff like the
textfields and form etc. I deleted the following assets/layers:
contact_details_mc and contact_form layers, title textfield and form_title
textfield from contents layer.

5. create a holder movieclip in this guestbook_page_mc, name it swfHolder_mc in
both library symbol name field and also in the properties panel so that we can
access it through actionscript and place it at top left corner ( I placed it at: x=15,
y=50 ).

Now double click some empty area to finish editing this newly duplicated page
and go to the main timeline for further steps.

6. Select the 5th frame in the // Actions layer and hit F9 to open Actions Panel

7. Find line (if you have not modified the code then it should be line number 64):
var site_pages:Array = new
Array(home_page_mc,services_page_mc,portfolio_page_mc,contact_page_m
c);
and change it to:
var site_pages:Array = new
Array(home_page_mc,services_page_mc,portfolio_page_mc,guestbook_page
_mc,contact_page_mc);
8. Find the switch section inside the showPage function (if you have not modified
the code prior to following this tutorial then it should be located at line number
465). Add another case for our new guestbook page (add after portfolio case just
to keep sequence and clarity in code otherwise it doesn’t matter) like:
case guestbook_page_mc:
//if appearing page is portfolio page then initialize the portfolio page
initGuestBookPage();
break;
9. Go to the end of the all actionscript code and add the following function:
function initGuestBookPage(){
appearing_page.gotoAndPlay(2);
appearing_page.swfHolder_mc.loadMovie("scan.swf");
}
10. You can also write a rest function by looking at the rest functions for other pages
where you can unload the loaded swf if you want.
11. That’s it and add some more pages now into your template.

Fonts and Text inside the Flash file?
I have used pixel fonts which are best for flash website but one has to embed them in the
text fields inside the flash as all users many not have installed these fonts on their
computers. Embedding increase the .swf file’s size.
If you are from a country and you require the text to be shown in any other language
rather than the English the you might see that when you put symbols of languages like
Brazilian or Chinese the text doesn’t show that is because currently I have embedded
English characters, so to show other languages characters then you have to embed more
character sets.

You can embed characters by following steps:
1. Open the creative_portfolio.fla file
2. Select a dynamic text field.
3. Open the properties panel ( Ctrl+F3 for widows )
4. Click the embed button and select additional character sets which apply to your
language.

Related docs