Posts Tagged :

elearning

e learning, kids e learning, online learning, animation, storyboarding, bylittle, online course, youtube channel for kids, youtube kids videos, moral stories, nursery rhymes, mythological stories, creative online learning
Embracing the Digital Shift: The Transformative Benefits of E-Learning 1024 669 Parini Vyas

Embracing the Digital Shift: The Transformative Benefits of E-Learning

E-learning that was limited to students once has expanded to a great level after covid. While E – learning Institutes scaled exponentially even before  Covid hit us, it was only since the Lockdown we actually took the path of  E – learning for different Courses including students who were forced to stay at home during the pandemic. This resulted in the learning management systems (LMS) and other digital tools that enable schools to continue instruction amid the cancellation of classes.

With this Cut-off Situation from Schools, Colleges and Office Situations,  adoption to e – learning came in smoothly for many of us and not only  students. 

This shift from Traditional Classrooms was not easy for many of us. While just before Covid we delivered Videos for Azam Campus, where Teachers weren’t really ready to transform their class to an Interactive one. They had to forcibly run schools through Online-learning when the pandemic took place. 

In this blog, I aim to outline the advantages of e-learning, as detailed in the following points

 

Flexibility and Accessibility
  • With E-learning a student or learner gets immense flexibility in terms of  location and time. They can access their online-course from anywhere in the world , at their fingertips. Learn & go through the curriculum at their Pace at convenient time
  • With easy access to Smartphones with 5G/4G connection available nowadays, it has become easy and affordable for people in remote areas to access their courses online. With India having limited facilities and jobs for  the Disabled, they get the flexibility of learning their choice of subject sitting at home.
  • The ability of tracking capabilities to analyze learner data and progress also gives the educators a good accessibility to understand the Learners speed and provide them feedback about what they can improve upon
A Wide Range of Resources
  • With Just one-click you get access to content in different varieties. There  are E-learning Articles, Webinars, Videos where constraints like time and  geographical locations do not matter. As per the Learning Styles that suits  ones needs a user can learn through Videos, Podcasts or Interactive  Simulations
Personalized Learning Experience
  • Over traditional classroom settings the most significant advantage of  E – learning is that the user can learn at their own pace and skip material / content which they already know well and focus on their weak areas.  Based on the learner’s interactions and achievements, some platforms after analyzing data of the learner, also adjusts the difficulty of the material in real-time

Bylittle provides customized E-learning Solutions to companies

https://bylittle.io/storyline-360/

Cost-Effectiveness
  • Since Covid, everyone has been focusing on Savings costs. The cost of Travel and maintaining Physical classrooms is saved by both Educators as well as the Learner. One time Investment in a yearly / monthly membership of the Online Course you are opting for, and you are ready to go. As Smart  phones are easily available & affordable nowadays
  • With Free videos available on Youtube , it has become really easy for  students who cannot afford the online courses .  Coursera, edX, Udemy, Google also provides some free courses
Listing the key benefits of e-learning:
  • Flexibility: Learners can access content at any time and from any location, fitting education into their schedule.
  • Personalization: E-learning adapts to individual learning styles and paces, offering personalized paths and resources.
  • Cost-Effectiveness: It reduces the need for physical materials and infrastructure, lowering educational costs.
  • Scalability: Online platforms can serve a large number of learners simultaneously, making it easier to expand educational offerings.
  • Accessibility: Courses are available to a global audience, removing geographical barriers to education.
  • Interactivity: Engaging multimedia content and interactive exercises enhance the learning experience.
  • Immediate Feedback: Quizzes and assessments provide instant feedback, helping learners understand their progress.
  • Data-Driven Insights: Learning analytics allow for the monitoring of learner progress and the optimization of course content.
  • Community and Collaboration: Features like forums and group projects promote interaction and peer learning.
  • Up-to-Date Content: E-learning materials can be updated quickly to reflect the latest knowledge and trends.

 

Along With your professional and educational journey, you can focus on  your aspirations as E – learning gives the flexibility in terms of time and  geography

