Yung Siew Weng / 0339847
Advanced Interactive Design /
Bachelor of Design (Hons) in Creative Media
Final Project / Interactive Web Application
Advanced Interactive Design - Final Project : Interactive Web Application
INSTRUCTION
An interactive website that promote a product such as launching or online store purchase. The required size resolution 1920 x 1080 px; by Adobe Animate CC. For submission, deploy the folder into Netlify for the url link.
EXPLORATION
As I had a big snow balling effect, and due to some technical issue occurred in my laptop, which I could not enter into Animate CC in my site, which make me "no having solution" to keep on track on this assignment.
Fig 1.1 Animate CC Quit
However, I am pleased and glad that I got an "spare" laptop from my lovely friend (actually is her only laptop but she "ngam ngam ho" on semester break". She must be my life saver. For this particular assignment, as we are required to create an interactive web, I came with some idea of :
1. Flower Cafe Online Store
2. Jacquilin Merchandise [continued exploration from interactive design]
3. CelestAR, AR solar system application
Fig 1.2 3 Idea Propose
After some thinking and thought, I proceed with the idea of AR solar system launching app as the application was also very "fresh" for me as I just completed building few days ago, and I came to the idea of "why don't do a launching page for it to make it more meaningful?". Although it seems like I had all the assets ready (as it developed in another modules also); but in this 2D software application, Animate CC, I was forced to rebuild some of the assets and elements to make it more "interactive". For this time, I want to challenge something that is line art into a website, which is my all time favourite illustration style. "Line is simple, but make some simple to be cool or interactive is difficult". Let's see how can I make this magical turn out or turn "off".
As I felt that the idea of transitioning in a webpage (not page navigation) is cool, and I came to an idea to create that kinda feelings of webpage.
Fig 1.3 rough sketch
As feeling is that any possibility to proceed with this ideation, I make some transition idea in Figma to having a visual transition look and see how it will look like if using "that" ideation.
Fig 1.4 Figma
Fig 1.5 Rough sketch flow
And continued, I proceed into Animate CC, create a new project, Full HD, 30 Frame Rate and HTML5 Canvas :
Fig 1.6 Open a new Project
Import GSAP Zip file into the main folder, as well as into Animate CC global [actions > global > include > "+" add a file > drag the gsap.min.js into the global script library.
Fig 1.7 Insert Global script
In order to make the page to be responsive in each device [publish setting > check centre stage, make responsive scales to visible. And, as I had the intention to reused the CelestAR application font, I followed the tutorial given by Mr. Razif to import the Google Fonts, Jura.
After I having my Jura Fonts done, I continued my adventure in Animate CC to make the imagination to real life. As i think that we "might" have a 5 pages requirement for the website, so my ideation is to create :
- Preloading page
- Landing page
- Facts page
- About us page
- How to use page
- Download/ contact us page
And then, I start to proceed with Animate CC journey, but for real, it was out of my expectation as I really not as user-friendly as Adobe illustrator or even After effects. There are lots of limitations to use Animate CC to create a webpage (from my perspective). At the very first of the page, my idea was to having a minimal preloading animation slide in, so I did some research and explore some methods that how can I applied into Animate CC.
Fig 1.8 Preloading Animation, Try Out #1
Fig 1.9 Preloading Animation, Try Out #2
Fig1.10 Final Outcome, Preloading
Continued to the "facts page" :
Fig 1.11 Development, Re-illustrate in Animate CC
However, I having intention to make the distance to be more realistic and trustable, I did some measurement from some online source and AI generator :
Fig 1.12 Distanced version comparison
Although the facts that i had did the 3D planets in Exp design before, but it was doing in Unity, which i cannot export it as a movie clip or if i render the texture and export as image/ recording, there will be some quality issue. So, nevertheless, i bring it back to Blender and did the animation there (oppss.... still cannot escape from Blender).
Fig 1.13 Blender Development
Fig 1.14 Blender Outcome, PNG
As there are no options to export the video in sRGB after the development in Blender, I transfer the 250 frames PNG into After Effect (AE) and create a composition to make it transparent background in GIF.
Fig 1.15 Mercury Outcome [After Effect]
Unfortunately, when I exported to Animate CC, there are not having any video options and when I export the GIF into it, the full files stuck.
Fig 1.16 "import Video" options was not unable.
Fig 1.17 After exporting GIF #1
So, not doubt, I need to pin-point 250 frames all by myself.
Fig 1.18 Proof of self pin-pointing
Fig 1.19 Outcome of the "ants" of dots, even one page cannot occupied
So, and after the facts that 3D object would not be much suitable in this case, I think it's time to change the ideation of "facts page" as it would considered of 8 planets which might took thousands of pin-point occurred and Netlify website would not able to support my imagination. So, I did a new sketch for the overall page, now, make everything simple, as we had no time.
Fig 1.20 New ideation Sketch
For the new ideation, I think of this is also interesting as the previous idea and I continued to proceed with Animate CC. In a sudden, the situation had really make me panic, but the fact of Animate CC make me more panic :) I even dk why I got JS error since I haven't import any script yet. Almost burnouts there.
Fig 1.21 Javascript error occurred
//os: if I can read the JS then why I want to use this software :).... Gosh.. I just keyframe 250++ png and there were no option to import video into the timeline in my device, unless in the script to create a video player; really speechless. So, no point to explore the Js again, I need to redo this stuff again.//
Luckily, I still having the file yet, so I peek like a giraffe at the old and new folder on the "which keyframe and align position at the panel, as I don't wish to pin-point my preloading page again, as it took my 5 hours to explore the "most" smooth and satisfied version .. :)
OK, after 1 hours seek and peek, I was done with the part and continued to my main page. And as I thinking of whether the sliding transition is great or shall I tried zoomed? somewhat like look through the lenses. So, I did a comparison between both sliding and zoom and the final outcome :
Fig 1.22 Outcome, Preloading + Landing (main)
After continued to the about page :
And, some text issue occurred again. Although in the software stated "Jura" but when you exported to the web and view, it was "Times". I really no idea on why this occurred. [This was often]
Fig 1.23 Font issue when preview web
But, when you delete the layer and retype, the font back. :") Ok fine. Continued to the development. As the solar type of design, I having the intention of typing font, so I made the effect frame by frame.
Fig 1.24 Development, Typing effect
Fig 1.25 Outcome, Typing Effect (200 keyframe)
Continued to the product page :
Fig 1.26 Development, product page
Fig 1.27 Development of Quantity icon
But, in sudden, my ANIMATE CC BROKE! IT QUIT!! AND INCLUDING ALL THE FILES (I HAD SAVED BUT DK WHY MISSING :) even the recover file had missing. You know what, I almost done... OK no point to comment what, continued REDO... (IDK I re-do how many times dy :)
//Doing this again in 2.30 AM and I sincerely hope animate cc got the functionality "composition" as after effects so I not need to use extra time to pin-point all the stuff stupidly. But if there are really not having the methods of shortcut, I sincerely admired on those who uses this software to create art and short movie. //
As already the N times of Redo, I think add some stuff bah, when you re-do, you will figured on more possibilities in fact, so I have the idea of the let the user to click the Jupiter and the earth will slide out and a "message from earth" will be explored.
Fig 1.28 Development in AI
Fig 1.29 Adding "ideation"
is 12.06 pm, Saturday, again. My file was not able to preview on tab, no idea why. It was very depressed and no one would know about my feelings on almost give up for the assignment. Even I don't sleep then till cannot settled the things down. )) Animate CC pls be kind to me.. And, I told myself, this is the last chance I can give to Animate CC and if this not work, we give up ok (it was really painful, the re-do process make the full development became really unmemorable and depressed. Throughout the N times re-do and some give up because every single preview and every single, single stuff was nightmare, and really almost went into the situation of "psychological symptoms“.
//The process was the same as the previous, but cut down lots of stuff as ended up with possibilities to quit and bye to re-do again. To prevent this, I really cut off many stuff in the web itself. Animate CC had limited my imagination, btw.//
Fig 1.30 Development of Check Out Page
Fig 1.31 Hover Effect
Fig 1.32 Folder + Total Frame [main]
Fig 1.33 Folder arrangement
I am sorry and in fact, it was the things that I not satisfied at all but yes, this is my final outcome. This time, my own emotional was merely valuable than the outcome. "You must stop, if you don't give up, you will lost even more, even yourself."
Final outcome :
Fig 1.34 GIF outcome, Adobe Animate
Fig 1.35 Final Outcome, Video Presentation
Fig 1.36 Final Outcome, Video Walkthrough
Netlify Link : https://celestar.netlify.app/
*need wait a while for loading [a bit heavy size]
REFLECTION
This is the first time ever I give up a stuff totally, it was very painful and depressed for a person like me to experience this. I never allowed myself to have any lack details stuff occurred in my outcome and make sure everything was in a right track. This assignment really took me much, I had no time and even not willing to continue making myself into depression and burnout [I had redo N times, which I even not remember, too much, pin-point the 3D model and typing effect more than thousands of key]. In front of the possibilities to occur psychological issue, I know I need to sacrificed. In the fact was I wished when people viewed my webpage, they would having the feeling of "warm" by having the text "you're not alone, the universe are your constant companion" but the facts was at the last re-do stage, Animate CC refused me to insert that and keep pushing me into a holy depression.
For real, this module was my most anticipated in module since last semester from Interactive Design. I thought I can learn Javascript (I mean in real code) in this module as from interactive Design, I learnt lots of knowledge including the HTML and CSS, also creating an outcome that I will sincerely proud of and wish that I can go to a more advanced level from the outcome. However, when I knew that we are required to use Animate CC, my expectation and excitement toward the module was lost; in fact, if I really want to create the outcome fully like before my redo version or same as my sketch ideation, I think direct code will be much more easier compared to using Adobe Animate, but the requirement is Animate CC so no point to have this idea. OK, fine. Eventhough I write this reflection, I was still painful. It was not something that I not brave enough, I tried hard, put all my efforts inside but the facts was Animate CC was not kind to me from the beginning.
This experience can considered as the most terrible one that occurred throughout my life even I sleep 3 hours for 3 days even cannot settle this things out. It was nightmare. Although the final outcome was not expected, and might not hit my own requirement; it was glad to say, at least, when this issue occurred, I am not alone; at least, I got someone aside and I CAN SHOUTED. And, I am glad that even though my laptop was not able to open Animate, there is someone like angel sending her "love" to me and I mean, Adobe software had made her laptop "run of memory" OPPS! Finally, it's a wrap. Wish me good luck in the new semester! Yeap, I need sometimes to relax and threw away those negative and depressed emotion. Bye, Animate CC, wish would not see you again! Cheers!
Comments
Post a Comment