Adobe Edge in action
See examples of projects made with Edge, and get a head-start by downloading and experimenting with sample files below. Check back often as more samples will be added.
Bubbleocity
How bubbly are you? Pop as many bubbles as you can in this game, which uses JavaScript for score keeping. Assets were created in Adobe Illustrator and imported into Edge as PNG files.
Mobile Browser Marketshare
This interactive infographic demonstrates symbols and web fonts with Edge. All of the text is live and selectable, while the graphs, text and animation use individual symbol timelines. Also, Clipping is used to create animated effects with the text and graphics. The graphics themselves were created with Adobe Illustrator and imported as PNG files.
Typography with Edge
Each example shows how to use rich typography to enhance your compositions. Edge supports popular font services like Google Web Fonts, FontSquirrel, TypeKit and more. You can also host your own font files. All text is editable, without using graphics.
Shady Text
Using text transform, a shadow is cast on text animated to move with the light source.
Type in Motion
Animate custom fonts in Adobe Edge as you would with any other element.
Adobe MAX Demo
Explore features that add depth and interaction to Edge compositions. Triggers and event handlers were added with the Actions Editor, as well as looping. You can also open the “edgeActions.js” file outside of Edge to view or modify the code used for interactivity.
Getting Jumpy
Rain’s innovative use of Edge’s easing presets creates a realistic interaction between object and shadow elements in this personality-filled animation. All assets are PNG files created in Photoshop.
Ninja Nincompoop
Unlike skilled ninjas who can decimate high volumes of fruit hurled at them, ours needs to retake classes at Ninja Academy. This simple game demonstrates interactivity features as well as employing custom JavaScript in the actions panel. Keyframes, triggers and labels are also used. Graphics were created in Adobe Illustrator and imported into Edge as PNG files.
Instructions:
- Download and extract a sample file (ZIP format).
- Open the “.edge” file with Edge to see how it was made.
- Open the HTML document to view the sample in your browser.
- View the source code with your browser to see what Edge generates.