9
Replies
Hi ALsp,
I know it's odd but I can't link to the website because the owner won't give me permission. Fortunately the flash banner is extremely simple. It's just a ticker-tape style thin horizontal banner that loops a couple of sentences of text over and over using a basic Flash CS5 classic tween.
Here's a screenshot of the flash animated rolling text banner:
When I import any Flash CS5 file into Animate CC and convert it to HTML (which is all successful with no errors) I'm left with a folder containing 'Images', a Javascript file and an HTML file which I'm unable to insert into Dreamweaver CS5 using the visual design side of the software (not the coding side which I don't well understand). I can also create oam and svg files of the animation in Animate CC but Dreamweaver CS5 ignores those too (they're greyed out when I try to insert them).
Thanks
Thanks very much Alsp, but I'm really looking for a way to convert the .fla ticker I have into an HTML5 compatible and useable file that can be inserted into an existing HTML4 webpage using the Adobe CS5 and CC applications I have already paid for. Before trying to do it using Animate CC etc. I assumed it would be a straightforward case of automatic file conversion.
I've heard how the adoption of HTML5 has made web building simpler, and I guess it is better when building from scratch, but it doesn't seem simpler when having to convert older files when a single flash file creates a folder full of images, a javascript file and an html file (or various other new proprietary formats) that Dreamweaver CS5 and older programs don't recognise. I think it's time to upgrade my skill set and learn coding. 
Welcome to the Dreamweaver CC Forum 
Problem 1:
CS5 is legacy software from 2010. In tech terms, anything that old is a fossil.
Problem 2:
You don't know how to work with code yet. The good news is, HTML5 and CSS basics can be learned in a couple of weekends.
W3Schools Online Web Tutorials
Problem 3:
Using Animate CC to create a simple scrolling marquee is like swatting flies with a sledgehammer. You don't need anywhere near that much code or bandwidth.
VERY SIMPLE SOLUTION:
Copy & paste code below into a new, blank document in code view.
SaveAs test.html and preview in browsers.
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrolling Marquee Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.marquee {
overflow: hidden;
position: relative;
background: #990000;
color: #FFF;
padding: 5%;
border-radius: 2%;
height:4vh;
}
.marquee h3 {
position: absolute;
font-size: 3vw;
width: 100%;
height: 100%;
margin: 0;
line-height: 4vh;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: marquee 15s linear infinite;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
/* Move it (define the animation) with browser prefixes*/
@-moz-keyframes marquee {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<h1>Scrolling Marquee Demo</h1>
<!-- Scrolling Marquee text-->
<div class="marquee">
<h3>Scrolling marquee text with plain HTML and CSS animation... </h3>
</div>
</body>
</html>
That's great, thank you Nancy. It's helpful as it confirms what I was suspecting whilst also backing up what I already know. 
There's no doubt CS5 is old but it's still surprisingly capable for many users. I only updated to Affinity and then CC in the few months having managed to get by with the comparatively basic but still powerful features of the older applications for over 8 years!
But yes, I definitely need to learn to work with code!
I think I will down web tools, learn HTML5 and CSS and start the website from scratch. It's a horribly old website anyway - also circa 2010! 
Thanks very much again.
You might want to hold on a bit
Here is Nancy's copy and paste code cleaned up a bit for more practical applications:
You should also be wary of the limitations in using a pure CSS animation. It is set to run for a duration of 15 seconds, which of course can be changed, but it could present a bit of a lag for small chunks of text. It is also effectively limited to a single message.
So, if you want to play with the technique, I would use the above example first.
AdChoices