We at Blue Creazione started our journey with E – learning. And as I said  before the Teachers weren’t really ready to adapt this new technology. But  as Covid hit at the right time when we finished all videos for Grade 1 to 10. The teachers and students were lucky to have all the Videos handy at the  right time and place

You can watch our Youtube Channel here  youtube

or visit us on: www.bluecreazione.com

game character animation, animation, motion graphics, fruit game, gbasgbos, match 3 fruit game, adobe after effects 
The Art of Frame by Frame Animation 600 338 Parini Vyas

The Art of Frame by Frame Animation

When I hear the word Animation, first thing that comes to my mind is keyframes. . The mastery to animation is figuring out the keyframes and the in betweens. . So while today we have a lots of references available online to follow in order to get that animation correct, i still prefer the traditional way of acting out the animations, especially expressions. . Lots of animators still act out and then create their animations. 

With the technology advancing each and every day , there’s a lot that can be done to make the animation flow easier. . Nowadays you have Motion capture, Adobe Animate, and so on..

If you still love the traditional style of animation, where you animate and keyframe each and every frame and make it your style.  Be it 2d or 3d, Adobe After Effects or Blender, Spline or Maya.  The actual fun is getting and doing  things your way & the joy of the end-result is deeply satisfying . Its difficult to cover 2d and 3d Animation both in one blog. So instead we will be focusing on 2d animation today..

character animation, sprite animation, game, game animation, endless runner game, web game

2d animation as simple as it seems is used widely in different areas, There’s Typography,  Character Animations, Sprite sheet animation, Prop animations, etc and is spread in areas like E-learning, Games, Applications,  Product Videos, Motion Graphics, UI UX, Explainer Videos, etc

Looking at the points that are important in making an impressive animation for your Videos:

 

Character Animation

While making your Character come to life, you have to think about lots of things. Starting from the characters  if its male or female, kid or an adult, or even a human, an animal animation, lipsync, character expressions, mouth, lip sync, character design, adobe after effects, 2d animation, e-learning, kids learning, cartoon animationor a bird  if its personality is shy, bold, smart, introvert, calm, anxious, eager and so on.. Their body movements or body  language will depend on their personality. Their Persona would decide the facial expressions and their way of reacting to a situation. We also see those exaggerated animations  where we see Eyes popping, Eyebrows raising above the head, Wide smiles showing all the teeth inside that not so big  mouth. Well Wait..  There’s also another Creative way in Animation, where Characters are without eyes,nose or mouth, in such cases the  Expressions totally depend on Head Movement , nodding , and a little bit on the body movement, hand gestures. For example when  they are surprised , the Character would raise their hand and lean backwards, when in conversation they would move  back & forth and nod their head  in approval or disagreement

For Character animations, most of the Artists get reference from their surroundings, observing other people, or trying expressions or actions  in front of the mirror.

The best book to follow ”The Animator’s Survival Kit” by Richard Williams which guides you through  the basic bouncing ball animation to the technique of slowing in and slowing out  animations. From Keying to in betweens to make your animation smoother. Basic Walk cycles to exaggerated Walks and all sorts of other animations. There are also specific walks where hand swings and Weight shifts on different part of body has been given focus.

God..! I am so glad I am in this field  !!

 

Character Animation in a Story:

 

Props Animation

 

banking, motion graphics, animation, explainer video, character animation, props, 2d animation, social media ad, 2d ads, cartoon animation, adobe after effectsProp animations can be simple. Especially if it’s the objects in the background, like a table, lamp in the living room or a table & chair in a restaurant, by just popping/scaling some tiny objects in the Scene can be engaging for the viewer.  When it comes to Vehicles they can be given some exaggerated friction  while picking up speed or applying brakes .

Those props can also be a character riding a skateboard, holding a paper in hand  or wearing headphones. Animating those little things in the scene gives you the option of being a lot more creative with your video

Elements like Trees are animated in the Background:

TypoGraphy

 

Texts are an ideal way to put across your message as compared to Character or prop animations where there’s a storty to tell, Typography places the direct message in front of the viewer. With attractive colors and huge text which is easy to understand ,  eye catching fonts along with some Animations makes the Video even more attractive. Envato has amazing Typography elements for After Effects. Premiere, Final Cut Pro, Apple Motion and so on. Text animations can also be used in Titles, Openers, and End Slides

