Highlighted

Easy html/js button embedding problem

Community Beginner ,
Dec 23, 2018

Copy link to clipboard

Copied

All, sorry if this is a stupid question--I'd have thought it VERY easy to answer, maybe so much that no one's bother to tackle it.

Background: new to Animate CC but an old Flash user for buttons/banners, Dreamweaver CC for web page design

So, I used Animate CC to make an HTML5 navbar (home, past events, etc.) that works upon testing (in Animate CC).  Animate than gives me two files; an html file that when double-clicking runs my successful navbar in a browser by itself, and a javascript file. 

My question is, what now? I used to make flash buttons--in that case, I'd create a div below the page title for the navbar in Dreamweaver and "insert swf file" (which the toolbar would be) and it worked. Now I guess I'm supposed to copy the html code into Dreamweaver, and I guess that references the js code so attach it to the project...? Am I close? So, I copy the html into the area where the button would be and then attach the js file to dreamweaver?

I haven't tried any of this yet but I anticipate a few failures at least initially.  Can someone set me straight before I begin? I anticipate having to do this sort of thing a lot in the future for toolbars and animations.  The animations I figured out but the button/navbar process descriptions sans Flash and Shockwave are pretty sparse.

Thanks!!

Patrick

Patrick, I got curious and found this:

Home

It's your work, isn't it?

Screenshot 2018-12-24 at 14.04.52.png

The following is to say: In Flash times a SWF was running in a Flash Player, a kind of Black Box, relatively unrelated to the other environment written in HTML, CSS and Javascript, to name the main components of web development.

We all agree, Flash is DEAD, it becomes perfectly clear when you open the link above and all the Black Box bits are dead on startup.

The route to install the same navbar principle with Canvas/HTML is doomed. What comes out of Animate (one HTML, one JS) is a complex and complete HTML document in itself with javascript, it has its own divs (animation_container, dom_overlay_container, canvas) and tons of javascript functions and variables (stage, canvas, exportRoot ...). To integrate that in your other HTML environment of a page is a difficult undertaking. It's not the same as before, the SWF in Black Box in an <object> tag. You would have to employ an iFrame (or several when I consider the build principle of your Marilyn Cesarano page) to embed your HTML5/Canvas navbars.

My advise in earnest, forget it. If you want this kind of animated navbar, think of animated gifs or svgs, maybe employ something like GSAP Tweenlite or jQuery animation methods or CSS animation.

sorry

Klaus

TOPICS
Discussions

Views

530

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

Easy html/js button embedding problem

Community Beginner ,
Dec 23, 2018

Copy link to clipboard

Copied

All, sorry if this is a stupid question--I'd have thought it VERY easy to answer, maybe so much that no one's bother to tackle it.

Background: new to Animate CC but an old Flash user for buttons/banners, Dreamweaver CC for web page design

So, I used Animate CC to make an HTML5 navbar (home, past events, etc.) that works upon testing (in Animate CC).  Animate than gives me two files; an html file that when double-clicking runs my successful navbar in a browser by itself, and a javascript file. 

My question is, what now? I used to make flash buttons--in that case, I'd create a div below the page title for the navbar in Dreamweaver and "insert swf file" (which the toolbar would be) and it worked. Now I guess I'm supposed to copy the html code into Dreamweaver, and I guess that references the js code so attach it to the project...? Am I close? So, I copy the html into the area where the button would be and then attach the js file to dreamweaver?

I haven't tried any of this yet but I anticipate a few failures at least initially.  Can someone set me straight before I begin? I anticipate having to do this sort of thing a lot in the future for toolbars and animations.  The animations I figured out but the button/navbar process descriptions sans Flash and Shockwave are pretty sparse.

Thanks!!

Patrick

Patrick, I got curious and found this:

Home

It's your work, isn't it?

Screenshot 2018-12-24 at 14.04.52.png

The following is to say: In Flash times a SWF was running in a Flash Player, a kind of Black Box, relatively unrelated to the other environment written in HTML, CSS and Javascript, to name the main components of web development.

We all agree, Flash is DEAD, it becomes perfectly clear when you open the link above and all the Black Box bits are dead on startup.

The route to install the same navbar principle with Canvas/HTML is doomed. What comes out of Animate (one HTML, one JS) is a complex and complete HTML document in itself with javascript, it has its own divs (animation_container, dom_overlay_container, canvas) and tons of javascript functions and variables (stage, canvas, exportRoot ...). To integrate that in your other HTML environment of a page is a difficult undertaking. It's not the same as before, the SWF in Black Box in an <object> tag. You would have to employ an iFrame (or several when I consider the build principle of your Marilyn Cesarano page) to embed your HTML5/Canvas navbars.

