Highlighted

SWF placement in Dreamweaver CC 2018

Community Beginner ,
Apr 24, 2018

Copy link to clipboard

Copied

I have added a SWF to the site im attempting to create using dreamweaver and in the process im attempting to re-position the SWF, i have added div and css style and adjusted the position in the properties but it does not move. Am I doing something wrong or is there another way to reposition the SWF?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Wrap your object inside the right_article and add some top margin to your aside.

<aside class="right_article" style="margin-top: 45px">

  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200">

  <param name="movie" value="images/imageflash.swf">

  <param name="quality" value="high">

  <param name="wmode" value="opaque">

  <param name="swfversion" value="6.0.65.0">

  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

  <param name="expressinstall" value="Scripts/expressInstall.swf">

  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

  <!--[if !IE]>-->

  <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">

    <!--<![endif]-->

    <param name="quality" value="high">

    <param name="wmode" value="opaque">

    <param name="swfversion" value="6.0.65.0">

    <param name="expressinstall" value="Scripts/expressInstall.swf">

    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

    <div>

      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

    </div>

    <!--[if !IE]>-->

  </object>

  <!--<![endif]-->

</object>

</aside>

Views

209

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

SWF placement in Dreamweaver CC 2018

Community Beginner ,
Apr 24, 2018

Copy link to clipboard

Copied

I have added a SWF to the site im attempting to create using dreamweaver and in the process im attempting to re-position the SWF, i have added div and css style and adjusted the position in the properties but it does not move. Am I doing something wrong or is there another way to reposition the SWF?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Wrap your object inside the right_article and add some top margin to your aside.

<aside class="right_article" style="margin-top: 45px">

  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200">

  <param name="movie" value="images/imageflash.swf">

  <param name="quality" value="high">

  <param name="wmode" value="opaque">

  <param name="swfversion" value="6.0.65.0">

  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

  <param name="expressinstall" value="Scripts/expressInstall.swf">

  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

  <!--[if !IE]>-->

  <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">

    <!--<![endif]-->

    <param name="quality" value="high">

    <param name="wmode" value="opaque">

    <param name="swfversion" value="6.0.65.0">

    <param name="expressinstall" value="Scripts/expressInstall.swf">

    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

    <div>

      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

    </div>

    <!--[if !IE]>-->

  </object>

  <!--<![endif]-->

</object>

</aside>

Views

210

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

It's pretty much impossible to say exactly what might be going wrong, without seeing the code you've created.

Could you post a link to your work in progress so we can take a look?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Community Beginner ,
Apr 26, 2018

Copy link to clipboard

Copied

display.png

sorry Im new to this and the reason im using an swf is I was told to use flash/animate for my school project. Im trying to get that swf on the right side. here is my code for my page

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Simple Theme</title>

<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

<script src="Scripts/swfobject_modified.js"></script>

</head>

<body class="body">

<div class="container">

  <header>

    <div class="primary_header">

      <h1 class="title"> IronSide Jiu-Jitsu</h1>

    </div>

    <nav class="secondary_header" id="menu">

      <ul>

        <li>ABOUT</li>

        <li>FAQ</li>

        <li>SCHEDULE</li>

        <li>GALLERY</li>

        <li>CONTACT</li>

      </ul>

    </nav>

  </header>

  <section>

    <h2 class="noDisplay">Main Content</h2>

    <article class="left_article">

<h3>trAIN WITH CHAMPS TODAY</h3

 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200" id="FlashID" title="homeflash">

  <param name="movie" value="images/imageflash.swf" />

  <param name="quality" value="high" />

  <param name="wmode" value="opaque" />

  <param name="swfversion" value="6.0.65.0" />

  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

  <param name="expressinstall" value="Scripts/expressInstall.swf" />

  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

  <!--[if !IE]>-->

  <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">

    <!--<![endif]-->

    <param name="quality" value="high" />

    <param name="wmode" value="opaque" />

    <param name="swfversion" value="6.0.65.0" />

    <param name="expressinstall" value="Scripts/expressInstall.swf" />

    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

    <div>

      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

    </div>

    <!--[if !IE]>-->

  </object>

  <!--<![endif]-->

</object>

<p>

      

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

    </article>

    <aside class="right_article"> </aside>

  </section>

  <div class="row">

    <div class="columns">

      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

      <h4>TITLE</h4>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

    </div>

    <div class="columns">

      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

      <h4>TITLE</h4>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

    </div>

    <div class="columns">

      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

      <h4>TITLE</h4>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

    </div>

    <div class="columns">

      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

      <h4>TITLE</h4>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

    </div>

  </div>

  <div class="row blockDisplay">

    <div class="column_half left_half">

      <h2 class="column_title">LEFT COLUMN</h2>

    </div>

    <div class="column_half right_half">

      <h2 class="column_title">RIGHT COLUMN</h2>

    </div>

  </div>

  <div class="social">

    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

  </div>

  <footer class="secondary_header footer">

    <div class="copyright">&copy;2015 - <strong>SIMPLE Theme</strong></div>

  </footer>

</div>

<script type="text/javascript">

swfobject.registerObject("FlashID");

swfobject.registerObject("FlashID");

</script>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2018 0
Adobe Community Professional ,
Apr 26, 2018

Copy link to clipboard

Copied

You have some structural errors in your html, for example, this line...

<h3>trAIN WITH CHAMPS TODAY</h3

You are missing the ending bracket in your closing h3 tag. That type of error can cause all kinds of display issues when trying to position items in your page because the browsers/DW may not understand which items you're trying to modify.

