SVG with PNG fallback, Responsive, EDGE Reflow & Animate integration

I mentioned this on the Muse Facebook, and they said I should post it here... I think Muse is an awesome program. But I really, really would love to see these features. Any of them good enough to make it to the sketching table?
1. SVG with PNG fallback support (for Retina displays)
The problem with Hi-Res displays on Tablets, phones and laptops is that the web is becoming awfully ugly. You need to zoom to fit webpages, and when they fit, the JPG's and PNG's become blurry. Since displays are increasing resolution year after year and pixel density is becoming a real issue, on phones (like the HTC One) or laptops (Macbook Retina or Chromebook Pixel).
Wouldn't it be great if we could use vector SVG for new devices for sharp a crisply logo's on every screen. And with that instantly use an automatic PNG-fallback option for older browsers. This would signifantly upgrade any website made with Adobe Muse and the Web in general if you ask me! I've done some research and I found this website very useful considering this issue: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
2. Responsiveness (Adobe EDGE reflow integration)
Adobe Reflow is amazingly promising. What if (instead of making different websites for every device) you can export a website to Adobe Reflow to make the design instantly responsive.
3. Beter Adobe EDGE Animate integration
EDGE Animate is a great program, especially with the codes and actions which you cna integrate. The only problem is sometimes I want an animation to start playing when I'm at that part of the page, not after when it's done loading. Overall the integration is so-so, and it's doable to add an animation to Muse, but these tweaks could upgrade it from great, so turbo-awesome!
Which brings me to my next point:
4. Dynamic Content Loading (Load on view)
Isn't Muse a great tool for making one-pages?! I love it for that, and I do love one-pages. The problem is that it can take a while to load when it's becoming more complex. Is there a possibility to add a feature when thing are loaded when you scroll? Which is fairly often used on blogs and stuff.
5. Horizontal Parralax Scrolling
Since the latest update I've been pretty hooked on the functions of parralax scrolling and what it could do in a usefull way. The problem is that it doensn't work for horizontal scrolling. The objects can move horizontal (when scrolling vertical). But there's no option to add an effect when scrolling in a horizontal direction.
What do you think? Any of these interesting enough to develop?

I would love all of the features in this post. But you must post it in the Idea section of the forum so people can vote for your ideas.

Similar Messages

Edge Reflow + Animate workflow.

I've already added my vote for that in the "ideas" section but I wanted to post a website that I'm working on that integrates the workflow... meaning I started the layout in Edge Reflow and then added Edge Animate assets.
Utimately I have to finish the whole thing in raw code only because the 2 programs are really not compatible in any way that makes sense. All I can take from that is there must be some other program in the works that will take these assets and make them work together -- however my desire is to simply begin a design in Edge Reflow and finish the work in Edge Animate.
Anyway, here's the website (low on content at the moment) that shows the workflow I'm after as a proof of concept.
If you dig into the CSS you will see that I customized the code to allow for a easier hand-editing approach... but obviously this is somewhat limited in that Edge Animate outputs javascript styling instead. I could deal with one or the other, but having to manage both is really a pain in the butt... so I would prefer it all in javascript for compatibility with Edge Animate.

Thanks for the feedback! I think your general view is right. Even if you were only using just one of the products, you would still need to do some final hand coding at the end to get the site to be the way you want. We definitely want to make it easier to use the two products together and smooth the whole overall workflow. The goal isn't to ever elminate the need to hand code, but make it really easy to move the relevant parts of code to where you want them to go. We're just starting on this path so your experience and comments on workflow are really valuable.

Integrated with Edge Reflow

Like import Layout from Muse to Reflow maybe ? So we don't need to do double job to create the same layout
*just a Muse-newbie experience*

yes that true, changing it later will be problematic. But if we have the break points already figured out and design finalized we just then have to open it in Muse and then add the features that muse has like scrolling effects and such. life would have been really simpler if that media query handle feature from EdgeReflow is placed in Muse. On the other hand i don't mind if reflow has the scroll effects and all the cool things Muse has. Its possible to do a really nice responsive website with reflow and edge animate and then polish your site with dreamweaver and publish it to BC. Just that i like the features of Muse and the ease of designing but it lacks the true responsiveness we need, i know you can give full width and try make it look like responsive and then you have 2 more websites to finish, the mobile and tablet versions of the website. So its a lot of work, it doesn't really make it easy to keep up with this evolving web design industry. So i think i will stick with edge reflow, dreamweaver and edge animate till Muse becomes responsive fully.

What is the difference between Edge Animate CC, Edge Code CC (Preview), and Edge Reflow CC (Preview)?

Also, what does the (Preview) mean? Does it mean that a newer version will become available soon?