My advise in earnest, forget it. If you want this kind of animated navbar, think of animated gifs or svgs, maybe employ something like GSAP Tweenlite or jQuery animation methods or CSS animation.

sorry

Klaus

TOPICS
Discussions

Views

531

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
Dec 23, 2018 0
Advocate ,
Dec 24, 2018

Copy link to clipboard

Copied

Hi Patrick

https://forums.adobe.com/people/Gaptooth+Columns  wrote

... I used to make flash buttons--in that case, I'd create a div below the page title for the navbar in Dreamweaver and "insert swf file" (which the toolbar would be) and it worked.

well .. do you have an example website running on the web where you did this with Flash/SWF what you are now trying to replicate with HTML5?

Sorry, your description (above) is a bit fuzzy. Please reply with an URL or describe your goal in more detail.

Generally is to say that navigation bars formerly made as SWF in a Flash Player and now - if you succeed - made HTML5 compatible in a Canvas - this doesn't sound like a good, modern idea.

Klaus

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...
Dec 24, 2018 0
Community Beginner ,
Dec 25, 2018

Copy link to clipboard

Copied

Klaus,

If it is not a good, modern idea, fine. I'm looking for one that is so

please help if possible: if I make ANY button in Animate CC it seems to

spit out an html of the button which calls a js file for the button

functionality. This is clearly the intentional use of animate for buttons:

a canvas design and a dual file html/js output. So, great! Every YouTube

video I've found shows people making buttons like I did, great. Then they

all stop. I can't find one that says "great, you used Animate cc to create

a button. Now, here's how to plug it into a Dreamweaver-designed page."

Please help, and happy holidays.

Patrick

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...
Dec 25, 2018 0
Advocate ,
Dec 24, 2018

Copy link to clipboard

Copied

Patrick, I got curious and found this:

Home

It's your work, isn't it?

Screenshot 2018-12-24 at 14.04.52.png

The following is to say: In Flash times a SWF was running in a Flash Player, a kind of Black Box, relatively unrelated to the other environment written in HTML, CSS and Javascript, to name the main components of web development.

We all agree, Flash is DEAD, it becomes perfectly clear when you open the link above and all the Black Box bits are dead on startup.

The route to install the same navbar principle with Canvas/HTML is doomed. What comes out of Animate (one HTML, one JS) is a complex and complete HTML document in itself with javascript, it has its own divs (animation_container, dom_overlay_container, canvas) and tons of javascript functions and variables (stage, canvas, exportRoot ...). To integrate that in your other HTML environment of a page is a difficult undertaking. It's not the same as before, the SWF in Black Box in an <object> tag. You would have to employ an iFrame (or several when I consider the build principle of your Marilyn Cesarano page) to embed your HTML5/Canvas navbars.

My advise in earnest, forget it. If you want this kind of animated navbar, think of animated gifs or svgs, maybe employ something like GSAP Tweenlite or jQuery animation methods or CSS animation.

sorry

Klaus

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...
Dec 24, 2018 0
Community Beginner ,
Dec 25, 2018

Copy link to clipboard

Copied

Klaus,

Kudos on tracking me down, though that's a family with did work for but you

are correct in my principle. I don't totally understand, though.

Dreamweaver is a webpage maker that can't produce navigation bars (buttons,

really) beyond css, which is not upp-eschelon professional. Flash was, but

now gone. By reason, "new" Flash (Animate) should fill the same void. If

not, how to do it? I have no experience or training and could make that

site alone, which I think is pretty impressive, but I don't know how to

progress with buttons/navbars. How does everyone else do them?

Patrick

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...
Dec 25, 2018 0
Advocate ,
Dec 26, 2018

Copy link to clipboard

Copied

Hi Patrick

I get what you are saying and to help you I need a bit more time to think about it. I'll be back.

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...
Dec 26, 2018 0
Advocate ,
Dec 26, 2018

Copy link to clipboard

Copied

Making nice menus (navbars) without using Flash:

Patrick, have a look at this:

Using CSS transitions | MDN

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...
Dec 26, 2018 0
Community Beginner ,
Dec 26, 2018

Copy link to clipboard

Copied

Klaus,

If you were curious I thought I'd send you my 2 files and a quick

description of my problem (no help expected, just fyi).

I have two original project files to convert to "current generation" (HTML5

or other). They are: Fade_In.fla (a non-interactive animation showing the

website name) and Toolbar.fla (both attached). These are the original Flash

