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.

Similar Messages

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.

What Edge Reflow should keep in consideration

I've been following Edge Reflow for some time now, have used it to showcase developers my mockups, and have even used it in some rather large projects. Although currently mostly unusable to me for production in the current Preview, there is a lot you can do with it. The demand of responsive layout is no longer an option in my opinion, its what everyone expects. I've looked everywhere to try to find something similar, and recently came across a few sites that pull off what Edge is trying to do. So for the developers currently working on this or other Designers that need a good reference, here are some sites that I hope Adobe can bring into the Edge-Reflow-Photoshop workflow.
http://www.webflow.com/
http://froont.com/
https://www.easel.io/

My point with the post was not so much a single or multiple features within the other products, but rather the ease of use and intuitive design. The current design approach in Reflow at first seems VERY simply, until you begin actually moving your responsive elements around and realize its completely rearranging the DOM (of course, after reading multiple threads you realize there is a solution to it). The current Preview generated css is buggy and produces countless lines of **.123i482gg86dedsdfweflkj** infinite gibberish, not presenting me with a recognizable ID or class that I can later manually edit. The APPROACH of simplicity, the clean css, the ease of use, is the "feature" I'm pointing out to devs and designers alike in the above referenced. Wether the tools are browser apps, desktop software, web apps or whatever other list the can pertain too is not so much the point. I think Adobe has definitely taken the right approach with Reflow and looking to integrate with its current services. These tools cater to the designers. Most web devs already know how to configure a responsive web project and what code they need to make it happen, but in my experience (not putting anyone down here) lack a sense of composition and aesthetic principles. I'm not trying to to say that all web devs are colorblind angry geeks on green vga terminals that demand code knowledge for validation of a designers skills. My point is simply that intuitive tools which Reflow is intending and the afformentioned help a designer better navigate and explore aesthetic boundaries that other UI tools cannot provide, and therefor bring the reference of well executed projects currently being used and available as a landmark to where I believe Adobe should compare itself to.

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.

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

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.

Edge Reflow to BC workflow... (or sequence)

Hi all,
I have asked this question before, but i feel its important to re ask in a different way.
Has anybody ever did a BC site designed in Edge Reflow?
They say it is possible. Some folks did it for Wordpress.
If so can you help me doing it, or share the workflow or if you wanna do it, maybe we can do it together.
thanks in advance.
yd.

Anyone?

How do you use edge web font in Edge Reflow?

By default, I don't have a lot of fonts. It's just viewing a few of them.
How can you get the web font for Edge Reflow? Can you use font from fontbook?
Is there a way to download Edge Web Font?

Above: using Brandon Grotesque (web use font) does not display the correct font.
I'm using Typekit and have an internet connection. If I switch to a "desktop use" font, it shows up, so I'm guessing the "web use" only fonts won't show in Reflow. A little frustrating when you're trying to get an accurate preview/determine best font styling because of the back-and-forth workflow.
Above: using Source Sans Pro (desktop use font) does display the correct font.

How do I uninstall Edge Reflow CC?

I recently downloaded the app because I was curious about using it. Now I'm having issues on my print files (end of file) and the stability of Photoshop CC when I do things like adding layer masks and vector masks. When I look at the dump for output it's indicating that I'm using an unsupported layer type due to Reflow.
How can I uninstall Edge Reflow CC? I have an uninstaller for Edge Animate CC, but not one for Edge Reflow CC.
Applications > Utilities > Adobe Installers
Mac OS X 10.8.5
Thanks for any (helpful) responses in advance.

