Part 1: Defining the problem
1.1 What is the object/project goal?
The focus technology I explored this semester is Adobe DPS and Adobe Edge Animate. My project goal was to incorporate various Animations, into a DPS layout, to enhance the layout for IN Magazine.
1.2 Who is the Client?
IN Magazine was my client and started as a StudioLab class project in January 2014. Students were given a project to imagine what a School of Design publication might look like. Their hard work was than the backbone in inspiring and giving vision to this catalogue. It can be found at the front area of our Design building and showcases facility and student work to the public. It’s a great stepping stone between school projects and real job experiences.
There mission statement is:
IN is a place where ideas are born, discussed, explored, tested and refined. It is a place of play, discovery and invention. It is a place to exchange ideas and develop new ones.
IN is a place where ideas are born, discussed, explored, tested and refined. It is a place of play, discovery and invention. It is a place to exchange ideas and develop new ones.
They have strategic initiatives that have three underlying goals:
· Strengthen the feeling of community within and around the George Brown College School of Design
· Increase the culture of design at the School of Design
· Enrich the educational experience by offering, entrepreneurial tools, new technology and real world skills.
1.3 Who is the target market or audience?
The audiences for my project are the design students and lovers of design and design artifacts.
1.4 What are the action steps required?
This is my mindmap, incorporating Edge Animate into the DPS process.
DPS Workflow
1) Using one of these programs, you create a layout for your app.
• You use Indesign to create articles that are fixed to a certain layout when displayed on a tablet or phone
• or you use Dreamweaver/ Muse, responsive HTML content, that can flow to fill the screen regardless of device or platform.
Edge Animate Workflow
1) Complete your animation
2) Once your animation is complete, save your animation as .oam file, through the Publish Settings menu
3) Place file into your Adobe InDesign Layout
2) Once layouts are built, you add metadata and publish them into a “folio” format.
3) Manage articles by creating and specifying settings for content and collections.
4) View Content in Adobe Content Viewer. Which generates a live preview of your work directly from InDesign
5) Access the Apple developer portal to start your certificate process & store them in your keychain on your mac.
6) Using App Builder after having added all the necessary info. Than export your app as a test or as the final app store product
7) Once you submit the file to apple with the IPA developer build, you use Mac Application loader to send your app for approval.
8) Wait for Approval
9) Once you get Feedback, you can publish your app
1) Using one of these programs, you create a layout for your app.
• You use Indesign to create articles that are fixed to a certain layout when displayed on a tablet or phone
• or you use Dreamweaver/ Muse, responsive HTML content, that can flow to fill the screen regardless of device or platform.
Edge Animate Workflow
1) Complete your animation
2) Once your animation is complete, save your animation as .oam file, through the Publish Settings menu
3) Place file into your Adobe InDesign Layout
2) Once layouts are built, you add metadata and publish them into a “folio” format.
3) Manage articles by creating and specifying settings for content and collections.
4) View Content in Adobe Content Viewer. Which generates a live preview of your work directly from InDesign
5) Access the Apple developer portal to start your certificate process & store them in your keychain on your mac.
6) Using App Builder after having added all the necessary info. Than export your app as a test or as the final app store product
7) Once you submit the file to apple with the IPA developer build, you use Mac Application loader to send your app for approval.
8) Wait for Approval
9) Once you get Feedback, you can publish your app
Part 2: Investigation
2.1 What is Adobe Edge Animate?
So what is Edge Animate? Edge Animate lets web designers create interactive HTML animations for web, and digital publishing. You can animate HTML elements such as text, images and more by modifying their properties within the timeline. You can create compositions from scratch by using drawing and text tools and imported web graphics. You can also add motion, looping, hyperlinks, and animation control features to existing HTML documents.
2.2 What is Adobe DPS?
So what is Adobe DPS? It is a designer-friendly way to create "magazines" as apps displayed on tablets and mobile devices. It helps to connect with audiences through relevant content, push notifications, in-app messages, easy content discovery and social sharing.
2.3 Opportunities & Risks
Edge Animate
The main focus is to create an engaging, interactive experience, without having to know code, and be put directly into the DPS document. Some key features of this software are:
• On-stage text editing
• No dependency on third-party libraries
• Custom folders for saving your images, media and scripts
• Fewer project output files to manage
• Support for HTML5 video
• Linking support for DPS articles
• Copy and paste functionality to get artwork directly from Illustrator
Adobe DPS
The main focus is to create an mobile app, without having to know code, and to track how your App is performing and how your audience responds. Some key features of this software are:
• Create high-impact content
• Set your ideas in motion with engaging video, scrolling, 360 rotation,pan and zoom,
• You have total control for customizing your work
• User interaction & engagement metrics
• Order fulfillment for subscriptions & in-app purchases
Potential Risks of both programs are:
• Must have Adobe Creative License to attain software
• Must have the knowledge to develop for each specific platform
• You must program for specific mobile operating systems and reside on the actual device
2.4 Thumbnail ideas
In this process, I came up with a few animations I wanted to create to enhance and strengthen the Magazine Layout. And to further engage my audience more than just a normal magazine layout.
THUMBNAIL 1
My first thumbnails are for the article on Holden Vetro. This article was about a student from George Brown, who was named one of Canada’s Breakthrough Designers of 2015, and has been accepted into the prestigious fashion Design program in Belgium. My idea was to have a simple animation of a plane flying between Toronto to Belgium, with some background music.
My first thumbnails are for the article on Holden Vetro. This article was about a student from George Brown, who was named one of Canada’s Breakthrough Designers of 2015, and has been accepted into the prestigious fashion Design program in Belgium. My idea was to have a simple animation of a plane flying between Toronto to Belgium, with some background music.
THUMBNAIL 2
My second thumbnails are for the article on the Level Up Event. This article is about how this event showcases the most talented students in design, animation, and computer science programs from Colleges and Universities across Ontario. This event also provides a one-stop shop for vendors, institutions and students alike to network, recruit and learn about new technologies and techniques related to the gaming industry. My idea was to have an animation of the evolution of the game console from the first controller in 1977 to the controllers used now. I wanted to explore creating separate buttons in Edge Animate which can be trigged independently in Adobe InDesign.
2.5 Example Animations
In order to create my animations, I did two basic tests to figure out how the program worked. I laid out my step-by-step process of creating each example, which can be found on my Wiki Blog, under Week 8.
Example ANIMATION 1
The majority of this animation used the Ellipse Tool and Transform Tool. By manipulating these elements as well as colour and size, this animation was created.
The majority of this animation used the Ellipse Tool and Transform Tool. By manipulating these elements as well as colour and size, this animation was created.
Example ANIMATION 2
The majority of this animation was created using motion paths. This tool allows you to add expressive motion to elements, which follow along a custom path. This feature creates fluid movements that can’t be achieved through linear motion.
The majority of this animation was created using motion paths. This tool allows you to add expressive motion to elements, which follow along a custom path. This feature creates fluid movements that can’t be achieved through linear motion.
Part 3: Application
3.1 Explain Adobe Edge Animate
In this next part I will explain to you the basics of edge animate. Once you’ve created a new file you will see a workspace with several panels and a small toolbar. The name for each appears on a tab at the top of each panel.
The Stage
The main area is the Stage. This is where you display and animate the graphics and text for you to work with.
Elements
Elements, which can be found at the top right, are objects that you add to the stage, and as a result they appear in your finished animation. Elements may be artwork, photographs, or text ect.
Properties
The properties panel found on the left is used once you select an element, its properties that affect its position and appearance ect. on the stage are managed here. This is where you can turn on and off keyframes.
Timeline
The Timeline found at the bottom, keeps track of elements and their properties over the course of time.
The Library
The library found the on the right, keeps track of images, fonts and audio that you import into your project. It provides easy access to the symbols that you create.
Toolbar
Appears at the top of the main workspace. You use these to create, select, and modify elements on the stage.
This is a close up of the timeline panel.
The timeline is an important part of creating an animation. The timeline is where you outline what elements are affected and where different actions take place. At the top of the timeline panel, there are a series of buttons. The first one will put Edge Animate into an auto key frame mode. Which means you can manipulate things on the stage and it will create the key frames for you. The second button will automatically create transitions for you. The third one allows you to use toggle pin.
The busiest part of the timeline is over on the left side, where the elements are listed. Elements are the objects displayed on the stage. An elements’ position on the stage and their appearance are controlled by properties such as Location, Color, Size, and so on. By changing these elements you create your animations.
The busiest part of the timeline is over on the left side, where the elements are listed. Elements are the objects displayed on the stage. An elements’ position on the stage and their appearance are controlled by properties such as Location, Color, Size, and so on. By changing these elements you create your animations.
To see further in depth details of Edge Animate, see my Wiki Blog Week 7.
3.2 Explain Adobe DPS
In this next section I will explain the basics of Adobe DPS.
The interactive features that are added to your InDesign documents uses the Folio Overlays panel. These elements are called overlays because when you create a folio, all the non-interactive elements in your layout are flattened to a JPEG, PNG, or PDF file, the interactive elements sit on top of the non- interactive layer.
HYPERLINK & BUTTONS
This allows you to create links that jump to websites, other articles, link to other content or send an email.
SLIDESHOW
This allows you to use the Object States panel to create a set of images for a slideshow.
IMAGE SEQUENCE
Image sequencing allows you to combine many images into a continuous series that you can stop. It is useful for creating a rotating 360° view of images or a time-lapse series of images.
AUDIO & VIDEO
Allows to customize your video content by selecting the settings you want such as Auto Play, Play, or Tap to view etc.
PANORAMA
This allows you to actually create a panorama; you need six images, North, South, East, West, top and bottom, to do this.
WEB CONTENT
This allows you to display a web page within a view area. Users can see the web page content in the view area without having to display a separate in-app browser. You can specify a web URL or a local HTML file.
PAN& ZOOM
This allows you to make a large image available in a small viewing area, allowing you to tap the image and then pinch to zoom in or out, and move to parts of the image that are not seen in the original view.
SCROLLABLE FRAME
This allows you to view more content on the same page by scrolling the content within a fixed area.
To see further in depth details of how to use each panel respectively, please see my wiki week 10.
3.3 Explain the integration into DPS
Once you have created your animation, you are now ready to export. The export format from Edge for InDesign is .OAM. You can create this using the Publish Settings. Once you have specified the Publish Settings dialog for InDesign / DPS, you can click publish. This generates a publish folder in the same folder as your .edge file with a DPS subfolder that has the .oam file that you will need to import into InDesign.
Once this is complete you will have to place the animated content into your layout. Make sure you place the animation in a rectangle frame. You will have to go into the Web Content panel, Animation panel or overlays panel, to specify what kind of play actions you would like inside the document.
3.4 Show final Animations & Explain Basic Overview
I would now like to show you the two animations I created.
Part 4: Concluding Thoughts
4.1 What was the overall completion of goals?
Over the course of this semester, I was able to complete the two intended animations. For the most part I did follow my schedule I had created in the beginning. The last few weeks of Week 11, 12 & 13, were skewed due to personal issues. I also used key components such as Trello, to organize weekly activities. I used key websites such as, Twitter, Adobe TV, Edge Docks, and Lynda.com to expand my research.
4.2 What would you change/ what would you add?
If I were to add or change anything, I would of liked to integrate music in general to my animations, to help capture the users attention. I would of also like to fix the world image appearance in the airplane animation in the DPS document.
4.3 Personal Opinion & Integration of software into schools
I personally think both Adobe Edge Animate and Adobe DPS are great tools to be taught in schools. Both programs are very user friendly, and offer a lot to the Design world when creating engaging and innovative layouts. Especially now since everything is paper free and is viewed online. These programs help create ordinary layouts into a more fun and interactive experience without having to write code.
