I'm having trouble making my project fit all screens.
This is my project link: [URL]
I've made this project 7000px wide - scrollable horizontal - with a fixed object (the shopping cart) to make it feel like you are pushing the cart along the street. I then set height to about 1200 px, to prevent the bottom of the screen to go white.
I want this project to look good on mobile, iPad, laptop and PC/Mac - both orientations.
I thought I was in the clear with theese settings, but checking it on a small screen (laptop), the bottom of the stage fell out of the screen. And we can't have that...
I tried setting the height to 100%, tried having a smaller height (800px) and setting the background color to green, tried hiding and showing the overflow, but I can't seem to hit the perfect settings for this to work.
My inspiration comes from this project:[URL] Now, this works - as far as I can see - on all screens, both orientations.
1. crolling like where you have buttons for example or press on a navigation bar tab, then it goes to that specific pace of the page, for a one page website, for example some sites you press on contacts and gose down to the bottom of the page where the contacts place is located, not opening a new link.
2.Second, navigation bar, where it fallows the scroll as it gose down, like for example when it is html the object is fixed to the top, and when you scroll down it will fallow it it,
3.I need Parallex scrolling where you can have the timeline or animations run while you scroll in the meantime and have animation running all the time, for example the infographic site where the bees are fluying but still have seperate animations while you scroll
4.I would also like to ask if like looping each animations sperately, not looping the whole timeline, can it be possible to loop an animation while you have all the interactivity witht he site like looping seperately all the time, without interfeering with all the other animation
5.I also are wondering if you can create multiple pages on one animate project, like multiple pages with html
I just moved on to edge animate from html, and html was also beirf learn for me and mostly i was doing design work, and i thought getting out of graphic river and moving on the theme forest.
I want also all the five things to work on one aimate project.
Is there a way for me to know what all features of HTML5 does my Edge project actually use.
I know there are a lot of sites which tests what all HTML5 features are supported by a browser, but I want to know which all features are being used by a edge project.
a - I use console.log("message"), and developer tools window to sort of double check stuff. is there any other way t to see the values of different parameters in my code when it is running?
b - The only place to check errors, is "ctrl+E" window (main code window), correct? it usually highlights the syntax error on bottom.
c - Is there anyway to see the DOM STRUCTURE of the project? it would be really useful, if we had a button on Code panel that could quickly reveal the DOM structure and elements ID, names, for faster access. Currently i use naming methods to sort of figure things out looking at the symbol / elements panel.
d - How do you make sense of the error, "Java event Handler error" which refers to the .js file and gives no hints to any code line.
When I try and open an Edge Animate 2.0 project its is stable until I click on anything on the stage and then the app crashes ( edge has found an error please quit the application)
For example I have some complicated animation in 500 - 300 px size.Are there ways to enlarge the entire animation up to 1000 - 600 px or some another size?Using presets for responsive layout leads to unexpected results, may be it solves only simple cases when objects have similar characteristics and so.I had made a complex animation and then found out the size might be 2 times bigger - doet it mean I'd start from the beginning?
I have generated a test example of edge animate project in html and in the code i only have found this code <div id="Stage" class="EDGE-4553 33329" > </div> in the html file. My question is if all contents of my project generated in javascript will be indexed by Google. I think this is important if I am going to replace flash tool cause this is great problem of flash for web projects.
I'm trying to work on a project I created a few months ago in Edge. However, when I try to open it in Edge Animate CC, it just displays a blank screen (See image).
The timeline, the canvas, the properties, nothing seems to be populated. If I drag the time line back to 0:00, an alert pops up saying "An error occured. Please save your work and restart Edge Animate." The exported HTML file still seems to work fine though. I've tried uninstalling and reinstalling Edge, but that hasn't seemed to work.
EDIT: This seems to be an intermittant problem. Sometimes, the file displays correctly, sometimes it doesn't. If I close the program and open it again, the issue re-occurs.
removing a preloader from the start of a project? I tried going back into properties>preloader and deleting it from the preloader stage, but when I publish it is still there.
and it works perfectly in a web browser with click and drag functionality but I am stuck with adding touch /drag functionality via an IPAD, especially when inserted into a DPS InDesign file.
My edge animate project don´t work anymore. When i opened the index file in the browser, the browser was empty! I have stay all me files (actions, preloads and more).I have previewed before that i could not edit my project in edge animate .
so when im scrolline to the right or left side , the timeline follows!
id tried some different way ,but i dont think its good.
1 way was. on my stage in scroll:
var animationWidth = 5000; var stageWidth = sym.$("Stage").width(); var scrollPos = sym.$("Stage").scrollLeft(); var duration = sym.getDuration(); var percent = scrollPos / (animationWidth-stageWidth); var time = duration * percent; // Update timeline sym.stop(time);
it works but is giving me double scroolbar and the second scrollbar is scrolling out of the "stage"!
2- way i tried was:
// insert code for scroll event here var myCalc = e.currentTarget.scrollLeft/(e.currentTarget.scrollWidth-e.currentTarg et.clientWidth); var pos = Math.round( myCalc * sym.getDuration() ); sym.stop(pos);
I am a graphic designer and I work on w7 64.I find the latest version of Edge Animate.I saw several tutorials, amongst those showing how to make a loop on an animation. I proceed as explained in the preview on my browser (Chrome), the animation runs, but no loops.In fact, I tried other interactions and other triggers : nothing of these works there!
I've found this awesome Tate's site today about the "lost art":
http[url].....
You can navigate it with pan&zoom, like the Moma Museum in its own app.Is it possibile to make the pan&zoom navigation with Adobe Edge and/or with Adobe Edge and external JS libraries?
Is it possible for text or an object to overlay another object that is interactive but not inturupt the interactivity of the object below? As if the the text interactivity was trasparent.
Drag & Drop with validation.What I need to do and would like to learn is:I have 4 buttons that I can drag and a box that I drag the right choice. If the option is correct stays, it is if it was incorrect is returned to its place of origin.
I have a button on the main stage with a hit event inside of it. This hit area calls frame lables on other symbols (these "other symbols" are also on the main stage, not dynamic) . How do I make the click event of the hit area null if one of these symbols is/are visible? I added another button to set the visibility to false but then I also need the click event to reset itself to it's original state
I'm doing a full single page website in Edge, and don't know how to build a contact form with name, email and message with a send button and erace button, just like this.
I have added an animation (snow flakes falling down) in front of the whole home page of a full-Edge site. The problem is now that the snowShower symbol captures the click events.
How could I make it "transparent" to clicks, that is transmitting them to the buttons underneath?
Is there a way to make a menu in Edge Animate so that when you are on a certain page, that page is highlighted on the menu? I want to make it a server side include <!--#include virtual="/menu/included.html" -->
I'm looking into Adobe Edge as a potential new tool for creating web-banners for advertising. I'm more of a designer than a coder, but i have some experience coding in Action Script (flash).
The challenge for me is generating a project that complies with the strict advertising standards found here: [URL]
I have listed the points that worry me the most here:
The HTML-file should just be one file with all CSS required for the ad inline in the HTML. Animation prior to a user interaction must be written using CSS3 Transitions, Transforms and/or Animation [URL]
The first example is just the raw export of a project with a few simple (and quite ugly) animations. I'm assuming that this is incompatible with the demands listed above. [URL]
In the next example I've created a project where I've put a "stop" action on the first frame and an "onClick" > "sym.play("rotate");" action on the image. "rotate" is a refferance to a frame label later in the same timeline (Click the image to start the (even more ugly) animation created in the Edge timeline). Then i wrote some CSS-animations directly in the auto-generated HTML-file. Will this be enough to get me around the requirement of "no javascript animations prior to user interaction"? [URL]
The thing is that i would prefer a workflow where i can do as much as possible within Edge Animate, but if the second example above is in compliance with the requirements, then that's not so bad. Guess i can learn some CSS.
Some thoughts/questions: Is it possible that Edge outputs some CSS animations embedded in .js files, and would the people/systems where the advertising is hosted recognise the animations as one type or the other? If so: Can you restrict Edge Animate to use only css animations or is there a way to know what is "safe" (CSS) to use before user interaction and what is not (JavaScript)?
When the user clicks on two button on the stage I need an eleiment to disapear.
for example:-
If one of the buttons is pressed... nothing should happen.
Then when the other button is pressed then an element disapears.
(The user needs to be able to press the buttons in any order)
I have been usine verables to try and work this out. How I understand it is that I sould be able to store the verable on the stage and recall it.
This is where I have the problem. I have not pasted the stage code because it just does not work. But below is the code for one of the Symbol Button.I had set all the "Var" to "0" at the stage but can not change all recall them.
sym.getSymbol("button1").play();
var but1 = 1
}; if (but1 = 1 && but2 = 1){ sym.$("element1").hide();