files--you can see them in action at www.thirddcahistoricalsociety.org once

you tell your browser that it may run Flash. These files must be converted,

or alternative methods must be used to imitate the original behaviors. As

mentioned, Fade_In.fla is just a quick movie that ends with the page name;

you can't click on it it or do anything other than watch it when the page

is opened. Toolbar, on the other hand, is interactive (obviously). Here are

my testing notes (abridged).

1. Fade_In.fla: File --> Convert to... --> HTML5 Canvas -->

Fade_InHTML5_Canvas.fla

Fade_InHTML5_Canvas.fla --> Export (Adobe Media Encoder) -->

Fade_InHTML5_Canvas.mp4

I have re-exported numerous times, and placed it in Dreamweaver many times

with varying results. The one problem that ALWAYS occurs now: I cannot rely

on the video playing when the webpage it is on is loaded. This results in a

void at the top of the page. In some versions the video doesn't start at

all. If it just doesn't start (my problem now) there may be a workaround

(force refresh), but I have autoplay checked and pre-loading set to auto,

so it should auto-play--I don't like forcing, usually means you're doing it

wrong. Finally, I turned the animation into a jpeg sequence. I haven't

tried to do anything with it yet, but I will if necessary. My gut tells me

that's not the right way out, either, but might work in a pinch.

1.*Other attempts. I have tried turning the original and the HTML5 fla

files into oam files for import into Dreamweaver. Both attempts result in

a blank output page. This is odd since .oam is the only thing that worked

for the toolbar. Also, in one operation (publish?) I also get an html file

whose output (see attached) when double clicked is perfect. It opens a new

browser and plays in the top of it exactly as it is supposed to. The

actual html file, upon inspection, is a pretty long css/html file whose

sole purpose is to show the banner, but it works, leading me to believe

that I could somehow just put the whole page as a copy/paste in the bottom

of the "banner" page, which is ridiculous, but that's where I'm at these

days.

2. With toolbar, as stated, I succeeded in turning it into an OAM file that

Dreamweaver runs correctly. The next step is getting the toolbar and the

banner to run together on the same page.

Like I said, this is only if you want to look, please don't feel like you

have to.

Patrick

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...
Dec 26, 2018 0
Advocate ,
Dec 27, 2018

Copy link to clipboard

Copied

Patrick

first of all you are mentioning something about attached files, but there isn't anything attached. And as far as I know one can't attach files to forum posts. If I'm wrong, anybody, please correct me.

However - these files aren't necessary for me to see, I can perfectly imagine the issues at hand without them.

Let me approach your problems in a layered manner, first closest to you and your web design style and then moving a little beyond to alternative practices.

Looking at your site I guess the easiest solution is this:

Create in Animate CC a HTML/Canvas document containing both, the Fade-In-Header and the Toolbar-navigation, and insert the HTML into an iFrame which you install in your <div class="Toolbar"> section. Let's say the output HTML-file would be called fade_in_toolbar.html, the whole basic construction would look close like this:

<div class="Toolbar">

<iframe id="yourchoice" src="anysubfolder/fade_in_toolbar.html" style="border-style:none; width:1200px; height:328px"></iframe>

</div>

Please make sure that the stage-size of your Animate CC document is the same (or a little less) as the measurement of the iFrame (i suggest 1200x320px stage size, this is the same as both of your original Flash movies added together).

This way you don't have to worry about two seperate entities to integrate.

Also note that the links you'll have to script in the toolbar-section of your Animate/HTML/Canvas document for i.e. Past Events must go like this:

this.past_events_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

    window.parent.location.href = "Past_Events.html";

}

If you want to know more about iFrames then study this <iframe>: The Inline Frame element | MDN .

How this all is managed in Dreamweaver, well you have to help yourself. I remember there's a window where you can directly edit the HTML-code (including hand-coding CSS and Javascript). I haven't used DW in ages.