Hi All,
Preview releases means that our team acknowledges the limited functionality of the application. Our goal is to provide community members an opportunity to try out the application and we encourage everyone to provide us with feedback.
Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease.
Edge Animate FAQ
Edge Reflow allows responsive designs faster and create high-fidelity prototypes through media query breakpoints, precise CSS layouts, grouping and more. Edge Reflow now connects directly to Photoshop CC, allowing you to go from static design to responsive comp in just one-click.
Edge Reflow FAQ
Edge Code is a lightweight code editor for web developers and designers working with HTML, CSS, and JavaScript. Edge Code is built to work with browsers, speeding up development time by displaying changes to the code directly on the screen.
HTML, JavaScript, CSS editor | Download free Adobe Edge Code CC (Preview) trial
Regards,
Devendra

Muse can't be 100% Responsive due to the Edge Reflow ?

Hi ,
I wanted Muse to be responsive from the first time i used it. But then i came to know about Edge Reflow and how it is used to create responsive experience and all that......
I was wondering with so many updates and changes to Muse and so so so so many requests from the users of Muse , The Muse hasn't been 100% responsive. Is it just me or is it due to the
fact that Adobe Edge Reflow also happen to be in the Adobe family and due to Reflow......Muse cannot be responsive willingly by the Team. I mean there must be different Teams for Reflow and Muse and both of them couldn't get along and all that. But come on........Everyone knows Muse is just so powerful and Easy to use and it would be great if could also create responsive experience which currently right now Reflow has been assigned to do.
If Muse is not being developed to be Responsive just due to Reflow , Then i request that , You can just end Reflow and its project. Just add all of those features in Muse. The Whole Adobe Users World wants this to happen. The Designers want this to happen. No one would care if Reflow is gone and Muse takes its responsiveness.
Everyone wants a powerful Muse.
Thank you,
By AdobeKAS

Hi,
Download and run the stand-alone battery test utility found on the link below.
http://h20239.www2.hp.com/techcenter/battery/battery_ts.htm
Post back with the results.
Regards,
DP-K
****Click the White thumb to say thanks****
****Please mark Accept As Solution if it solves your problem****
****I don't work for HP****
Microsoft MVP - Windows Experience

Use SVGAnimator to display a SVG with xlink PNG image

