Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Reworking a flash site - suggestions welcome

agwah

agwah

macrumors newbie
Original poster
Sep 25, 2007
21
0
Hi guys,

Made this photography site some time ago and is now in the process of making a similar concept for a client. The new site will be for a fashion designer - it is going to be a a grid of fashion design thumbnails that pops out to a large picture.

The question is if the design/navigation/whatever could change in any way. Whatever kind of suggestions you have will be appreciated. Or maybe you have seen another solution that is inspiring somewhere else.

It will have to be a bare bones design again as the guy is a minimalist.

Thanks
 
agwah,

I like it, the site tells you that he/she is into photography. If those are images that he/she shot maybe something that lets the viewer know these are his/her folio. I like the intro, it creates interest through movement at the start. I also like the model shot, she has a nice bod ;)

1. Your right about the navigation though, I would say maybe something like this, since you are using the flash photo concept instead of doing text navigation across the top and the address, have a cool looking graphic across the top that indicates that it is navigation and when the person runs over it, all the different sections pop down. I would also create the text navigation and give it a div tag and position that off the screen for people with disabilities and for google indexing bots. Last, I would also create a form email contact page instead of just a link. Somebody could not be at there home computer when viewing your site, also unless you mask that link bots on the web can harvest it.

These are just my suggestions, maybe good maybe not, I think your concept is good though, less is more.
 
The thumbnails definitely should have rollover effects.
One neat effect I've developed: On rollover, all other thumbnails blur and shrink slightly.

Here's an actionscript(3.0) that does this using event propagation.
(all movieclips contained within "thumbnailGroup" will be targeted by the thumbnailGroup event listeners, and the thumbnail instance name is passed to the "if" conditional within the rollover function.)
Here's a working example of the code below:
shrinkNblur

PHP: 
stop();
import gs.TweenMax;
import fl.motion.easing.*;

thumbnailGroup.addEventListener(MouseEvent.MOUSE_OVER , rollover, false, 0, true);
thumbnailGroup.addEventListener(MouseEvent.MOUSE_OUT, rollout, false, 0, true);

var targetThumb:String = "";
var thumb1:MovieClip = thumbnailGroup.btn1;
var thumb2:MovieClip = thumbnailGroup.btn2;
var thumb3:MovieClip = thumbnailGroup.btn3;

function rollover(event:MouseEvent):void {
	targetThumb = event.target.name;
	if (targetThumb == "btn1") {
		TweenMax.allTo([thumb2, thumb3], .2,{scaleX:.8, scaleY:.8, blurFilter:{blurX:4, blurY:4, quality:3}});
		TweenMax.to(event.target, .2, {scaleX:1, scaleY:1, blurFilter:{blurX:0, blurY:0, quality:3}});

	} else if (targetThumb == "btn2") {
		TweenMax.allTo([thumb1, thumb3], .2,{scaleX:.8, scaleY:.8, blurFilter:{blurX:4, blurY:4, quality:3}});
		TweenMax.to(event.target, .2, {scaleX:1, scaleY:1, blurFilter:{blurX:0, blurY:0, quality:3}});

	} else if (targetThumb == "btn3") {
		TweenMax.allTo([thumb1, thumb2], .2,{scaleX:.8, scaleY:.8, blurFilter:{blurX:4, blurY:4, quality:3}});
		TweenMax.to(event.target, .2, {scaleX:1, scaleY:1, blurFilter:{blurX:0, blurY:0, quality:3}});
	}
}

function rollout(event:MouseEvent):void {
	TweenMax.allTo([thumb1, thumb2, thumb3], .2, {scaleX:1, scaleY:1, delay:.2, blurFilter:{blurX:0, blurY:0, quality:3}});
}

Also, "load" and "unload" transitions for the large images would be nice.

I like the topnav concept for this type of site, although I don't like the links to span the entire browser when the window is resized; Keep the elements in a static configuration.
ie: the underlying topnav background color should span the browser window on resize, but the links, logos, etc... within it should remain where they are in relation each other.

Maybe a darker gray for the topnav background, as well.
 
Must you use Flash? Really? Flash?

Why not use a little ajax sparingly to add some zing and as the site is minimalist and streamlined, it will go over a whole lot better. Not to mention be able to degrade gracefully, or if you code it correctly, upgrade elegantly. Try a little unobtrusive javascript before jumping on the *gag* Flash bandwagon.
 
Trip.Tucker said:
Must you use Flash? Really? Flash?

Why not use a little ajax sparingly to add some zing and as the site is minimalist and streamlined, it will go over a whole lot better. Not to mention be able to degrade gracefully, or if you code it correctly, upgrade elegantly. Try a little unobtrusive javascript before jumping on the *gag* Flash bandwagon.
Click to expand...