Okay, that's that. Let us take a few steps back and look at your issue from a farther distance. Sorry to say so, but your web development style is a little out-of-date. Still having Flash-navigations now is really vintage style. However - trying to replace this build-concept one to one with HTML5/Canvas remains retrospect. Don't take it too personally, design-wise you can do whatever you fancy - there's freedom. But it seems that you got stuck in a concept/style from around 15 years ago. Some further points here are.

  • you are using tables to layout your content, instead look into css float rules or flexbox or css grid
  • your website isn't responsive for the multitude of  today's viewports (like smart phones), look into css media queries and responsive web design
  • Your doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> is in the HTML5 age commonly superseded by simply <!DOCTYPE html>.
  • you are using quite a number of extraordinary font-families in CSS like Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif - , instead many designers nowadays apply online hosted web fonts to make sure the typography looks like intended. Look into i.e. Google Fonts or Adobe Fonts (the latter if you have a Creative Cloud Subscription).
  • as a last point and then I stop moaning : Your choice of background gradients and patterns - it makes parts of your contents hard to decipher, particularly the links in your toolbar. All that swooping gold and green, well if you and your clients like it, okay, but have you heard of flat web design to make the user experience easy and accessible?

Okay, okay.

Screenshot_20181227-160544_Chrome.jpgThis is how the site looks on my smart phone. If you apply my iFrame suggestion from above then at least the header and navbar will be visible and work.

Now coming back a little closer to the original issue from Flash to HTML/Canvas, I give you a few more suggestions to techniques and manuals which could be helpful in changing your way of making this kind of stuff. You know, Animate and HTML/Canvas is great for animations, rich media presentations, games and the like. But for navbars and page headers it's not really the first call. If you want and when you have time, look into these alternatives:

- CSS filters, CSS filter property

- CSS transitions

- Using CSS animations

- Using transitions when highlighting menus

- to swap css classes to achieve rollover effects with Javascript (HTML DOM classList Property)

- to use jQuery Effects

- to go even further with jQuery Effects, look into jQuery UI

- or animate your document elements with GSAP

- and of course for everything in a canvas, bigger and gamier, it's AnimateCC

So, here I let it be,

Klaus

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...
Dec 27, 2018 0
Community Beginner ,
Dec 27, 2018

Copy link to clipboard

Copied

Holy cow!!! What great ideas!! Klaus, thank you so much--you know, I

thought about the iFrame thing but forgot about it after so many other

attempts. I appreciate the finer points about more state of the art

designs, I just don't know where to go to learn them. Suggestions?

Patrick

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...
Dec 27, 2018 0
Advocate ,
Dec 29, 2018

Copy link to clipboard

Copied

Hi Patrick

Suggestions? That ain't easy. Everybody's different - how one learns and assimilates new knowledge. Let me tell you the most important thing is not to stick to a comfort zone. Not to think I know it all, I mastered it. Especially in digital technologies (but not only there) everything's in a flow, constantly expanding and changing.

So perhaps, in regards to our subject matter, stop relying too much on Dreamweaver and start occasionally to edit sections of your HTML, CSS and Javascript by hand. E.g. try to introduce in small steps at first new things like CSS filters or transitions.

There's always some help on each new method, but sometimes it's far spread and it takes patience. A good starting point might be Learn Web Development within the Mozilla Development Network (MDN).

And, Patrick, if you take a moment and mark one of my replies here as correct answer or at least helpful, that would be nice. I try to score a few points here.

Cheers

Klaus

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...
Dec 29, 2018 0
Community Beginner ,
Dec 29, 2018

Copy link to clipboard

Copied

Oh shoot, I absolutely will--pardon my lack of internet etiquette!! Thanks

again!!

Patrick

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...
Dec 29, 2018 0
Advocate ,
Dec 31, 2018

Copy link to clipboard

Copied

Hi Patrick

I have to add something to all my verbose explanations. Something I missed because I was ignorant towards Dreamweaver and its web work flow. Have you tried to to roll Animate CC Projects into Dreamweaver CC Projects via OAM?  The article is a bit dated (2016) but for sure still valid. I simply didn't know that.

Happy New Year

Klaus

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...
Dec 31, 2018 0
Community Beginner ,
Jan 01, 2019

Copy link to clipboard

Copied

Klaus,

Yes; in fact, the working toolbar wouldn't work in any way except as an OAM

file. Please see the finished product at www.thirddcahistoricalsociety.org

(you'll see the similarity to the other site). Overall, I think my job

would've been greatly simplified if I killed my darlings at the outset, but

at your suggestion my Dreamweaver in a classroom book arrived today so

forward into the future!

P.S. Today, on new years Eve, they said they want a membership site like

on apricot. FIRED!!

I say in jest, because I'm not doing that, that's what apricot is for. I

made their 1998 grid site pretty enough to encourage them to go further,

and they were fun--now I'm learning for me.

P.P.S. Also, amazingly today was contacted regarding an interview for a job

I gave three weeks ago...hired! (I hope... meeting #2 at least but pretty

sure). What a new year!!

Take care, sure we'll talk again soon!!

Patrick

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 01, 2019 0