OAM <Object> from Animate to Dreamweaver Responsive but leaves a big gap

Report · Mar 05, 2021

I have an issue with an OAM animation I created in Adobe Animate CC and placed on a web page using Dreamweaver and html5. The animation scales very nicely between lg-xs screens but as the screen size dips below 1200 wide (lg to md) you see the gap betweeb the animation <object> and the next element grow substantially larger. You can simulate this easily in Dreqmweaver using live mode and scaling the page size. The web page looks great on my PC full screen but on the android phone the gap between these elements is half the screen. I have seen a few writings about this issue on other media sites but none with clear answers.

Report · Mar 05, 2021

Please supply the link o the page.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 06, 2021

Thanks for taking an interest. You can see this issue at https://andrewandterry.net

The first element on the page is the animated OAM <object> followed by a bootstrap navbar.

Just below is another animated OAM which is much smaller but has the same responsive issue,

Report · Mar 06, 2021

There is a height of 500px set for the object which is causing the problem.

Rather than using <object>, I used <iframe> and Bootstrap 4

This meant merely dropping the HTML file, as created by Animate, into the iframe.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 06, 2021

In addition to what Ben pointed out...

1. Only 1 version of Bootstrap is allowed. You should not have multiple versions in the same file. FYI: the current release version is 4.5, soon to be 5. Why are you still using ver 3 which hasn't been updated in several years?

2. You have extra CSS links that are going to 404 Not Found files. I don't think you need any of these.

<link rel="stylesheet" href="css/marquee.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap.theme.min.css" />

3. Edge Animate is discontinued. It hasn't been actively developed since 2015. You could switch to Animate CC or use a short looping video. But for something this basic an animated GIF might be better.

As an example,

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

</head>
<body class="bg-dark">
<div class="container-fluid">
<div class="row">
<header class="col mx-auto">
<!--insert your animated gif here-->
<img class="img-fluid" src="https://dummyimage.com/1600x400" alt="placeholder">
</header>
</div>
</div>
<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="index.html"> 
<!--Your logo goes here--> 
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x75" alt="logo/brand"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item current"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">sub-1a</a> <a class="dropdown-item" href="#">sub-1b</a> <a class="dropdown-item" href="#">sub-1c</a> </div>
</li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>

<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-5">Bootstrap 4.5 with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a> </p>
</div>
<div class="container-fluid">
<div class="row text-center text-light">
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
 
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>

</div>
<hr class="my-4">
<div class="row">
<footer class="col"> <small>© 2019 Footer goes here</small> </footer>
</div>
</div>


<!--Supporting scripts: jQuery, popper then Bootstrap JS.--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 06, 2021

But for something this basic an animated GIF might be better.

How true!

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 06, 2021

Thanks for looking at my web page. Here is a new version without all the unnecessary code.

https://andrewandterry.net/TestingObjects.html

The animations on this page were made in Adobe Animate CC and published as an OAM package. Dreamweaver inserts the code using the <object> tag. I tried to create this using an iFrame but could not get it to scale at all - it was not responsive. My goal is to develop more sophisticated animations for my web pages so gif files aren't really an answer for me. I am trying to determine if this is a Bootstrap 4 issue with the <object> element or what. I have my main animation on this page twice. Once using the Dreamweaver code and once just as an <object> element with data=""

It's the darm gap that occurs when scaling I can't seem to irradicate.

Report · Mar 06, 2021

I did get the <iframe> to work but it has the same issue as the object tag - it leaves a big gap between the animation and the next element.

https://andrewandterry.net/TestingObjects.html

Perhaps I should pursue this with the Adobe Animate CC folks. I really like using Animate CC but I might have to publish to a different format.

Terry

Report · Mar 06, 2021

It was a long time ago that I was forced, by my client, to include animations. He had made these himself.

What I can remember is that the animation HTML file already showed a responsive image as shown by these screen shots.

It should not be too difficult to transfer that to your page. Sorry, I cannot remember how I did it, only that I used an iframe.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!