He quite obviously wants to use flash, and flash can be a great tool when used properly. no need to jump on *gag* flash haters bandwagon

snickelfritz said:
What the hell is unobtrusive javascript?
Click to expand...

well said sir
 
BTW the carousel idea was a good one such as via DHTML which means integration of HTML, JS, CSS and the DOM, as follows:

Example image carousel using JS only (DHTML)

I always felt a web site should never cater to one technology (as others here explained passionately) but if its going to be Flash, it is supported in 98% of the browsers out there if you ask Adobe. Of course of that 98% only 44-55% are using the current version, but even with that limitation can you think of any other third party cross platform authoring tool that's also W3C compliant and on such a large scale?

I'm still tryin' to figure out unobtrusive JavaScript, though.

-jim
 
I digress...

[digression]
Flash is IMO the "Mac" of internet technologies.
It is shunned by mainstream programmers, and embraced by artists.:cool:

Flash is an extraordinarily flexible and empowering platform for artistic expression, mainly because the graphical tools (Flash IDE) are so well integrated with the "code" aspects, and the websites always display correctly regardless of the browser or platform.
(I have experienced no deviations at all in any of my Flash projects, except with regard to the HTML shell in which it is embedded)

I did not work in Flash, I doubt that I would even bother doing websites at all.
[/digression]
 
thanks guys for all the good ideas,

and yes, my knowledge of java or ajax or even html is limited so flash makes it easier to get to interesting solutions cross platform, I wouldn't know how to plow through the different needs of all the different browsers,

flash is absolutely supported by a 100% of all the people that this site is designed for, as long as it is backwards compatible say to version 6 when not displaying movies, I go to 8 and use on2 vp6 when it is time for movies -version 9 and h264 has to wait a year or so for me

i guess this makes me belong in the "mac" category of programmers

when it gets time I will consider doing something about the rollover issue and the address bar on top, thanks
 
Devils' Advocate...

Google hates flash, just so you know.

Also when I load your site, it flashes a bunch of pictures at me, quite annoying as I pick up on each one and suddenly don't want to look at details (small thumbnails).
 
Just to clarify: embedding Flash or any other multimedia format into an HTML page, does not in and of itself cause problems with Google or SEO.
It is the lack of structure and content in the HTML shell that causes most Flash sites to be difficult to index.

It is entirely possible to use javascript to hide a complete (fully indexable, text-only) webpage within the HTML shell of a Flash website.
 
i am gearing up for a major overhaul, am considering the different ideas and will probably use some of the suggestions but for now I have been busy with clients projects and haven't been able to focus on the site much, did indeed add a top title bar and a bit of navigation and a bio etc
here is how it looks now

also acquired two different spellings of the same name and again

any suggestions and replies are always highly appreciated

oh yeah, i was trying to figure out how to have a script that will allow me to have a much larger flash movie like 600 by 1200 pixels that will open with exact size, but if the screen resolution of the visitor is smaller than that, the flash movie would resize to a smaller format, anybody know a place to find that code
 
regarding http://www.patrikandersson.com/

I noticed there are no page-out transitions, although it appears that have included fairly elaborate page-in transitions. You might want to include at least a cross-fade to mitigate the abrupt white strobe effect that occurs when the links are clicked.

A clickable email link or custom email form would be a nice touch.

AFAIK, Flash SEO no longer (since June 08) requires a list of keywords and html page structure to be embedded in the index.html page.
The spiders crawl the SWF just like a person would, executing links and harvesting/indexing text content from the stage.

BTW, it's a good idea to "hide" your navigation button labels by nesting them inside of movieclips or sprites.
This prevents the search engine spiders from erroneously indexing them as stage text content.
 
thanks

did a little bit of research on this thing of html versus flash, i sure am no expert on SEO, but it seems that the spiders do not crawl the flash in some cases where the movie is loaded by javascript as it is when flash spits out the code

"Googlebot does not execute some types of JavaScript. If your webpage uses JavaScript to load a Flash file, we may not be able to discover and index the contents of that file." link

a list apart might have a suggestion about getting rid of the javascript link

oh and BTW here is the site that was built similar to the photography site shamask
 
I believe this is referring to "SWFObject" embedding method which is currently a popular third-party SWF embedding solution.
I suspect it will be fixed before FlashCS4 is released, since SWFObject will be the default (Adobe sanctioned) embedding method for CS4.
"Googlebot does not execute some types of JavaScript. If your webpage uses JavaScript to load a Flash file, we may not be able to discover and index the contents of that file."
Click to expand...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back