PDA

View Full Version : Need help with Flash site



SFuller79
August 26th, 2008, 05:40 AM
Hello!

I’m a graphic designer well-versed in Photoshop and very familiar with the Adobe Premiere video editing program. I am attempting for the first time my very own Flash portfolio website. My problem is that, while I have both Dreamweaver MX and Flash CS3, I know pretty much nothing about these programs. I’m in a bit of a pickle as I need the site up by September 6th – this is for a huge, very well-known music event at which I’ll need to pass out business cards with a link to my portfolio.

The site I have in mind is very ambitious as I have quite a catalog of artwork to put up. However I’m not as concerned about this issue because I have all of the artwork at web-size resolution ready for upload, and I can work to load the images up relatively quickly. My biggest worry is the website design. I already have a domain name and website hosting, and only need to put the site together offline so that it can be published.

Following is a written description of the elements that will make up the website, along with links that visually exemplify the ideas:


• There will be an icon in address bar (company logo).

(example: Yahoo! (http://www.yahoo.com); I think I may be able to use this tutorial (http://www.chami.com/tips/internet/110599I.html) to accomplish this.)



• Window size fills the entire browser space (example: Dreamgirls (http://www.dreamgirlsmovie.com)).

(Will this tutorial (http://www.kirupa.com/developer/flash5/fullscreen.htm]http://www.kirupa.com/developer/flash5/fullscreen.htm) teach this?)



• Graphic while site is loading / countdown (ex: Check out the cryptex used as a loader on The Da Vinci Code (http://www.sonypictures.com/homevideo/thedavincicode/index.html) site – I’d like my loader to come in as pieces and form a solid object like this, if possible – then reverse the animation once the page has loaded).

I was not able to find a tutorial for this upon first search... And what exactly is this device called?

Also here, how would I go about providing a link to those who might happen upon my site and do not have the latest version of Flash installed? Will Flash automatically detect this and display a link? How does that work?



• Intro: Quick montage of best artwork (along with a short mp3 song I already have prepared). Images transition/dissolve into each other and complete to merge and form the site’s main background image.

Some examples: The Da Vinci Code (http://www.sonypictures.com/homevideo/thedavincicode/index.html) (Da Vinci Gallery page), The Incredible Hulk (http://incrediblehulk.marvel.com/index_flash.html) and especially this AVP-R (http://www.avp-r.com/US/)site which exemplifies how I would like the animation to conclude by forming the site’s background image. Also see how the intro animation transitions into the background on The Dark Knight (http://thedarkknight.warnerbros.com/)website.

- Of course I’d like to place a customary option to “Skip Intro” for those in a hurry – this is easy, right?



• Main Site: Once the site’s main background image has formed, I’d like the company logo to “grow forward” onto the screen (with a little sound effect) after the intro animation sequence, like in The Mummy: Tomb of the Dragon Emperor (http://www.themummy.com/). I would also like to place a moving animated figure just above the logo, if not too much trouble.

- Last here, I’d like there to be little flash elements that glow within the main background (with some unobtrusive sound effects). See The Da Vinci Code (http://www.sonypictures.com/homevideo/thedavincicode/index.html) (any of the backgrounds in the Characters pages) for examples.



• The Site Menu animates into construction accompanied by sound effects (example: The menu at the bottom of the screen on the King Kong (http://www.kingkongmovie.com/home.html) site). The design of the menu itself can be very simple, just like King Kong’s menu; it’s the animation effect I’m going after.



• Same background song for entire site. (I have no clue as to how to load music.)



• Option to turn Sound off or on (as an “audio” icon, see at the top of the screen on the Ocean’s 13 (http://oceans13.warnerbros.com/_dvdsite/index.html) site).



• Links within menu light up / glow (with sound effect) upon mouse-over, and sparks fly off (see the 30 Days of Night (http://www.sonypictures.com/movies/30daysofnight/site/main.html) menu).



• When transitioning from thumbnail to thumbnail, artwork materializes in random “strips” w/ sound effects (examples when maneuvering through the main menu links on the XXX: State of the Union (http://www.sonypictures.com/movies/triplex2/site/main.html) site, particularly the Command Ctr. link).



• Screens playing video content are customized in shape (see the shape of the video player on the main page of the website for The Reaping (http://thereapingmovie.warnerbros.com/)). Background music fades down when the video content is activated.



• When a new page is chosen from the menu, the logo flips, then implodes (accompanied by a sound effect). See the way the photos flip on the Ocean’s 13 (http://oceans13.warnerbros.com/_dvdsite/index.html) > Photo Gallery page, also the effect of the reddish moving image accompanying the navigation menu on the AVP-R (http://www.avp-r.com/US/) site, which “flips” when you move your mouse around.

- Any text on the current page will explode (accompanied by a sound effect).

- Background layers forming the page will separate and fade out (see The Dark Knight (http://thedarkknight.warnerbros.com/) website, when choosing different links from the navigation menu).



• 3D graphic while next page is loading / comes together from different places off the edges of the page, explodes when done (see the “loader graphics” on The Da Vinci Code (http://www.sonypictures.com/homevideo/thedavincicode/index.html) and The Mummy: Tomb of the Dragon Emperor (http://www.themummy.com/) websites).



• New pages form in multiple layers alongside sound effects. These background layers come in from all positions (sideways, bottom , top, etc.) to end up as a straight composite (see The Da Vinci Code (http://www.sonypictures.com/homevideo/thedavincicode/index.html) [any of the backgrounds in the Characters pages] and The Dark Knight (http://thedarkknight.warnerbros.com/) website, when choosing different links from the navigation menu).

- Light effects (“smoke” or “ocean floor lights”) infiltrate each layer (see effects on The Da Vinci Code (http://www.sonypictures.com/homevideo/thedavincicode/index.html) [any of the backgrounds in the Characters pages], and Pirates of the Caribbean: At World’s End (http://disney.go.com/disneypictures/pirates/atworldsend/) > Cast & Crew section).

- Flash elements particular to each page (see any of the links on The Dark Knight (http://thedarkknight.warnerbros.com/) website [e.g., fire, etc]).

- Letters come together from pieces to form the title of new page (and sublinks on the page) (see any of the pages on The Da Vinci Code (http://www.sonypictures.com/homevideo/thedavincicode/index.html) website).

- Logo fades up in same way that artwork materializes (again, see examples when maneuvering through the main menu links on the XXX: State of the Union (http://www.sonypictures.com/movies/triplex2/site/main.html) site, particularly the Command Ctr. link).



• Again, when new pages are chosen, the main menu animates into construction accompanied by sound effects (example: The menu at the bottom of the screen on the King Kong (http://www.kingkongmovie.com/home.html) site).



• Finally, what should I do regarding search engine optimization? I’ve heard that you really need to optimize your website for SEO before you complete it.. Any ideas here?



At this point, unless I can somehow get some quick pointers that would put together the site reasonably close to what I have planned out, I’m considering using flash site templates that I purchased online and attempting to learn how to alter the elements within them.

Thanks to anyone who takes a look at this and is willing to throw out some reference or offer instruction in how to get this going – this site has been in the planning for years now!

snickelfritz
August 26th, 2008, 02:03 PM
You're going to want a good book on learning AS3.
"Learning ActionScript 3.0" O'Reilly is good one for beginners.

Download and install TweenMax.
Study the notes in the .as files to gain an understanding of how to use the class in your project.
This class will simplify a lot of the items you listed.

SFuller79
August 26th, 2008, 03:15 PM
Thanks snickelfritz. I will look into that this evening as a possible solution.

snickelfritz
August 26th, 2008, 03:37 PM
Flash SEO was vastly simplified when Googlew and Yahoo rolled out the new engine a month ago.
You essentially do nothing; the engine reads the text content within the SWF and uses the first section as the description in the search results.

SFuller79
August 26th, 2008, 07:27 PM
Gotcha. But then, how do the search engines decide what will display on the first page of search results, second page, etc.?

Is this determined by whichever website was published first, or by whichever site has most recently updated content?

Or do you need an inside contact? ;)

snickelfritz
August 26th, 2008, 07:34 PM
Cross-linking to other sites raises your relevance score, which is used by Google to determine rankings.