Some references: 

https://in.pinterest.com/pin/933863672721242697/

https://in.pinterest.com/pin/933863672721128489/

 

Shapes Animation

 

Compositing with shapes and solid colors helps in making smooth animations. They are very pleasing to the eyes. The shapes transform into any size and any shape which actually makes the effort of seamless animation simpler.  Mostly used for creating loop animation and also quite handy in UI UX icon animations. Shapes like Arrows/Lines  are used for transition from one scene to another, Show directions for maps, graphs, etc

motion graphics, animation, after effects, social media ads, 2d ads, advertisement

This is a rather Simplified version of animating with shapes and conveying message across the audience

Shapes Animation for Transition: https://www.instagram.com/reel/C8W5X6KvQ_J/?igsh=MXUzY2UwNGxxMjVwag==

Ultimately however simple animation you are thinking of doing, the secret tip is to keep your references in a layer inside the software you are working on .. to get the best timing and that exaggerated motion you are looking for.. Good luck Animating !

Do follow us on our social media

Instagram: https://www.instagram.com/blue_creazione/

facebook : https://www.facebook.com/bluecreazione

Linkedin : https://www.linkedin.com/in/blue-creazione-a01443164/

buhler, gaming,╧gamification, multiplayer game, realtime game,role based game
Realtime Whiteboard game 1024 602 Parini Vyas

Realtime Whiteboard game

Some Cutouts, A Whiteboard
 & 
a Role based Multiplayer Game

This has to be the best project so far in terms of quality, and the challenge it carried. Gamifying a multiplayer role based cutout game with real time  updating  data of users sitting in different corners of the world. The game was fun to make as the concept was very new. Well there are games which had similar features but that was limited to only using brushes, tools that are generally available on a whiteboard  application So, the challenge was placing cutouts , along with watching what other players were doing at the same time. This Live game had a countdown which was supposed to match with other players and to be honest , that was the biggest challenge we faced being a web application and the limitations of Technologies that we could use for the game

roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool, paint board, elearning, education , cakephp, fabric js, java script, js, web based game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

The basic idea of the game was each player will be taking up a role, based on the role they take up, they will     be assigned a task for that particular  round

roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool, paint board, elearning, education , cakephp, fabric js, java script, js, web based game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

 

Ideally a game with 2 Rounds and two different Phases

Where in Phase1 , Users will Sketch their Idea with a Basic Whiteboard: Colour Palette, Pen (Thickness  variable), Bucket of paint, Text, and shapes: squares, triangles & circle (rotate- and resizable)

While in Phase 2, Users will start building with the 2D cutouts assigned as per their role. Each Role will have a set  of 2D cut outs to choose from.

The difference here between Round 1 & Round 2 was only that in Round 1,the players will have to wait for each 

other to complete their tasks.  Round 2 , Users would be working together, So, when in Round 2, Everyone is sketching on the same whiteboard; Users can See each other’s sketch and cutouts placed if they are in Phase 2.

web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,npm,npx,how to develop react app,how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot

For both the rounds, The result was scored based on how accurate they fulfilled the task and how quick they  were. Here, each cutout for each role was given a specific score. Only when each player played their game  accurately, they would get a good score at the end of the game.

roundbased game, multiplayer game, web game, whiteboard game, realtime game web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

As this game was designed to bring change in the working culture of the company. A tutorial was also designed for First Time users, so that they know what exactly is to be done.

There  was also a preview window, if you might have noticed in above screenshots.. the purpose was to design a rough sketch in phase 1 and based  on  that and keeping that preview in mind, the user can place cutouts on the fresh Whiteboard they get in Phase 2

The most interesting part about this game was the countdown timer .. The  clock  was always ticking but The group score at the end of the game gives motivation and great encouragement to the team members. I can say this was a brilliant idea of bringing together and working as a Team for the people of Buhler

Here’s the video that gives an overview of the Web Application : https://youtu.be/pNE34__D7aY

 