I tried the M2GDemo and it works without this image part
SVGAnimator animator =
SVGAnimator.createAnimator( image );
// add our custom event listener
animator.setSVGEventListener(
new CustomEventListener( image, animator ) );
// get the Canvas for this player: requires a cast
Canvas canvas = (Canvas) animator.getTargetComponent();
I modify the requestResource a bit to get Image from root1.
public void requestResource(ScalableImage inImage, String inURI)
     int pos = inURI.indexOf(":");
     if (pos >0){
          inURI = inURI.substring(pos);
     inURI = "file:///root1/"+inURI;
try
Connector.openInputStream(inURI);
catch ( IOException ioe )
ioe.printStackTrace();
<image x='90.0' y='69.46001' width='222.7' height='152.25' xlink:href='myImage.png'/>
Now I stuck with the error below.
Using Pisces Renderer (native version)
loadStarting : true
loadComplete : true
loadingFailed: false
loadStarting : true
loadComplete : true
loadingFailed: falsejava.lang.ArrayIndexOutOfBoundsException
     at com.sun.perseus.model.Text.applyXMLSpaceDefault(+86)
     at com.sun.perseus.model.Text.applyXMLSpace(+37)
     at com.sun.perseus.model.Text.layoutText(+70)
     at com.sun.perseus.model.Text.checkLayout(+13)
     at com.sun.perseus.model.Text.paint(+12)
     at com.sun.perseus.model.ModelNode.paint(+9)
     at com.sun.perseus.model.StructureNode.paint(+16)
     at com.sun.perseus.model.ModelNode.paint(+9)
     at com.sun.perseus.model.StructureNode.paint(+16)
     at com.sun.perseus.model.ModelNode.paint(+9)
     at com.sun.perseus.model.DocumentNode.paint(+16)
     at com.sun.perseus.model.SimpleCanvasManager.fullPaint(+108)
     at com.sun.perseus.model.SimpleCanvasManager.updateCanvas(+18)
     at com.sun.perseus.midp.SVGCanvas$1.run(+87)
     at com.sun.perseus.util.RunnableQueue.run(+271)
RunnableQueue terminatingUncaught exception java/lang/ArrayIndexOutOfBoundsException.
Bascially all I need is a viewer to display SVG with xlink to PNG image without the use or tinyline. If I want to get the PNG image from http, what should I do?
Any response will be greatly appreciated.

> This technique is really just using a BEE, there is
> documentation on the BEE concept in the online help
> and Brian McKellar has a weblog on the subject as
> well.
OK, I think I get the idea. Will check the stuff. Thanks.
> Notice the strange D at the end of the line. This
> isn't in the original posting. Perhaps this is just
> bad cut and paste.
Just bad copy paste. Yes.
> You say that this isn't working for you - but you
> don't describe the results. Is there an error? Does
> it render anything in the button at all? Does the
> raw HTML get rendered?
I just saw coding in the button.
> You want to make sure that the
> text doesn't get encoded - which would cause the HTML
> source to display instead. On the htmlb:button you
> will want to set the attribute encode = FALSE.
OK, that was right on spot. This shows me the Icon! Strike!
> Also I am not sure that you can also pass in text
> with the image like that. You might have to create a
> full BEE and add the image and a textView separately
> into the BEE. Then render the entire BEE to a string.
I'll check the documentation on BEE and give it a try.
Thanks for your answer.
Thats a starting point for me.
Alf

Responsive edge animate oam in fluid grid

Hi, maybe my question is totally rookie one, but I cannot get the responsive Edge Animate package to do resize smoothly in the fuid grid of Dreamweaver.
Either it is not wide enough or the height does not scale, which results in the footer to be far down.
It probably has to do with the fixed size of the object tag when I insert the oam.
<object id="EdgeID" type="text/html" width="960" height="510" ....
Changing sizes to 100% works fine for width only, the height behaves strange, showing only a small part of the animation in every view.
Is this an issue of oam packages or just my poor knowledge of CSS ?
Attached you find the screenshots:
Thanks a lot for your help!
B.

I came across this problem when recording Adobe Dreamweaver CC: Learn by Video for Adobe Press. The way I handled it was by adding the following block of JavaScript just before the closing </body> tag on the page that contains the Edge Animate object:
<script>
function fixHeight() {
var anim = document.getElementById('EdgeID'),
w = anim.offsetWidth;
anim.style.height = (w * .562) + 'px';
fixHeight();
window.addEventListener('resize', fixHeight, false);
</script>
This gets the width of the animation (the default ID is EdgeID). It then adjusts the height by multiplying the width by 0.562. You will need to fix the scaling ratio in the following line to suit the proportions of your animation:
anim.style.height = (w * .562) + 'px';
I can't remember all the details because it's more than a year ago that I did this. As I recall, Edge Animate generates the correct height for the animation, but it doesn't adjust the height of the <object> element used to display it.

Will Adobe make a product that is Adobe Muse combined with Adobe Edge Reflow?

I love how Adobe Muse works, its simple and very easy to learn. The only issue I have with the program is, the sites that I produce from Muse is not a fully responsive site. I was wondering if Adobe will allow us to set-up our own breakpoints in the future like Adobe Edge Reflow.

They work very differently, what i would like (and this section of the forum isn't meant for feature requests)
is when you create a new muse site it asks what kind of site you want:
Responsive
static
blog
etc.... that would be nice.
or just make it responsive.
But i doubt this will happen soon

Coup de gueule Edge Reflow CC et Edge Animate CC sur le forum international

bonjour,
je me permets de venir vous demander votre avis en francais, face à un sujet que j'ai ouvert sur le forum international : http://forums.adobe.com/thread/1321123
Pour ceux qui ne parlent pas anglais, je ne comprends pas pourquoi Adobe développe un logiciel prometteur, pour faire des sites responsives mais ne permet pas d'obtenir un code HTML final modifiable hors de Edge (dans dreamweaver par exemple) afin de pouvoir facilement y ajouter une couche dynamique en PHP et ainsi communiquer avec Mysql. Idem avec Edge Animate : la seule "parade" serait d'integrer un fichier json ou de faire appel à un script jQuery !?
Aujourd'hui, la plupart des concepteurs de sites web professionels doivent pouvoir offrir à leurs clients la possibilité d'administrer eux meme leur site web via un module d'admin dynamique et Edge n'est clairement pas conçu pour cela car le code généré n'est pas vraiment un code exploitable, que l'on pourrait ouvrir sous dreamweaver, modifier, enrichir de php par exemple...
lisez cet article très interessant : http://www.doublecheese.net/2013-04-28-test-adobe-edge-reflow.php
Alors, finalement, quel est l'intéret ?

Bonsoir.
Je ne comprends pas bien le mélange entre Animate et Reflow, qui font tous deux des choses fort différentes, et sont aussi à des stades de développement différents.
L'article que vous citez date du mois d'avril, quelques versions plus tard, Reflow continue d'avancer, de proposer des solutions aux questions soulevées par les utilisateurs.
Pour ce qui est de l'administration php/my sql, elle est tout à fait possible vu que le code est généré de façon dynamique MAIS cela nécessite des connaissances importantes en terme de développement, que seuls les utilisateurs avancés maîtrisent.
Animate se présente d'abord comme un outil d'animation pour les designers, avec des fonctions de développement pour l'interactivité (simplifiées grâce aux extraits). L'ensemble du code est du js, architecturé avec des fichiers json, donc complètement ouverts, lisibles et éditables.
Reflow génère du code pour permettre au designer de communiquer avec son développeur. Vous le savez sans doute, l'état actuel des navigateurs fait qu'un nombre très important de possibilités sont offertes aux développeurs, mais que pour toucher le plus d'utilisateurs, il faut faire des choix techniques. Reflow vous les propose dans le sens qualitatif : d'abord proposer le meilleur, le plus poussé, puis au développeur d'intégrer l'ensemble dans les pages.
Ces deux outils sont des outils de design avant d'être des outils de développement.

Using Edge Reflow with Joomla

Is edge reflow going to have support for CMS platforms like Joomla? It would be nice to have a built in FTP or something you could put a site in, it pulls the external CSS files, and loads the webpage right in the preview window. Then you could add divs and other elements to the design and use reflow to make it responsive right in the preview window.

There's no direct workflow with any CMS or content managment system. You can design you pages in Reflow, extract the CSS for those designs and use your favorite code editor to put that css in the appropiate area and selectors for your CMS system. We definitely want to make the workflow from Design to production smoother so any feedback you can give on the way you work is greatly appreciated.

Edge Reflow and responsive Bootstrap

Is it possible to use Adobe Edge Reflow with an existing front-end framework like Bootstrap?
It would be nice to be able to work and modify Bootstrap elements (like buttons and forms) in Reflow. Do the responsive layouts. And then export CSS that could be used with the Responsive Bootstrap Framework.

Please do! I think the possibility to work with the leading standard frameworks (ie Bootstrap) is a huge success factor for this editor. My first impression is that it seems like a nice program. Designing in Photoshop is slow when it comes to responsive layout. And the fact that the PS renders fonts so different from the webkit engine and lacks CSS effects meens that designers have to look for something else. But if this prg is going to be a "hit" it have to output decent HTML/CSS.

Creating Responsive Layouts in Reflow | Adobe Edge Reflow | Adobe TV

The true power of Reflow is not only designing and creating layouts using CSS, but the ability to have those layouts respond to different screen sizes. From desktop to tablet to mobile. Evangelist Paul Trani takes you through how to take an initial layout, add breakpoints and modify that layout to your liking for all the various screen sizes you'd like to target. Download Adobe Edge Reflow Preview from the Creative Cloud today and give us your feedback through the Adobe Forums or on Twitter: @Reflow @PaulTrani
http://adobe.ly/Y7cXmM

This is really nice, but how does it fit into the workflow in creating and editing a web site? I'd like to see an example of what you do with it once you've created a beautiful re-flowing page.

Will Edge Reflow be included with Photography subscription?

I currently subscribed to Creative Cloud for photographers. I have been using Photoshop for some web design and started using Edge Reflow. However my concern is that once Edge Reflow is released it will not be available for me to use. I have no intention of upgrading my subscription and I don't want to waste time with a program I won't be able to use long term.
What plans will include the final version of Edge Reflow?

Thanks for all the great feedback!
You can delete breakpoint today. You can click the breakpoint pinhead so it's highlighted in blue and hit the delete key or push the "-" (normally the "+" when no breakpoint is selected).
Also, if you long-click (click and hold) the "+" button to get the breakpoint panel, when you mouse over a region you can click the "x" to delete it:
If there is another feature with delete or I don't understand the request please let me know. We use this and the other suggestions to help prioritize what we work on.
Thanks for the feedback and thanks for using Reflow!
Chris

Are the applications like adobe scout, edge animate, edge reflow, edge code, edge inspect fre

Hello,
Are the applications like adobe scout, edge animate, edge reflow, edge code, edge inspect free for the free membership of creative cloud.
Would those remain as free for the creative cloud free membership member or would that be charged later on.
Thanks

Swajeet these applications are available as a 30 day trial if you are not a paid subscriber to the Creative Cloud.

How can i do horizantal parallax with jInvertScroll on adobe edge animate

Hello there, i am not familiar with codes so please anyone can explain me to how to do horizantal parallax scrolling with JInvertScroll on adobe edge. I can show some examples of horizantal scrolling. Here it is:
http://www.cabletv.com/the-walking-dead
http://www.pleasecomejoin.us/#wedding

Thanks for the files. Unfortunately I can't get it to preview correctly. This is what I am seeing.

SVG with PNG fallback, Responsive, EDGE Reflow & Animate integration

Similar Messages

Maybe you are looking for