Fluid layout question.
I am working on a flash site with many scenes with movie
clips, different clips but same size and same position.
I just set up the layout using fluid with this function
sizeListener.onResize = function() {
centered._x = Stage.width/2
centered._y = Stage.height/2
centered._width = Stage.width * .5
Works great.
To make it work for all scenes and each instance names of my
movie clips I copy the script on the first frame of each scene and
change the instance names.
Is it the proper way and/or is there another or better way.
Thanks for your help.
Chris
Well, yes and no. If you are going to use scenes then that is
most likely the proper way.
But, the real answer, is that you shouldn't use scenes. They
are really something designed to help timeline animators arrange
their work. In the published swf file the scenes go away and it
becomes one long timeline. This can cause several problems that pop
up in these forums from time to time.
So instead use only one scene and use the power of nested
movieclips to keep things organized.
Also, you shouldn't really have dozens of these for each
clip. Instead you should have some way of reusing the same function
over and over. It is hard to say how to structure it without
knowing more about your whole project.
Similar Messages
-
Hello there. I want to make a fluid layout for the website I'm working on right now. I know the basic concepts of how to center an object and keep it there, or how to stick a shape to the top or bottom... etc. But if there's a movieclip that I would like it to conserve its position proportionally as the visitor resizes the stage, how can I do that?
Hi,
Try this way..
If u using a movieclip then the x and y must be depend up on the stage
for ex:
mc.x = Stage.stageWidth - 30;
mc.y = Stage.stageHeight - 30;
Saransoft -
In Dreamweaver 6, I created a new fluid layout. I set up (4) DIVs. In the 3rd div, I changed the font color. The new color shows up on the website when viewed in my computer desktop, but, when viewed in a tablet and a cell phone, the color of the font does not change. It's the same in Dreamweaver's Live view. It shows the new color on Desktop view and not in the cell phone or tablet view. Also, I changed the font itself in one of the DIVs and it shows up in the new font on the desktop view and website viewed thru the computer, but, not on the tablet or cell phone. Can someone please explain. I want to be able to change the fonts and colors for viewing in the tablet and cell phone, also. The fonts were all standard fonts. Sans-erif and Verdana and Arial were tried. Thanks.
I will lock this discussion because of duplicate post.
-
Full width preloader for fullscreen layout/fluid layout
Hi,
I'm new to this forum. I need help to figure out how to make the preloader works on the full screen website/ fluid layout. I add the Stage.resize on the code for FYI. When I added this code to the bar, it expanded to full screen, but there's no loading bar. The text is also no progress. Help please. ThanksI really need help for this. FYI, I have:
Stage.align
stage.scaleMode
stage.addEventListener
to make the bar to fullscreen. Any idea why the bar is not working? Thanks -
How to get fluid layout for Dreamweaver CS5?
CS 5 is not have Fluid Layoout,how to get fluid layout for Dreamweaver CS5?
For Responsive Web Designs (RWD), you can do it manually with CSS Media Queries. David wrote a detailed tutorial below.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Or you can jump start your RWD projects with one of these popular Frameworks.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O. -
How to get text padding in CS6 fluid layout div?
After having set-up my fluid layout divs and entering some content, the text is all slammed against the left. Very unsightly! But my every attemtpt at chaning the CSS to insert some left padding breaks the overall layout by pushing divs down the page and ruining the column structure, presumably because these divs no longer fit (?). My overall layout does have a mix of columns for tablet and desktop, which degrade to a single column for the mobile.
Any help teaching an ol' dog a new trick would be much appreciated!If you're using other HTML tags like <li> <address> <cite> <code> <blockquote> etc... you'll need to create padding styles for those, too. Usually the padding will not appear if you haven't enclosed text or images inside an appropriate tag.
Nancy O. -
Fluid Layout - Background Image
Hello All,
First I'll explain what I did and what I'm hoping to see. I created a fluid grid layout. Below the fluid grid layout, added a div that extends 100% width that's not part of the fluid grid. So I inserted an image by going to the Commons tab and selected image, I was then able to browse for the image I wanted and then inserted it. once inserted I see it scales correctly on all 3 devices. Now I would like to add text over this image but I can not do that. I can only put text either above or below the inserted image. So I deleted the image, selected the div and inserted the image by going into my Properties panel and imported it as a background image. But as you guys may know, I had to set a specific height, for the image to be view and it doesn't even scale correctly on all device outputs. But that was the only way I could insert text over the image.
What am I doing wrong? All I want is to have a background that's scaleable on all viewports with the text on top of the image. Maybe there's a tutorial that can help me out with this.
HELP!
Thanks in advance.
P.S. Here's the simple code that I have.
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for mhvkhhadditional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
</div>
<div>This is the content for Layout Div Tag</div>You really must use a Background in the CSS. You cannot position image & overlay elements in Responsive Web Designs. It simply won't work well.
Resizable Full Page Background Image
I prefer to use CSS Gradients or solid background colors which is much less bandwidth for mobile data plans to absorb.
Ultimate CSS Gradient Generator - ColorZilla.com
Nancy O. -
I have decided to rebuild my site from a fixed with layout to fluid/responsive. So far, I've set up a test page with a fluid layout, but it's not working as expected. See http://www.perberntsen.com/responsive_test.html
The relevant css is in the page.
When I make the browser window smaller, the columns will resize, but the rightmost column will drop down much too early, leaving lots of white space. (It does continue to resize, although out of sight.) I am planning to use media queries, but I dont't think they should be neccessary to achieve what I'm trying to do.
Things I've tried:
Removing min-width on the menu (didn't help)
Removing the header (didn't help)
Using position:relative (didn't help)
I've also read Ethan Marcotte's book on the subject as well as various articles on the internet.
Would be very grateful if someone could point me in the right direction ...
Edit: I also tried disabling external css and javascript, both of which didn't help. I am pretty sure the answer lies in the css.No knowledge of responsive, but narrowing the min width to 150 looked pretty good in FF
#nav {
background-color: #F4F4F4; border: 1px dotted #505050;
float: left;
margin-top: 0;
min-width: 150px;
width: 15.3333%; -
Apply Fluid Layout to existing site?
Has anyone been able to apply the CS6 Fluid Layout to existing Dreamweaver site pages? I have about 1000 pages, all template-based that I wojld love to convert to Fluid Layout if there is a reasonably efficient way to do it. Any info or a link to a tutorial on this would be appreciated. I am going crosseyed right now from all of the searching!
I don't have CS6, so I don't know what the Fluid Grid Layout is that Murray's talking about. But if what you are trying to do is to create pages that fill the browser window, that's easy.
And I think you don't have to alter your template(s) -- it can be done in your style sheet.
Almost all web pages have an outer "wrapper" that everything else (save the body) lives in. So, for a fixed-width website, you do the following:
#wrapper {
margin: 0 auto; /* this centers your main content in the web page */
width: 980px; /* This is the maximum width of your website in pixel units. */
For a fluid width, you do the following:
#wrapper {
margin: 0 auto; /* this centers your main content in the web page */
width: 100%; /* this sets the width to the viewport */
Now, one thing I do like to do is specify a minimum width, which I do in the body:
body {
min-width: 760px;
I also like the CSS Tricks example, which specifies minimums and maximums, giving you "fluidity" up to a point. -
Hi,
I am trying to build a site with fluid layout. I have three
classes: Preloader, Main and Background.
Preloader loads main.swf and has resize function where it can
access Background like so:
Sprite(loader.content).getChildAt(0).y = stage.stageHeight -
Sprite(loader.content).getChildAt(0).height;
Main has an instance of Background.
Background draws vertical lines. It uses fluid layout on its
own. Works fine.
Here is the catch:
Background utilizes stage.stageWidth and stage.stageHeight,
when tested with separate fla works like charm. However, when
accessed thru Preloader throws this error: Error #1009: Cannot
access a property or method of a null object reference. I think it
is because use of stage but I don't know how to go about it.
It also uses its own resize function.
So, what is the best way to put it all together? Where should
I keep resize function? What I need to do with stage object in
Background?
Hopefully I explain more or less coherently what is the
problem.
Here is abbreviated code for all three classes:I just used the publish settings myself don't know if it will
help you it worked for me on this site.
http://www.cybermountainwebservices.com/client0/date/
settings:
http://www.mespinach.com/fluid.gif -
Fluid layout since the beginning
hello.
i have a website with a fluid layout. in the website i have only one element that is "fluid" (it's kind of a mediaplayer which is suppoused to be always in the center of the page).
i write some line of code...and it works...but only if i resize the page...i wish to have it in the center since the beginning.
here it's the code:
// LAYOUT CONTROL -----------------------------------------------------------------------
addEventListener (Event.ADDED_TO_STAGE, onAdded);
function onAdded ( e:Event ):void
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener (Event.RESIZE, resizePage);
// resizePage ------------------------------------------------------
function resizePage ( e:Event = null ):void
if ( stage )
bg.x = stage.stageWidth / 2 ;
bg.y = stage.stageHeight / 2 ;
media.x = stage.stageWidth / 2 ;
media.y = stage.stageHeight / 2 ;
resizePage ();You could try it like so:
// LAYOUT CONTROL -----------------------------------------------------------------------
addEventListener (Event.ADDED_TO_STAGE, onAdded);
function onAdded ( e:Event ):void
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener (Event.RESIZE, resizePage);
resizePage ();
// resizePage ------------------------------------------------------
function resizePage ( e:Event = null ):void
if ( stage )
bg.x = stage.stageWidth / 2 ;
bg.y = stage.stageHeight / 2 ;
media.x = stage.stageWidth / 2 ;
media.y = stage.stageHeight / 2 ; -
Dear all, I know there will be a simple solution and i've read lots of tutorials but i cant find my mistake. Im using a fluid layout and trying to simply float two div tags next to eachother. Below is my code please help.
HTML
<body>
<div class="gridContainer clearfix">
<div class="fluid container" id="one">This is the content for Layout Div Tag "one"</div>
<div class="fluid container" id="two">This is the content for Layout Div Tag "two"</div>
</div>
</body>
CSS
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
#one {
background-color: #F8080C;
width: 168px;
float: left;
height: 80px;
#two {
background-color: #0250ED;
width: 188px;
float: left;
height: 106px;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
ThanksSome advice. Play away but it took me 9 re-tries to get an acceptable mobile/tablet/desktop layout the first time I used this tool. It's not exactly intuitive.
Build mobile first. That's what everything else is based on. Don't fuss with any content, just focus on getting divisions all inserted and stacked on top of each other.
Then build Tablet. Use the pull handles to resize divs and move them up or down rows.
Finally build desktop. If you examine the code as you go along, you'll see that DW does a pretty fair job of generating the necessary floats, widths and margins for you. Don't tamper with Fluid Grid CSS code. It's very temperamental and breaks easily. When you're ready to style content, use a separate external stylesheet for that.
Have fun!
Nancy O. -
Fluid Layout - stop changing resize position when movieclip is at certain position
Hello. I have been trying things out for hours, and I still can't get it.
I am following this Fluid Layout tutorial: http://active.tutsplus.com/tutorials/web-design/build-a-fluid-website-layout/
I added a Menu_mc on my stage. Initially, this should be at the center of the stage and when I click on it, it will tween on the upper left corner of the browser. However, when I resize the browser, the Menu_mc goes back to the center of the screen.
I have tried separating a different actionscript file where it is specifically for initialization of the object and another one for resizing. And then when I call it on my main AS file it goes like this:
// Add the symbols to stage
var Menu_mc = new Menu_MC();
addChild(Menu_mc);
// Apply the alignment to the middle
var Menu_InitParam = {
x:0.53,
y:0.35,
offsetX: -Menu_mc.width/2,
offsetY: -Menu_mc.height/2
new InitFluidObject(Menu_mc,Menu_InitParam);
var Menu_ResizeParam = {
x:Menu_mc.x,
y:Menu_mc.y,
offsetX: -Menu_mc.width/2,
offsetY: -Menu_mc.height/2
new FluidObject(Menu_mc,Menu_ResizeParam);
But it seems futile. Could anyone please help? Thanks a lot!Do you have any useful resources that I could perhaps check out? Haven't explored ANY javascript before =)
-
Dreamweaver CC understanding external style sheets when using Fluid layouts?
I'm attempting to build a website using the Dreamweaver CC Fluid layout feature. I've been using this tutorial:
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
The bit i'm stuck at is when it comes to attaching a external style sheet to format the text and content. So to be clear, i've already created my fluid layout and created a 'layout.css' file when promted, then using some html 5 class div tags (header, navigation and article) i've built my layout. All doing what I want up to this point.
Now I need to start adding content and from what I understand its much better practice to set up another external style sheet for the text formatting and styling.
I used the CSS Designer to 'create a new CSS file', called it 'typography.css' and I can see its linked to the main Source Code file.
I understand that theory but here is where its confusing for me:
After creating and linking the new CSS file what do I do next? Do I have to hand code in various text formatting ids or is there a more visual way of doing it? Or do I select my text content in the source code page and then press the '+' button in the 'Selectors' panel to start adding ids that way? And should the class or id names in the new CSS file be the same as in the layout CSS file or different?
I guess I dont really understand excatly how external style sheets should be created and implemented, all the youtube vids i've watched so far are done with hand coding but i'd like to use the Properties panel to do it in a more visual way if possible.
Any tips or help greatly appreciated, some basic learning needed. Thanks.Giving a detailed explanation of how to best use CSS goes beyond the scope of what this forum can do. There are volumes of books, blogs and tech sites devoted to this topic.
A Must Read -- How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
In a nutshell, make the most of your logical HTML tags. They not only add semantic structure to your content, they serve as hooks for your CSS styles. Don't class or ID something unless you absolutely need it. The goal here is to keep your HTML streamlined.
/**effects all h2 tags in your site**/
h2 {font-size: 125%}
/**only effects h2 tags inside headers**/
header h2 {color:orange}
/**effects all p tags**/
p {font-size: 100%}
/**only effects p tags inside articles**/
article p {color:#333}
Nancy O. -
Hi!
If I have a small image in a fluid layout column which is the best practice for having the image's width adjust to the column width while still remaining proportional with its height?
Thanks!
ktI am not sure about fixed height but to scale your image to your DIV width then this CSS will work?:
img {
width: inherit;
I suspect the height will also scale proportionately but another method is to use JavaScript which is for another forum to deal with. This one is for pure DW.
Your HTML might look like this:
<img alt="pict01" src="http://www.psaltiki.org/_images/hagios_cover_small.jpg">
<img alt="pict02" height="300px" src="sinai_syrmatiki.jpg">
The second image contains a constrained height with a width of inherited from your DIV.
Maybe you are looking for
-
Want Time Capsule far away from my modem. How to add to existing Airport?
Hi, I have a dome-shaped Airport Extreme Base Station (AEBS) connected to a Comcast modem. I want to leave it as it is, but I would like my Time Capsule (TC), to be located far away from the modem, to "join" or "extend" that AEBS network. I had it se
-
What is wrong with my facetime,i am using an ipad everytime i placed a call i can't hear it ringing and the person i am calling can't recieve my call as well,i did everything possible forced off my ipad,on and off facetime on settings,change id's, mu
-
Nvidia drivers (Older version)
Can someone pls make packages of older Nvidia drivers. I have some performance loss problems with new drivers and i could not find nothing older then 177.80 for pacman. I have no xperence in making packages, and i dont wanna mess up. I need NVIDIA-Li
-
Need of Tables for the BP Master--Sales Area in CRM
Dear Friends, i need of your help in finding out the proper tables in CRM for the BP Master -- Sales Area data(Region, Sales District, Sales Office, Business Partner Code, Business Partner Name Thanks & Regards ARUN
-
Why cannot I remove a song from a playlist?
I keep hititng the delete button to remove a song from an iTunes playlist. It won't delete from the playlist. What am I doing wrong?