web application, multiplayer game, whiteboard game, fabric js, game, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game
Whiteboard Multiplayer Web Game 1024 576 Parini Vyas

Whiteboard Multiplayer Web Game

Today I am writing about the digital experience that mirrors our company’s transformative journey where every idea initiates with a mockup or a storyboard. This helps us and our clients understand the flow of the story and also lets them visualize and lets us know if they have any changes in design before we move to the UI UX , that is to designed in Figma.

So here are some unique features about the game:

Team Dynamics:
This was a Role based game – 4 players with 4 different roles, each member assuming a vital role with specific, initially hidden tasks. As the game progresses, these tasks become visible to all team members, promoting a unified strategy.

The Game has 2 Major Rounds. In round 1, users play turn wise while in round 2, users play simultaneously and can see each others activity on the screen.

Interactive Whiteboard:
The heart of the game lies in the interactive whiteboard equipped with a color palette, variable-thickness pens, a paint bucket, text tools, and geometric shapes. Here, creativity and collaboration come alive as teams use 2D cutouts to construct their visions within a time limit.

Scoring System:
Success is measured by the accuracy and speed of task completion, with a scoring system that rewards based on Cutouts used as per tasks assigned to a user. The shared whiteboard allows all participants to witness the evolution of their collective masterpiece, each cursor contributing in its unique hue.

Role-Specific Challenges:
Each role, from Bricklayer to Decorator, comes with a bespoke set of 2D cutouts, encouraging players to build according to their assigned tasks. The game’s design phase is yours to shape, with roles serving as mere guidelines to inspire a LEGO-like environment.

Creative Freedom:
Tasks are intentionally open-ended, allowing players to unleash their creativity. The scoring should reflect this flexibility, avoiding any single ‘correct’ solution.

Back-End Features:
Administrators can manage users, review past game outcomes, and analyze overall survey results through a comprehensive dashboard.

concept idea generation technology development fabric js, brainstorming,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

When it comes to Visualizing it becomes difficult at times because everyone has their own perspective of looking at things. So our approach is simple yet direct

So the first step was Brainstorming the Concept of how Participants will embark on an immersive adventure by joining a game through an invitation link, a unique game code, or by creating a new game. Upon entering their names and emails, players gather in a virtual lobby, eagerly awaiting the start of a collaborative challenge. Once the lobby is full, the game begins, led by the first user or a designated moderator.

ui ux mockup ui design fimga photoshop ux design design flow,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

UI UX was something which we had to go back and forth a lot of times. As the Application was totally concept based, we had to test multiple times until we realised that some changes in UI were necessary

Fabric JS,Three JS HTML, CSS, AJAX, JQuery, MySQL, CakePHP, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

Fabric JS,Three JS HTML, CSS, AJAX, JQuery, MySQL, CakePHP.

Which technologies are to be used was another question in mind as a Realtime game was to be developed, where time was ticking and users have to finish their task in given time. Choosing the Right Technology for a Real Time Game and a Role based game was the task. The Game being real time plus a Whiteboard where the succeeding player could see the results of previous player in Round 1 and also see other players  Real time screen in Round 2 was the main challenge

Quality assurance, testing, quality check, game testing, manual testing, web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

With lots and lots of Testing, we were able to find new culprits every time while getting rid of old culprits. The game was actually boring in the sense that we had to wait for other players to finish their game and each player got time of 4-5 mins to finish their task. So, the testing along with Scoring would take around 45 mins every time and sometimes we would take multiple roles as we had a small team 🙂

Azure setup, releasing launching game,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js,web application,node,web socket,socket io,react,node js,how to develop node js app,how to create react app,react js, npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game npm,npx,how to develop react app, how to develop web game app,whiteboard,whiteboard collaboration,collaborative white board,web socket prot roundbased game, multiplayer game, web game, whiteboard game, realtime game, animation, e-learning, paint tool, shape tool,  paint board, elearning, education , cakephp, fabric js, java script, js, web based game

The Application was ready to setup on clients Azure Portal. Phew!! Why do we have to take up challenging projects every time 😀 because its fun!

The Actual Game looks something like this: