Adobe Muse integration

[Haansplosion13]

Hi All,

 

I have been playing around on the latest version of Adobe muse since the weekend, and its shaping up to be a pretty rad tool. My only problem is, I want to use my shiny new javascript version of the ever incredible Greensock platform - but cannot seem to get it to work..

 

I have tried everything I can think of with no result, I was wondering if anyone else had any luck?

 

Thanks,

[GreenSock]

I've never used Muse before - is that something you can post a very simple project for so that we can crack it open and see what's going on? I'm sure it's possible to get working.

[Haansplosion13]

Hi guys,

 

Thanks so much for your help on this, attached is a really simple Muse project with just two objects.

 

Your help and support is invaluable, you guys are the best!

 

Greensock_Test.muse.zip

[GreenSock]

Yikes, I cracked open Muse and it looks extremely developer unfriendly. Maybe someone else with Muse experience can chime in here - I see where one can insert an HTML object that has JavaScript stuff in it, but how are you supposed to target a particular object in terms of selecting? For example, if a red square is on the stage, how do we reference that particular red square in JS? I didn't see any place for defining an instance name or id.

 

I hate to say it, but Muse looks terribly crippled.

 

I really wish I could help more but at this point I can't see how to even target a particular object in Muse.

[Randall]

I took a look at this just now too. The only thing that comes to my mind is that a coder who uses software that "designs websites without writing code" will be as equally frustrated as the designer who uses software that "codes websites without designing."

 

A lot of programs that attempt to be both "left- and right-brained" so designers can avoid development and developers can avoid designing are just plain instrinsically flawed beneath the surface despite appearing to be quite superficially flawless.

[Haansplosion13]

Hi Guys,

 

Completely understand the frustration from both sides of the fence, its an uphill battle either way - and there is definitely no holy middle ground.

 

I havent followed muse religiously, simply picked it up and dropped it when it was in beta and am only now getting around to experimenting in it.

 

As someone who definitely comes from the design side of things, the sole reason I got into coding in actionscript was the greensock platform and the possibilities, complexity, and most importantly ease of use that it gave over the traditional animation method. When looking at creating websites/minisites, Muse (moreso when it matures to a full product offering) would be a brilliant tool to easily create sites for those with design in mind.. But to add the greensock capabilities to it would increase the usefulness of it tenfold, and would create a powerful tool with great possibilities.

 

To get around the id issue you can manually code and insert the HTML, as I have done in the attached example (Unfortunately a terrible workaround I've had to use with javascript previously).

 

Any help you could give me to get this working would be fantastic, as it potentially could be a really great tool to introduce an amazing platform (Greensock) to those without the skill to code, and also provide a much easier and more familiar interface for those with design in mind.

 

Cheers,

Greensock_Test_V2.muse.zip

[GreenSock]

Ah, okay. Yeah that is really funky. But now that we've got an id and a way to access it, TweenLite/Max can do their magic. See attached.

Greensock_Test_V3.muse.zip

[Haansplosion13]

Again, your help and support is invaluable. Bring on the magic!

 

You guys really are the best!

 

Cheers, and thanks again.

[[email protected]]

Adobe Muse is Jekyll. It is an incredibly powerful tool. If you are a Ruby on Rails developer, any modular code can be used. If you put any dependencies in the page header (Asset Pipeline), you can config your code on each of the pages.

 

Master Pages can bundle different configs. Mucows are XML (similar to SVGs) you can create embedded widgets by "including" bundles in the CDATA headers.

 

Iframes, APIs can be set along side OAMs that are (Java bundles). Forms and validation can webhook to data binding.

 

If you publish to Business Catalyst (Github), you have the option to save minified UI/UX to JSON. You can feed into React / JSX workflows, with any data binding hooks "Angular, Backbone, Ember".

 

You can also push to container based AEM (instant mobile provisioning and deployment) and Docker workflows. 

 

If you have done any work with Polymer, the design patterns of componentization of bundled code are the same. The issues of global "bleed" and file size are minimized. It is the preferred way to work. 

 

Really developer friendly. If you look at the structure of how it works.

[gflammia]

Hello,

 

This is interesting, How would one go about creating MuCows widgets from individual components created via React or VueJS?

 

Is it possible to combine such individual components into a whole page in Muse, and edit the style visually of the whole page?

​

For example, in VueJS, we typically program in Babel and compile a bundle.js file via webpack that includes the necessary javascript code required by the Vue application and all the components for the page.

 

I can see how we can add a "Required Runtime" Mucows widget that includes JS and CSS code common to all Vue components  in the <head> and near the </body> tag, and that would take care of the JS runtime required by all components (the vue.js, the css common to all components).

 

But what about turning an individual Vue (or React, or Angular) component library into a series of MuCow XML files, leaving the design of a web page to Muse?

 

For example, before compilation by Webpack, each Vue component has three sections:

 

<template> has valid HTML, with mustache syntax for rendering computed data. Should a variation of that <template> body be included in the <PageItemHTML> tag of a MuCows file? or simply the "instance" code, which would look like this:

 

<my-component directives data-binding-attributes></my-component>

 

?

 

 

<script> is written in Babel, and usually webpack adds it into a bundle.js with all the other components of the app, when I compile the entire web page as a whole.

 

<style> is the css style for the items in my component.

 

 

I wonder, perhaps there is a way for webpack to compile one Vue component at the time (not the page as a whole) and fill in the appropriate slots in a MuCows XML file? 

 

Would the MuCows XML file look something like this?

<PageItemHTML>
  <![CDATA[ 
   <my-component directives binding-attributes></my-component>
]>
</PageItemHTML>
<BodyEndHTML>
<![CDATA[
  <script src="dist/my-component-bundle.js"></script>
]>
​</BodyEndHTML>

But then what about the visual editing and manipulation of the style <template> and <style> sections? I would like to let users edit as much visual elements of my <template> in Muse, is that possible?

<template>

  <div class="my-component">

  <h2>{{ message }}</h2>

  <ul>

     <li v-for="item in mylist"> {{ item }} </li> 

  </ul>

  </div> 

</template>


<script>

   module.export = {

     data: function() {

        return { message: "This is My List" };

      }

     methods: { /* event handlers... */ },

     computed: { mylist: function() { return [ "one" , "two" , "three" ] },

    }

</script>



<style>

   .my-component h2 {

    /* css rules */

   }

    .my-component ul {

​    }

    ​.my-component li {

​    }
</style>

[Carl]

HI gflammia,

 

Welcome to the GreenSock forums. Our support here is focused on the GreenSock Animation Platform (GSAP).

Not sure myself or any of the mods know anything about MuCows so you might find better help elsewhere.

 

If you need any help learning GSAP just let us know. We're happy to help.