Highlighted

Inserting HTML5 content converted from Flash CS5 into Dreamweaver CS5

New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

I've been asked to look after a website that was created years ago using Dreamweaver and Flash CS5.  It's been updated infrequently and the creator only ever updated the original files using CS5.  There are a few animated .swf banners that were created in Flash CS5 for which I have the original .fla files.  Of course the problem is flash is not well supported anymore.

I'm a print designer and unfortunately have very little experience with coding.  I'm planning on changing that and to design a new website in a few months time to replace the one I've been asked to curate, but right now I'm hoping to find a way to prolong the current website by replacing the flash animated banners on the website with HTML5 compatible versions.

I have access to CS5 Master Suite and I've also purchased Animate CC.  In my bliss-less ignorance I was hoping to convert the CS5 Flash animated banners in Animate CC and drop the resulting file into Dreamweaver CS5 exactly where the original file was located, but CS5 doesn't appear to recognise any of the file types published by Animate CC (dam, sag and html) when I select: Insert/Media or Insert/Image etc.

Am I trying to do the impossible or is there a way to replace an animated .swf file with an HTML5 compatible version within a webpage?  With my limited coding (and website building) knowledge no amount of googling seems to provide the answer.  Is it only possible via coding directly into the website source code or is there a way to use Dreamweaver CS5's wysiwyg tools to pull it off?

Help would be greatly appreciated.

Views

304

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

Inserting HTML5 content converted from Flash CS5 into Dreamweaver CS5

New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

I've been asked to look after a website that was created years ago using Dreamweaver and Flash CS5.  It's been updated infrequently and the creator only ever updated the original files using CS5.  There are a few animated .swf banners that were created in Flash CS5 for which I have the original .fla files.  Of course the problem is flash is not well supported anymore.

I'm a print designer and unfortunately have very little experience with coding.  I'm planning on changing that and to design a new website in a few months time to replace the one I've been asked to curate, but right now I'm hoping to find a way to prolong the current website by replacing the flash animated banners on the website with HTML5 compatible versions.

I have access to CS5 Master Suite and I've also purchased Animate CC.  In my bliss-less ignorance I was hoping to convert the CS5 Flash animated banners in Animate CC and drop the resulting file into Dreamweaver CS5 exactly where the original file was located, but CS5 doesn't appear to recognise any of the file types published by Animate CC (dam, sag and html) when I select: Insert/Media or Insert/Image etc.

Am I trying to do the impossible or is there a way to replace an animated .swf file with an HTML5 compatible version within a webpage?  With my limited coding (and website building) knowledge no amount of googling seems to provide the answer.  Is it only possible via coding directly into the website source code or is there a way to use Dreamweaver CS5's wysiwyg tools to pull it off?

Help would be greatly appreciated.

Views

305

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
Jan 30, 2019 0
Mentor ,
Jan 30, 2019

Copy link to clipboard

Copied

Hi Nathan,

Post a link to the page in question - with the Flash - so folks can see what kind of animations you are talking about.

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...
Jan 30, 2019 0
New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

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:

Flash-Banner.jpg

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

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...
Jan 30, 2019 0
Mentor ,
Jan 30, 2019

Copy link to clipboard

Copied

Gotcha.

That's a fairly simple type of widget and can be duplicated with some CSS and JavaScript. We even have a Dreamweaver plugin that will do that in a visual UI. But if you want to try it yourself, Google jQuery News Crawlers. You'll get a bunch to view and they should have instructions for how to get the code into your page.

If you want to check ours out, here is a link:

Headline Scroller

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...
Jan 30, 2019 2
New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

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. 

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...
Jan 30, 2019 0
Mentor ,
Jan 30, 2019

Copy link to clipboard

Copied

Flash is dead (thank goodness) and I'm afraid there is no reasonable way to convert a SWF to HTML Flash does not use JavaScript. It uses ActionScript, by the way. HTML5, by the way is one of the most misunderstood terms in Web Design. It really is not relevant to what you want to do.

I would steer clear of Animate CC and look for a good jQuery news crawler. If you are uncomfortable with code, then I would use a Dreamweaver extension (plugin).

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...
Jan 30, 2019 1
Adobe Community Professional ,
Jan 30, 2019

Copy link to clipboard

Copied

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>

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...
Jan 30, 2019 1
New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

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.

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...
Jan 30, 2019 0
Mentor ,
Jan 30, 2019

Copy link to clipboard

Copied

You might want to hold on a bit

Here is Nancy's copy and paste code cleaned up a bit for more practical applications:

Scrolling Marquee Demo

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.

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...
Jan 30, 2019 0
ALsp LATEST
Mentor ,
Jan 30, 2019

Copy link to clipboard

Copied

Here is a second test, which presents and illustrates a few of the issues with the method:

http://projectseven.com/testing/adobe-forum/nancy-marquee/test-2.htm

Note: I saw the technique Nancy posted quite some time ago. Actually, I was excited at first. But after putting it through some tests, the flaws became evident.

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...
Jan 30, 2019 1