I said dump, I meant log. I didn't get a screenshot of the message. It said something to the effect of Generator had and error and close Photoshop. When I tried to save my files I received unexpected end of file encountered upon reopening the files upon restarting Photoshop. The first time I received a message was on creation of a layer mask from a vector path. The second time was in a different file, I was converting the vector path to a vector mask. Luckily I saved the original file. It's just a jpg. I was eventually able to edit the file (3 attempts).
[1;31mUnknown layer type, something is wrong with the document
[0mHandling an unknown change by deleting all generated files and resetting the state
Getting document info with these params: {"documentId":78,"flags":{"compInfo":true,"imageInfo":true,"layerInfo":true,"expandSmartO bjects":false,"getTextStyles":true,"selectedLayers":false,"getCompSettings":true}}
Photoshop message: {"id":16,"body":{"version":"1.0.0","timeStamp":1383789844.116,"id":78,"file":"/Volumes/cl ients/client/Images/industrial/hpu/G-18-T.jpg","bounds":{"top":0,"left":0,"bottom":1015,"r ight":2035},"selection":[0],"resolution":300,"globalLight":{"angle":120,"altitude":30},"ge neratorSettings":false,"layers":[{"id":4,"index":0,"type":"layer","name":"Layer 0","bounds":{"top":58,"left":54,"bottom":942,"right":1988},"visible":true,"clipped":false ,"mask":{"bounds":{"top":58,"left":54,"bottom":942,"right":1988}},"pixels":true,"generator Settings":false}]}}
Received complete document: {
    "version": "1.0.0",
    "timeStamp": 1383789844.116,
    "id": 78,
    "file": "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg",
Also
Resetting state for document 78
Document path changed from "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg" to "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg"
Scheduling change to layer 4 of 78
Creating layer context for layer 4
Photoshop message: {"id":16,"body":"[ActionDescriptor]"}
[1;31mUncaught exception on Wed Nov 06 2013 21:04:04 GMT-0500 (EST):
Error trace: TypeError: Cannot read property 'name' of undefined
    at startLayerUpdate (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:1001:70)
    at /Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:980:21
    at runPendingUpdates (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:956:38)
    at null._onTimeout (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:982:17)
    at Timer.listOnTimeout [as ontimeout] (timers.js:110:15)

Fireworks to Edge Reflow?

I know Adobe don't like Fireworks but I'm hoping that they will have a workflow from FW6 to Edge Reflow. Is there any info on this?
Photoshop is great for image editing but it sucks real hard for web and mobile design, I just can't use it for that sort of work. I still find it mid-boggling how many people have FW installed and yet use PS for all their web and mobile design work. Unbelievable.

The output is bad, but it doesn't have to be, so I'm wondering which steps in building the FW layout in a particular way are most onerous. If you had to put all the elements you want to appear in a div together in their own sublayer, would that be too bad? What about naming elements in a particular way to specify how they get output? What if you had to use a special div auto shape instead of a rectangle to draw backgrounds and things?
I tried this process with great excitement when FW became able to export CSS-based layouts but the results were terrible so I abandoned it and just went back to producing the layouts as they were required visually. Your ideas are on the right track in terms of setting up the FW page and getting good output (with a better engine). Personally, I don't like to use lots of layers and never use sub-layers (selecting objects on the canvas in FW is so easy), so the sub-layers approach is less appealing but I do like the idea of a DIV auto shape. It would have to act as a container and be able to 'hold' the elements inside it, including other DIVs and possibly tables. I think shapes and text (content) should be styled using FW styles which would be converted into CSS styles (does it already do this? I haven't checked).
I think to really test the integrity of this process would require some more thinking and scenario-based documentation, which I would gladly do if you were interested in doing something in this space. I love FW and use it every single day.
That would require rebuilding it from the ground up, but I also believe that a graphics app built on an HTML renderer is the future, since you get layout reflows and rich styling for free. Reflow is nowhere to having sufficient tools for even a very basic drawing app (not that that's what it's trying to be right now).
I totally agree re the graphics app on HTML renderer which is why I'm so interested in moving the design and layout process onto a real HTML layer right from the start. This includes interactivity as well eg. rollovers, content flips, sliders etc. etc. ER immediately made me think like this but as you say, it's miles away from it and I don't expect Adobe to go to that place.
John, if you're interested in pursuing any of these ideas, I would be delighted to provide input and research into any effort. I am a UI designer/strategist for a web-based CRM/CMS company.
Cheers
Paul

Edge Reflow CC showing as installed, yet it is not.

Hey Eveyone,
So I've been at this all day, yet things just seem to be getting worse. So far:
Tried to sync up Reflow CC with Photoshop CC with no luck. Re-started, re-downloaded, re installed and again, no syncing was possible. Searched for a plug-in people mentioned I could manuallly install, no luck finding. Chatted with support, and was told to call as I needed more of a "specialized techinal support". Called, spoke to nice man who was supposed to transfer me to a "specialist" who could further assist me, but after 40 mins of waiting on the phone, I hung up. Re-started, re-downloaded, re installed AGAIN, only this time Edge Reflow promped and error message when I tried opening it: "...Environment No Longer Supported...".
Went back to scowering the internet and forums in hopes to find the solution, but nothing I haven't tried was coming up, so I went ahead and deleted CC off of my computer using the the Adobe Creative Cloud Cleaner Tool and went ahead and re-downloaded, re-installed again, only to find that once I opened CC, it shows Edge Reflow as installed, yet It's not on my computer!
Although Edge Reflow isn't one of the main tools (yet) in my workflow, and I know It's still in beta, I'm already pretty frustrated with the whole process so far in terms of getting it to work. It looks like it has a lot of potential and really wanted to give a try...
Any suggestions or help with this, would be greatly appreciated.
Thanks.

Hi JMarsh,
Please follow the steps mentioned in the kb: http://helpx.adobe.com/creative-cloud/kb/aam-lists-removed-apps-date.html and try installing again.
Regards,
Romit Sinha

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.

How to add links and rollovers from an exported Edge Reflow HTML in Dreamweaver?

Hi,
Thanks to the very helpful community I have found the way to get my HTML file from Edge Reflow.
Upon opening the HTML file in Dreamweaver, the CSS, Java scripts are wonderfully linked. However, I am not experienced enought to manipulate the divs to get a rollover or add links to the layout.
Eg. Sticky Navigation bar on the top, how do you add rollovers and links?
All help is very much appreciated.
Thank you for your help in advance!

Hi Chris,
your plan for Reflow sounds good. Versioning is probably the most adaptable way to integrate it with the rest of the workflow.
What I think is still missing, on the simple side, is link creation and management inside Reflow.
Of course, considering you have just introduced multiple pages, this feature shouldn't be far...
About Dreamweaver, I've been a faithful user for years but now it's definitely old for some uses.
Just to say, if I open the responsive page I just created in Reflow with DWCC in Live View, something basic as background gradients are completely missing. Well, I'm not going to use it for this kind of work.
Do you know for what DW is still a great tool? Email Newsletters, since they still have to respect old standards that no one else uses anymore.
For all the rest I definitely prefer the editor/IDE way: SublimeText and other tools.
They're faster, more apt to the task and, similarly to the Adobe Edge line of products, made with the same technologies they help to work with.
In the future, who knows... Maybe, you should put in development a "Dreamweaver Edge" version and drop the old one, a little clunky even if recently revarnished ;-)

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.

Adobe Edge Reflow and Phonegap: To Build a Ipad and Smartphone app

Hi please I need some advise. We are about to start a project for a client and we've been thinking that we don't want to build the tablet app separately and also the phone app separately. So we decided to use Adobe edge reflow to start the design in the tablet form first and set breakpoints for the phone app so that a single app can be downloaded from the store for both phones and tablets. The intention of course is that we are building a responsive app. Is this workflow the right decision before we start pumping in time and human resources?
Thanks.
Regards

Not sure if this helps you. I'm going through the same problem. Even raised this issue here in the forum and nobody could help me. So I sought help forum PhoneGapBuild. Looks like PhoneGapBuild not recognize <audio> of html5, so need to use api audio PhoneGapBuild own. Here's a link to my post. Tutorial on how to make by Chris Griffith. I hope this helps you too.
http://community.phonegap.com/nitobi/topics/phonegap_build_audio_and_edge_animate_problem? utm_content=reply_link&utm_medium=email&utm_source=reply_notification&reply[id]=14089620#r eply_14089620

Edge Reflow + Animate workflow.

Similar Messages

Maybe you are looking for