Full Flash Website - both flexible and responsive. Feedback is sought

(Alex Steele) #1

I created this little multimedia experience, it’s outside the realm of my typical projects. No data, it’s hand crafted. It’s a showcase site. It has a combination of a full screen, flexible objects on the layout, and a group of layouts for responsive design.

The contact form is hosted on another site, and its strictly a word press form I embedded into HTML object. I was able to remove the frame with CSS and that went pretty good. There is so much more I would like to do with a project like this, this kind of reminded me of the old days, CDs, multimedia and designing for specific machine requirements - while maintaining a freshness with current tech. Some of the SVGs are fontawesome saved as shapes. I can’t seem to get the fonts to work on google, that’s pretty weird.

I am requesting feedback - if people like it I think I will try to perfect it some more and then make it into a template. Any suggestions will be helpful.


(Trey Yancy) #2

I hear you on the CDs - shockwave or whatever, building installers, creating cool disk art and packaging, etc. It was klunky but I do miss it. I actually had one of those projects as recently as five years ago.

Looks great!

(Alex Steele) #3

thank you!

(Trey Yancy) #4

You asked for feedback so here are a couple of things:

The section element ( § ) does not immediately suggest a home button. Perhaps something else would work, or you could drop in a “home” text object beneath the section character that fades out.

Check the relative placement of objects. I resized the browser window and at some point the menu did not recognize a mouseOver. I also reduced the height of the window and the watermark overlapped the form. These are easy fixes.

I assume you are already well-versed in the following, but I’ll toss it in anyway…

One thing you can do is to create virtual blocks that scale to fit the window. Create a new scene and set it to scale vertically and horizontally, then drag your watermark onto the stage. Make sure that it is large enough so that it does not disappear when the browser window is narrowed. Select it and then select Group in the Arrange menu. This places the object inside a rectangular object. Set the object to shrink to fit, with the ratio unconstrained.
With the parent object (group) selected, stretch it to the desired size (full width is good), group it again, then adjust the outer group so that it matches the size of the stage. Set the master group to expand to fill / ratio unconstrained, Adjust the position of the inner group, moving it to the top. Set the watermark art to Shrink to Fit and with proportions constrained. Take that group and duplicate it and drag it to a position below the other group. Delete the watermark in this box and insert different content, making sure that the constraints and resizing are set to suit your design. Make sure that all groups are set to zoom contents.

I did one more thing: I duplicated the art in the bottom group and set the pins to the top, bottom and edge.

Check out the example.
Scaling.hype.zip (27.7 KB)

(Alex Steele) #5

Thank you so much! I am going to look at the example file, and will review everything and try to make these improvements. I appreciate your taking the time to give good feedback. Once I get things adjusted I will link to an update.

(Alex Steele) #6

I can’t tell you how much I appreciate that example file! I wasn’t getting results I liked until I saw that file and I was experimenting but that sped things up a lot. It helped me a tremendous amount. I took your advice on the symbol not being telling enough as well. And That other issue I had was some nested items were covering one another and blocking functionality, as you pointed out - I am pretty sure I solved that. The site is updated with all the new changes, and I am very appreciative!