Run your page through the validator at http://validator.w3.org/nu to get a listing of your issues. Once you clean them up, the page may start functioning the way you want when you position items.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2018 2
Adobe Community Professional ,
Apr 26, 2018

Copy link to clipboard

Copied

Since you're using a multi-column template,  why don't you put your Flash object inside the right column? 

<div class="column_half right_half">

<h2 class="column_title">RIGHT COLUMN</h2>

PLACE SWF OBJECT HERE....

</div>

I still say you should not use SWF.   Tell your instructor that Flash is dead.  Adobe is ending it in 2020.  Currently, very few browsers support Flash player.    If you have to use Animate CC, do it with HTML5 Canvas option.

Create HTML5 Canvas documents in Animate CC

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2018 2
Community Beginner ,
Apr 27, 2018

Copy link to clipboard

Copied

question.png

alright so I got adjusted to the right side but now I'm trying to reposition to where the purple box is on the image, it just looks odd there. here is the new code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Theme</title>
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="BACK">
<div class="container">
  <header>
    <div class="primary_header">
      <h1 class="title">IRONSIDE JIU JITSU</h1>
    </div>
    <nav class="secondary_header">
      <ul>
        <li>ABOUT</li>
        <li>FAQ</li>
        <li>SCHEDULE</li>
        <li>GALLERY</li>
        <li>CONTACT</li>
       
      </ul>
    </nav>
  </header>
  <section>
    <h2 class="noDisplay">Main Content</h2>
    <article class="left_article">
      <h3>content heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </article>
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200">
  <param name="movie" value="images/imageflash.swf">
  <param name="quality" value="high">
  <param name="wmode" value="opaque">
  <param name="swfversion" value="6.0.65.0">
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf">
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">
    <!--<![endif]-->
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="swfversion" value="6.0.65.0">
    <param name="expressinstall" value="Scripts/expressInstall.swf">
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

    <aside class="right_article"> </aside>
  </section>
  <div class="row">
    <div class="columns">
      <p class="thumbnail_align"> <img src="images/joao-miyao.png" width="140" height="138" alt=""/> </p>
      <h4>TITLE</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </div>
    <div class="columns">
      <p class="thumbnail_align"> <img src="images/paulomiyao.png" width="140" height="138" alt=""/> </p>
      <h4>TITLE</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </div>
    <div class="columns">
      <p class="thumbnail_align"> <img src="file:///C|/Users/Freshsole/Desktop/newsite/images/dillondanis.png" width="140" height="138" alt=""/> </p>
      <h4>TITLE</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </div>
    <div class="columns">
      <p class="thumbnail_align"> <img src="file:///C|/Users/Freshsole/Desktop/newsite/images/leo.png" width="140" height="138" alt=""/> </p>
      <h4>TITLE</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </div>
  </div>
  <div class="row blockDisplay">
    <div class="column_half left_half">
      <h2 class="column_title">LEFT COLUMN</h2>
    </div>
    <div class="column_half right_half">
      <h2 class="column_title">RIGHT COLUMN</h2>
    </div>
  </div>
  <div class="social">
    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
    <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
  </div>
  <footer class="secondary_header footer">
    <div class="copyright">&copy;2015 - <strong>SIMPLE Theme</strong></div>
  </footer>
</div>
</body>
</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 27, 2018 0
Adobe Community Professional ,
Apr 27, 2018

Copy link to clipboard

Copied

Wrap your object inside the right_article and add some top margin to your aside.

<aside class="right_article" style="margin-top: 45px">

  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200">

  <param name="movie" value="images/imageflash.swf">

  <param name="quality" value="high">

  <param name="wmode" value="opaque">

  <param name="swfversion" value="6.0.65.0">

  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

  <param name="expressinstall" value="Scripts/expressInstall.swf">

  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

  <!--[if !IE]>-->

  <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">

    <!--<![endif]-->

    <param name="quality" value="high">

    <param name="wmode" value="opaque">

    <param name="swfversion" value="6.0.65.0">

    <param name="expressinstall" value="Scripts/expressInstall.swf">

    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

    <div>

      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

    </div>

    <!--[if !IE]>-->

  </object>

  <!--<![endif]-->

</object>

</aside>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 27, 2018 1
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

The bigger question is why are you continuing to use a dead format like swf. Modern broswers wont play a swf file by default, its not supported on any apple mobile device......hummm

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

Use the HTML5 <video> tag as shown below with MP4 file.  Unlike Flash, this will play on any modern web device -- desktop, tablet or mobile phone.

<video poster="YOUR_POSTER_IMAGE.jpg" controls>

<source src="YOUR_VIDEO.mp4" type="video/mp4">

</video>

By default, Video is a block level element and will occupy the entire horizontal line to which it is applied.  If you wish to have your video in a column, use CSS Flexbox.  In this example, video is on the right side of screen.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Video Demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

.flex-grid {

  display: flex;

}

.col {

  flex: 1;

        padding: 3%;

}

video {max-width:100%;}

/**break to stacked columns on smaller devices**/

@media (max-width: 660px) {

  .flex-grid {

    display: block;

  }

}

</style>

</head>

<body>

<div class="flex-grid">

<div class="col">

<h4>Heading 3</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia deleniti dolorem, laudantium. Quod obcaecati ad tempora quia recusandae voluptas blanditiis molestiae, eos aliquid illo possimus repellat earum, laborum, eligendi reiciendis!</p>

</div>

<div class="col">

<video poster="POSTER_IMAGE.jpg" controls>

<source src="YOUR_VIDEO.mp4" type="video/mp4">

</video>

</div>

</div>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 1