• Twitter
  • Facebook
  • Flickr
  • MySpace
  • delicious
  • digg
  • YouTube
  • vimeo
  • linkedin

Tarek Nour Communications Website

tareknour_flash_resizehttp://www.tareknour.com/

Tarek Nour Communications website it’s a big project which I worked on it. for about 6 months i started developing this website.

tareknour_html_resizeI’m actually make an article about that website because it’s really deep and have a varieties of designing and developing concept and techniques.

Guys Who Involved with me in this project:

Tarek Khalifa – IT Manager

Mahmoud Mokhtar – Senior Programmer

Mohamed El Messeiry – Business Solutions Developer

Marwan Zaki – Senior Technical Specialist

Mohamed Farag Abdallah – Technician

website structure:

Flash Version:
using Autodesk Maya, Adobe Flash, Adobe Dreamweaver, Adobe Photoshop, Adobe After Effects, Adobe Illustrator

the whole structure

1: the intro page created with Autodesk Maya,, Adobe After Effects, Adobe Flash. combined the 3 different tools together to make the start up animation and the rotated 3d corporate logo.

2: the whole flash website controlled by Action Script 2.0. the all pages separated with different SWF files.

header section

1: full functional flash photo gallery u can use controllers to skip forward or backward for latest press ads. also u can pause or play the image play frames.made by Action Script 2.0.

2: 5 main menus contained the most common links in the whole website. menu driven by Action Script 2.0.

the main page structure

1: 55 pages driven by Action Script 2.0 using numbers. every page have a unique number in the whole website. the number mean unique thing for every box including the logo and page content.

2: the all boxes are actually 1. and duplicated 45 times to reduce the size of the frame rate and the whole website size

3: all pages separated with a different SWF files and every page have a unique loader.

4: every box animation built in Autodesk Maya and exported as SWF file frames.

the small boxes footer structure

33 shortcut functional tinny boxes. I’ll represent every box from right to left

1: random page: choosing a random page from the 55 page in our key frames agencies, companies, menus.

2: animation 2: loading the website start up animation with different animation style.

3: home: shortcut to the home page

4: 4 different colors: shortcut to 4 different colors to change the whole boxes color driven by Action Script 2.0.

5: wire frame: shortcut to change the boxes to wire frame style exported from Autodesk Maya and finalized in Adobe Flash.

6: 3 different makes shortcuts: mask the website to 3 different main list of links. Ad agencies, communications, main links.

7: drag and drop page: this page actually convert the all links to drag able boxes snapped to the mesh box structure. driven by Action Script 2.0.

8: sound control: controlling the sound on or off with changing the led animation. driven by Action Script 2.0.

9: randomize mode: this mode randomize the boxes to different positions with a smooth animation. driven by Action Script 2.0.

10: the next bunch of other is shortcuts to the most common links.

inner pages structure

1: all pages have an animation with unique design and a shortcut function to move to any page with one click.

XML our work and news pages structure

1: our work
our work page have a 3 main links landmarks, today’s TVC’s, programs. the flash page opened by JavaScript behavior centralize the pop up page in the center of page.
the actually player and list of files driven from XML file content ( XML exported from admin area). the other function of the our work is the combo box flash option which is mask the videos or agencies.
also when uploading the video to the admin page it’s converted to FLV video file and take a snapshot from the uploaded video everything exported automatically.driven by Action Script 3.0.

2: News
news page also driven from an admin area converted to XML and displayed in a page with scrolling. all this pages also have individual link. to represent the article.

HTML:
using Autodesk Maya, Adobe Flash, Adobe Dreamweaver, Adobe Photoshop, Adobe After Effects, Adobe Illustrator

the whole structure

the website have a 3 different designs with the same layout driven from CSS rules. the all design changed randomly in the home page. after random page the design stick to the end of navigation.

header section

1: the header 9 boxes created with Autodesk Maya, Adobe Photoshop. represent diffrent direction of everypage.
2: the header photos is a 22 press ADS changed randomly.

left hand side

1: the left hand side videos loaded from the database the last 5 today’s TVC’s and when clicked the actual video played in the same video interface.

main content

1: the main content for the all pages.

news page structure

1: this page contained the all list of the news articles have a each inside the all news titles and content and jump to an chosen article from combo box.

  • « Older Entries
  • Newer Entries »